Scene Transition

While there is no set method to make scene transitions, you can still fake it without even having to make a new layout. This tutorial will show a simple way to fill the empty space and change the view.

Now this tut is a bit mathy, so you might be tempted to call it more advanced, but to make up for that we'll do a little less setup in the layout, and a lot more in events. 

A neat effect in the video is that the sprites all merge together by using the AlphaRamp shader on a layer. Basically the sprite has an outer blur, and when they get close to one another the fx extends the flat color together and sort of morphs them into a new shape.

First of all you need to memorize this formula:

x = X + cos(angle) * distance

y = Y + sin(angle) * distance

Now what this does is actually pretty simple. It takes a point and moves it somewhere else.

All you have to know is what angle it is from the original point, and how far.

For example if your starting point is in the middle of the layout and you wanted to make a circle around it you could take the starting angle of zero, and the distance of say 256.

Then just change the angle by one, adding one each time until you got to the whole 360 degrees.

On to the events.

+ System: On start of layout -> Text: Set Z elevation to -100 | Local number siz‎ = 0 ----+ System: For "e" from 0 to 360 -----> System: Set siz to 5+random(40) -----> System: Create object Sprite on layer 1 at (LayoutWidth÷2, LayoutHeight÷2), create hierarchy: False, template: "" -----> Sprite: Tween "in" property Position to Self.X+cos(LoopIndex)×(dist×2)+random(50), Self.Y+sin(LoopIndex)×(dist)+random(50) in 0.5 seconds (Linear, destroy: No, loop: No, ping pong: No, repeat count: 1) -----> Sprite: Tween "" property Opacity to 100 in 0.75 seconds (Linear, destroy: No, loop: No, ping pong: Yes, repeat count: 1) -----> Sprite: Set size to (10+siz, 10+siz) -----> System: Wait 0.5 seconds -----> Text: Set opacity to 100 -----> Text: Tween "" property Z Elevation to 0 in 2 seconds (Out Elastic, destroy: No, loop: No, ping pong: No, repeat count: 1) -----> System: Wait 2.5 seconds -----> Sprite: Tween "" property Opacity to 100 in 0.75 seconds (Linear, destroy: No, loop: No, ping pong: No, repeat count: 1) -----> Sprite: Tween "" property Scale to 20, 20 in 2 seconds (Default, destroy: No, loop: No, ping pong: No, repeat count: 1) -----> System: Wait 2 seconds -----> System: Set layer 0 background color to rgb(238, 114, 20) -----> System: Remove layer "Layer 1" -----> Text: Set font color to rgb(249, 232, 217) -----> Text2: Typewriter text "Enjoy The" over 0.15 seconds -----> Text: Set text to ""

To start we will be using a loop to create a bunch of sprites at a really low z in the center LayoutWidth/2, LayoutHeight/2, and then tell them to "tween" their position to make an ellipse, sort of. They are all set to move to random positions in that oval.

Then we tween the opacity back down and continue to the transition.

For that we change them all back to 100% opacity, and then scale them way up via tween.

When that is done the whole layer will be filled.

We don't need those objects sitting around so what we can do is set the bottom layer to the color of the sprites, and just delete the top layer, effect and its sprites all in one go.

Find the source here