ペット育成ゲームの作り方#2｜ペットを表示して、ぴょこぴょこ動かそう

育成ゲームの主役はなんといってもペット！ずっと止まったままの絵だと、なんだか元気がなさそうに見えてしまいます・・・。今回はペット育成ゲームのシリーズの2回目として、ペットの画像を表示し、ぴょこぴょこ跳ねる待機の動きと、「喜ぶ」「しょんぼり」の動きを付けて切り替えられるようにしてみたいと思います！

• シリーズの目次：ペット育成ゲームの作り方
• 前回：#1 縦画面のプロジェクトとUIのレイアウトを作ろう

今回作るもの

• ペットの画像を、前回作ったペットの場所に表示する
• 足元に影を置いて、地面に立っているように見せる
• アニメーションを3つ作る
  • 待機：ぴょこぴょこ跳ねる（ずっとくり返す）
  • 喜ぶ：笑顔で大きくジャンプ（1回だけ）
  • しょんぼり：泣き顔で小さくつぶれる（ずっとくり返す）
• Animatorで、3つの動きを切り替えられるようにする

スクリプトはまだ書きません。切り替えはAnimatorウインドから手で試して、#3でスクリプトから切り替えます。

前回の続きから

前回作った縦画面のレイアウトの続きから始めます。

• Unityのバージョンは6.3 LTS
  • 記事作成時点では6000.3.22f1で確認しています
• テンプレートはUniversal 2D
• #1の状態：Canvasの中にゲージ・コイン・ペットの場所（PetArea）・ボタンが並んでいる

アニメーションの基本は12-2 アニメーションを付けようで紹介しています。この記事では、UIのペットに使うときのポイントを中心に進めます。

素材を取り込もう

ペットの画像は3枚です。表情ごとに1枚ずつ用意しています。

• pet_idle.png：ふつうの顔
• pet_happy.png：笑顔
• pet_sad.png：泣き顔

素材は下のリンクからダウンロードしてください。シリーズで使う画像と音が全部入っているので、1回ダウンロードすれば#8まで使えます。

• PetRaisingAssets.zip（約4MB）

取り込み方は2つあります。

• かんたん：zipの中のPetRaisingAssets.unitypackageをダブルクリック（またはUnityでAssets>Import Package>Custom Package…）。画像の取り込み設定（Sprite・Single）ごと入ります
• 自分で入れる：zipの中のPetRaisingフォルダを、UnityのAssetsにドラッグ＆ドロップ（画像はSprite Mode：Singleにする）

素材は自由に使ってOKです（クレジット不要。作ったゲームの公開・販売にも使えます）。素材そのものの再配布はご遠慮ください。

ダウンロードした3枚を、ProjectウインドのAssets/PetRaising/Spritesにドラッグ＆ドロップします。

• 3枚をまとめて選び、Inspectorで次のようにしてApply
  • Texture Type：Sprite (2D and UI)
    • Universal 2Dのプロジェクトでは、最初からSpriteとして取り込まれます
  • Sprite Mode：Single
    • Multipleになっていると、画像が「pet_idle_0」のような名前で切り分けられます。1枚の絵なのでSingleにしておきます

UIのImageに使えるのは、Spriteとして取り込んだ画像だけです。画像の取り込みについては4-4 2Dゲーム制作の基本操作も見てみてください。

ペットを表示しよう

Petを作る

PetAreaの中に、ペットの画像を置きます。

• HierarchyでPetAreaを右クリック>UI (Canvas)>Image で作り、名前を「Pet」にする
• Rect Transformを次のように設定
  • アンカー：middle-center（そのままでOK）
  • Pivot：X 0.5、Y 0
  • Pos X：0、Pos Y：-250
  • Width・Height：520
• ImageのSource Imageにpet_idleをドラッグ＆ドロップ
• Preserve Aspectにチェック
• Raycast Targetのチェックを外す

• Pivot Y：0
  • Pivotは、大きさを変えたり回したりするときの中心
  • 足元（下のまん中）にしておくと、つぶれたり伸びたりしても足が地面から浮かない
  • この後のアニメーションで効いてきます
• Preserve Aspect
  • 画像の縦横の比率を保つ。WidthとHeightがずれていても、ペットがつぶれて表示されない
• Raycast Target
  • ボタンと違ってクリックを受け取らないので外しておく。ペットの上をタップしたときに、後ろのボタンの邪魔をしない

足元に影を置く

前回置いた白い丸（PetFrame）は、ペットの影に変えてしまいましょう。

• PetFrameの名前を「Shadow」に変える
• Rect Transformを次のように設定
  • Pos Y：-250（ペットの足元と同じ高さ）
  • Width：380、Height：70
• ImageのColorを黒にして、A（透明度）を40ぐらいにする

HierarchyでShadowがPetより上にあることを確認してください。UIはHierarchyの上にあるものから順に描かれるので、上にあるShadowがペットの後ろに表示されます。

待機のアニメーションを作ろう

クリップを作る

• HierarchyでPetを選択
• Window>Animation>Animation を開く
• AnimationウインドのCreateボタンを押す
• 保存先をAssets/PetRaising/Animations（なければ作る）にして、名前を「PetIdle」で保存

クリップと一緒に「Pet」というAnimator Controllerが作られ、PetにAnimatorコンポーネントが自動で付きます。

キーフレームを打つ

待機は「一度つぶれて → ぴょこっと跳ねて → 着地してまたつぶれる」を1秒でくり返す動きにします。

• Animationウインド左側のAdd Propertyから、次の3つを追加する
  • Rect Transform>Anchored Position
  • Rect Transform>Scale
  • Image>Sprite
  • 追加すると、0:00と1:00に今の値（Pos Y：-250、Scale：1、pet_idle）のキーが入ります
• Animationウインド左上の録画ボタン（赤い丸）を押す
• 下の表のとおりに、時間を選んでからInspectorのRect Transformの値を変える（0:00と1:00はもう入っているので、0:15・0:30・0:45だけでOK）

時間	Pos Y	Scale X	Scale Y
0:00	-250	1	1
0:15（0.25秒）	-250	1.08	0.9
0:30（0.5秒）	-210	0.95	1.06
0:45（0.75秒）	-250	1.04	0.96
1:00（1秒）	-250	1	1

• もう一度録画ボタンを押して終了

Image.Spriteも記録しておくのがポイントです。表情を記録しておくと、ほかの動きから戻ってきたときに、ふつうの顔に戻ります。

録画中は、今と違う値を入れたときだけキーが打たれます。0:00のように今と同じ値のところは、Add Propertyで先に追加しておくと確実です。

左側にAnchored Position・Scale・Image.Spriteの3つが並べばOK！再生ボタン（▶）で動きを確認してみましょう。

• 跳ねる前につぶれる
  • ジャンプの前にぐっとかがむ動きを入れると、ただ上下するより弾んで見える
• Scale XとYを逆に動かす
  • 横に広がるときは縦を縮める。体の大きさが変わらないように見えて、やわらかい感じになる
• Pos YとScaleは、UIではRect Transformの値
  • 記録されるプロパティの名前は「Anchored Position」になります

• 録画中はInspectorの変更が全部記録される
  • Pet以外のオブジェクトを触らないように注意。作業が終わったら録画ボタンを止める

喜ぶ・しょんぼりのアニメーションを作ろう

クリップを追加する

• Animationウインド左上のクリップ名（PetIdle）のドロップダウンを開き、Create New Clip… を選ぶ
• 「PetHappy」で保存。同じように「PetSad」も作る
• どちらも、待機と同じようにAdd PropertyでAnchored PositionとScaleを追加してから録画する

喜ぶ（PetHappy）

笑顔になって、大きく1回ジャンプします。

時間	Pos Y	Scale X	Scale Y
0:00	-250	1	1
0:06（0.1秒）	-250	1.15	0.85
0:18（0.3秒）	-90	0.92	1.1
0:30（0.5秒）	-250	1.12	0.88
0:36（0.6秒）	-250	1	1

• 0:00のところで、Source Imageをpet_happyにする（値が変わるので、Image.Spriteのキーが打たれる）
• 0:36まで打ったら、Add Propertyで1:00に入ったキーを選んでDeleteで消す
  • 消すと、クリップの長さが0.6秒になります

しょんぼり（PetSad）

泣き顔で、ゆっくり小さく息をするようにつぶれます。

時間	Pos Y	Scale X	Scale Y
0:00	-250	1.06	0.9
1:00（1秒）	-250	1.1	0.86
2:00（2秒）	-250	1.06	0.9

• 0:00のところで、Source Imageをpet_sadにする
• 0:00と1:00はAdd Propertyで入ったキーの値を書き換え、2:00は新しく打つ

ループの設定

Projectウインドでクリップを選ぶと、InspectorにLoop Timeが出ます。

• PetIdle・PetSad：Loop Timeにチェック（ずっとくり返す）
• PetHappy：Loop Timeのチェックを外す（1回だけ）

Animationsフォルダに、Pet（Animator Controller）と3つのクリップが並んでいればOK！

Animatorで切り替えよう

状態をそろえる

• Window>Animation>Animator を開く
• HierarchyでPetを選ぶと、PetのAnimator Controllerが表示される
• クリップを作ったときに、PetIdle・PetHappy・PetSadの3つの状態が自動で追加されている
• 状態を選んでInspectorで名前を変え、「Idle」「Happy」「Sad」にする（分かりやすくするため）
• Idleがオレンジ色（最初に再生される状態）になっていることを確認

パラメータを追加する

• Animatorウインド左上のParametersタブを開く
• 「＋」>Trigger で「Happy」を追加
• 「＋」>Bool で「Sad」を追加

• Happy（Trigger）
  • 「ごはんをあげた」「遊んであげた」のように、1回だけ起こること
  • 使うと自動で元に戻るので、何回でも喜ばせられる
• Sad（Bool）
  • 「おなかが空いている間はずっとしょんぼり」のように、続く状態

遷移（矢印）をつなぐ

状態を右クリック>Make Transition で、つなぎたい状態をクリックします。5本つなぎましょう。

矢印	Has Exit Time	Transition Duration	Conditions
Idle → Happy	チェックなし	0	Happy
Sad → Happy	チェックなし	0	Happy
Happy → Idle	チェックあり（Exit Time：1）	0	なし
Idle → Sad	チェックなし	0	Sad：true
Sad → Idle	チェックなし	0	Sad：false

• Transition Durationは、InspectorのSettingsを開くと出てきます

• Has Exit Timeを外す
  • チェックが入っていると、今のアニメーションが終わるまで待ってから切り替わる。ボタンを押したらすぐ喜んでほしいので外す
• Happy → Idleだけはチェックを入れる
  • 条件なしで、喜ぶアニメーションを最後（Exit Time：1）まで再生したらIdleに戻る
• Transition Durationを0にする
  • 2つのアニメーションを混ぜる時間。0にすると、表情がパッと切り替わる

動かして確認しようッ！

• 再生（▶）する
• Animatorウインドを開いたまま、HierarchyでPetを選ぶ
• Parametersの Happy の右の丸をクリック → ペットが笑顔でジャンプして、ふつうの顔に戻る
• Sad にチェックを入れる → 泣き顔になってしょんぼりする
• Sadのチェックを外す → ふつうの顔に戻る

3つの動きが切り替われば成功です！

あとがき

今回はペットに動きを付けて、Animatorのパラメータで表情を切り替えるところまで作りました。次回は「おなか」と「きげん」の数字をスクリプトで持たせて、時間がたつと減っていくゲージと、少なくなったらしょんぼりする仕組みを作りたいと思います！