Pro Tip Series: Quantum Reaction Part 2

In the Part 1, we covered intermediate strategies. Today, I will be going in deeper into the mechanics with timing and advanced strategies.

Continue reading

Advertisements

Sprite making process (tutorial)

Hey everyone, Richard Lai here! I am the primary artist of Lai Mobile Games, as well as the music producer, video editor and tester.

The most fun part of the development process was spriting the five different ships. These really let me flex my creative muscles on making cool designs. My expertise is in lower resolution sprites, so it was very interesting to work on bigger native resolution sprites. My basic technique was to draw as if it were a painting, but still adhere to pixel art guidelines (less colours, manual anti-aliasing, sharp shading).

In this post today, I’m going to show you the process I took to make these sprites. Unfortunately, I didn’t take any screenshots of any of the unfinished work-in-progress ships. So I’m going to do a smaller example sprite and juxtapose that with one of the finished ships from the game.

The program I will be using is Photoshop CS6, but any decent program will work (GIMP, Paint.net, GraphicsGale). Things I will be covering in this tutorial are: using shapes to prototype forms, palette selection, and shading/anti-aliasing.

1. Preparing the canvas

First thing you’re going to need to figure out is how big you want your sprite to be, and if there are going to be any limitations to it. Consult with your programmer if there are going to be any size limitations. Most sprite animation software requires the pixel dimensions to be divisible by 4. Also, you may want to work at the largest size possible if you’re working on mobile devices (base, hd, hd2 versions).

Otherwise, if you’re just doing this for illustration purposes, you don’t need to worry about technical details!

We can make the canvas bigger than what is needed, and just crop it down later. This gives us more space to work with.

01 - canvas created

This here is 250 x 200.

2. Using shapes to prototype forms

Because the ships are symmetrical, I like to use the shape tool to build the forms. This is for two reasons: it’s faster to edit with the shape editing tools, and it automatically anti-aliases the outer edges. We can opt out of automatically anti-aliasing and just do it ourselves, depending on the size of sprite. If you do choose to do that, then use the pencil tool to make the outlines.

I start off by only making shapes on one side. To make sure you have the middle line, go to preferences (CTRL + K), and change the grid to be half of the canvas width.

02 - set gridlines

03 - direct selection tool

To edit the shapes, use the Direct Selection / Path Selection tools. Direct Selection tool allows you to move the corners around (anchor points), while the Path Selection tool moves the whole thing around. You can switch back and forth between the two by holding CTRL.

Once you have all the shapes completed, save a new copy of the file, and then rasterize all the shape layers. The old copy will be useful in case you want to edit it at all.

04 - shape 1

05 - shape 2

After you finish each shape, copy the layer and flip it. The best way I found to do this is to copy the layer, select all (CTRL + A), free transform and flip horizontal. Since you have the whole canvas selected, the anchor point for the flip is in the middle. Much faster than fiddling around and moving the shape around. After you finish that, merge it down so it’s a single layer.

06 - finished shape

3. Selecting a palette

In my opinion, a solid palette is the single thing that turns an ‘okay’ sprite into a ‘great’ one, while the form is what turns a ‘bad’ sprite into a ‘passable’ one.

Create a new layer on top of everything. This makes it easy to move around and reference when you start colouring.

07 - create palette layer

I start with a nice dark shade of purple. This is going to be the darkest shade, and outline colour (if I choose to use that). I use dark purple instead of black because it adds a bit of life to the sprite. Black is just too dull.

08 - dark purple

Here’s a sprite I have done that illustrates this:

tiny rabbit

The purple outline is softer and gives it some more life. You can opt for a black outline though if you’re aiming for a more bold, cartoony/inked look.

09 - hue shift 10 - dark shades

I start with a base colour which you can see on the bottom right. As I go down a shade, also shift the hue and not just the brightness. This technique is called hue shifting and it is very important for creating interesting palettes. As I get darker, I shift the hue closer to purple from blue. Likewise, as I get lighter, I will shift the hue closer to cyan.

Generally, you will want to shift light colours toward yellow, and darker ones to blue/purple especially if there is natural lighting.

Here I have a full palette. I also switched the background colour so I can see the colours easier.

11 - full palette

The blue-purple color is going to be the main colour, the copper is going to be the secondary colour, and the red is an accent colour.

Notice that I have 5 shades for the secondary and accent colours. The middle one is going to be the base colour, while the ends are going to be the main shadow/highlight shades. The shades in between will be used sparingly for anti-aliasing.

4. Start with base colours

First thing I will do is lock transparent pixels for each component layer. This will ensure that you don’t colour outside the edges. If you do decide to add something extra outside of the shape, you can uncheck this lock.

12 - lock transparent pix

Next, I will fill each layer with whatever base colour using ALT + Backspace (this will use the foreground colour).

13 - base colors

I made the connectors in the back the darkest shade of the base colour. However, I’m leaving space for the darkest purple to be used here for additional shadows.

5. Shading and anti-aliasing

Now here’s the fun part, and the part where individual styles and preferences will differ. I like starting with the body. You’ll notice that I’m not shading it symmetrically. This is just a preference thing for me. You can use the same technique as before to flip one side and save time. Just remember to delete the other half before you duplicate first, so you don’t double up on transparent outline pixels.

14 - shading 1

I start with the shadows and highlights that are 2 shades away from the base colour. Looks kind of crappy right now.

14 - shading 2

This is after applying some anti-aliasing. It keeps the sharp contrasts, but softens the transitions between shades. Looks better than before.

16 - shading 3

More details. Just continue this same process with the rest of the components.

I added a jet to the main body on the wing layer, because I was going to mirror it anyways.

17 - shading 4 18 - shading 5

The connector part didn’t need much shading. It is meant to be a less prominent component, so shading it complex would draw your attention to it, which is what I don’t want.

19 - shading 6

6. Final details, finishing touches

Now it’s time to tighten up the sprite and use that accent colour.

example-06

Shade that red stuff so it is consistent with the rest of the lighting. Also I gave it a slight indented look.

example-07

And you’re pretty much complete. You can continue tweaking as you like. You can adapt this technique to any higher res sprites. Here’s a time-lapse gif, and one of the final ships from Galaxy Breakers for comparison.

Example Ship Animatedfinal ship

Thank for reading this tutorial if you made it this far. Next time, I might talk a bit about artistic influences or maybe the music creation process.