Unity2Dでアクションゲームを作る(願望)

始めに

こんにちは!初めまして!(大嘘)

前回投稿って何?というレベルで久しぶりに記事を書いた霜暮黒夢です。だって仕方ないじゃないですか、学生って忙しいんです。別に、遊んでいたわけではありませんよ?違いますからね?

さて、世間は新型コロナウイルスで恐ろしいことになっていますが、僕の所もその例に漏れず春休みが前倒し。勿論学校には行けません。つまり、自宅で干物LIFE!いつもだろとか言わない

とはいえ、この1か月と少しの休みを無駄にするわけにもいかないので、とりあえずブログを書いて何をやったかぐらいは記録しておこう、というわけで恥ずかしながら戻ってきたわけです。

それでは、本題に入ります。

前提

さて、タイトル通り、アクションゲームを作っていきましょう。とりあえず、最終目標は黒夢君が格好良くステージを飛び回るスタイリッシュなアクションゲームといった所にします。

まずは開発環境、Unity 2019.1.2f1とVisual Studio 2019を使います。そしてプラットフォームはブラウザ。正直、プラットフォームは何を選んでも変わらない気がするんですけどね…。

ここまで決めたところで早速プロジェクトを新規作成です!

初期設定

f:id:V-hero-aid:20200303211326p:plain

作成完了。ですが、このままではブラウザゲームに対応していないので、プラットフォームを変更します。

画面左上の「File」から「Build Settings」を選択。「WebGL」を選択して「Switch Platform」でプラットフォームを変更できます。

f:id:V-hero-aid:20200303211332p:plain

もし、「No 〇〇 module loaded」みたいな感じになっていた場合は、そこにあるリンクを無視してUnity Hubに戻ります。「インストール」からバージョンを選択し、「モジュールを追加」で追加できます。一応、リンクからでも追加できますが、Unity Hubから追加した方が安全です。僕はそれで足止めを喰らいました。

次に、解像度を決めます。とりあえず、安直に「960×540」にしました。雑とか言わない

f:id:V-hero-aid:20200303212749p:plain

こんな感じで初期設定は終了です。次は…アニメーションを作ってみますか。

アニメーション(準備編)

始めに、アニメーション用の画像を用意…

f:id:V-hero-aid:20200303224007p:plain

しました。滅茶苦茶めんどくさかった…。

まずは立ち絵をシーンビューに持ってきて…。

f:id:V-hero-aid:20200303225004p:plain

この立ち絵のインスペクターに「Animator」を追加

f:id:V-hero-aid:20200303225028p:plain

このアニメーター、アニメーションを自動で制御してくれます。

もちろん3Dでも使えます。滅茶苦茶有能です。

とはいえ、「Controller」が無ければ動かない文鎮なので、とりあえずコントローラーを製作します。

「animation」というフォルダーを作成し、そのフォルダー内で右クリック、「Create」→「Animator Controller」でコントローラーを作り、「player_animation」という名前を付けました。

f:id:V-hero-aid:20200303225746p:plain

とりあえず立ち絵にアタッチ

f:id:V-hero-aid:20200303230246p:plainf:id:V-hero-aid:20200303230247p:plain

 立ち絵を選択した状態で「Window」→「Animation」→「Animation」でアニメーションウインドウを画面に追加。これで、アニメーションを作る準備が出来ました。

アニメーション(作成編)

「create」ボタンを押し、新しくアニメーションを追加します。
f:id:V-hero-aid:20200303231814p:plain

立ち絵をドラッグして持ってくると、

f:id:V-hero-aid:20200303232001p:plain

こんな感じで追加できます。

今回は1コマだけなのでそれっぽくありません。ただの絵です。

ということで、歩くモーションを作ってみます。

上の画像の「player_stand_R」を押し、「Create New Clip」を選択。

新しくアニメーションを作ります。

まずは歩く画像を3つ持ってきて…

f:id:V-hero-aid:20200303232718p:plain

最後に、一番最初の画像を持ってきます。

f:id:V-hero-aid:20200303233116p:plain

こうして、歩いてるアニメーションが出来ました。

こんな感じで左向きのアニメーションも作成します。

アニメーション(アニメーション接続編)

ついでに、キーボード操作に対応させてみようと思います。

とりあえず、アニメーターを開くと、

f:id:V-hero-aid:20200304000300p:plain

こんな感じになっています。

とりあえず良い感じに整えて…

f:id:V-hero-aid:20200304000512p:plain

この中で、オレンジ色になっているのがデフォルトのアニメーションです。

今回は、右を向いて立っているアニメーションを選択しました。

とりあえず、ボタンを押したら方向転換して歩く…みたいな感じにしたいので、アニメーションをつないでいきます。

<注意>この時は気づいていませんが、実は歩くアニメーションが逆になっています。だから深夜に書くなとあれほど…

アニメーションを右クリックし、「Make Transition」で繋げます。

f:id:V-hero-aid:20200304001122p:plain

とりあえず、全部繋げました。

次に、矢印をクリックし、インスペクター内の「Has Exit Time」のチェックを外します。これで、アニメーションが途中でも切り上げてくれます。

更に、インスペクター内の「Settings」の中の「Transition Duration」を0にします。これで、アニメーション同士が合成されるのを防ぐことができます。

f:id:V-hero-aid:20200304001705p:plain

これで、アニメーションの合成は完成です。

アニメーション(ボタン操作編)

始めに、アニメーションが変わる条件を設定します。

アニメーターウィンドウの「Parameters」をクリック、Bool型のパラメータを一つ、int型のパラメータを一つ作ります。

f:id:V-hero-aid:20200304002853p:plain
これらのパラメータにはそれぞれ、左右の選択と動作の選択をそれぞれ割り当てます。ここで動作の選択をint 型にしたのは、何種類かの動作を一括で管理するためです。例えば、止まっているなら0、歩いているなら1…という風に、割り当てていきます。

次に、矢印に条件を当てはめていきます。

矢印をクリックして表示されたインスペクター内のConditionsの「+」を押し、条件と対応する値を選択します。

f:id:V-hero-aid:20200304003547p:plain

他の矢印も同じように設定すれば、準備は完了です。

では、スクリプトを使って制御してみようと思います。

とりあえずC#スクリプトを作って立ち絵にアタッチ。

プログラムはこんな感じです。力尽きたとか言わない

f:id:V-hero-aid:20200304011532p:plain

では、動かしてみましょう!

はい、無事動きました!

最後に

ということで、今日は僕を歩かせてみました。日付が変わってる?知ったこっちゃないですね。次回は、別のモーションも追加してみようと思います。それでは、良い黒の夢が見れますように…。