
ファイブボックス一分間Unity講座、主にUnityに初めて触れる方や、初めて間もない方向けのステップアップ講座です。
ファイブボックス公式Youtube「Unityマニア」の「1分間Unity講座」の記事の詳細説明になります。
今回スクラッチのスプライトをUnityで取り込み、AnimationClipを作成する方法のご紹介です。
スクラッチの画像書出しと取込み
Scratchの画像書き出し
U nityではベクター画像(拡張子=svg)は使えないので、PNG形式で書きだします。
今回は「PicoWalking」からピコが歩いている4枚の連続した画像を取得します。
- 事前に任意の場所にダウンロード用のフォルダを作っておきます。サンプルでは「Pico」という名前でフォルダを用意しておきました。
- 1目の画像「Pico walk1」を選択し、 「ビットマップに変換」をクリック
- 左のSprite一覧から該当のSpriteを右クリック、「書き出し」を選択して用意したフォルダに保存します。

残り3つのSpriteも同様に書き出してフォルダ内に保存します。
Unityで画像取り込み
スクラッチから書き出した画像を、フォルダごとHierarchyにドラッグ&ドロップで取り込みます。

この段階では、まだ画像は活用できません。
※デバイスによっては、画像の TextureType が最初から使える状態になっているものもあるようです。
TextureTypeの変更
Unityの2DのSpriteとして使用するには、取り込んだ画像の Texture Type を「Sprite(2D and UI」に変更しなければなりません。
- Assets内に取り込んだフォルダの4つの画像を全部選択します
- Inspectorから、TextureTypeを変更します 初期値が「Default」になっている場合、ドロップダウンリストから「Sprite(2D and UI)」を指定します
- 右下の「Apply」ボタンを押して変更を適用させます

素材のアイコンが下のように変わっていると思います。右側に▶の展開ボタンができています。

なお、TextureTypeをには以下のようなものがあります。
- Default (汎用)
- 用途: 一般的な用途のテクスチャ。基本的な2Dテクスチャや3Dオブジェクトのマテリアルに使用します。
- 特性: 幅広い設定が可能で、最も汎用的です。
- Normal Map (法線マップ)
- 用途: 法線マップとして使用し、オブジェクトの細部や凹凸感を表現します。
- 特性: RGBチャンネルを使用して法線情報をエンコードします。一般的にガンマ補正は不要です。
- Editor GUI and Legacy GUI
- 用途: Unityのエディタ内や旧GUIシステムで使用するテクスチャ。
- 特性: GUIに最適化されています。
- Sprite (2D and UI)
- 用途: 2DゲームのスプライトやUIエレメントに使用します。
- 特性: スプライトアトラスやピボットポイントの設定など、2D用の特別な機能があります。
- Cursor (カーソル)
- 用途: カスタムマウスカーソル用のテクスチャ。
- 特性: カーソルとしての使用に適したサイズや設定が可能です。
- Cookie (クッキー)
- 用途: ライトの影やエフェクトを表現するためのテクスチャ。
- 特性: スポットライトやポイントライトの影をカスタマイズできます。
- Lightmap (ライトマップ)
- 用途: ベイクされたライティング情報を格納するためのテクスチャ。
- 特性: ライティングデータを効率的に格納し、レンダリングパフォーマンスを向上させます。
- Single Channel (単一チャンネル)
- 用途: 一つのカラーチャンネル(例えば、マスクや高度マップ)だけを使用するテクスチャ。
- 特性: 他のタイプと異なり、特定のチャンネルのデータのみを格納します。
AnimationClipの作成
4枚の画像をまとめてAnimationClipを作成します。パラパラ漫画の様に画像を順番に表示する仕組みです。
- Assets内の4枚の画像を全選択、まとめてヒエラルキー、またはScene上にドラッグ&ドロップします
- ファイル名を聞いてくるので、任意の名前で保存(サンプルではPicoWalking にしています) AnimatorController と AnimationClip の2つのファイルが生成されています

速度の調整
この状態でプレイボタンを押してみましょう。Picoがかなり高速で動いているのが確認できると思います。
ここではアニメーションの速度を 1/5 にしてみます。
上の課題で生成された「AnimatorController 」をダブルクリック、AnimatorWindow を表示して「PicoWalking」のState(オレンジのステート)を選択します。
Inspectorから「Speed」を 1 から 0.2 に変更します。

これでプレイボタンを押すと、ちょうどよい具合の速度でPicoのアニメーションが再生されると思います。ここの速度は、お好みに合わせて調整してみましょう。
ファイブボックスでは、スクラッチはもう卒業、という方向けにUnityの個別指導のオンラインレッスンを行っています。
ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。