Archive for the ‘’ Category

Ittle Dew 2 devblog: 2D to 3D

Hello, Ittle Dew main artist here. Let’s talk about the move to 3D for a bit.

There’s a lot of great celshaded games recently (Guilty Gear Xrd, Jojo All Star Battle to name a few) that look amazing.
Celshading has always intrigued me – one of my favorite games of all time is Jet Set Radio, one of the first celshaded games i believe, a game that still looks so good. So when we discusssed Ittle Dew 2 being made in 3D, I saw this as a really fun challenge. Ittle Dew had a very particular style, with heavy black outlines and a wobbly style of animation (that wobbly style was actually selected because it makes animating so much easier! hah). We had previously experimented with Ittles style in 3D, with a dungeon crawler idea, and it had looked pretty good. However, in that test I used a lot of “billboards”(flat “sprite” objects that always look at the camera, think of the barrels in DOOM or items in Minecraft), while Ittle 2 went on to be a lot more “real” 3D.

Picture of said dungeon crawler:
gfx_dungeoncrawler

(The Card City Nights faces are just placeholder, since it’s just a little prototype)
The first thing we did was have one of our wizard programmers make something do we could have wobbly outlines even in 3D, since by now we felt that was a big part of the Ittle Dew style. But just like in Ittle Dew it will only be used on things that are alive or interactive, kinda. To make them stand out. Using it on everything all the time would probably be really annoying to look at.
Here’s the process of a recently created enemy, Safety Jenny, with wobbly outlines:

(Animation is work in progress)

gfx_safetyjenny
animated

The outlines on both characters and props are not automatically created by an outline shader or such.
I find that to get decent looking outlines you need to create them manually so you can tweak problematic areas by hand.

There’s not much more to say about the surroundings, but let’s look at a picture.
The most important thing is to not lose too much of Ittle Dew’s charm when moving to 3D, and I dare say it’s going fairly well.

Having a (mostly) fixed camera helps a lot here!

gfx_comparison2

And that’s pretty much it for me. Not a lot of informative text, but a bunch of pictures at least!

Ittle Dew 2 devblog: Shaders for beginners

Hello everyone! Today we will learn how to make lava, and also how to make water.
“But this is blasphemy!” you say. “Only gods may do such things.” While that is a fact, sometimes you have to take the good with the evil.

Lava

We start off examining the basic ingredients of molten lava: A greyscale noise and a gradient map. Something like this perhaps:

LavaColor1LavaNoise2

Now if we just applied that map to the noise we would get a nice boring static lava-like thing, which wouldn’t do at all. It needs to move. Also I don’t know if you’ve ever seen lava, but it’s thick like the slime of a slug and moves faster in the center of a stream than it does close to the edges. We can solve this problem by having the above noise move in a certain direction with a certain speed, and having a different noise texture move in the same direction with a different speed (and don’t cheat by using the same noise texture; you’ll get artifacts and then cry when they happen to overlap). We then blend these two textures based on how close to the center they are (preferably using another texture to determine blend the factor). Now we have a noise that moves at different rates, and this is what we want to apply the gradient map to. With a really simple blend texture, it will look a little something like this:

lavashader

 

Water

Making water is a bit more complicated deal, but it starts with two parts. A big old plane mesh with lots of subdivisions, for waves; and everything else that’s going to be affected by these waves. The waves are fairly straightforward; just move them up and down in a vertex program based on some sine function. However you will want to make sure whatever position-based arguments to pass are based on the world-position of the vertices, because we will have to recreate this function in the wave-affected objects later. For convenience, let’s say our wave function is
sin(P.x + t*2π)
where P is our vertex’ world position and t is the time offset of the waves. We apply this function to the vertices of the plane mesh and we obviously get waves moving in the x-direction only. That’s fine for now, but the advanced reader would want to do something about that.

Anyway, now that we have waves, we switch to the other objects. We want to create foam or something at the intersection with the wave mesh. To do this, we first use the same function to calculate the current wave height in their vertex programs, then use this to create a gradient from 1 at the wave height, to 0 at a certain height above the wave height. For extra fancy, apply a noise to this gradient, using the gradient value as a threshold. Maybe move the noise around for a more dynamic look.

Sadly we are not finished yet. It may look okay at this point, but we also want whatever it is to look a bit wet after the waves have rolled by, and also for this wetness to slowly creep down towards the water. We can’t simply use the wave function for this because that will make the wetness move in a sine wave, which looks terrible. We need a function that moves up with the wave function, but goes down linearly, until it goes up with the next wave, and so on. How to do that? Well it’s pretty simple, just make a sawtooth function with the same period as the wave function, offset it in height and phase so the top coincides with the top of the wave function and tweak the slope to your liking. Using the above wave function, our “wetness” function could look something like this:
1 – frac((P.x + t) – 0.25) * x
where x is the slope multiplier value.

Then just take the maximum of these two functions to get the current height of the wetness. Use the resulting value to shade the fragments below darker.

Go all that? You should now be able to make something like this:water

The Earth is counting on you!! Good luck!

Ittle Dew 2 devblog: Dynamic Score

The music in Ittle Dew was generally positively received, but didn’t really stand out. We did have a pretty cool system for fading between different instrumentations of the same theme on the overworld, but that’s nothing new – I first remember hearing that in Diddy Kong Racing on the Nintendo 64.

Ittle Dew was Mattias’ first score – normally he’s on coding duties – but I think he did a very good job, especially with so little experience. For Card City Nights he really came into his own with a score much closer to his (and mine) tastes, and a strong theme that went through the entire game. All locations have a jazz song as base, and the combat in each zone is a hiphop remix of respective jazz song. This came out great and we got loads of praise for the CCN soundtrack. It’s actually selling a little bit on it’s own in iTunes and Spotify =)

So for Ittle Dew 2 we want to step it up again and do something new and fresh. And not just find a fresh genre, but to do music in a new way. Reconsider the use of music in a game at a more basic level.

This a first, very rough prototype of what we initially came up with. We simply put the musical elements on objects in the world, and let them play only as they enter the current view of the screen.

Steer with WASD. Start by going up, and then go left until you get to the blue area.

The squares represent different elements of a spooky forest; Trees, Frogs, Stars, Flowers and Plants. See the screenshot below for an idea of what it could look like ingame:

starwoods

We didn’t spend more than a couple of hours on this prototype, but hopefully it’ll come out great in the actual game. As the different elements play they should probably animate a little. We’ll also try putting the music on enemies instead of level elements, or both. Lot’s of experimentation left to do!

Actually retro games!

Ludosity at RSM14

Hello there! We recently made a couple of games for Retrospelsmässan, a retro game fair in Gothenburg. These are actual ROMs that run in emulators and on the real hardware.
 
 
tigerjenny

Mattias and Anton made Tiger Jenny, a NES/Famicom game based on characters from the credits sequence in Ittle Dew. You can get the ROM here, and the source code here!

(To play this game, you’ll need a NES/Famicom emulator like FCEUX, or a cart like Everdrive N8.)
 
 
questforge2

Mattias made Questforge, an Atari 2600 game. Get the ROM here, and source code here!

(To play this game, you’ll need an Atari 2600 emulator like Stella, or a cart like Harmony.)
 
 
jorgen

Daniel made J.Ö.R.G.E.N., an Atari 2600 game. Get the ROM, source code and included Stella emulator here!
 
 
atarena

Anton made Atarena, an Atari 2600 game. Get the ROM here!
 
 
For more information on how these were made, this guide is what Mattias used when making Tiger Jenny. We also used Batari Basic when making the Atari games.

There were more games shown at the fair, but the makers don’t consider them complete enough to release yet. We hope you like the games!