The Ultimate Guide To Transitions

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)

23 Likes

Nice tutorial!
Transitions are very important for having cool games
I usually prefer to use cosine for transitions tho

7 Likes

Epic tutorial!!!

4 Likes

Oooh very nice tutorial!

I only knew a little bit about transitions, but this opened my mind up to other possibilities.

5 Likes

Awesome! I love your tutorials dude. :))

And guess what! There’s stuff in here I didn’t already know, so I learned something new.

Bookmarked for future reference.

4 Likes

This be very epic.

3 Likes

Very cool tutorial! I do animation, and like making stuff like this so I knew most of these, but still, super well made with nice explanations. Great job!

3 Likes

Thank you so much @Nobody this was super useful!

3 Likes

Awesome tutorial bro

4 Likes

Really cool, thanks @Nobody

1 Like

Nice job! I’ve done all of these, tho this was a nice reminder!

1 Like

Wow, another great tutorial of yours! Great job!

4 Likes

thanks everyone:)


could a lead (@PumpkinGirl you were seen last, may you?) add:

Submit your own transition

above the quoted text?

3 Likes

For the fade in and fade out part, I understand the code to fade in, but not to fade out. Help?

3 Likes

You subtract invisibility as a percent by the number (5 is given as an example).

4 Likes

Hmmmm…that ends me up with text that flashes

2 Likes

Maybe link the code?

2 Likes

If you used Nobody’s method, it would look like this:

Ah, I see the problem, it’s doing both at the same time. Maybe change it to this?

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)
}
  set FadeOut to 1
}
when FadeOut = 1 {
  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)
}
  set FadeOut to 0
}

Will it work now?

2 Likes

I was doing it a bit differently, so I’ll send the link:
https://c.gethopscotch.com/p/1117ykv7lu

2 Likes

Nice tutorial!
Well still I knew these things since a long time ago.
I am just too lazy to use fading.

2 Likes