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

3D 16-bit Pixel House

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!

Wind and Water featured on gamesTM magazine

Wind and Water: Puzzle Battles interview gamesTM UK magazine

We have good news! Wind and Water: Puzzle Battles for the Dreamcast was featured on gamesTM magazine, one of UK’s and Europe’s most renown magazines. Also, W&W has been restocked by Play Asia, more on this below.

Wind and Water: Puzzle Battles interview gamesTM UK magazine

gamesTM also reviewed the game, praising the fact that so much content “was only made by two people”:

“The first thing you’ll notice about W&W is that it has an impressive amount of content for a game that was made by just two people. The puzzle game itself can be played in story mode — a meaty adventure featuring multiple routes, RPG-like progression, animated cut-scenes, text dialogue, even mini-games. It’s basically everything you would expect from a pluzzler’s story mode and more. [...] There’s more here than you’ll find in any of the other genre realeses that appeared during Dreamcast’s lifetime and it’s all top quality too. You never get the feeling that Yuan Works rushed or cut corners throughout production. [...] The core element of Wind and Water is actually a very playable and original concept. [...] The core gameplay has just the right kind of addictive quality to keep you playing for hours [...] In short, if you’re still actively buying Dreamcast games and you’re looking for something different than the usual crop of shooters then this is essential

Wind and Water: Puzzle Battles interview gamesTM UK magazine

Also, we have other good news: Wind and Water had been out of stock for months on Play Asia, but last week Play Asia restocked the game for those who were not able to purchase the game.

Wind and Water: Puzzle Battles interview gamesTM UK magazine

The magazine features a full interview regarding the development of Wind and Water, development from Dreamcast, and our view as Independent Game creators (special thanks to Kim Wild for the interview). Remember that supporting Independent Games helps us continue doing games for our favorite consoles which are not supported by manufacturers. Here’s the trailer of Wind and Water: Puzzle Battles in case you haven’t seen it:

YouTube Preview Image

And here’s the Gagaman’s review of the game.

Wind and Water: Puzzle Battles Video Review!

Hi everyone!

We’d like to announce the new Wind and Water: Puzzle Battles video review by Gagaman (thanks!) from the Dreamcast Junkyard:

YouTube Preview Image

The review looks great and explains much of the many complex modes and details inside the game.

Also, redspotgames has announced a huge price reduction on shipping costs to Asia, Australia, and New Zealand, head to the resdpotgames website for more information about purchasing the game and supporting independent games!

Terrains and Tilesets!

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 10th Birthday Dreamcast!

Hi everyone! We have a surprise for you! We have redesigned the Wind and Water: Puzzle Battles website and, in honor of the Dreamcast’s 10th anniversary, we have created a new image for our beloved console’s birthday!

We have also created the official W&W trailer for Dreamcast, be sure to check it out below!

(Youtube version if you would like to share it)

Help us spread the word about the Dreamcast’s 10th Anniversary! We also have new updates on Little Ninja and other Yuan Works projects, so don’t forget to subscribe to our RSS feed to receive our future updates! And remember to support independent games so that we can continue creating games for our beloved genres and consoles, and developing Little Ninja!

Working with tiles!

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

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!

Making the stage art!

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)

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!

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?