ユニティちゃんの2D横スクロールアクション（その1：キャラ配置）【チュートリアル】

ども、ゴコーです。
今日からたまーに初心者向けチュートリアルを作って行こうと思います。
今回はユニティちゃんゲームジャムも控えていますのでユニティちゃんにちなんだものを。（参加したかったな…）
ちなみに本来は連載で日を空けるのですが、ゲームジャム明日なので連投します。

お題は2D横スクロールアクション、ロックマン風で行きます！
マリオ風の方が一般的かも知れませんが、公式が用意したサンプルが素晴らしすぎて
被ってたら話にならないかなと思い、僕はロックマン風で行くことにしました。

---

あ、本編に入る前に宣伝を。

実は前々から2D横スクロールアクション作成用の無料アセットを作成しています。

そしてこの度、クラウドファウンディングサービス「CAMPFIRE」に掲載の申請を出しました。
近いうちに公開されると思いますので、興味のある方は当サイト、及びCAMPFIREを時々チェックしてくださるとありがたいです。

CAMPFIRE - http://camp-fire.jp/

---

諸注意です。

今日だけで結構な量の記事を書かないと行けないと思われるので、対象は「Unity初心者だけどそこそこ触ったことはある人」を対象に行きます。
では初めて行きましょう！

ユニティちゃんドット絵素材（提供 Co89さん – http://co89.net/）

上記の素材をダウンロードできましたら、
まずは新規プロジェクトを2Dモードで立ち上げ、キャラを配置してみましょう。
尚、それぞれの素材に対してパッケージ化する前にインポート設定から

• Format を 16bit に
• Pixels To Units を 30 に
• SpriteMode を Multiple に、さらに Grid にて切り出し

など行っています。

キャラの設置についてですが、本来なら

• 空のゲームオブジェクトにSpriteRendererアタッチ
• さらにAnimatorアタッチ
• さらにAnimationを作成し、上でアタッチしたAnimatorのMecanim画面に配置

みたいな手順が必要ですが、プロジェクトウィンドウから直接D&Dすることでこの手順をスキップできます。
画像と共に説明します。

---

 

まずは素材を選択します。
先ほどインポートしたフォルダを選択し、「ユニティちゃん_待機」をクリックしてください。
そして、画像のように素材の右にあるつまみをクリック

 

---

 

つまみを押すと、元の画像から分割されたユニティちゃんのスプライトが表示されます。
本来は使う部分のスプライトのみ選択するのですが、今回の場合は待機モーション全てを使いますので
Shiftキーなどを使って表示されたスプライトを全て選択して下さい。

---

次にオブジェクトとして使うためにヒエラルキーウィンドウの方へ呼び出します。
先ほど選択した画像をヒエラルキーウィンドウへD&D（ドラッグ＆ドロップ）して下さい。

---

 

するとAnimationを保存するウィンドウが開かれました。
適当に名前を付けて保存してください。

---

さあ、なんと以上でキャラクターの配置は終了です。
簡単なのは良いことですね！

それでは再生してみましょう。

このように再生されましたか？
おそらく再生はできますが、スピードが速くて上の画像の様には行かないはずです。
と言う訳で次はスピードを手軽に落としてみましょう。

まずは先ほど作った「ユニティちゃん_待機_0」オブジェクトをクリックして下さい。

---

次に「Animationウィンドウ」を開きます。
「Sceneウィンドウ」などの近くにタブがある方は押して下さい。

見当たらない人は右端にあるボタンを押して
「AddTab > Animation」の順に選択すると表示されます。

---

Animationウィンドウは開けましたか？
画面中央の上の方にあるのがキーフレームというものです。
2Dのアニメーションというのはパラパラマンガの様なもので、画像を高速で切り替えることで動いているかのように見せることができます。
今回の場合、キーフレームはその画像1枚1枚を表し、キーフレームの間隔は画像の切り替えタイミングを表しています。
今回の様にまとめて選択してアニメーションを作成すると等間隔に自動で配置してくれるようです。

そしてサンプルレートについてですが、これは1秒間に再生するキーフレームの数を表しています。
アニメーションの速度を変える場合、多くの場合はキーフレームをいじると思いますが、今回の様にキーフレームが等間隔に並んでいる場合はサンプルレートを変えることでお手軽にスピード調節をすることができます。

今回の場合は「Sample」の値を「9」に変えて下さい。
これで上記画像の速度でアニメーションが再生されると思います。

それでは次回は
「キャラクターの横移動アニメーション」についてです。

それでは、また。

…なんだか開始早々1日でチュートリアル完結は無謀な気がしてきたorz