Unityエディタ上でのキャラクターのビジュアルを差し替える

#Unity PlayGround内のキャラクターに差し替える
![スクリーンショット (2152).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/d7e18a09-4ce5-bd42-7c0b-be9a292de986.png)
1：ゲームのメカニクスとレベルデザインが固まったら、キャラクターのビジュアルをゲームの世界観にあわせて差し替えよう。ここでは例としてアバターのビジュアルを変更する。

![スクリーンショット (2153).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/c163a4bc-d119-bfb6-1237-9ff333607232.png)
2：Unityエディタ上でアバターのプレハブをダブルクリックして開く。

![スクリーンショット (2154).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/b989a202-af53-16ff-b502-299e6dbb49d9.png)
3：プロジェクトエリアのツリーからAssets＞Images＞Charactersと進み、任意のキャラクター（ここではZombie）を選ぶ。次にアバターのInspectorにセットされているSprite RendererコンポーネントのSpriteスロットに、選択したアイコンをドラッグ＆ドロップする。

![スクリーンショット (2155).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/2ae8d474-350f-9219-61f6-218eb6bf77a1.png)
4：ドラッグ＆ドロップしたところ。キャラクターの外観が差し替わった。

![スクリーンショット (2157).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/affcfe44-debb-9f1f-ee93-0cd7c800339d.png)
5：InspectorのTransformコンポーネントにあるScale欄で外観を、Box Collider 2DのSize欄で当たり判定を、それぞれ調整する。

![スクリーンショット (2158).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/b7f2190e-3a90-91ac-f28f-9ab53b7825f0.png)
6：プレハブを閉じてシーンビューに戻り、アバターの位置を調整する。

![スクリーンショット (2160).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/c3b6cc37-a57f-1e90-fb9b-42ed18306a72.png)
7：アバターの外観を変更することが出来た。

##ワンポイントアドバイス　Colliderの活用法
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/93d10dff-853b-89e7-1a07-a501ed55456b.png)

一つのオブジェクトに対して複数のColliderをアタッチすることが出来る。ここでは全体の当たり判定を担うBox Collider 2Dとは別に、Circle Collider 2Dを左右の足下に2個つけている。こうすることで、より現実味のあるジャンプができるようになる（＝Groundタグのついたオブジェクトの側面に触れただけでジャンプできる、といったことがなくなる）。Colliderの大きさや場所は、それぞれのSizeとOffsetの設定で調整できる。

![スクリーンショット (2163).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/7fbd46fe-708e-8385-f8d8-f71828030b96.png)
同じようにゴール地点に複数のColliderを設置し、場所を左右に離すことで、アバターが片方のColliderに触れた時にエフェクトが表示され、もう片方のColliderに触れたときにシーン遷移といった演出を設定することが可能だ（アバターが左から右に移動すると仮定した場合）

#いらすとやの素材を使用する
![スクリーンショット (2164).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/9c415006-03a9-f6f7-074a-e1404401fa3e.png)
1：Unity PlayGroundに収録されているもの以外に、自由にグラフィック素材を設定できる。ここではいらすとやの素材を使ってみよう。はじめに使用したいイラストのページを開く。

![スクリーンショット (2176).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/272f0c48-1bba-8340-4bff-2e505db1b9b5.png)
2：イラストをクリックして背景が真っ暗な状態にする。その後「右クリック→名前をつけて画像を保存」で画像ファイルを保存する。

![スクリーンショット (2166).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/d2563cd5-fdbe-70fb-9b04-0c3816bfc28d.png)
3：保存した画像ファイルをUnityエディタのプロジェクトエリアにドラッグ＆ドロップする。

![スクリーンショット (2167).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/900fc02e-d57f-ecf0-8bfb-0f9496998732.png)
4：ビジュアルを差し替えたいプレハブを開き、Sprite RendererコンポーネントのSpriteスロットに画像ファイルをドラッグ＆ドロップする。

![スクリーンショット (2171).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/98724bb3-937f-ef08-1b9e-5a15cb28d89a.png)
5：TransformコンポーネントのScaleの値を設定し、画像の大きさを調整する。次にBox Collider 2DのSizeとOffsetの値を設定し、Colliderの大きさを調整する。

![スクリーンショット (2173).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/489128f7-b9ae-bd50-bdde-2981f3089752.png)
6：Unityエディタ上でキャラクターの場所などを調整する。

![スクリーンショット (2175).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/7feffb9b-5799-09cb-961f-1448e76960e6.png)
7：ゲームを実行して表示や動きを確認しよう。

![スクリーンショット (2151).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/ee543405-6372-db0c-1c64-b33a28a039e1.png)
8：いろいろな素材を活用して、楽しい画面にしよう。

##ワンポイントアドバイス　透過PNGの作り方
![win10_png_transparent001.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/166666/645be406-f445-9b08-4124-aa4ceedcb032.jpeg)
オブジェクトの外見を差し替える際、透過PNGを使用すると背景を綺麗に抜くことができる（いらすとやの素材はすべて透過PNGになっているので便利だ）。透過PNGはWindows10付属のペイント3Dで作成できる。

参考：<a href="https://paint.blueskyzz.com/apply/paint3d-transparent/">ペイント3Dで背景が透過する画像の作り方</a>