Home / Uncategorized / Spine Audio Control

Spine Audio Control

Previous Blog How to import Spine Animation to Kwik

Spine Audio

  • when the "animation" starts, onStart event is called back. So let's play audio.
  • touching the rocket set the "launch" animation and onStop of the "animation" and onStart of the "launch" is called back
  • during "launch" animation, "landOff" event is dispatched.

Here is the sample project to download

Lua

custom/components/page01/rocket_image_.lua has addEventListner and onXXX functions.

local spine = require("extlib.spine").new("rocket")

function _M:localPos(UI)
  local sceneGroup  = UI.scene.view
  local layer       = UI.layer

    layer.rocket = spine:newImageRect( _K.imgDir..imagePath, imageWidth, imageHeight)

    layer.rocket.imagePath = imagePath
    layer.rocket.x = mX
    layer.rocket.y = mY
    layer.rocket.alpha = oriAlpha
    layer.rocket.oldAlpha = oriAlpha
    layer.rocket.blendMode = ""
    layer.rocket.oriX = layer.rocket.x
    layer.rocket.oriY = layer.rocket.y
    layer.rocket.oriXs = layer.rocket.xScale
    layer.rocket.oriYs = layer.rocket.yScale
    layer.rocket.name = "rocket"

    layer.rocket:addEventListener("touch", function (event)
        if event.phase ~= "ended" and event.phase ~= "cancelled" then return end
        local state = layer.rocket.state
        local name = state:getCurrent(0).animation.name
        if name == "animation" then
        state:setAnimationByName(0, "launch", false)
        elseif name == "launch" then
        state:setAnimationByName(0, "animation", true)
        end
    end)

    layer.rocket.state.onStart = function(entry)
        UI.animName  = entry.animation.name
        UI.scene:dispatchEvent({name = "action_state_start", entry=entry })
    end

    layer.rocket.state.onInterrupt = function(entry)
        UI.animName  = entry.animation.name
        UI.scene:dispatchEvent({name = "action_state_interrupt", entry=entry })
    end

    layer.rocket.state.onEnd = function (entry)
        UI.animName  = entry.animation.name
        UI.scene:dispatchEvent({name = "action_state_end", entry=entry })
    end

    layer.rocket.state.onComplete = function (entry)
        UI.animName  = entry.animation.name
        UI.scene:dispatchEvent({name = "action_state_complete", entry=entry })
    end

    layer.rocket.state.onDispose = function (entry)
        UI.animName  = entry.animation.name
        UI.scene:dispatchEvent({name = "action_state_dispose", entry=entry })
    end

    layer.rocket.state.onEvent = function (entry, event)
        UI.animName  = entry.animation.name
        UI.eventName = event.data.name
        UI.scene:dispatchEvent({name = "action_state_event", entry=entry })
    end

    sceneGroup.rocket = layer.rocket
    sceneGroup:insert( layer.rocket)

end

Kwik

Variable

  • animeName and eventName receives the animation name and event name from Spine's animation state.

animName and eventName

Action

  • start, end and event actions are created.

state_start to play audio if "launch" animation starts

state_end to stop audio if "launch" ends

state_event to start aonther audio and play Kwik's linear animation if receiving "landOff" event

Spine

"landOff" event is set at frame 20.

Spine plugin support

you can preview animation with audio. You need to start java program to play your audio file and it communicates with Spine timeline.

Start Spine from the command line with --server 4567.

  • Windows: Spine.exe --server 4567
  • Mac: /Applications/Spine/Spine.app/Contents/MacOS/Spine --server 4567
  • Linux: ./Spine.sh --server 4567

Download and run the play.jar file:

You will need to have Java installed. When you click Play button on Spine timeline, the animation and aduio are played synclonised.