3D Star Map

  • 40 favourites

Attached Files

The following files have been attached to this tutorial:



Download now 190.26 KB


3,763 visits, 5,912 views



This tutorial hasn't been translated.


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.

I have been having a lot of fun reading through old forum posts recently, looking at examples, learning how to do various things.

Yesterday, I came across a post by Zetar asking about isometric projections back in January 2012. He wanted to make a 3D star map.

R0J0hound provided a simple example that did the math calculations. You can see that original example here: http://dl.dropbox.com/u/5426011/examples%208/zrotate.capx

Using that, Zetar made a 3D map - with the goal of being able to click on two stars to see how far apart they are. However, his formula for calculating distance wasn't working. (He was forgetting to square the results of subtracting each set of coordinates before doing the square root.)

So, I fixed the calculation, and then added a number of other features:

- you can now manually rotate the map with the mouse

- zoom in and out with the mouse wheel

- turn the auto rotate on and off

- I added a line that gets drawn between the two selected stars - representing the distance between them

- I added several webGL effects (glow, brightness, tint) to make the stars look more like stars

- made the stars fade and shrink as they rotate toward the back

- and I added a button to generate a new star map

The resulting 3D effect is quite beautiful! Once again the power of Construct 2 blows my mind! It isn't intended to do 3D, but with a little effort you can add simple 3D effects like this to your games.

You can see an example of the 3D star map running here: http://www.rieperts.com/games/StarMap/index.html

And the capx is available on the left.

I hope this inspires you to see how you can improve it, or come up with other 3D effects!

UPDATE - I knew the universe look a little skewed as it rotated, so I took a closer look at the old code and noticed the y coordinate was not getting adjusted properly when the stars were initially created.

So, I ended up re-writing most of the code and added several new features:

- it is now a proper isometric projection.

- there is a function to put stars in the corners of the universe so you can see where the limits are (and they are joined by lines).

- the map update function now uses the star's current y coordinate, so it is possible to have moving stars/planets/spaceships. (Before this it was just moving the y coordinate relative to where it first started, assuming the y coordinate would never change. But if you want to have anything moving within the universe as it rotates then the function needs to know where it currently is.)

- if several stars were overlapping when you tried to click on one it was trying to select all of them, now it just picks the first one.

- You can draw lines from star to star now (instead of just a line between the last two selected).

- the code that tries to change the z-order of the stars doesn't work, and I don't have time right now to fix that.

I left the original capx file there because I kind of like the look of the skewed universe. But I have added the fixed capx file for people who want try 3D effects with a correct isometric projection. (So use the StarMap-iso.capx for that.)

Demo of the fixed isometric file:http://www.rieperts.com/games/StarMapIso/index.html



Download now 190.26 KB

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