スプライトツール

複数の画像を組み合わせてアニメーションさせる「スプライト」を作成することができるツールです。
スプライトは、タイトル画面やメニュー画面での動く演出や、会話シーンでのキャストの表情変化などに使用できます。
リソース>スプライトも参考にしてください。

スプライトツール.png

各機能の説明

スプライトリスト

登録されているスプライトセット・モーションのリストが表示されます。

スプライトツール_スプライトリスト.png
 

スプライトプレビュー

作成中のアニメーションが再生されるエリアです。
スプライトリストでモーションを選択するとプレビューが表示されます。
プレビュー欄の上部にプレビューの各種設定がまとまっています。
なおプレビューの中心座標は(0,0)ですのでご注意ください。

スプライトツール_スプライトプレビュー.png
 

タイムライン

スプライトツール_タイムライン.png
 


セルの変化情報

タイムラインにて、「画面フラッシュ」以下のセルを選択すると、スプライトツール右側に表示されます。
ここでは選択したセルが存在するキーフレームの時点での、レイヤーの表示内容を設定することができます。

スプライトツール_セルの変化情報.png
 
スプライトツール_補間方法の選択.png
 

マスク

マスクは、マスクレイヤーに登録したイメージでその影響化にあるレイヤーを切り抜いて表示する機能です。
正方形や円といったマスクに使いやすい図形のイメージがreservedフォルダ>Primitiveにありますのでご活用ください。

マスク_アルファ値を反転.png
 

アニメーションデータの作成方法

ここでは、キャラクターの目パチ、口パクアニメの作成方法を例に、アニメーションデータの作成方法を説明します。

spritetool-jp.png

1.マスターメニューから「リソース管理」を開く。

2.2Dスタンプ→イメージを選択します。

3.「追加」をクリックし、任意の画像を選択してインポートを完了させます。ここではキャラクター本体、目パーツ、口パーツの3つをインポートします。

spritetool03.png
spritetool04.png

  

アニメーションする画像は、「テクスチャの設定」で「スライス」をCountSliceに設定、縦横をアニメパターンの数に分割します。

この場合は横分割数が2、縦分割数を7と設定します。会話シーンで利用するデータは、テクスチャの設定のSRGBのスイッチをOFFにしてください。

5.「2Dスタンプ」→「スプライト」を選択します。

6.「追加」をクリックすると画像選択画面が開くので、ベース画像を選択します。

spritetool07.jpg

7.ベース画像が読み込まれたら、画面右上の「編集」をクリックして、アニメーションツールを起動します。

spritetool08.jpg

8.アニメーションツールが起動したら、ベース画像を表示したい位置に移動します。(枠線が画面のサイズになります。)

spritetool09.jpg

9.レイヤーを追加して、アニメーションさせたい部位の画像を割り当てます。ここではレイヤー2に「口」、レイヤー3に「目」を設定します。

画像が画面に表示されたら、マウスまたはカーソルキーでアニメーションさせたい位置に合わせます。

プレビュー画像はマウスのセンタースクロールで拡大縮小ができます。レイヤー名横の目のアイコンをクリックすると、選択しているレイヤーを半透明化することができます。

spritetool10.jpg

10.「フレーム追加」ボタンをクリックして、フレームをふたつ追加し、フレーム0に設定した「目」と「口」のレイヤーを横にコピーします。

spritetool11.jpg

11.真ん中のフレームの「目」と「口」のレイヤーにフォーカスを合わせて、任意の表情のコマに変更します。

spritetool12.jpg

12.再生時間(フレーム)を設定します。ここでは、真ん中のフレームは1、最後のフレームを30とします。これで再生すると、以下のようなアニメが完成します。

spritetool13.gif

添付ファイル: fileスプライトツール_セルの変化情報.png [詳細] fileスプライトツール_スプライトプレビュー.png [詳細] fileスプライトツール.png 1件 [詳細] fileスプライトの作り方_10.png 2件 [詳細] fileスプライトツール_目パチ口パク.png 3件 [詳細] fileスプライトの作り方_19.png 2件 [詳細] fileスプライトの作り方_18.png 2件 [詳細] fileスプライトの作り方_17.png 2件 [詳細] fileスプライトの作り方_16.png 2件 [詳細] fileスプライトの作り方_15.png 2件 [詳細] fileスプライトの作り方_14.png 2件 [詳細] fileスプライトの作り方_13.png 2件 [詳細] fileスプライトの作り方_12.png 2件 [詳細] fileスプライトの作り方_11.png 2件 [詳細] fileスプライトの作り方_9.png 2件 [詳細] fileスプライトの作り方_8.png 2件 [詳細] fileスプライトの作り方_7.png 3件 [詳細] fileスプライトの作り方_6.png 2件 [詳細] fileスプライトの作り方.gif 2件 [詳細] fileスプライトの作り方_5.png 2件 [詳細] fileスプライトの作り方_4.png 2件 [詳細] fileスプライトの作り方_3.png 2件 [詳細] fileスプライトの作り方_2.png 2件 [詳細] fileスプライトの作り方_1.png 2件 [詳細] fileマスク_アルファ値を反転.png 7件 [詳細] fileマスク_1.png 12件 [詳細] fileスプライトツール_補間方法の選択.png 5件 [詳細] fileスプライトツール_タイムライン.png 7件 [詳細] fileスプライトツール_スプライトリスト.png 6件 [詳細] filespritetool-jp.png 19件 [詳細] filespritetool14.png 269件 [詳細] filespritetool13.gif 346件 [詳細] filespritetool12.jpg 264件 [詳細] filespritetool11.jpg 333件 [詳細] filespritetool10.jpg 279件 [詳細] filespritetool09.jpg 274件 [詳細] filespritetool08.jpg 276件 [詳細] filespritetool07.jpg 256件 [詳細] filespritetool04.png 332件 [詳細] filespritetool03.png 287件 [詳細] filespritetool01.jpg 273件 [詳細]

トップ   編集 凍結 差分 履歴 添付 複製 名前変更 リロード   新規 一覧 検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2024-05-22 (水) 22:06:44