Trying to make 3D look unmistakably 2D brought some problems on 3D graphics software. Since properties such as the ones I’m looking for are seldom (if at all) used, even if they are very basic, it was rather tricky.

First of all, it was a pain removing all the light on the characters and the scene. Rendering software uses so ugly default lights which were hard to remove. Since the first part won’t be shaded whatsoever, this was necessary to make 3D indistinguishable from a sprite based game.

Also rather quirky to set up was a completely orthographic camera (pseudo perspective used in blueprints and the like, which has no depth). I had to highjack one of the available ones that are supposed to be for scene control only. Needless to say, this is the closest to true 2D. Now I’m only missing a pixel perfect way to render things, and I will TRULY have 2D in a 3D environment.

What I’m particularly proud of are the lightning-fast rendering times. Usually, one single frame can take anywhere between 5 to 20 minutes, or even more, depending on the software settings and the complexity the computer has to calculate. At 1024 resolution, production quality (read that as ultra souped-up), any one frame from my scene renders in 2 to 3 SECONDS!!!!! YES, SECONDS. Other lighting tests like final gather work nice and fast, but I can have a similar effect with far less resources.

I also started to work on the animation. The 2D character already has a lot of animation done, including a super fluid walk cycle at 30fps, which I almost NEVER use, except for action based animations. Well, come to think of it, many Wind and Water animations were 30fps, so I take that back. Look at all those frames for just a walk cycle! The 3D character has to be “rigged” which basically means equipped with a virtual skeleton that allows it to move. It sounds like a pain, and yes, it actually is.

There are only two characters, one is 2D pixel art (of course), and the other one is in THREE (yes, three) dimensions!

The character design for the pixel character (code name “Square”) is my traditional work, so nothing too deviated from the norm:

However, for the second, less traditional character, I used a more traditional approach, sketching various poses and trying different designs (a step now unnecessary to me for pixel art).

Also, I had fun using color pencils and watercolor, media I seldom have a chance to use now =3

Then came the fun part… translating the character to 3D… It was kinda hard to keep all the weird “anime” angles visible on the model, which will be kinda low poly for that nostalgic PS1 look we all love…

Lastly here’s a turn table on the preliminary model for the 3D character, code name Polly. Polygon, Polly. Get it? Yeah, I’ll shut it now:

Basically its 3D constructed with classic 16-bit game rules! The same basics as the “rule of eight”, color reduction, repetition, and so forth apply in this project. The only new rule is that the new axis also has to obey the rules!

Above is the whole tileset used as textures, and game-like perspectiveless (orthogonal) views of the scene, perfect to create game maps!

I’m gonna experiment on this some more, as the possibilities are enormous!

See you around!

In the last post I started some of the rocky terrain that will be found in the game. The following tileset is a rather traditional approach to drawing a rocky “square” landscape in a stage:

If you look closely, you will notice that some of the tiles repeat themselves periodically. This helps the game save memory and at the same time creates a very comfortable “tile loop”. As you can see, those two lines of tiles are exactly the same.

The trick is making them connect smoothly. To give even further variety, many tiles can be replaced with different looping tiles which serve as matching pieces. They can also be combined differently to avoid a constant look! For instance, we can edit some of the tiles to make a secret entrance more obvious to an observing player without compromising the look of the game.

By making nice-looking and flexible tilesets with many unique features, we can make terrain that obeys all the classic video game rules and limitations, but still manages to breathe life to the different locales of the game.

The screen in a traditional 2D video game is generally divided into smaller pieces called tiles. These tiles are often 16×16 pixels, although other sizes also exist. Here’s an example:

Familiar, isn’t it? Many Famicom/NES games looked like that. In this image the tiles are pretty obvious, but there are several tricks to make them less apparent. One of them is creating fluid loops where it is hard to tell where the tiles join. Consider the following rock tileset I made for the game:

When I join them together it is very difficult to tell that they are tiles, and not a continuous drawing:

See? This makes the individual tiles much harder for the eye to spot. It also gives a natural feel to the game, instead of a blocky checkered look. You can even make a nice cycle with just one tile. Practice and a little experimentation is all you need.

Something that also helps camouflage the tile-look is giving a little depth to the tiles. For instance, I can draw the top of the rock to make it look like it isn’t absolutely flat:

Of course, these tiles are for cosmetic purposes only. Ryuuhi cannot walk on top of them. They only serve give the illusion of depth. This way we respect the engine but cheat a little bit visually.

As a result, we get a flexible, natural looking tileset that matches the style of the game without compromising the elemental engine and saving memory. It is also a good idea to take on or two tiles and make some kind of landmark, or special feature that will not only make a certain part of the map unique, it will also help a player recognize where they are. But more on that later!

Unfortunately, this approach requires a lot of observation and time to draw. For instance, this tree branch was “constructed” very much like a real branch. It has detailed individual leaves and is irregular and full of accidents. This gives it a much more organic feel.

Notice how it almost looks like the branch actually grows in the construction. The same is applied to the rock patterns that I’ve been drawing for the game. In nature, they don’t shape up chaotically, but rather in very complex ways, and you’d need advanced mathematics to calculate them. This actually means you have a lot of freedom to draw freehand and imagine the geometry any way you want because nobody will know the difference, but remember to keep the light source consistent!

In normal tile-based games these details are usually stylized into a generic shape, giving it a more anime look, for instance the trees in 2D Zelda games. Here’s a tree I worked on for a former project. The advantage is that it is easily recyclable and fits perfectly into any 16×16 tileset, making it very comfortable to implement into map design.

This game will actually be a combination of both, but there will be many visual treats to make every single surrounding unique.
Well, that’s it for today. Merry Christmas to you all!

Notice the two frames marked with an arrow. They are extra ugly frames that not only look bad, they don’t let the motion flow correctly/convincingly. Not that 0.05 seconds of screen-time are particularly visible, but we want to make this look as good as possible, don’t we?

Also, when you’re animating something, if you detect/suspect any errors early on, it’s important to correct them right away. Otherwise they will haunt you, turn more difficult to correct later on, or in worst scenario generate even more errors.

I also made a slash animation:

This kind of motion is not found in nature or traditional animation. And the way it is animated is exclusive to pixel art. With this kind of “special effects”, you have the freedom to experiment a little, but keep in mind the timing of the movement. Remember that is has to be functional in a game!

I have some more animations, but they’re too long to post here!

But as a bonus, I corrected one of the aforementioned frames while writing this post:

Looks much better, doesn’t it?

The game will sport a very japonesque look, featuring a lot of rocks, rivers, waterfalls, exotic trees, and cerulean skies. (Which pretty much renders our “keep it simple” useless…)

As for Ryuuhi, I still haven’t fully decided on the final look he will have, but he now has several animations, all running at full 30 fps. I swore I would never animate anything at that rate again after Wind and Water. But oh, well.

I also made this new tileset so that the engine Hao is making will look prettier, but he hasn’t even used my old new tileset!! Anyway, here it is.

Well, that’s it for today. Tomorrow I’ll keep experimenting with the animation. This project is advancing much faster that I expected, and I had a lot of fun playing with Hao’s preliminary engine!!

Back on the drawing board, we decided to make a “small” game project which we could handle leisurely. So we chose to expand one of our previous projects, namely “Little Ninja” or “Shounin Ryuuhi”, a Ninja platformer.

First of all, I took the original main character and did an overhaul so that he would still be small (which is the idea), but versatile to animate. This is the result:

I haven’t decided on the final look yet, but this is probably what I will stick to.

Also, we decided to make a new “terrain interactive” engine, and we chose the following angles for tiles:

This is because a 45 degree angle is a perfect one-pixel diagonal line, and the other ones are perfect two-pixel diagonal lines. Any other irregular lines will need too much work to look elegant. This is a preliminary tileset to make the map editor a little easier on the eyes.Instead of just “pasting” the character on top of any terrain, we will make him really interact with it. So the little Ninja stands and acts differently depending on the inclination of the plane:

Finally, I made this “Stick Ninja” to test the animation flow and interaction. His name is Chopsticks the Ninja™. Having so much terrain interaction means a LOT of animation on my part. So there goes our “simple” game project…

As we all know, the resolution of the GP2X is 320*240 pixels, and though it may sound like a very limited resolution by today’s standards, it houses no less than 76800 dots of pure workload. The reason is that sprite graphics have dots hand placed carefully to make everything look pretty and well animated.

For the graphics, as always, everything goes by the “rule of eights” with me. I already knew that the “Elements” in the game would be 16×16, so all I needed was to make them colorful and to include the appropriate Chinese character inside. Chinese characters are pretty complicated compared to letters in say, English, and sometimes squeezing the whole ideogram in a limited space can be quite a challenge!

At first, they were going to be more “classic” in style. The characters were more calligraphic and the blocks much flatter. Later, I imagined them as cubes, so I had to play with the lighting to give them volume. I wanted the blocks to fade according to the element they represented, so I drew the bursting animations.

After drawing “sprite sketches” of the first characters (which are Hao and me!), and some needed props, I had the first (mockup) screen of the game! Now all you need is to imagine it finished and animated in top quality! (Okay, I admit it requires a lot of imagination.)

But after drawing some more elements and improving the quality of others, things looked much more promising (in mockup mode, of course…)! The character size I decided upon was 48×48. They looked much better after I worked more on them. Now, they only had to move to be ready!! (SIGH…What a pain…why do sprites have to move? Just drawing them is complicated enough!)

I also started to work on the dreaded “press” graphics. If you notice, the beta “screenshots” of the game have a silver colored press, while the final one turned out raven. Here are some of the concepts I explored. The black “dents” in found in one of them are actually the ancient Chinese “Bagua” trigrams, also linked to the Ancient Elements.

As a bonus, here are the dummy blocks Hao drew to make the test engine! It is funny that the cursor you see there was kept for the GP2X Software Contest, the Teaser Demo, the Final Demo, and was replaced by a new one merely days before the official worldwide release of Wind and Water! We considered keeping it as a memento, but it was very different from the overall quality of the final game, so we had to retire it as a veteran warrior!

In future workshops I’ll detail more on sprite rendering and animation. Stay tuned!