Stats

6.4K visitors
16.2K page views
1,507 translation visitors
2,494 translation page views

3D sprites

Favourite 30 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!

Congratulations on finishing this tutorial!

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

Comments

1
NingY 3,068 rep

Awesome tutorials! Thank you.

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

这个真不错!只是如果想做成可以转换角度的人物或者怪物就比较费劲了

Sunday, June 10, 2012 at 2:26:24 PM
0
necromaster 6,263 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
0
SciFiStudios 3,240 rep

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

Saturday, November 10, 2012 at 5:12:37 PM
0
thehorseman007 6,431 rep

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

Monday, July 29, 2013 at 8:13:22 PM
0
Danya3216 777 rep
这个真不错!只是如果想做成可以转换角度的人物或者怪物就比较费劲了
quoted from xingfriday

教俄語,婊子

Saturday, September 14, 2013 at 8:45:54 PM
0
ashwin2000 858 rep

awesome! really helping

Thursday, December 05, 2013 at 1:25:11 AM

Leave a comment

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