Finally a sprite sheet recoloring process that works

I have been searching for a good workflow for testing out different color palettes for existing video game designs.

I have finally found a relatively pain free method of testing different color palettes and applying them to entire games. I will be making a video tutorial about this in the future, but before I get to that, I thought I would already explain the basics of the workflow.

Step 1:

This process will be easier and quicker if you can pack all your game graphics into one large sprite sheet first. For this I used an open source tool called Free Texture Packer. Grab it here:

http://free-tex-packer.com/

Step 2:

Run Free texture Packer and choose “Actions” –> “Load folder” and point it to your sprites folder. From the settings panel on the right, uncheck “Prepend folder name” and “Detect identical”. Then hit “Export”. Your sprite sheet will be saved along with a JSON file that describes the sprite names and locations in the sheet.

Step 3:

Download the open source tool called “Image Palettizer” here:

https://github.com/PureAsbestos/Image-palettizer

Step 4:

Load your sprite sheet into the tool and then load a color palette in the Gimp .gpl palette format. Click apply and let Image Palettizer figure out how to best convert your image to the suggested palette. There are different intermediate color spaces available should you not be happy with the initial results.

Step 5:

Save your color converted sprite sheet and go back to Free Texture Packer. Go to “Tools” –> “Split sheet” and give it the sprite sheet file and the JSON file. It will ask you for a save location and the write your sprites back into their original individual files, even preserving their original names -very nice!

Step 6:

Replace the old files in your game folder with the recolored ones. You have just recolored your entire game based on a color palette! This makes it quick and effortless to try out different palettes for your game designs.

Stay tuned for the video tutorial version!

Basics of Using Cryptomatte in Blender 2.93

In the buttons area (on the right side of the interface), select the “View layer properties” tab.

Under “cryptomatte” turn on “object”, “material” or “asset”. I like “asset” since it let’s me select entire rigs that consist of several parts.

Go to the “compositing” workspace.

Turn on “use nodes”.

Add a viewer node with shift+a –> output –> viewer.

Add the cryptomatte node from Matte –> Cryptomatte.

Connect the image output from the render layers node to the image input of the Cryptomatte node. Connect the “pick” output from the Cryptomatte node to the image input of the viewer node. Render the scene (keyboard shortcut F12).

You should now see different matte colors that identify different assets in your render layer. Use the + button to access the eyedropper tool and select as many assets as you need for the matte you are building.

To see the actual matte, you can plug the “matte” output from the Cryptomatte node to the viewer.

Now you have a matte that you can use in various way when you are compositing. As a simple example, you could color correct the matted area by combining two copies of the input image with the “AlphaOver” node while using the matte as the factor. Then simply drop a color correction node like RGB curves between the bottom image connection.

Construct 3 Spritefonts with Photoshop

Creating your own Spritefonts (sometimes also called bitmap fonts) for Scirra’s Construct 3 game engine using Photoshop can be surprisingly tricky. The main difficulty seems to be in creating a grid of evenly spaced characters so that the automatic Sprite font slicing mechanism in Construct can slice them up properly. A monospace font makes this much more simple since all the characters will take up the same space by default, but monospace fonts are quite limiting stylistically. What if you want to have non-monospaced fonts neatly organized in a grid for Construct?

There are helpful tools like “Give Your Fonts Mono” which can convert a regular font into a sprite font and it even generates the spacing data for Construct 3 which you paste into the Spritefont plugin settings. The spacing data looks typically something like this;

[[20,” “],[9,”l|”],[10,”Ii.,;:!'”],[16,”`”],[17,”[]”],[18,”j”],[20,”()”],[21,”t”],[22,”1-\”\/°”],[23,”r”],[25,”f”],[26,”*”],[31,”J”],[33,”u”],[34,”hkns”],[35,”Ldq”],[36,”bcgpz03789?”],[37,”Favy256+=$<>”],[38,”eox4~”],[40,”£”],[42,”BEP#€”],[44,”HNSTUZ_”],[45,”K”],[46,”D&”],[48,”R”],[49,”C”],[50,”VXY”],[51,”AG”],[52,”MO”],[53,”Q”],[54,”mw”],[58,”%”],[69,”W”],[70,”@”]]

You can’t however do any fancy stuff like giving your characters drop shadows, strokes or gradient fills etc. But there is a work around! Just save your tranparent png image from GYFM and open that in Photoshop. Then you can play with layer styles etc as long as you don’t cross the bounding box given for each character. You can increase the bounding box size in Give your fonts mono to give yourself more room. In Photoshop you might need to cut some of the rows into their separate layers for consistent gradients, but other than that this workflow should be pretty straightforward. When done in PS, simply re-save as PNG and import to Construct 3.

Unfortunately Construct doesn’t seem to support kerning at the moment so that would have to be handled with events. It’s not the easiest of programming challenges though.

Another possibility (besides custom events) might be to make a copy of the most difficult characters in the Spritefont sheet and give them special spacing rules. Then you would need to pick that special character in the situations in which your kerning looks bad. That’s also a bit hacky and tedious. So before Construct gets proper kerning support for Spritefonts, it might be best to stick to monospace Spritefonts.

Deleting colors from a forced color palette in Photoshop

This is a very specific topic, but it was hard to find information about it online, so I’ll post my findings here.

If you want to force a certain color palette on your image in Photoshop you can choose

Image –> Mode –> Indexed Color.

A window will pop up where you can choose a palette. If you want to create your own palette in which you select all the colors, you can do this:

Set the palette to “custom”. A color table window will open. You can delete existing colors by ctrl-clicking on them. You can add more colors by clicking an empty color slot and picking a color for it.

Here’s a quick gif-like video of creating custom color tables (ACT-files) in Photoshop and saving them for later use:

Hair modeling tips for Blender

I have recently been doing hair renders in Blender and thought I would share some key tips that I have learned along the way:

  1. Use multiple particle systems. If you put all your hair in just one particle system, it becomes really tedious to edit the hair. You’ll end up combing hair that you didn’t mean to etc.
  2. Place the hair manually in hair edit mode (with the add hair brush). So set the initial amount to zero in the particle settings. Comb after every round of hair.
  3. Use simple children instead of interpolated, they are much easier to handle in the edit mode.
  4. To make the interpolated children more fluffy, increase the “radius” value.
  5. Be careful with the Path –> steps value, large values made my Blender crash.
  6. Use the Hair BSDF if you are rendering with Cycles. As of now that won’t work for Eevee so you’ll need to create your own shader for Eevee.
  7. Subdivide the roots of your hair in edit mode, because the hair needs more bend right where it comes out from the head. Also use enough keys when creating the hair strands.