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

Archive for January, 2009

Working with tiles!

Monday, January 19th, 2009

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!

Little Ninja Platform Engine: Running and sliding

Tuesday, January 6th, 2009

Hellollo! Happy New Year everyone!

If you remember in our previous posts, I first defined the different actions states that the Ninja would have. First Little Ninja walked and jumped, and later he double-jumped, hanged on walls, and walked on cliffs. So, what’s left?

Running

Running is crucial in most fast-pased action games, and fairly easy to program. Basically, when the users taps the same direction twice and holds the button, the character will go from WALK -> RUN, which is essentially the same as walking except it’s a different animation, and the moves faster (x * 2, or twice is fast in our case):

Little Ninja running

If you watch carefully, jumping while running allows the Ninja to jump farther (again, twice as far as opposed to the normal jump), and if you hold the same direction he will keep on running after jumping. Another detail is that, if the Ninja runs for a little while and stops, instead of going from RUN -> WALK, his transition will be RUN -> BREAK -> WALK. Did you notice it? This small details polish the platform engine and will allow the Ninja to move swifter and smoother. He’s a stealth Ninja after all!

Ducking and sliding

Before thinking about sliding (dashing), for the last 30 years, most 2D platform games slide by holding the JUMP key while you’re holding DOWN — or ducking. Ducking was one of the states that I should have programmed firsthand, but since it had no particular use until now, I decided not to do it. You reap what you sow they say!

Anyway, life lesson aside, ducking is fairly simple: the character will start the DUCK animation and reach the DUCK state while you’re holding the DOWN key, but if you release it will start to un-DUCK (aka: stand up) and reach the IDLE animation.

Anyway, while Ninja·kun is ducking, pressing the JUMP key will allow him to SLIDE, useful for sneaking in small places, squishing wild frogs, etc. Take a look:

As you can see, Yuan decided that a simple Megaman 3 sliding “animation” was not enough, and decided to create a very funny animation that I thought would never work. Worked like a charm to my surprise. Anyway, eventually the Ninja will be able to slide while running and do some other fancy moves, but for now, enjoy the new video with all the new Ninja features:

This movie requires Flash Player 9

That’s it for today, hope you enjoy it and don’t forget to subscribe to our content and follow our progress closely!