What are transitions?
transitions are animations that make the game seem smooth and graphically pleasing. they play a HUGE role in aesthetics. some games with really good transitions are:
sadly twisty arrow is broken though:(
Fade In/Out
this is a very easy transition that looks smooth. all you have to do is:
when game starts {
repeat times 20 { // can be any number as long as there’s a ratio between this and the next block
set invisibility percent (self invisibility as a percent) + 5) // can be -5 if you want to fade in, +5 is fade out
}
}
a few things to keep in mind:
- depending on the speed you want it to fade in, change the repeat times and invisibility block—make sure that when both numbers (5 and 20 in this case) are multiplied, their absolute value (value as a positive number) is 100 so they are fully faded in/out
- you can use min/max math operators to do this as well. I prefer the example I gave but by doing:
when 7 = 7 {
set invisibility ((self invisibility as a percent) - 5) max 0)
}
max takes the higher of the 2 numbers, min takes the lower of the 2 numbers.
Where this transition helps
this transition is great for:
- fading in/out text so you don’t see it change
- a dramatic fade in/out
Enlarging Circle
again, another easy transition that looks very smooth. the code for it is:
when game starts {
set size percent 0
set image circle
set color red // can be whatever color
repeat times 180 {
set size (self size as a percent) + 50 // lower number = slower transition
}
}
you can also use different images, but I find the square the most aesthetically appealing.
Where this transition helps
- great for a buildup to a start screen
- when transitioning between certain scenes in a project
The Slide
this is a great transition for getting text out of the way smoothly. here’s the code:
when game starts {
set position x 512 y 384
repeat times 50 {
set position x (self x position) + (self horizontal velocity) y (self y position) // can be done with y too, just using x as an example
increase (self horizontal velocity) by 1 // can also be -1 to slow down
}
}
it may take a few tries to get it the right velocity if you want it to slow down, but it’s a relatively easy trick.
Where this transition helps
- moving text out of the way (e.g. in a start screen)
- transition between game scenes
Throwaway
this is one of my favorite transitions because it looks really cool and is easy to make. the code for it:
when game starts {
set (self vertical velocity) to 10
repeat times 80 {
set position x (self x position) y (self y position) + (self vertical velocity)
increase self vertical velocity by -1
}
}
when game starts {
repeat times 80 {
set size percent (self size as a percent) - 1
}
}
notice how I have the size and positioning blocks in different rules so that they take 1 frame combined to load. this makes it seem smoother.
Where this transition helps
- transition from a start screen to gameplay
- a win screen with a replay button
Width/Height Snapping/Enlarging
while what I call this transition may seem weird and complex, this is quite an easy transition to do.
when game starts {
set width 0 height 100
repeat times 20 {
set width (self width + 5) height (self height)
}
}
this is very versatile and can be done with height, as well as making is seem like it’s being squished.
Where this transition helps
- a coin animation (continuously do this so it “spins”)
- closing text
Submit your own transition
these are the main transitions I remember off the top of my head, if you know any other transitions, here’s a basic format you can type your transition into—after you do so, I’ll ask the leaders to edit it in:)
Form
Transition Name
quick description/difficulty level
code/screenshot of code
some tips for the transition
Where this transition helps
- bullets for where it helps
- more bullets
Tips for triggering transitions
try having a variable set to 1 for when you want the transition to happen.
this way, you can make sure that other code doesn’t happen while a transition is happening, like:
when self is tapped {
check once if transition ≠ 1 {
destroy
}
}
make sure the transition looks smooth
because that’s the point of transitions, smoothness. if it looks laggy try making it so the object takes 1 frame to change (if that makes sense)
that covers it I think, if you can’t figure out a transition or a transition breaks you project feel free to @ me for help:)
- very helpful tutorial, it taught me something
- very helpful tutorial even though I knew this all already
- not very helpful tutorial, I’m confused
0 voters
hope this helped!
(omtl was tagged)