3d Maps

This tutorial goes more in to the use of 3d and show how you can manipulate the 3d Camera to make a simple map while changing perspective.

The bottom layer is the 3d layer since we will be using a 2d overlay for the blur and text.

You will want a fairly large layout to accommodate for long views and higher z values. Luckily the map used is huge.

Reusing the camera dummy from a previous project allows us to use the Tween behavior to manipulate the 3d camera easier.

Basically we tell the camera to follow the dummy and use the behavior to modify it position and some values. With this method we place the dummy at the place and angle we want to start at.

Manipulating the 3d camera values directly is a little tricky so we use the object instance variables.

The camera just does one thing. Look this direction every tick.

The events:

+ System: Every tick

-> 3DCamera: Set camera position to (camdum.X, camdum.Y, camdum.ZElevation), look at (camdum.X+cos(camdum.Angle)×camdum.offsetx, camdum.Y+sin(camdum.Angle)×camdum.offsety, camdum.lz), up vector (0, 0, 1)

We cast a ray with our trig formula to set where the camera looks... every tick. Note the offsetx, offsety, and lz do the perspective changes.

+ System: On start of layout

-> Audio: Play music_fx_slow_paced_background_music_from_a_spaghetti.webm not looping at volume 0 dB (stereo pan 0, tag "fade")

-> System: Wait 1.0 seconds

-> camdum: Tween "" property Angle to 270 in 5 seconds (In Out Sinusoidal, destroy: No, loop: No, ping pong: No, repeat count: 1)

-> camdum: Tween "dist" value from 100 to 1 in 5 seconds (In Out Sinusoidal, destroy: No, loop: No, ping pong: No, repeat count: 1)

-> camdum: Tween "lookz" value from 45 to 0 in 5 seconds (In Out Sinusoidal, destroy: No, loop: No, ping pong: No, repeat count: 1)

-> System: Wait 1.0 seconds

-> camdum: Tween "move" property Position to 1604, 4236 in 15 seconds (In Out Sinusoidal, destroy: No, loop: No, ping pong: No, repeat count: 1)

-> System: Wait 20 seconds

-> Audio: Fade "fade" volume to -100 dB over 5 seconds, then stop

-> Sprite: Destroy

Tween the angle of the camera. Tween its perspective, and tween its xy. Note distance is a multiplier so the end value is one instead of zero.

Find the source here