はじめに。

Swipeは中島聡氏により開発されたオープンなコンテンツ・プラットフォームです。
画像を組み合わせたマンガ、動画、svgで書かれたvectorなどを表示、動作させることができます。マンガ、取扱説明書、プレゼンテーションツールなどなど、様々な用途で利用できます。

１回目「JavaScript版のSwipe Engine、swipejsを使う」はこちら。
http://qiita.com/isamua/items/5d40558fbed7f90b34e7

２回目「swipejsで画像のスライドショーを作成する」はこちら
http://qiita.com/isamua/items/5021c750b6e8383c82a6

３回目「swipejsのスライドショーでページめくりを変えて遊ぶ」はこちら
http://qiita.com/isamua/items/37cb69a1bd2eaa549d3f

4回目「swipejsで画像を動かして、次世代マンガを作る。」はこちら
http://qiita.com/isamua/items/291080fff9118ddfd628

５回目「swipejs timingでアニメーションを制御する」はこちら
http://qiita.com/isamua/items/85184662545ac0887a3d

６回目「swipejsで動画を再生。」はこちら
http://qiita.com/isamua/items/8667ea3fec0df002afe0

スプライト画像を使ってキャラを動かす。

今回は、スプライト画像を使ってキャラを動かします。この方法でドラクエやマリオなどのゲームでキャラクターが歩いている様子を表現できます。

まずはスプライト画像を用意します。今回はiOS版のSwipe Engineに入っているサンプルの画像を使いました。

それぞれ上下左右に歩いているキャラクターの画像が14コマづつ用意されています。
合計14x4個の画像があります。これは後でsliceで指定します。ご自身で用意したオリジナルのスプライト画像を使う場合には、縦と横の画像数をこのsliceで指定してください。
このキャラクターを使って画面を1周、キャラクターを歩かせます。まずは完成品のswipeファイルです。

{
    "dimension":[576,1024],
    "pages": [
        {
            "elements": [
                {"text":"sprite"}
            ]
        },
        {
            "transition" : "replace",
            "duration" : 0.4,
            "elements": [
                { "x":0, "y":0, "w":192, "h":288,
                  "sprite":"chara_walk.png",
                  "slice":[14, 4], "slot":[0,2],
                  "loop":{ "style":"sprite", "count":3 },
                  "to":{ "translate":[440,0] } }
            ]
        },
        {
            "transition" : "replace",
            "duration" : 0.6,
            "elements": [
                { "x":440, "y":0, "w":192, "h":288,
                  "sprite":"chara_walk.png",
                  "slice":[14, 4], "slot":[0,0],
                  "loop":{ "style":"sprite", "count":4 },
                  "to":{ "translate":[0,700] } }
            ]
        },
        {
            "transition" : "replace",
            "duration" : 0.4,
            "elements": [
                { "x":440, "y":700, "w":192, "h":288,
                  "sprite":"chara_walk.png",
                  "slice":[14, 4], "slot":[0,1],
                  "loop":{ "style":"sprite", "count":3 },
                  "to":{ "translate":[-440,0] } }
            ]
        },
        {
            "transition" : "replace",
            "duration" : 0.6,
            "elements": [
                { "x":0, "y":700, "w":192, "h":288,
                  "sprite":"chara_walk.png",
                  "slice":[14, 4], "slot":[0,3],
                  "loop":{ "style":"sprite", "count":4 },
                  "to":{ "translate":[0,-700] } }
            ]
        }
    ]
}

解説

まずは左上から右上へ右向きに歩かせます。

x, yで初期位置、w, hで表示させるキャラの大きさを指定します。

                { "x":0, "y":0, "w":192, "h":288,

スプライト画像のurlを指定します。

                  "sprite":"chara_walk.png",

スプライト画像に含まれる画像の数をsliceで、最初に表示する画像をslotで指定します。横14、縦4つの画像だったので14,4を指定、最初は左から右に移動する画像を表示させるので3行目(0オリジンなので2)の最初の画像(0)をslotに指定します。

                  "slice":[14, 4], "slot":[0,2],

loopタグでアニメーションを指定します。今回は"style":"sprite"として、3回繰り返します。

                  "loop":{ "style":"sprite", "count":3 },

横方向にtoで動かします。

                  "to":{ "translate":[440,0] } }

まとめると、このようになり、左から右にキャラが移動するようになります。

        {
            "transition" : "replace",
            "duration" : 0.4,
            "elements": [
                { "x":0, "y":0, "w":192, "h":288,
                  "sprite":"chara_walk.png",
                  "slice":[14, 4], "slot":[0,2],
                  "loop":{ "style":"sprite", "count":3 },
                  "to":{ "translate":[440,0] } }
            ]
        }

同様に上から下に動かします。変更点は初期位置と、slotとtranslateです。slotで使う画像を変更、slotとtranslateで動く場所を変えています。
移動する距離が横より縦の方が長いので、countとdurationも変えて調整しています。

        {
            "transition" : "replace",
            "duration" : 0.6,
            "elements": [
                { "x":440, "y":0, "w":192, "h":288,
                  "sprite":"chara_walk.png",
                  "slice":[14, 4], "slot":[0,0],
                  "loop":{ "style":"sprite", "count":4 },
                  "to":{ "translate":[0,700] } }
            ]
        }

同様に下を左から右に動かしています。

        {
            "transition" : "replace",
            "duration" : 0.4,
            "elements": [
                { "x":440, "y":700, "w":192, "h":288,
                  "sprite":"chara_walk.png",
                  "slice":[14, 4], "slot":[0,1],
                  "loop":{ "style":"sprite", "count":3 },
                  "to":{ "translate":[-440,0] } }
            ]
        }

同様に下から上に動かしています。

        {
            "transition" : "replace",
            "duration" : 0.6,
            "elements": [
                { "x":0, "y":700, "w":192, "h":288,
                  "sprite":"chara_walk.png",
                  "slice":[14, 4], "slot":[0,3],
                  "loop":{ "style":"sprite", "count":4 },
                  "to":{ "translate":[0,-700] } }
            ]
        }
    ]
}

完成したサンプルはこちら。

http://www.swipejs.net/sample7/sample1.html
http://www.swipejs.net/sample7/sprite.swipe

codepenでのサンプルはこちら。
http://codepen.io/isamua/full/ObRRve/