2,951 visitors
30.6K page views
2,740 translation visitors
14.7K translation page views

3D sprites

Favourite 53 favourites
Tutorial written by MartinOriginally published on 11th, April 2012 - 1 revision

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!

Unlock your full gamedev potential

Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!

View deals

Plus, it's got a lot of additional features that will help you save time and make more impressive games!

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!


NingY 3,248 rep

Awesome tutorials! Thank you.

Thursday, April 12, 2012 at 11:06:33 PM
xingfriday 2,424 rep


Sunday, June 10, 2012 at 2:26:24 PM
necromaster 7,858 rep

For those who were wondering, the previous commenter was saying - "This tutorial is pretty good! Only thing is, it would be quite an effort if you were to create a humanoid or monster that could rotate"

Friday, August 17, 2012 at 1:38:32 AM
SciFiStudios 4,200 rep

I probably won't be using 3-D objects.

Saturday, November 10, 2012 at 5:12:37 PM
thehorseman007 14.7k rep

nice tutorial , in this way we can do lots of things . Thanks

Monday, July 29, 2013 at 8:13:22 PM
Danya3216 957 rep
quoted from xingfriday


Saturday, September 14, 2013 at 8:45:54 PM
ashwin2000 1,664 rep

awesome! really helping

Thursday, December 05, 2013 at 1:25:11 AM
muhammetkulahli 550 rep

sen bir harikasın..bende boyle bir program arıyordum.Teşekkürler

Friday, May 23, 2014 at 10:35:09 AM
jergiles 3,019 rep

Thank you much/

Sunday, June 05, 2016 at 8:12:21 PM
iSoMetric 177 rep

This is so helpful, especially for a newbie like me. Thanks!

Sunday, September 03, 2017 at 7:25:34 PM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.