ALSpriteEditor


目次

1. 概要
2. 画面
3. 基本的な使い方
4. テクスチャアニメーション

第1章 概要

ALSpriteEditorとは、2D向けのスプライトとパーティクルアニメーションを編集するツールです。 現状、開発中のため必要最低限の事しかできませんが、簡単なアニメーションを組む事ぐらいは出来ます。 また、いろいろ使いにくいため大幅な改造を予定しています。

第2章 画面

ALSpriteEditorの画面は

  • プレビューウィンドウ

  • キーフレームウィンドウ

  • パラメータ編集ウィンドウ

  • プロジェクトウィンドウ

  • テクスチャウィンドウ

の五つに分かれます。

  • プレビューウィンドウ

    起動時には下部中央に存在します。 実際のアニメーションを確認するためのウィンドウです。 スクロールバーによるスクロールと、上部の倍率ウィンドウで表示倍率の変更が出来ます。

    なお、画面の右下、スクロールバーの角のボタンをクリックすると、 スクロール座標が原点に戻ります。

  • キーフレームウィンドウ

    起動時には上部に存在します。 ここに必要なスプライトやパーティクルなどを生成します。 スプライトやパーティクル、またダミーノードなどを含めてノードと呼びます。 編集するノードやフレームはここで選びます。

  • パラメータ編集ウィンドウ

    起動時には右下に存在します。 ここで、現在選択したノードのカレントフレームのパラメータを編集します。 パラメータには値そのものの他、キーフレームと補間方法の設定もすることが出来ます。

  • プロジェクトウィンドウ

    現在開いているプロジェクトに含まれているアニメーションを表示します。 一つのプロジェクトで複数のアニメーションを管理する事が出来ます。

  • テクスチャウィンドウ

    現在開いているテクスチャを表示します。

第3章 基本的な使い方

起動直後は一つのアニメーショングループがあるプロジェクトが存在します。 アニメーショングループ内に、スプライトやパーティクルを追加して使用します。 まず、上部にあるキーフレームウィンドウの左側で右クリックを行います。 ノードの追加というポップアップウィンドウが出るので、そこで追加するノードを選びます。 今回はスプライトを選びます。

スプライトを追加しても画面上にはあまり変化はありませんが、 これで右下のパラメータ編集ウィンドウが使えるようになります。 表示タブを選び、テクスチャの部分のボタンをクリックするとファイルオープンダイアログが開きます。 ここで表示させたい画像を選びます。

画像が表示されたら、アニメーションを設定します。 アニメーションはキーフレーム方式になっているので、パラメータを設定しキーを作っていきます。 キーを設定せずにパラメータを変更すると全フレーム共通の値変更になります。 一度キーを設定してからフレームを移動し、値を編集すると自動的にキーが追加されます。

試しに位置を移動させてみます。 まず、ウィンドウ上部の長さと書かれたテキストボックスにアニメーションの長さを設定します。 アニメーションのフレームは、その下のグリッドをクリックすると移動させる事が出来ます。 まずは0フレームに移動し、パラメータ編集ウィンドウで位置を変更し、キーのチェックを追加します。 これで0フレームのキーが設定されました。 その後、フレームを移動し、位置を変更します。 今度は自動的にキーのチェックがついたと思います。 この状態で、ウィンドウ上部の緑三角をクリックするとアニメーションが再生されます。

この時点では指定したキーになると座標がぽんと飛んだはずです。 これを補間するように移動させるためには、位置の部分の補間と書かれたドロップダウンで線形を選びます。 そうしてもう一度再生を行うと、今度は値がなめらかに変更されたはずです。

このように、基本はノードを追加し、パラメータを編集し、キーをつけるというのが基本的な使い方になります。

第4章 テクスチャアニメーション

スプライトでパターン変化アニメーションをつける場合は、元となる画像を少し工夫して作る必要があります。 具体的には、パターンを並べ、その分割数をファイル名で指定します。

横に4枚並べた画像なら Image@4.bmp のように、@マークの後ろに分割数を指定します。 縦横2枚ずつ、4枚の画像があれば Image@2_2.bmp と、横分割数_縦分割数と指定します。 なお、ファイル読み込み時に保存時と@以降のファイル名が変わっていた場合は自動的に変更後の画像を読み込みます。

このように指定した画像はロード時に自動分割され、 パラメータ編集ウィンドウのパターンNoの値を変更する事でパターンの切り替えが出来るようになります。