よく見る？ 棒人間ゲーム（2D）の作り方#1

# はじめに
Unityで棒人間ゲームの作り方を解説している記事があまり多くない印象だったので書こうと思いました。
誤情報、もっと簡単に作れる部分などがありましたらコメントにて教えていただけると嬉しいです。
ちなみに、boneの追加・アニメーションの部分は棒人間以外にも使えます。

# 棒人間を描く
まず、棒人間をペイントなど、簡単なお絵かきソフトでいいので適当に描いてください。
![StickMan.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3572788/da68277d-9341-69c3-456b-2933533e427e.png)
画像のサイズは気にしなくていいです。（キャラに合わせようとしなくていい）
画像の保存形式によっては次の作業ができない場合があるかもしれません。
そうしたら、その画像をUnityのプロジェクトのAssetsフォルダに保存してください。

# Unityで作業をする
## bone（骨）を作る
Unityで棒人間の画像を選択してください。
そしたら、Inspectorの上の方にある**Sprite Editor**というボタンを押してください。

:::note warn
3Dゲームだとできないかもしれません
:::

<img width=500 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3572788/57e772ef-a37c-f031-aa64-ca6d4fed1bab.png>

Sprite Editorを開いたら、左上の**Sprite Editor▼**と書かれたところを押して**Skinning Editor**を選択します。

<img width=500 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3572788/5c542a71-5bf7-58f7-ace2-288dfa4ff810.png>

左側に出てくる**Create Bone**というやつを選択して、画像をダブルクリックしたらなんか色々出てきて、カーソルの部分にポインタみたいなのが出てくると思います。この状態になったらboneが作れます。

### Boneの作成
　まず、股間から首にかけて最初のboneを作る（多分赤い）
　次に、ポインタが別の色（多分黄色）になると思うので、そのまま頭のてっぺんまでboneを作る
　次は、そのまま作らずに、エスケープキーを押してから股間にある丸をクリックし、腕の付け根の場所でクリックしたら、腕の真ん中らへんまでboneを作り、さらに先までもう一つのboneを作る
　次も同じようにもう一つの腕にboneを作る
　足は、股間にある丸をクリックして、腕と同じようにboneを作る　これを二回やる
 
　boneを作った時に出てくる新しいboneを作るためのやつは、エスケープキーで消せます

説明がわかりにくかったらすみません。
下の画像のようになればいいです。
<img width=500 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3572788/5a1d7287-5034-ac57-33fa-0f32c17df305.png>

### Boneを適用
Bonesメニューのちょっと下にあるGeometryの**Auto Geometry**を選択します。
そして、**Generate For Selected**というボタンを押すと画像が急にきれいになると思います。
それができたら、boneをぐりぐり動かしたりすると、棒人間の方も動くようになると思います。

最後に、上のApplyボタンを押して完成です。（Applyしなかったら今までのが全部無駄になります）

<img width=500 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3572788/32bc8a9c-f517-7b20-4004-7d19b0a0f29e.png>

## アニメーションを設定する
### 準備
まず、できた棒人間を**Scene**にドロップします。
まだ、boneが出てきていないと思いますが、棒人間に**SpriteSkin**コンポーネントを追加して、出てきた**Create Bone**ボタンを押すとboneが作られます。

<img width=500 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3572788/22d8ea91-96b4-7983-f8bf-15b9d6940e17.png>
<img width=200 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3572788/98e4f782-2b38-a389-14e4-7913ad9410b1.png>

上の方にあるWindowメニューから、Animation->Animationと押して、Animationを開きます。
そして、Hierarchy上にある棒人間のオブジェクトを選択し、Animationウィンドウにある、**Create**ボタンを押します。
そうすると、新しくアニメーションのファイルを作るよう言われると思うので、**Run**という名前で作ってください。
（画像は省略します）

### 走るアニメーションを作る
Hierarchyウィンドウ上で、棒人間の子オブジェクトのboneを**全て**選択して、InspectorのTransformのRotationと書かれた場所を右クリックし、**Add Key**を押してください。

:::note info
Add Keyが出てこない時は、Animationウィンドウを開いて、白い線（時間を表すやつ）を左右に動かして、0の場所に持ってきてください。そうすると、出てくると思います。
:::
:::note warn
boneの子オブジェクトにboneがあることもあるので、注意してください。
:::

![スクリーンショット 2024-03-31 20.53.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3572788/0ad919e8-cf4f-9dd3-0130-31531e257516.png)

そしたら、Sceneウィンドウに戻って、棒人間を下のように変形させてください。boneの角度だけを変えるようにしてください。

<img width=300 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3572788/330eb660-d694-57fd-a722-c4996b69ba50.png>

それでは、最初と同じように、Update Keyしてください。

次に、Animationウィンドウで、白い線を右に動かして0:10と書かれた場所に移動させてください。

また、boneを変形させて下のようにしてください。

<img width=300 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3572788/c7621dac-6652-25fa-3442-42f3ad4725d3.png>

その状態で、Add Keyします。

最後に、Animationウィンドウの白い線を0:20に移動させ、棒人間を下のように変形させて、Add Keyしてください。

<img width=300 src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3572788/aefcf39b-2b88-2e79-3698-1eaa3a6d0293.png>

これで、Animation自体は完成です。

自分で調整とかもしてみてください。

これを参考にして、他にもいろいろなアニメーションを作ってみてください。（ジャンプのアニメーションや敵を殴るときのアニメーションなど）

## Animatorの設定
多分、Assetsに[棒人間のオブジェクト名].controllerというファイルができていると思います。それをダブルクリックすると、Animatorというウィンドウが開くと思います。
そして、ウィンドウ上には、AnyState、Entry、Exit、[棒人間のオブジェクト名]、Runというブロックがあり、Entryから[棒人間のオブジェクト名]に向けて矢印があると思います。
そしたら、[棒人間のオブジェクト名]ブロックを右クリックして、**MakeTransition**を押し、Runに矢印を繋げてください。

![スクリーンショット 2024-04-01 8.25.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3572788/e33f3bf5-6071-fb49-b84e-51b4d33eee97.png)

そして、最後にPlayボタン（ゲームを動かす時の矢印っぽいやつ）を押すと、走るアニメーションが動くと思います！

# 終わりに
次回は、このアニメーションをスクリプトから操作する方法について解説していきます。
~~次回のができたら、ここにリンクを貼ります。~~
次回の記事↓

 https://qiita.com/natsuakane/items/8bc3593bd287eb0a0548