前回の振り返り
前回の記事 【Unity】SEがなぜかUnityを勉強するお話(4)
前回も簡単なゲームを作ってUIの表示方法や音の鳴らし方を学びました。
今回も引き続き2Dのゲームを作っていきます。
今回の目標
今回はかなり盛りだくさんです。
というわけで以下。
- 物理演算による接触判定、移動を実装する
- アニメーションをつけてみる
- シーンの推移をしてみる
というわけで、6章はかなり内容の厚いものなので、頑張って端折りながらも後で見返してわかるようにまとめていこうと思います。
実践
Physicsを使ってジャンプを実装する
Unityにはあらかじめ物理演算を簡単に実装できる機能「physics」があります。
前回のゲームの当たり判定などは自分でスクリプトを書いて実装しましたが、今回はそのあたりの面倒な部分をこの機能に任せてしまおうという算段です。

というわけでもう慣れた手つきでプレーヤーとなるオブジェクトを用意します。
んで、RigitBodyとColliderというものをアタッチ。


この2つが物理演算を行う上で重要なものとなるようです。
簡単に言うと、RigitBodyが重力や摩擦などの物理部分を計算するもの、
Colliderが物体の衝突などを計算するもののようです。

そしてこんな感じの足場とプレイヤーに2つを設定
ネコちゃんが雲にもふっと着地してくれればOKですね。
意気揚々と実行!

ネコと足場、両方落下しました。
う~ん、シュール
というわけで、足場を固定するためにタイプをKinematicに変更。
これで場所が固定されるようです。


無事着地することができました。
しかしこのままだと当たり判定がでかすぎて雲の上で浮いているように見えるため、当たり判定を調整し

ました。
上手く雲に乗っているように見えますね。
円形のColliderと四角形のColliderの合わせ技です。
足場ができたのでいよいよジャンプを実装してみます。
というわけでplayerControllerを作成して・・・
ちょちょっとスクリプトを書いていきます。

スペースキーを押すと上方向に力がかかるようになりました。

ジャンプ実装完了!
左右移動を実装する
さて、ジャンプができたので左右への移動も実装です。

大事な部分が隠れちゃっていますが・・
基本的にはジャンプと同じで、矢印キーを押すとその方向に向かって力がかかります。

というわけで左に移動できました。
が、ネコちゃんの向きがおかしいですね。
左に進んでもマイケルジャクソンばりのムーンウォークをかまします。
なので、進む方向に向きを変えるスクリプトも書いておきます。

localScaleにて画像のx軸を反転させることで、向きを変えています。

これで進む方向に向きを変えてくれるようになりました。
歩きアニメーションをつける
アニメーションはアニメーションウィンドウを使って作るようです。
というわけで素材を作って配置。

0.07秒ごとに画像を切り替えることで、歩きを表現しています。

というわけで歩いてくれるようになりました。
ちなみに、ここら辺はかなり複雑だったのでいろいろ端折りました。
気になる方は教科書をぜひ購入して読んでみてください。
コースを作成する
ここまでできたので、実際のコースを作成してみましょう。
とはいえ、今回は動的生成ではないのでPrefabを作って、それを順番に配置していくだけです。
そこまで難しくなかったので大胆に工程をカット。

ちなみに、配置は教科書をそのままコピーしました。
視点(カメラ)を動かす
さて、ゲームの内容について全く触れていませんでしたが、今回作成するゲームは浮いている雲をジャンプして登っていき、ゴールにたどり着いたらクリア!というものです。
↑のステージ画像も、まだまだ上方向に続いています。
が、今の状態で登っていくと、カメラマンさんがついてきてくれずに見切れたステージを登らされてしまいます。
ので、プレイヤーにカメラが追従してくれるようにスクリプトを書きます。

というわけでCameraControllerを作成してカメラに対してアタッチ。
分かりやすいように至極丁寧にコメントまで付けました。
多分もうしない

無事カメラもついてきてくれるようになりました。
ゴールも見えていますね。
クリア判定を作る
さて、今の状態だと、登り切ってもそれで終わりです。
ので、このゴールの旗に触ったらクリア!となるようにしましょう。

と言っても、雲の当たり判定などと同じでColliderを用意して、接触したらクリア判定を出すだけです。
実質的な当たり判定はなくし、接触しても物理的動作はさせないようにします。
今回はデバッグログにクリア!と出しています。
クリア画面を作成する
クリア判定を作りましたが、これだけだと何か味気ない。
やはりクリアしたらクリア画面が表示されて、スコアとかが出ればなおよしですよね。
というわけでクリア画面を作って、旗に触れたらクリア画面に遷移するようにしましょう。

今まではGameSceneというゲーム本体のシーンのみを作成していじってきましたが、新しくクリア画面用に「ClearScene」というシーンを作成します。
とはいえ、画像一枚を張り付けただけですけど。
そして、この画面でクリックすると、ゲームシーンに戻る、という処理を追加します。

これでクリアした後もそのままやり直しができますね。
そして実行!するのですが、その前にしないといけないことがあります。
それはこのゲームのゲームシーンの登録。
これをしないと、「クリックしたときに”GameScene”に移動しろ」と命令しても
「は?GameSceneってなんやねん。そんなん知らんわ」
と怒られてしまいます。
ので、Buildメニューからゲームシーンをすべて登録しておきます。

これでOK。
これでシーン間の移行ができるようになったので、クリアしたときにクリア画面に移行するようにもしておきましょう。

あとは、複数ジャンプ禁止やゲームオーバーを実装するのですが、今までの知識でできるために端折ります。
ジャンプアニメーションを作る
ここが一番難しかったかもしれん。
今は歩くときにアニメーションしてくれていますが、ジャンプ時にもアニメーションさせたいです。
というわけで歩きと同じようにネコちゃんにジャンプアニメーションを作ってアタッチさせます・・・
が、複数のアニメーションを場面場面で推移させたいときにはAnimationManagerを触ります。

これで、どういうときに歩きアニメを使い、どういうときにジャンプアニメを使うのかを管理します。
今回は
・基本的には歩きモーション
・ジャンプしたらジャンプモーション
・ジャンプが終わったら歩きモーションに戻る
という推移をさせたいため、以下のように組み替えます。

ジャンプから歩きモーションへの変化は以下の感じ

ジャンプモーションが完了したら自動的に歩きモーションに戻る感じですね。
問題は歩きアニメーション→ジャンプアニメーションのとき。
こちらはPlayerControllerでジャンプされたとき(=スペースボタンが押されたとき)にアニメーションを切り替えたいため、スペースボタン押下時の処理の中にアニメーションを切り替える処理を書かないといけません。
というわけで、まずはジャンプアニメーションに名前を付けてあげます。
そうしないとスクリプトから呼び出すことができないので・・・

そして、スクリプト側を書き換えてジャンプアニメーションにするような処理を加えます。

こんな感じ。
これでアニメーションの切り替えも実装完了です!
振り返り
というわけでめっちゃ駆け足になりましたが、6章の内容はこんな感じです。
こんなんで勉強のまとめになっているの?と言われそうですが・・・
プログラミング勉強の振り返りなんて、こんなもんでいいと思っています。
(というか今回は結構詳細までまとめたつもりです)
よくプログラミングの勉強というと、
「完全に覚えなきゃ!」
という人がいっぱいいて、んで覚えきれずに断念して勉強を止めていく・・・というパターンの人をいくつも見てきましたが、プログラミングの内容なんて覚えきれるわけないです。
というか、折角覚えてもアップデートで関数追加されたりそもそもの言語仕様が変わったりしますし・・・。
プログラミングの勉強で重要なのは、
「こんな機能実装したいなあ、なんかないかなあ」
ってなったときに、記憶の中から機能を引き出せるかどうかです。
こんなの作りたい!ってなったときに、
「そういえばこんな関数があったよなあ・・・なんだっけあの関数・・・」
って思い出せるところまでくればOKなのです。
あとはググればだいたい関数の使い方なんて出てきますからね。
このUnity勉強のまとめも同じポリシーで書いています。
要所要所のキーワードと流れだけまとめておいて、後で記憶の中から引っ張り出すときに
「そういえば昔ブログにまとめたよなあ」っていう導線を作るためのものです。
「存在を知らない」と「存在は知っているけど使い方を知らない」は天地の差がありますからね。
そして、内容が薄いことの言い訳ではない

Unityの教科書 Unity 2018完全対応版 2D&3Dスマートフォンゲーム入門講座 (Entertainment&IDEA)
コメント