I’m adding the ability to create Animations that are applied when Events fire (e.g. Skill used, Trap triggered, ItemEvent fired, etc). This is mostly done, with some tweaks to zoom handling still needed. It’s built around a basic keyframe model, and currently supports;

  • Scale, Move, and Rotate animations.
  • ColorShift animations
  • All Animations can be applied to either the Target (e.g. the Player) or can specify a Tile image to display and animate
  • LinkedAnimations. This’ll come in handy for most complex animations later
  • Both performer and target animations; e.g. if an Event fires on KilledActor, you can specify separate Animations to apply to both the killer and the victim.

Here’s an example of an Animation that smoothly color shifts to green and back again over 2 seconds.

  <Animation Id="GreenTint">
    <TargetAnim>
      <ColorShift StartTick="0" EndTick="1000" StartColor="255,255,255" EndColor="0,255,0" Easing="Linear"/>
      <ColorShift StartTick="1000" EndTick="2000" StartColor="0,255,0" EndColor="255,255,255" Easing="Linear"/>
    </TargetAnim>
  </Animation>

And here’s a much more complex animation that leverages all of the supported features:

  <Animation Id="MoveTest">
    <TargetAnim>
      <LinkedAnimation RefId="RedToGreenRotate"/>
      <Scale StartTick="0" EndTick="1000" StartScale="1" EndScale="4"/>
      <Scale StartTick="1000" EndTick="5000" StartScale="4" EndScale="1"/>
    </TargetAnim>
    <TileAnim TileId="RingOfFire" Render="UnderTarget">
      <ColorShift StartTick="0" EndTick="2500" StartColor="255,255,255,128" EndColor="255,255,255,255" Easing="Linear"/>
      <ColorShift StartTick="2500" EndTick="5000"  StartColor="255,255,255,255" EndColor="255,255,255,128" Easing="Linear"/>
      <Rotate StartTick="0" EndTick="2000" StartDegrees="0" DegreesPerSecond="720"/>
      <Scale StartTick="0" EndTick="2000" StartScale="1" EndScale="3"/>
      <Rotate StartTick="2000" EndTick="5000" StartDegrees="0" DegreesPerSecond="360"/>
      <Scale StartTick="2000" EndTick="5000" StartScale="3" EndScale=".5"/>
    </TileAnim>
    <TileAnim TileId="RingOfFire" Render="UnderTarget">
      <LinkedAnimation RefId="ShakingSparkles"/>
      <ColorShift StartTick="0" EndTick="5000"  StartColor="00,255,255" EndColor="0,255,255" Easing="Linear"/>
      <Scale  StartTick="0" EndTick="5000" StartScale="1" EndScale="1"/>
      <Rotate  StartTick="0" EndTick="5000" StartDegrees="0" DegreesPerSecond="-180"/>
    </TileAnim>
  </Animation>

Here’s what the animation above looks like part-way through:

With this I can create some pretty complex animations, but I’d still like to add:

  • Particle animation support
  • Basic easing in and out.

Code drop tomorrow after I get the zoom handling fixed in Animations.

Advertisements