Recreating “Yoshi’s Island”

I was browsing reddit the other day, when I came across this post on /r/gaming:

Yoshi’s island was one of my favorite games as a kid, so naturally I immediately went and dusted off the old SNES and plugged it in to relive the glory days!

Well… not quite. I actually don’t own a SNES, and the one from my childhood is probably buried someplace in the bowels of my parents basement.

No matter though! I decided that if I couldn’t play the game, I’d do the next best thing and recreate the title sequence by hand. In this post I’ll describe the trials and tribulations of going through the process of reproducing old game art.

Yoshi’s Island Old to New:

Super Mario World 2: Yoshi’s Island came out just over 20 years ago in 1995. It was an instant classic. For it’s time, Yoshi’s Island was one of the most advanced games out there. It featured rich artwork and game-play dynamics that went way beyond the industry standard at the time. Since the game was in development for 4 years, lots of love went into adding cool little features.

One of these cool features was that, since the game used the new Super FX2 microchip, it had the ability to do advanced transformations on the artwork with rotation and scaling that was hard to achieve previously. That brings us to our title screen. The developers wanted to have a 3D island featured on the title screen, but (even with the cool new FX2 chip) the hardware at the time just couldn’t support implementing 3D graphics, at least not without some major elbow grease.

Instead, the developers elected to use an interesting trick to make the island seem as if it was 3D, by implementing a psuedo-3D or 2.5D mapping. In 2.5D your y and z coordinates are combined along with some trigonometry to make a parallel projection of the scene. Of course, you’re still dealing with 2D art assets, but as long as you order them correctly on the scene you can produce the optical illusion that the scene is in 3D.

In code this is actually fairly simple to produce. We can see from the original, that the island is angled at about a 30 degree angle from the ocean floor. This can be accomplished by taking an image, rotating about it’s center, and squishing it down by the proper ratio. Here I chose to shrink it by about 60%. This produces the illusion that you are looking down at a plane from an angle:

example1.gif
Left: original. Right: scaled by .4 in the y axis

Now we have the famous rotating island!

Putting some Clouds in the sky:

Now that the island is looking pretty good, the next step is to do the “skybox” and get some clouds put in it. In the original game, the clouds are just a big strip that keeps repeating like the background in an old film. Not only is that not very interesting to look at, but I’d have to manually un-stitch the background from the gif, and I don’t really want to do that. Instead, I elected to just have the several different cloud “shapes” move independently across the screen.

bgclouds
different cloud “shapes”

By giving each cloud a random X value and speed, I can produce an effect similar to the original skybox, but a little nicer to look at. I found that a random speed of around 3 pixels per draw and having about 20 clouds in the sky felt the best:

example2.gif
Cool! Now we have clouds!

Getting the Art Assets:

The island is pretty empty looking right now. To fill it out I need to get the rest of the art assets for the hills and decorations. I’d also like to get the music for the game as midi file.

I lucked out with the music! I was able to find a midi file for the title screen here: https://www.khinsider.com/midi/snes/super-mario-world-2-yoshi-s-island. I just threw it into Fruity Loops Studio and let it do it’s thing to render a pretty nice version of the song.

I wasn’t so lucky with the pixel art. You might notice that I already have the clouds and the island, but that’s because I was lucky and was able to find those files elsewhere on the web.

For the rest of the pixel art, I had to go through by hand and recreate them from the gif above. This was a time consuming process and took forever to get right. The static animations were the easiest, but I had to pick out key frames from the gif to get some of the animations right.

Then there’s that stupid bird! I hate that bird… The smoke animation? 6 frames. Yoshi himself only has 5 frames. The bird has 8 frames! And it’s white, so half the time it blends into the mountain. Why the f*$% does the bird have such a complex animation!?

Anyway, after cursing at my computer for hours, I finally managed to extract all the assets from the gif:

spritesheet

Placing in the Pieces:

The way the coordinates worked for the original Title Scene is that each object had an x, y, z, and id value. The x and y values corresponded directly to it’s coordinates on the island, and the z coordinate was the height. The id value told you what type of asset it was (e.g. id 5 is the crazy red tower).

So for every single object I had to go work out what I thought the proper x, y, and z coordinate are. I mostly did this by looking at different key frames from the gif, and cross referencing them with the island image. The island has a dimension of 256×256 pixels, so each coordinate should be relative to the center of the island at (128, 128). I think I was able to do this fairly accurately.

There’s a problem though – some of the objects have a curved bottom to make them appear more 3d. That messes up the position because you have to subtract off the bottom part of the image to get the “real” x and y:

example
“real” y is a few pixels up from the bottom of the object

This also had the negative side affect that when I placed an object at where I thought it should go, it looked like it was floating above the surface of the island. To counteract this, I gave each object a negative z value equal to the offset.

There’s another problem, which is that the island, has been rotated and scaled, so to get the actual position on the island, we also need to rotate and scale our x and y values by the same amount. after doing this we get this:

example3.gif
That’s no good!

So what’s going on here? Well we’re drawing the objects in the order that we created them, but that’s not the order they should appear on the screen. Instead we have to order them by the rotated and scaled y value so that we can make sure to draw the ones in the back first (similar to how z-indexing works). In JavaScript you can do this by defining the behavior for an Array.sort() function. In this case we will sort by the ‘y’ values from low to high:

example4.gif
Eureka!

Final product:

I hope you all enjoyed this breakdown of recreating the Yoshi’s Island title screen. There are definitely some things I could have improved, and there are definitely definitely better ways I could have obtained the images.

Let me know what you think, and if you have any questions, feel free to post them in the comments below!

Thanks for reading!

— Ben