Day 33: Particle support added to the data-driven Animation system

Filed under: Roguelike — Leave a comment

April 12, 2011

This drop includes support for Xml-based particles as part of the Animation system. I’m not 100% happy with the implementation, but particles and animation isn’t where I’m looking to innovate ;-). I am happy with how the Particle animations integrate in with the target and tile animations; particle systems can leverage the same scale and move (and to a lesser extent rotate) transforms that the other Animations types support. This’ll allow more involved animations later when I get around to creating them…

Particle Animations

I adopted and adapted the particle system from the Xml-driven particle sample up on create.msdn.com (here). The short version:

ParticleEmitter: Emits Particles (surprise!). This manages how often particles are emitted, what direction they’re emitted in, and their starting position. Multiple forms of emitters are supported: Cone, Circle, and Rectangle. For Circle and Rectangle emitters, you can define whether particles should originate within the emitter shape or on the edge of the shape. You can also define whether Particles should radiate outward from the center of the shape or in random directions.

ParticleSystem: Once Particles are emitted by a ParticleEmitter, the ParticleSystem manages them – so things like gravity/wind and ColorShifting or particle Scale Animations are managed by the ParticleSystem.

ParticleMgr: Single instance object that keeps track of all ParticleSystems and ParticleEmitters, keeping them alive and removing them when they’re done. This is the object with which the main game loops (update/draw) interact.

Defining Particle animations

These are defined in the same fashion as other data-driven animations; via Xml. Here’s an example of a simple particle animation that emits then in a cone:

  <Animation Id="BlueSparkles-Cone">
    <ParticleAnim Type="Cone" StartTick="0" EndTick="5000" TileId="Bluestar" NumParticlesRange="5,10" Render="UnderTarget"
                     DirAngleRange="45, 90" InitialSpeedRange="120,200"
                     AccelerationMode="EndVelocity" EndVelocity="0" RotSpeedRange="-90, 90" LifetimeRange="1,3" SizeRange=".35,.5">
    </ParticleAnim>
  </Animation>

Since the particles can tie into the transforms, you can do things like have the Cone emitter above rotate as it emits particles by just adding a Rotate animation:

  <Animation Id="BlueSparkles-Cone">
    <ParticleAnim Type="Cone" StartTick="0" EndTick="5000" TileId="Bluestar" NumParticlesRange="5,10" Render="UnderTarget"
                     DirAngleRange="45, 90" InitialSpeedRange="120,200"
                     AccelerationMode="EndVelocity" EndVelocity="0" RotSpeedRange="-90, 90" LifetimeRange="1,3" SizeRange=".35,.5">
      <Rotate StartTick="0" EndTick="5000" StartDegrees="0" DegreesPerSecond="180"/>
    </ParticleAnim>
  </Animation>

Here’s another example of a particle Animation which emits particles in a rectangle shape and applies a colorshift animation to them:

  <Animation Id="FireRect">
    <ParticleAnim Type="Rect" Area="-80, -80, 160, 160" StartTick="0" EndTick="5000" TileId="redglow" NumParticlesRange="15,20" Render="UnderTarget"
                     InitialSpeedRange="0,10" Gravity="0, -300"
                     AccelerationMode="EndVelocity" EndVelocity="0" RotSpeedRange="-90, 90" LifetimeRange="1,1" SizeRange=".5,1.5">
      <ColorShift StartTick="0" EndTick="3000" StartColor="255,255,255" EndColor="0,255,0"/>
      <ColorShift StartTick="3000" EndTick="5000" StartColor="0,255,0" EndColor="255,255,255"/>
    </ParticleAnim>
  </Animation>

And just for fun, here’s a complex animation:

  <Animation Id="BlueTornado">
    <TargetAnim>
      <ColorShift StartTick="0" EndTick="5000" StartColor="0,0,255" EndColor="0,0,255"/>
      <LinkedAnimation RefId="BlueSparkles"/>
    </TargetAnim>
    <ParticleAnim StartTick="0" EndTick="5000" TileId="Bluestar" NumParticlesRange="5,10" Render="UnderTarget"
                   DirAngleRange="0, 359" InitialSpeedRange="120,200"
                   AccelerationMode="EndVelocity" EndVelocity="0" RotSpeedRange="-90, 90" LifetimeRange="1,3" SizeRange=".15,.5"/>
    <TileAnim TileId="RingOfFire2" Render="UnderTarget">
      <ColorShift StartTick="0" EndTick="2500" StartColor="255,255,255" EndColor="0,255,255"/>
      <ColorShift StartTick="2500" EndTick="5000" StartColor="0,255,255" EndColor="0,0,255"/>
      <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=".1"/>
    </TileAnim>
    <TileAnim TileId="RingOfFire2" Render="UnderTarget">
      <ColorShift StartTick="0" EndTick="2500"  StartColor="0,255,255" EndColor="0,0,255"/>
      <ColorShift StartTick="2500" EndTick="5000"  StartColor="0,0,255" EndColor="0,255,255"/>
      <Scale  StartTick="0" EndTick="5000" StartScale="1" EndScale="1"/>
      <Rotate  StartTick="0" EndTick="5000" StartDegrees="0" DegreesPerSecond="-180"/>
    </TileAnim>
  </Animation>

I’ve created a video that demonstrates what those animations (and others) look like. Note that to demo this I just added a few skills to the Skills.xml file and set each Skill’s SelfAnimation attribute to one of the Animations in Animations.xml: