top of page
検索
7月21日読了時間: 4分

1分間 Unity講座 スクラッチの素材を活用して、アニメーションを作る方法

ファイブボックス一分間Unity講座、主にUnityに初めて触れる方や、初めて間もない方向けのステップアップ講座です。


ファイブボックス公式Youtube「Unityマニア」の「1分間Unity講座」の記事の詳細説明になります。



今回スクラッチのスプライトをUnityで取り込み、AnimationClipを作成する方法のご紹介です。


１，スクラッチの画像書出しと取込み


Scratchの画像書き出し

U nityではベクター画像（拡張子=svg）は使えないので、PNG形式で書きだします。

今回は「PicoWalking」からピコが歩いている4枚の連続した画像を取得します。

  1. 事前に任意の場所にダウンロード用のフォルダを作っておきます。サンプルでは「Pico」という名前でフォルダを用意しておきました。

  2. 1目の画像「Pico walk1」を選択し、 「ビットマップに変換」をクリック

  3. 左のSprite一覧から該当のSpriteを右クリック、「書き出し」を選択して用意したフォルダに保存します。

スクラッチから画像をかき出す方法

残り3つのSpriteも同様に書き出してフォルダ内に保存します。


Unityで画像取り込み

スクラッチから書き出した画像を、フォルダごとHierarchyにドラッグ＆ドロップで取り込みます。

スクラッチの画像を取り込む方法

この段階では、まだ画像は活用できません。

※デバイスによっては、画像の TextureType が最初から使える状態になっているものもあるようです。


2，TextureTypeの変更

Unityの2DのSpriteとして使用するには、取り込んだ画像の Texture Type を「Sprite(2D and UI」に変更しなければなりません。

  1. Assets内に取り込んだフォルダの4つの画像を全部選択します

  2. Inspectorから、TextureTypeを変更します 初期値が「Default」になっている場合、ドロップダウンリストから「Sprite（2D and UI）」を指定します

  3. 右下の「Apply」ボタンを押して変更を適用させます

UnityのTexturetypeを変更する方法

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

UnityのTexturetypeをSpreit（２D＆UI）に変更後

なお、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 (単一チャンネル)

    • 用途: 一つのカラーチャンネル（例えば、マスクや高度マップ）だけを使用するテクスチャ。

    • 特性: 他のタイプと異なり、特定のチャンネルのデータのみを格納します。


3，AnimationClipの作成

4枚の画像をまとめてAnimationClipを作成します。パラパラ漫画の様に画像を順番に表示する仕組みです。

  1. Assets内の4枚の画像を全選択、まとめてヒエラルキー、またはScene上にドラッグ＆ドロップします

  2. ファイル名を聞いてくるので、任意の名前で保存（サンプルではPicoWalking にしています） AnimatorController と AnimationClip の2つのファイルが生成されています

UnityでAnimationClipを作る方法

4，速度の調整

この状態でプレイボタンを押してみましょう。Picoがかなり高速で動いているのが確認できると思います。

ここではアニメーションの速度を 1/5 にしてみます。

上の課題で生成された「AnimatorController 」をダブルクリック、AnimatorWindow を表示して「PicoWalking」のState（オレンジのステート）を選択します。

Inspectorから「Speed」を 1 から 0.2 に変更します。

UnityでAnimationの速度を変更する方法

これでプレイボタンを押すと、ちょうどよい具合の速度でPicoのアニメーションが再生されると思います。ここの速度は、お好みに合わせて調整してみましょう。


 


ファイブボックスでは、スクラッチはもう卒業、という方向けにUnityの個別指導のオンラインレッスンを行っています。

ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。

Comments

bottom of page