Yuan Works Development Blog - Video game development, tutorials, design, and news

Archive for December, 2008

Making the stage art!

Monday, December 22nd, 2008

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!

Into the Platform Game Engine (Part 2)

Thursday, December 11th, 2008

Hi everyone!

Last time we saw Little Ninja running and jumping, and I promised to make him walk in slopes and hang in walls (after all, we’re talking about Little Ninja™ here). Well then it’s time to learn about Little Ninja’s new moves!

Walking on slopes (terrain angles)

The first thing I’ll solve today is having the Ninja walk on different terrain angles. As of now, there are three terrain types if you remember, but Mr. Ninja can only walk on two of them as for now:

When the Ninja walks on flat terrain, his X position changes (left and right). Well, what happens when he walks on slopes? His Y position changes, too (up and down)! In the 45° slope, for every X+1 pixel he moves Y+1 pixels, while on the ~26° slope, for every X+1 pixel, he moves Y+½, (but remember that pixels can’t be divided).

An important aspect is knowing when his Y position changes. For this, we have to use the sprite’s CENTER position. Whenever the Ninja jumps on a slope his Y position must be calculated too based on his X.

New Ninja States: Wall Hang and Double Jump (somersault flip)

A Ninja that can’t hang on walls or randomly somersault in the air defying all physics laws is definitely not a skilled one!

Anyway, wall hanging was pretty simple to do: Basically, when the Ninja hits a wall and you hold the direction on the d-pad (right in that case), he’ll hang on the wall and slide.

As for the double-jump, after performing a normal jump, jumping again while hanging in mid-air makes Little Ninja perform what is normally called a “double jump”, allowing him to move a little higher and a little further too!

Well, besides these two new states and slopes, I also added background scrolling, which I’ll try to explain more detailed later on. And as always, here’s a video (well GIF actually) of Little Ninja in action!

It’s starting to feel very versatile with the new moves and I’m sure that as soon as he runs and slides things are going to get even more exciting. Stay tuned for more Ninja action!

Animating the Little Ninja!

Thursday, December 4th, 2008

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?