tmlib.js の AnimationSprite を使ってコマ送りアニメーションさせてみよう

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

tmlib.js の最新版には AnimationSprite と SpriteSheet というクラスが定義されています. これらのクラスを使う事で ActionScript ライクにコマ送りアニメーションさせることができます.

幾つかサンプルを用意しましたのでよかったら参考にしてください.

Table of contents

tmlib.js って何?

そもそも tmlib.js って何って方のために軽く紹介. 簡単に言うとゲームやツールを簡単に作るための JavaScript ライブラリです.

詳しくは下記のリンクにて

  • tmlib.js とは
    • 以前, 勉強会で発表させていただいたスライドです.
  • GitHub
    • tmlib.js は GitHub で管理しています.
  • Documents
    • こちらのドキュメントで機能を把握することができます.
  • 【TechBuzz】tmlib.js hackthon #1
    • 近々ハンズオンやります! みんなで tmlib.js を使ってゲーム作りましょう♪

up

SpriteSheet って何?

SpriteSheet(スプライトシート) っていうのは, 複数の画像を並べて 一枚の画像にしたものを言います.

活用例としては, 下記の画像のようにアニメーション1コマ1コマの画像を並べておき, それを順々に表示することで簡単にアニメーションさせることができます.

crash

パラパラ漫画の要領ですね.

そしてこういったアニメーションを簡単にできるようにするのが 今回紹介する AnimationSprite というクラスです!!

AnimationSprite を使ったサンプル

まずは「こういったことが出来ますよ」っというのを 実際のサンプルを見て理解していただけたらと思います.

ペンギン♪

次々とペンギンが出現するサンプルです. カワイイよ♪

爆発エフェクト

爆発エフェクトです. 無限ループアニメーションするように作ってあります. また, タッチ or クリックすると爆発が追加されます.

走る人

走る人です. はい, 走る人です.

Running Grant

Easel.js からお借りした素材を使ってみました. タッチするとジャンプします.

3D もどき – tmlib.js

スプライトシートで 3D を再現.

up

AnimationSprite の使い方

上のサンプルの爆発エフェクトを例に解説していきます. 基本的に AnimationSprite は Easel.js の BitmapAnimation とほぼ同じ方法で使う事ができます.

SpriteSheet を生成しよう

まず画像のコマのサイズやコマ順番を制御する SpriteSheet というクラスを生成します.

    var ss = tm.app.SpriteSheet({
        image: "crash",
        frame: {
            width: 64,
            height: 64,
            count: 64
        },
        animations: {
            "crash": [0, 32, "crash"],
            "hoge": [32, 0, "crash", 5],
        }
    });

引数には object を受け取ります.

  • image … 画像を指定します. 今回は爆発エフェクトの画像を指定しています.
  • frame… 1コマの幅, 高さとコマ数を指定します.
  • animations … アニメーションを指定します.

アニメーションは, key: value の形で複数指定することができ, key にはアニメーション名, value には [開始コマ数, 終了コマ数, 次に再生するアニメーション, アニメーションの間隔] という形で指定します.

AnimationSprite を生成しよう

次に AnimationSprite を生成します. これが実際に表示する要素になります.

var createCrashSprite = function(x, y) {
    var crash = tm.app.AnimationSprite(128, 128, ss);
    crash.position.set(x, y);
    crash.gotoAndPlay("crash");
    // crash.gotoAndStop("hoge");
    crash.blendMode = "lighter";
    
    return crash;
}

AnimationSprite 初期化時の引数は下記の通りです.

tm.app.AnimationSprite(幅, 高さ, SpriteSheet);

生成したら, gotoAndPlay メソッドでアニメーションを再生します.

crash.gotoAndPlay("crash");

引数にはアニメーション名を指定します. 今回は crash アニメーションを指定しています. また次のアニメーションにも crash を指定しているので無限に再生されます.

シーンに追加して表示しよう

あとは tm.app.Sprite や tm.app.Shape と同じように位置を指定したり シーンに追加すれば表示されます.

this.addChild(crash);

up

Reference

素材は, @FumioNonakaさんのブログ『FumioNonaka.com』のものを使用させて頂きました.

up

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT