ツクールMV スプライトの表示とアニメ

概要

スプライトを実際に画面に表示させる。

今回はスプライトの仕様として

でやっていこうかと思います。

スプライトの概念を見ておくとイメージしやすくなる…かも。

画像を用意

スプライトを作成するには兎にも角にも画像が必要です。

画像作成に使うツールはなんでもいいのですが、透過PNG出力が扱えるドロー系のアプリケーションがいいんじゃないかと思います。

…フリーウェアではFireAlpacaやメディバンペイントあたりは透過pngを扱えるみたいです。筆者はCLIPペイントを使っています。購入済みだったので…。別にドットエディタでもいいと思います。

出力が100x100だからといって、別に作業解像度もあわせたまま作業する必要はありません。

…というかツクールMVにおいて言えば、解像度がだいぶ上がっているためよほどクッキリした画作りを求めない限りは、作成サイズの2-3倍の解像度で作業し、出力時縮小するほうがうまくいく事が多いかなと思います。

というわけで、回るカードのようなものを素材として作りました。

スプライトは1枚のまとまった画像を切り出して1部分化してアニメをさせたほうが便利なので、この9枚の画像を連結します。

連結は「ImageMagick」というアプリケーションを使います。使い勝手はレガシーなコマンドラインアプリケーションですが、ファイルを連番にしておけば、1コマンドで連結と最適化をやってくれます。使い方はsakuraナレッジが詳しいと思います。

インストールして上記の9枚の画像のあるディレクトリに移動して(Windows環境の場合)「magick convert -append -background transparent card*.png sprite_card.png」みたいなコマンドを実行して、以下のような画像が得られるはずです。手作りしても構いませんがやる気を失うくらい面倒です。

既にアニメしそうな感じがしてきました。素材の作成はこんなもので良いでしょう。

素材の配置

作製した画像の配置先は、ツクールのプロジェクトからアクセスできる階層ならどこでもいいのですが、今回作製したスプライト画像はツクールの規格に沿ったものではないので、独自のディレクトリに配置しましょう。

今回はプロジェクトの画像ディレクトリ「img」の配下に「sprite」ディレクトリを作成し、その中に画像を配置しました。

別に「プロジェクト/img」配下である必要はありません。プロジェクトの配下なら基本的にどこでも読み出せます。

プラグインの作成

いよいよプラグインを作成して、画面上に出していきたいと思います。

イベントコマンドのスクリプトでも出来るかもしれませんが、そちらについては特に調べていないし本題ではないので特に触れません。

スプライトの挿入位置は、イベントコマンドの「ピクチャの表示」と同じ階層(キャラチップの上、ウィンドウの下)に当たる「createUpperLayer」に追加をします。

この処理に直接スプライトの詳細を描いてしまうのは良くないのですが、ここでは面倒なのでこの実装にしています。

より実践的に実装するなら、スプライトを挿入するための空スプライトを作製し、別途管理クラスで内容を制御しましょう。

さらにもう一つ良くない記述として、スプライトに直接プロパティ「_delay_」を足しています。コレも今回は面倒なのでスプライトに直接足しています。

実践的に行うなら、Spriteを継承したクラスを作成して追加しましょう。

(function() {

var cul = Spriteset_Map.prototype.createUpperLayer;
Spriteset_Map.prototype.createUpperLayer = function() {
    // 既存処理の呼び出し
    cul.call(this);
    // スプライトの作成
    sA = new Sprite();
    // ピクチャのロード、「img/sprite」の「sprite_card.png」を、色相変化なし、補完なしでロード。
    sA.bitmap = ImageManager.loadBitmap('img/sprite/', 'sprite_card', 0, false);
    // スプライトの初期マスクを設定、(スプライト画像のx=0,y=0を始点に、縦100:横100のマスクを設定
    sA.setFrame(0,0,100,100);
    // スプライト内の表示位置を設定
    sA.position.x = 400;
    sA.position.y = 300;
    // 画像の中央位置を設定0～1
    sA.anchor.x = 0.5;
    sA.anchor.y = 0.5;
    // 独自プロパティの設定
    sA._delay_ = 0; // コマ落としのためのディレイカウント
    // createUpperLayerのスプライトとして、生成したスプライトを追加
    this.addChild(sA);
};

// あとで処理を追加する位置

})();

このプラグインを導入してプロジェクトをテストプレイすると、画面中央あたり(適当に指定したので完全に中央ではない)に、カード画像が表示されるかと思います。

アニメーションに関する処理は一切入れていないため、当然このままでは動きません。

一定間隔でスプライトマスクが切り替わる処理を入れる必要があります。

先程のスクリプトの処理追加予定位置に、以下の処理を追加します。

コレもupdateに細かい処理を描いてしまっているので、本来は良くない実装です。

実際には、更新処理を実装した別クラスの更新用メソッドを追加する形になるでしょう。

// Scene_Map update に処理を追加する
var s_m_update = Scene_Map.prototype.update;
Scene_Map.prototype.update = function() {
    s_m_update.call(this);
	// 現在表示しているスプライト描画をしたフレームを加算
    sA._delay_++;
    // 描画フレームが3を超えた場合(スプライトを切り替えてから4フレーム目の場合)
    if (sA._delay_ > 3) {
        sA._delay_ = 0; // フレームカウントをリセット
        // スプライトのビットマップから画像の縦サイズを取得
        var maxH = sA.bitmap.height;
        // スプライトのフレームの枠の高さ開始位置を取得し、100を加算して次の画像を表示
        var frameY = sA._frame.y + 100;
        // フレームが画像を飛び出してしまうなら、先頭に戻す
        if (maxH <= frameY) {
            frameY = 0;
        }
        // スプライトのフレームを再設定し、画像を切り替える
        sA.setFrame(0,frameY,100,100);
    }
}

カードがくるくる回り始めたでしょうか。

スプライトのアニメーションの実装はこのような流れで実装されます。

ページのトップへ戻る