3D sprites

2

Stats

9,582 visits, 16,124 views

Tools

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 11 Apr, 2012. Last updated 19 Feb, 2019

The concept

As you all know Construct 2 doesn't support 3D models, so the only way to make a game seem like it's 3D is to generate images of 3D objects and use them as sprites.

Where to start?

First get some 3D Modeling software (I will be using Google SketchUp because it's free, and it has a warehouse where you can find finished models quickly if you're too lazy to do them yourself)

I recommend you use the engineering template if you don't want to color your shadows later in Photoshop (they appear green if you use the standard template)

Creating the sprite

After you have created or opened your model, choose the angle of your game (platform, top-view etc.) I have created a Watch Tower for a tower defense game I'm doing at the moment.

To make it more 3D we will add some shadows (Note: shadows are a bit tricky to work with because of the objects that move on them i.e. if you put your hand on light the shadow of the hand that appears on the ground will be bigger than the shadow that appears on a table, for example)

The shadow properties in Google SketchUp are located under Window>Shadows (Note !important: Remember the date and time of the shadow you're using and use the same settings for all your models!)

After you have created/selected your model, added shadows, you are ready to export it. Click File>Export>2D Graphic... and save it as .png file.

The exported image should look something similar to this ...

Editing in Photoshop

This is the raw sprite we will be using. Now open a photo editing software (I will be using Photoshop in this tutorial). Select the white area (or like in my case the green because I used the standard template) and press delete. Now we made the area around our sprite transparent. Click Select>Inverse and then crop the image. Now we have just the sprite and it's shadow. What we have to do is make the shadow transparent because shadows are transparent. Select the shadow with the Magic wand tool and press ctrl+shift+j. A new layer is created with only the shadow inside. From the layer tab that should be on the right make the opacity about 35% (I think this is about right). Save the image over the old 'raw' sprite with .png extension.

The result should be similar to this ...

Now you can import this sprite in Construct 2 and make great games!

P.S. Make sure that the shadow is not in the collision detection area because objects cannot collide with shadows. This is easily done in the 'edit animations' menu in Construct 2

Have fun!

  • 0 Comments

Want to leave a comment? Login or Register an account!