[Unity]Unity4.3の2Dツールを使ってみる -Sprite編-

Kotori2D_Unity

こんにちは!布浦です。

最近「おミソわけ S」や、dotFesで展示したインスタレーション「minamo」の制作などで、
Unityばっかりやってます。

Unity4.3公開!

先日、Unityのバージョン4.3が公開されました。

Unity4.3では、2D周りの機能が大幅に強化されました。
今までのバージョンでも、2Dゲームがつくれなかったわけではないのですが、
Spriteを生成する機能などが追加されて、より便利になりました。

さらに、アニメーションのツールもアップデートされて、
コマアニメをタイムラインをつかってつくることもできます。

Unityタイムライン

Unityのタイムラインでコマアニメがつくれる

さっそく、2Dのキャラクターを操作するサンプルを、
クスールのキャラクター「ことり」を使ってつくってみました。

2つのコマアニメーション(「歩く」と「飛ぶ」)を切り替えて再生、
キャラクターの移動は2Dの物理エンジンをつかって実装しています。

動くサンプルはこちら(※UnityPlayerが必要です)

Kotori2D

アクションゲーム風

折角なので、このサンプルのつくりかたを、順を追って説明していきたいと思います。

制作の手順

ちょっと長いですが、全5回くらいの予定です。

  1. 画像をSpriteとして画面に配置する
  2. Spriteにコマアニメを設定する(Animation View の使い方)
  3. 複数のアニメを切り替える仕組みをつくる(Mecanim)
  4. 2D物理エンジンでキャラクターを動かす(Physics2D)
  5. キー操作によるキャラクターの移動を実装する(Physics2Dつづき)

Unityの基本的なことはある程度わかっているという前提で書いています。
もし、そもそも使い方がわからないという方は、
以前@ITに初心者向けの記事を書かせていただいたので、参考にしてみてください!

今日は、
「1. 画像をSpriteとして画面に配置する」
をやっていきたいと思います。

サンプルで使用する画像素材は、こちらからダウンロードできますので、
自分で用意するのが面倒・・・という方は、学習用にお使いください。

素材の設定をする

コマアニメできるようなキャラクターの画像を用意して、Unity の Project に取り込みます。
取り込んだ画像は、Spriteとして扱うために設定を変更します。

Spriteの設定

取り込んだ画像を全部選択して、一度に設定してしまう

設定項目

Texture Type : Sprite
Spriteでつかう画像、という設定です。
Sprite Mode : Single
1枚の画像から1つのSpriteを生成する、という設定です。
Packing Tag : 空のまま
後述します
Pixels To Units : 100
後述します
Pivot : 素材に合わせて変更
画像の基点です。
ことりは、足下を基準点にアニメーションする想定で素材をつくったので、Bottomにしてあります。

Packing Tagについて

UnityのPro版には、バラバラの画像をSpriteSheetという1枚の画像にパッキングするSpritePackerという機能がついています。
パッキングすると、アプリの容量を抑えられたり、実行中の描画の負荷を小さくできるというメリットがあります。
ここで、同じタグを設定した画像毎に、シートが生成されます。
例えば、さきほど取り込んだ画像の「Packing Tag」に「chara」と入れておくと、「chara」シートにまとめられます。

Sprite Packer(developer preview)

生成された「chara」シートのプレビュー

ちなみに、UnityのFree版を利用していてこの機能がない場合でも、
外部でシート化したデータを扱うこともできます。

Spriteの設定でSprite Mode を Multiple にしておくと、
Sprite Editor というウインドウで編集ができ、
1枚の画像から複数のSpriteを生成することができます。

Sprite Mode Multiple

外部でシートを作成した場合の設定

Sprite Editor

画像内にRectを指定できる

ただ、今回のようにシンプルなプロジェクトであれば、
そこまで素材の最適化をしなくても十分動きますので、
特に何も設定しなくても大丈夫です。

Pixels To Unitsについて

Unityでの1単位は「メートル」です。
例えばUnity上で「Cube」を生成すると、1辺1メートルの立方体が出ます。

「Pixels To Units」は、平面上の単位である「ピクセル」が、1メートル内にいくつ含まれるようにするか、という設定です。
たとえば「ことり」の画像は「200 x 160px」です。
Pixels To Unitsを「100」にしておくと、「100ピクセル = 1メートル」になるので、
Unity上で「ことり」は、「2 x 1.6メートル」になるということです。

ことりと背比べ

キューブとUnityおじさん(?)と「ことり」の大きさ比べ

Unity上のオブジェクトのスケールは、現実の大きさ感と同じすることが望ましいです。
これは、物理演算で扱いやすくするためです。

人であれば、2メートル弱程度が一般的です。
キャラクターによるとも思いますが、Playerとして扱うキャラクターの場合、
人と同じくらいの大きさが扱いやすいと思います。

今回はデフォルトの「100」という値で、ほどよい大きさになっているので、
このままにしておきたいと思います。

Spriteを画面上に配置する

Cubeなどをつくる要領で、Createメニューから「Sprite」を選択します。

Create Sprite

Sprite配置

①GameObject名が「New Sprite」となっているところを、わかりやすいもの(サンプルでは「Kotori」)に変更します。
②「Sprite Renderer」コンポーネントが貼られているので、先程取り込んだ画像をどれでもいいので、
「Sprite」という項目にドラッグ&ドロップで適用します。
③画面上に、キャラクターが表示されます。

3Dのモデルデータが必要ないので、簡単に画面に絵が出せて楽しいですね。
今回は、ここまで!

unity講座バナー
Unity講座第5期、受講生募集中です。