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

Archive for the ‘Game Design’ Category

More on the 2D/3D Project

Sunday, February 28th, 2010

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.

The 2D Triumphant Video

Sunday, January 31st, 2010

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:

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!

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!

Into the Platform Game Engine

Sunday, November 30th, 2008

Hi everyone,

Today’s post talks will be about how to design the most basic parts of a platform game engine. On our last post, I finished a simple Map Editor, now it’s time to put Ninja Stick Figure into action!

Defining the Ninja Action States

Most of you are probably thinking about defining the most basic and generic objects (EG: the main character, enemies, bullets, items, etc.), but since this game is supposed to be simple, we’ll jump right into the main character, Ryuuhi, since I’m more interested in developing the platform engine. For a more complex and bigger project, this definitely wouldn’t be the best approach.

Anyway, the first thing I have to think about are the different states that our Ninja has:

Every state is self-explanatory so there’s not much to explain. Defining how states work is easy, IDLE happens when you don’t press any button, WALK when you press Left/Right, JUMP when you press the “Jump” button, and so on. For now, I won’t be using the ATTACK state since I’m only interested in how Little Ninja interacts with the terrain, not with other objects. Anyway, it’s important to associate an animation with each state, as well as a transition between states: for example, the character may go from IDLE to WALK, but can’t go directly from JUMP to WALK. Anyway, this can be done with a simple Enum:

enum NinjaAction
{
    NJA_Idle = 0,
    NJA_Walk = 1,
    NJA_Turn = 2,
    NJA_JumpStart = 3,
    NJA_JumpHang = 4,
    NJA_JumpEnd = 5,
}

Enums are very simple but work well on cases like this. This way, if I need to define another state or need to change its number for any reason, the rest of the code stays clean. For example, the IDLE animation would be ninjaAnimation[NJA_Idle], which is easier to understand compared to ninjaAnimation[0]. As for  Jumping, three different states were defined: the part where Ryuuhi ascends (Start), the part where Ryuuhi doesn’t move and descends (Hang), and the part where he falls (End). In good theory, all states should have a generic outcome when you enter and exit a state, but as I said before, I’m more focused on game mechanics right now.

Note that Ryuuhi is facing to his LEFT on all the images. This means that, besides states, it is important to define the state’s direction too.

(more…)

Pretty settings and animation: let’s go!

Tuesday, November 25th, 2008

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

Time to build the Map Editor!

Wednesday, November 19th, 2008

Hi again!

If you remember last time, we were in the process of  defining what was important for Little Ninja’s new Map Editor. If you haven’t read the last article, it’s a good idea to take a look at it since I’ll be taking off right where I left it :)

Map Terrain Design (Part 2)

Last time we were overviewing the different terrain angles. After taking a look at my favorite platform-adventure games, I decided to keep three types of angles, remember?

Angles for map editor terrain

One may think that most platform games have a wider array of possible angles. However, in fact, I came to realize that a great number of games only use the 45° and ~26° inclination — Cave Story or Metroid, for example.

Now that I have chosen the three types of angles, it’s time to choose the different terrain directions. Fortunately, this is a very easy choice as tiles can only be transformed (rotated or flipped) into four different configurations, creating the following set of tiles:

Map Editor tile transformation

Now that we have terrain type, angle, direction, we’re all set to start making our Map Editor™ ! Before starting, let’s do a test-run on our current terrain:

Mockup tile map

As you can see, the combination of tiles allows a quite versatile design, while keeping it “simple”. While our Ninja trap does not look too smooth, remember that this is our mask! Further addition of foreground tiles will do the trick, believe me (I can’t wait for Yuan to give me some tiles). Actually, Yuan has already started drawing the prototype sprite art for Little Ninja.

(more…)

Little Ninja new Sprites and Tiles!

Sunday, November 16th, 2008

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…

Starting a New Project! (codename: Little Ninja)

Wednesday, November 12th, 2008

Hi everyone!

As you probably noticed, Wind and Water: Puzzle Battles for Dreamcast was released early this month, so we decided to start a new simple platform-adventure game, codename: Little Ninja!

Since Wind and Water was a very extensive and ambitious project, we want to keep this one simple. We’re mostly focusing on engine development, programming, scripting, as well as graphical issues that need to be resolved. Little Ninja may become the stage for our new big platform/adventure project, but for now, we’ll try to keep it simple, and we really hope this time we don’t mess it up :) We’ll be documenting the whole development process, both from my side (programming), as well as the artistical and musical part — Yuan’s part.

What is Little Ninja anyway?

少忍龍飛 (Shounin Ryuuhi — Young Ninja Ryuuhi) is an old Yuan Works project:

Yuan Works project codename: Little Ninja

That’s an old screenshot taken from the Yuan Works website. We’ll be remaking it from scratch, but the basic idea still applies.

Map Editor and Tile Design

Before starting to program directly on the game, there are several tools that need to be done beforehand. Fortunately, all animation and image editors used for our past project were dramatically improved while we were working on Wind and Water, however, one of the tools that is not too flexible is W&W’s map editor:

Wind and Water: Puzzle Battles world map

Wind and Water does feature a map (usually compared to Super Mario Bros 3), but we need something more complex this time. It’s time to design a map editor then!

(more…)