3d Effects In A 2d Game

The game I’m developing right now is called Flippit. As you can guess, there will be a lot of things flipping in the game 🙂

Panels, scores, boards, etc will all have the appearance of flipping over depending on what actions you take. Making this flip effect in a 2d game actually wasn’t that hard. It’s just a combination of transforming the images at just the right time. Here is an example of the main board flipping. The logo is on the front, then it flips over to shows gems on the back:


(I noticed on IE this animated gif wasn’t showing correctly. If you are using IE and you don’t see it flipping, try Chrome of Firefox)

There are 3 main graphical elements, or sprites, in the above image. The background which is a wood panel, the Flippit logo and the gems. All have to be transformed a certain way depending on where you are in the flip effect.

To start, we simply transform the background image by the desired rate. I have this configurable via runtime properties so different things can flip at different speeds. The script to do this is attached to the background panel which is then hooked up to an Alarm in GameMaker.

There are then 4 timings we care about:

1) The opening flip which is how it starts out. During this phase we scale down the background image and the Flippit logo at the same rate, while the gems keep the scale of 0, or invisible.

2) The halfway point of the opening flip. This is when the board is at a 90 angle and the back of the board is beginning to get exposed. At this point we then start scaling the background up and keep the logo at a scale of 0 so it’s invisible. We then begin scaling the gems up at the same rate as the background

3) The board is fully flipped open. At this point we pause for a second then start to close it again. We scale the background and gems down at the same rate and begin the closing phase, keeping the logo invisible.

4) Halfway point of the closing flip. We begin scaling the background back up, keep the gems at a scale of 0 so they are invisible and begin scaling the logo up.

This gives us the desired flip effect. It’s a crude representation of 3d in a 2d engine, but it’s effective. There are no shadows, and this effect can be improved by skewing the image as well during the flip, but for now I’m happy with how it looks.

The image(s) on the front and the back of the board are all configured at runtime. This allows me to use the exact same generic “flip” script for all objects. I simply attach the flip script to any object and pass in 2 arguments: a list of objects on the front, and a list of object on the back, and the script handles the reset without having to change anything.

This should make life much easier in the future when I start flipping multiple objects.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s