Creating 3D sprites and using them in Construct 2

0 favourites
  • 15 posts
From the Asset Store
Casino? money? who knows? but the target is the same!
  • Since I cannot search for '3D' to see if there are similar topics I decided to write one myself.

    Note that I have been using Construct 2 for less than a week, but have programmed in C++ with Allegro and I hope you won't be mad for my bad English.

    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

    I hope you liked this tutorial, and again sorry for my bad English.

    You can see a live example of the test game at my page.Martin2011-12-22 19:56:23

  • Thanks for this, Im constantly doing this ;D I love 3DWarehouse.

    You should have put this on the tutorial page though.

  • I figured that out after I posted the topic, sorry for that :)

  • Thx for your post! I never thought of making 2D-sprites using sketchup, it's simple and looks great! :)

  • Been doing this kinda thing for a while. It works well. :)

    Yer page doesn't work though.

  • Problem is, you need a new sprite for every angle :(

  • Problem is, you need a new sprite for every angle :(

    Not if your on a Static Screen.. lol..

  • sqiddster: What do you mean?

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • I mean that if you want to rotate an object, you need a new sprite for each angle so that the shadows and perspecitve, etc do not look off...

  • I moved to a better domain, that's why it doesn't work :D

  • Martin - why dont you repost this in the tutorial section so its easier to find even when this thread ages?

    FYI: A pretty cools software to compose 3D animation and export them as picture sequence can be found here:

    http://www.reallusion.com/iclone/

  • Martin - why dont you repost this in the tutorial section so its easier to find even when this thread ages?

    FYI: A pretty cools software to compose 3D animation and export them as picture sequence can be found here:

    http://www.reallusion.com/iclone/

    I have reposted it in the tutorial section <img src="smileys/smiley1.gif" border="0" align="middle">

  • Thank You <img src="smileys/smiley1.gif" border="0" align="middle" /> .This Helped Me

  • Click the link below if images are nor displayed

    scirra.com/tutorials/290/3d-sprites

  • Martin, its a very nice tutorial, thanks for share. Btw, I dont see the link for your site where we can find the example, is there a way you can provide us a capx file as example? Really appreciate that.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)