I’m working on a 2D/3D project exploring the features of both worlds, and I’ll make a RRSF (really, really short film) with gamey music and visuals!!

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!

Now that we understand how tiles work basically, I’ll start working on some tilesets. Just because a game is tile-based doesn’t mean it has to look blocky or repetitive. It is possible to achieve a natural and always fresh appearance by mastering some of the tiles’ features.

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.

Happy New Year, everyone! Today I’ll work with on a looping tileset.

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!

In a normal traditional platform game, we’ll need some pretty tiles that cycle without giving too much hint that they are tiles. This game however, aims to capture the natural organic feel of the environment, so it will have many unique tilesets (that is, there will be many tiles which are only used once). Games that feature this kind of tilesets include the Metal Slug series, as well as the arenas for most modern fighters.

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!

I still haven’t decided on the final look of the character, but I’ve started sketching the way he will move. Here’s one of his preliminary animations: the run cycle! Most of Ryuuhi’s ninja moves aren’t too realistic, but this particular run cycle is very traditional animation-wise, except for the extra weight put in the hammering of his feet.

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?

Okay, this time I have drawn some more natural looking terrain to make the game easy on the eyes. This is how Little Ninja will (hopefully) look like in action!

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!!

Well, after the Dreamcast release of Wind and Water: Puzzle Battles we had a short two week vacation which was mostly spent playing games.

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…

In our last post, we talked a little about W&W’s origins. Today, I’ll post a little bit on how the graphics were created for Wind and Water: Puzzle Battles!

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.

(more…)