Korok.io

Animation

Korok supports two types of animation:

  • Sprite Animation
  • Tween Animation

Sprite Animation

Sprite animation also known as flip book animation consists of a series of key frames, each of which is still image. To run an animation, you should first create an animation, then play it with FlipbookComp component. FlipbookComp will only produce keyframe at a giving rate. A SpriteComp is needed to render the frame.

                        
func (m *MainScene) OnEnter(g *game.Game) {
    hero := korok.Entity.New()

    // SpriteComp
    sprite := korok.Sprite.NewComp(hero)
    sprite.SetSize(50, 50)

    xf := korok.Transform.NewComp(hero)
    xf.SetPosition(f32.Vec2{100, 100})

    // create a walk animation
    frames := []gfx.Tex2D{...}
    g.SpriteEngine.NewAnimation("walk", frames, true)

    fb := korok.Flipbook.NewComp(hero)
    fb.SetRate(.2)

    // play animation
    fb.Play("walk")
}
                        

The method creates an Entity with three components: SpriteComp, Transform and FlipbookComp. Then, the "walk" animation is created with frames and set the looping state to be true. fb.SetRate(.2) sets the playing rate, next frame will be displayed after 0.2 second. Call fb.Play("walk") to start the animation.

Tween Animation

Tween animation is usually used to animate numeric properties(float, vec2). In Korok, an Animator is used to track the state of Animation which is managed by the TweenEngine. Animation linearly produces the numbers from 0.0 to 1.0 during a given duration.

                        
func (m *MainScene) OnEnter(g *game.Game) {
    animator := g.TweenEngine.NewAnimator()
    animator.SetDuration(1).SetFunction(ease.Linear).
            SetRepeat(ween.RepeatInfinite, ween.PingPong).Forward()
}
func (m *MainScene) OnExit() {
    animator.Dispose()
}
                        

To access it's current value:

                        
    fmt.Print(animator.Value())
                        

By default, the Animator value ranges from 0.0 to 1.0. If tyou need a different range or a different data type, you can use a Tween to interpolate to a different range or data type. For example, the following Tween goes from 0 to 100:

                        
    f32Tween := ween.F32Tween{}
    f32Tween.Range(0, 100).Animate(animator)
                        

A Tween struct does not store any state. It provides the Value() method that applies the mapping function to the current value of the Animator(animaton).

                        
func (t *F32Tween) Value() float32 {
    return F32Lerp(t.from, t.to, t.am.Value())
}
                        

Helper method

The anim package provides some helper method to simplify the usage of Animator. For example:

                        
anim.OfVec2(&m.position, f32.Vec2{50, 50}, f32.Vec2{250, 50}).SetDuration(1).
    OnUpdate(func (r bool, f float32){
        log.Println("animation value..", f)
    }).OnComplete(func (r bool){
        log.Println("animaton end....")
    }).Forward()
                        

The method interpolate from {50, 50} to {250, 50} during 1 second. It creates an Animator internally and dispose it once completed.