Animated Images: end_frame, frame_skips, image_templates

[avanwinkle]

This PR adds new functionality for animated images!

Image widget end_frame

The new end_frame property of images can be used to animate an image to a certain frame and then hold the animation. It can be used with the standard image animations configuration, and supports placeholder values.

- type: image
  image: reelfinal_1k
  auto_play: false
  start_frame: 90
  animations:
    score_reel_player_score_player1:
      - property: end_frame
        value: (1k_frame)
        duration: 0

Image Asset frame_skips

Image assets can include a list of frames to skip, and when the image animation is running the selected frames will be skipped unless the image has an end_frame inside the skip bounds. This allows more customization of animated sprites transitioning between animations, and for virtual score reels allows a nice "bounce" animation on the arrival of a number but skips the bounce when rolling past numbers.

images:
  reelfinal_1k:
    file: images/reelfinal.gif
    frame_skips:
      - from: 2
        to: 10
      - from: 11
        to: 19
      - from: 20
        to: 28

In this example, the animating image will skip frames 3-9, 12-18, and 21-27 when it plays. Unless the image was animating to end_frame 6, in which case it would skip 12-18 and 21-27 but play through from 2 to 6.

Image Asset image_templates

This new configuration option allows Image configurations to be re-used for multiple image assets. This is valuable for defining multiple assets from an identical image without having to re-type a lot of verbose config code (especially frame skips).

image_templates:
  reel:
    load: preload
    frame_skips:
      - from: 2
        to: 10
      - from: 11
        to: 19
      - from: 20
        to: 28
      - from: 29
        to: 37
      - from: 38
        to: 46
      - from: 47
        to: 55
      - from: 56
        to: 64
      - from: 65
        to: 73
      - from: 74
        to: 82
      - from: 83
        to: 1

images:
  reelfinal_1k:
    file: images/reelfinal.gif
    image_template: reel
  reelfinal_100:
    file: images/reelfinal.gif
    image_template: reel
  reelfinal_10:
    file: images/reelfinal.gif
    image_template: reel

For reasons related to asset management startup, the file property is not supported in the template and must be provided in the asset definition itself. Overcoming this requires much more code than it's worth 😛

[jabdoa2]

LGTM! Well done!