はじめに。
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に入っているサンプルの画像を使いました。
それぞれ上下左右に歩いているキャラクターの画像が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/