スプライト シート コンポーネント

スプライト シート コンポーネントを使用すると、1 つの画像ソースファイルで、スプライト アニメーションを作成したり、画像スプライトを個別に表示したりできます。
  

アニメーションの作成に使用される 8 つのスプライトを含むスプライト シート。各スプライトは、アニメーションの一部としてではなく、単独で表示することもできます。

プロジェクトにスプライト シート コンポーネントを追加するには:

  1. [コンポーネント] パネル、[その他] フォルダの順に開きます。
  2. スプライト シート コンポーネント をステージにドラッグします。
  3. [プロパティ] パネルの [スプライト シート] プロパティ セクションで、[ソース] フィールドにスプライト シート(画像ファイル)の URL を入力します。ソースファイルがローカルにある場合は、フィールドで参照ボタン をクリックして、パソコンのファイル システムからファイルを選択します。
  4. 表示するスプライトの X オフセットY オフセットフレーム幅フレーム高さを入力します。アニメーションを作成する場合、このスプライトはアニメーションの最初のフレームに表示されます。
  5. スプライト シートの使用目的に応じて、他のスプライトを表示する手順またはスプライト アニメーションを作成する手順を実施します。

    他のスプライトを表示するには:

    1. 他のスプライト シート コンポーネントを追加します。
    2. 同じソースを使用するように新しいコンポーネントを設定し、このコンポーネントで表示するスプライトのオフセットとフレームの幅および高さを指定します。

    スプライト アニメーションを作成するには:

    1. スプライト シート コンポーネントの [プロパティ] パネルで、[詳細プロパティ] を展開します。
    2. アニメーションのフレーム数を入力します。スプライト シート コンポーネントではフレームごとに 1 つのスプライトが表示され、各スプライトのサイズは同じであると見なされます。
    3. アニメーションが自動的に再生されるようにするには、[自動再生] チェックボックスをオンにします。[スプライト シート] > [再生] または [アニメーションを切り替え] アクション(後述)をイベントに設定して、アニメーションをトリガーすることもできます。

プロパティ

プロパティ 説明
名前 コンポーネント名。
ソース スプライト シートとして使用する画像の URL。動的データにバインドできます。
X Offset(X オフセット) スプライト シートの左端からスプライトまでのオフセット(ピクセル単位)。
Y Offset(Y オフセット) スプライト シートの上端からスプライトまでのオフセット(ピクセル単位)。
フレーム幅 スプライトの幅(ピクセル単位)。
フレーム高さ スプライトの高さ(ピクセル単位)。
位置揃え

コンポーネント内のスプライトの位置を指定します。

  • center(中央)
  • bottom(下端)
  • bottom left(左下)
  • bottom right(右下)
  • left(左端)
  • right(右端)
  • top(上端)
  • top left(左上)
  • top right(右上)
スケーリング

コンポーネントとサイズが異なるスプライトを表示する方法を指定します。

  • 画像が収まるようにサイズ変更
  • 画像が収まるように切り抜く
  • なし
  • 画像が収まるように拡大

詳細プロパティ

詳細プロパティは、スプライト アニメーションの設定に使用します。コンポーネントの [プロパティ] パネルで、[詳細プロパティ] の横にある展開アイコン をクリックして、次のプロパティを編集します。

プロパティ 説明
Number of Frames(フレーム数) アニメーションを構成するフレームの数。スプライト シートに含まれるスプライトの数を超える値を入力すると、アニメーションの最後に空白のフレームが挿入されます。
Duration(長さ) 各フレームの再生時間(ミリ秒単位)。
Number of Loops(ループの回数) アニメーションを繰り返す回数。アニメーションを連続で繰り返す場合は、0 に設定します。
自動再生 オンにすると、アニメーションが自動的に再生されます。
End on frame one(フレーム 1 で終了) オンにすると、アニメーションは最後のループの後、最初のフレームで終了します。
Reverse(逆順) オンにすると、アニメーションが逆再生されます。

イベントとアクション

スプライト シート コンポーネントによって送信されるイベント

次のスプライト シート コンポーネントのイベントに基づいて、その他のアクションをトリガーできます。

イベント 説明
一時停止 アニメーションが一時停止されると送信されます。
終了 アニメーションが終了すると送信されます。
再生開始 アニメーションの再生が開始されると送信されます。
最初から再生 アニメーションの再生が再度開始されると送信されます。

[イベント] ダイアログで上記のイベントのいずれかを選択するには、スプライト シート コンポーネントをターゲットとして設定します。

スプライト シート コンポーネントによって実行されるアクション

他のイベントによって、次のスプライト シート コンポーネントのアクションをトリガーできます。

アクション 設定項目
新しいアニメーションを作成
  • X オフセット - スプライト シートの左端からスプライトまでのオフセット(ピクセル単位)。
  • Y オフセット - スプライト シートの上端からスプライトまでのオフセット(ピクセル単位)。
  • フレーム幅 - スプライトの幅(ピクセル単位)。
  • フレーム高さ - スプライトの高さ(ピクセル単位)。
  • Frames(フレーム) - アニメーションを構成するフレームの数。
  • Duration(長さ) - 各フレームの再生時間(ミリ秒単位)。
  • Loops(ループ) - アニメーションを繰り返す回数。アニメーションを連続で繰り返すには、0 に設定します。
  • 自動再生 - オンにすると、アニメーションが自動的に再生されます。
  • Reverse(逆順) - オンにすると、アニメーションが逆再生されます。
再生 現在の停止位置または一時停止位置からアニメーションを開始します。
一時停止 現在のアニメーションを一時停止します。
アニメーションを切り替え アニメーションの再生と一時停止を切り替えます。
最初から再生 最初のフレームからアニメーションを開始します。
戻る アニメーション内の 1 つ前のフレームを表示します。
進む アニメーション内の 1 つ後のフレームを表示します。
フレームに移動 指定したフレームを表示します。

[イベント] ダイアログで上記のアクションのいずれかを選択する場合は、スプライト シート コンポーネントをレシーバーとして設定します。

イベントを設定する方法をご確認ください。

プレビュー

ソース、オフセット、フレームの幅と高さを指定すると、Google Web Designer のステージにスプライト シート コンポーネントの静的プレビューが表示され、スプライトが正しく設定されたかどうかを確認できます。

スプライト アニメーションは、Web Designer のインターフェースではプレビューできません。スプライト アニメーションの再生を確認するには、右上隅の [プレビュー] ボタンをクリックして、お使いのブラウザでドキュメントをプレビューしてください。

この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。