class-2





局外人 L'Etranger ▸ Making of Pixel Art

Determine the size

  1. Draw draft on paper, scan it to computer.

    • A draft of the whole map
    • A draft of the standard character body in four viewing angles
  2. Import into PS. Need to decide the pixel size of the character. Comparing with other creator's work, 27~30px is ideal for the detail amount I want to have. (in the screenshot here all 3 pictures is 400% zoomed) Screen Shot 2020-04-11 at PM3.07.13

  3. The window size in my game is 800×600. In the picture below I prepared a 400×300 canvas, put my drafts on it to find the proper size to show in the game. I found that my target percived size of a character is around 70px on the 800×600 window. So it would be no big problem to still use the 27-30px size as in step2. Later I just need to enlarge all image to @2x.Screen Shot 2020-04-11 at PM3.43.47

Make the basic body

First, here is some prepration before drawing character:

After making the basketball ground color more saturated and light. I had a decent background.

Screen Shot 2020-04-11 at PM5.34.37

I plan to draw black outline first same as in that second reference pic. And then change the outline to some lighter color if it appears too bold. When drawing the front facing view, I soon realized that it is quite tricky to keep the body and head size constant since we are working on a pixel scale. Things happened that 2 px is too small, 4 px is too large and 3 px will lead to asymmetry of eyes positions. Or, outline of the legs will form a ugly 2px wide black line if you use a even width.

Screen Shot 2020-04-12 at PM4.08.23

When drawing the 135° view, I let he stand back to back with the 315° view so that I can keep a good balance.Screen Shot 2020-04-12 at PM4.08.29

The last two is the side views. The position of the back of body and leg is imporatant. Screen Shot 2020-04-12 at PM5.23.16 FInished!

main-preview

I do want to add breathing effect to the character, but due to its small size, a pixel level movement looks choppy. Sub-Pixel animation is needed. Have to leave this to later after coloring (if time permitted).

breathing-preview

 

Luckily, I came across an amazing book Pixel Logic by Michael Azzi. So I decided to take a break and study systematically before going on.

 

Coloring Pang Zhai

I learnt from the book to make colour ramps using Hue Shifting and Saturation Shifting. Trying it out here:

hue shift

These are the most colors I can get from Pang Zhai. There are light, middle and dark values. I don't know if there is need to do any color shift. Let just see if it works out.

Screen Shot 2020-04-16 at PM10.27.44

Another thing I learnt is determining the black tone. Here for PZ the black tone is some dark brown.

First build a bigger shape for him. I guess it's recogonizable enough.Screen Shot 2020-04-16 at PM11.03.13

Then I added AA and shadow (with a new mid tone for the skin). Changed his pose to be the same with standing drawing, made the skin shadow darker and less saturated and used the original skin shadow on his shirt. Added dot under his eyeball to make it looks like he is squinting his eyes. The glass is really hard to draw in such a pixel limit.Screen Shot 2020-04-16 at PM11.42.20

It's possible to add a month for him. Quite cute!

Screen Shot 2020-04-16 at PM11.50.02

Rough Coloring other character

In order to hand in to programmer as quick as possible, I decided to make a rough version of all elements. But as you can see in the following pictures (~ 5 hrs work), I still can't resist the temptation of adding color etc. Anyway the AA is skipped so the other characters do not look as good as PZ.

Screen Shot 2020-04-19 at PM2.30.30

Screen Shot 2020-04-19 at PM2.35.29

As for Hayato (隼人), in the story he is wearing clothes from the revolutionary operas in 70s. It might be interesting to make him completely B&W visually. I used a 50% B&W filter on him

1

Screen Shot 2020-04-19 at PM3.23.49

 

Animating of Civia band

A friend of the staff kindly provided us a song cover, so that we can play it in Civia's band performance. Usually in this situation some CG slide show will be played. But we don't have time for that. But a 3-frame pixel animation might be easy to make. Just use some music note to create a sense of motion.

band_playing_animation

 

Reference:


© 2015-2023 Class-2 All rights reserved.

It was the winds descending from the great mountains of Norway
That spoke to you in low voices of better freedom.
-- Arthur Rimbaud, "Ophelia"