How to fade sprites in and out?

Help
1

Hi, it’s my first post here. I’m prototyping a game where comic vignettes appear on top of the “screen” as the dialogue unfolds, so I’m using create_sprite, delete_sprite, and empty_sprites.

Is there a way to add a fade-in transition when creating a sprite and a fade-out when deleting it? Not sure what would be the best approach, so I’d be thankful for any tips.

By the way, thanks Liana for all your hard work and dedication in making this exceptional tool. That’s an enormous contribution to the hobby.

2

There’s no feature for it, but you could do it with a CSS animation. Just need to add a little wrapper function around your creation/deletion of sprites to add or remove CSS classes that would cause a CSS transition or animation to happen.

Only problem is it means the script will need to “pause” during it. But for example something like this might work… I haven’t tested but it should be possible to do something along those lines:

/** Makes the sprite animate opacity over 0.4s */
.fading-sprite {
  opacity: 1;
  transition: opacity 0.4s;
}
/** CSS classes to use when the sprite appears/disappears to trigger the animation */
.fading-sprite-start, .fading-sprite-end {
  transition: opacity 0.4s;
  opacity: 0;
}

Then in script

main:
  set data.FADING_DURATION 400
  set data.mySprite (run create_fading_sprite my_image 100 100)
  wait 5000
  run delete_fading_sprite $data.mySprite

create_fading_sprite image x y:
  var my_sprite (create_sprite $image $x $y)
  set my_sprite.cssClass "fading-sprite-start"
  // Wait for the next frame so the animation gets triggered
  wait 10
  set my_sprite.cssClass "fading-sprite"
  // Wait the duration of the animation
  wait $data.FADING_DURATION

delete_fading_sprite sprite:
  set sprite.cssClass "fading-sprite-end"
  wait $data.FADING_DURATION
  delete_sprite $sprite

See docs on CSS transitions and CSS animations.

Basically:

  1. Create a sprite
  2. Give it a class that is its starting state (opacity at 0)
  3. Give it a class with opacity 1 and a css animation
  4. Wait until animation is over
  5. When deleting the sprite, do the same in reverse

Other option would be to make a plugin to do this more nicely in javascript

1 Like
3

Wow, thanks for the lightning-fast response! The fade-in transition works, but there’s an error in the fade-out animation.

TypeError: Cannot read properties of undefined (reading ‘length’)
Script: delete_sprite $sprite
Label: delete_fading_sprite

The sprite remains on screen. I thought replacing “delete_sprite $sprite” for “empty_sprites” could work, but although this doesn’t prompt an error, it makes the sprite disappear without the fade-out transition. Any thoughts?

4

Hmm I forgot that you’d need a return in the create fading sprite function so it actually returns the value at the end… That variable is probably empty without it:

return $my_sprite

Also if that doesn’t work I know sometimes sprites had bugs when being in local variables created with Var so you could do a simpler test where you do it in global variable in data.something just in case. But adding the return to the creation function will probably make it work

1 Like
5

You nailed with the return and now it works like a charm. Thanks!