[s2If current_user_can(access_s2member_level1)]

Sprite.jsはSpriteを使ってアニメーションをスムーズに描画するライブラリ。

[/s2If]

Sprite.jsはJavaScript製のオープンソース・ソフトウェア。JavaScriptを使ってゲームを作る場合、キャラクターの描画には二種類の方法が考えられるだろう。一つは画像を使う方法、もう一つはドット単位やCanvasを使って直接描画する方法だ。

32体の人形が歩き回るデモ

後者はあまりに面倒だ。だから大抵画像を使った方法を選択するはずだ。そんな時、歩いたりジャンプしたりするアクションごとに画像が分かれていると、予め読み込んでおくデータ数が増えてしまう。それを解決するのがSprite.jsだ。

Sprite.jsがユニークなのは、一枚の画像を使って一つのキャラクターを表現する所にある。つまりGoogleなどがよく使っている小さなアイコン画像を固めて一つの画像ファイルにし、CSSを使って表示場所を切り替えて描画するSpriteをアニメーションに使っているのだ。

キー入力で動くデモ

そのため一度読み込んでしまえばアニメーションがとてもスムーズに行われる。さらに矢印キーやキーボードによる上下左右への動きもサポートされている。JavaScriptによるゲーム、アニメーションを開発する際に便利に使えそうなソフトウェアだ。

MOONGIFTはこう見る

SpriteはWebサイトへのコネクション数を減らし、表示を高速化する効果がある。それをゲームにも使ってしまおうというアイディアがユニークだ。しかしその効果は大きい。アニメーションがとてもスムーズなのが分かるはずだ。

とは言えキャラクター全体の描画を切り替えるために動きが多ければ画像サイズも大きくなってしまうのが難点と言えそうだ。この点はゲームの種類や描画の細かさによって適切な手法を選択したい。

Test 32 sprites in a cycle animation（デモ）

　http://batiste.dosimple.ch/sprite.js/test_sprites.html

Test 32 sprites in a cycle animation（デモ）

　http://batiste.dosimple.ch/sprite.js/test_input.html

batiste/sprite.js - GitHub

　https://github.com/batiste/sprite.js