LoginSignup
2

More than 5 years have passed since last update.

swipejsのスプライトを使ってキャラクターを歩かせる

Last updated at Posted at 2016-11-16

はじめに。

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

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

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

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

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

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

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

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

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

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

chara_walk.png
それぞれ上下左右に歩いているキャラクターの画像が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/

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2