0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-01-26

#Unity PlayGround内のキャラクターに差し替える
スクリーンショット (2152).png
1:ゲームのメカニクスとレベルデザインが固まったら、キャラクターのビジュアルをゲームの世界観にあわせて差し替えよう。ここでは例としてアバターのビジュアルを変更する。

スクリーンショット (2153).png
2:Unityエディタ上でアバターのプレハブをダブルクリックして開く。

スクリーンショット (2154).png
3:プロジェクトエリアのツリーからAssets>Images>Charactersと進み、任意のキャラクター(ここではZombie)を選ぶ。次にアバターのInspectorにセットされているSprite RendererコンポーネントのSpriteスロットに、選択したアイコンをドラッグ&ドロップする。

スクリーンショット (2155).png
4:ドラッグ&ドロップしたところ。キャラクターの外観が差し替わった。

スクリーンショット (2157).png
5:InspectorのTransformコンポーネントにあるScale欄で外観を、Box Collider 2DのSize欄で当たり判定を、それぞれ調整する。

スクリーンショット (2158).png
6:プレハブを閉じてシーンビューに戻り、アバターの位置を調整する。

スクリーンショット (2160).png
7:アバターの外観を変更することが出来た。

##ワンポイントアドバイス Colliderの活用法
2.png

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

スクリーンショット (2163).png
同じようにゴール地点に複数のColliderを設置し、場所を左右に離すことで、アバターが片方のColliderに触れた時にエフェクトが表示され、もう片方のColliderに触れたときにシーン遷移といった演出を設定することが可能だ(アバターが左から右に移動すると仮定した場合)

#いらすとやの素材を使用する
スクリーンショット (2164).png
1:Unity PlayGroundに収録されているもの以外に、自由にグラフィック素材を設定できる。ここではいらすとやの素材を使ってみよう。はじめに使用したいイラストのページを開く。

スクリーンショット (2176).png
2:イラストをクリックして背景が真っ暗な状態にする。その後「右クリック→名前をつけて画像を保存」で画像ファイルを保存する。

スクリーンショット (2166).png
3:保存した画像ファイルをUnityエディタのプロジェクトエリアにドラッグ&ドロップする。

スクリーンショット (2167).png
4:ビジュアルを差し替えたいプレハブを開き、Sprite RendererコンポーネントのSpriteスロットに画像ファイルをドラッグ&ドロップする。

スクリーンショット (2171).png
5:TransformコンポーネントのScaleの値を設定し、画像の大きさを調整する。次にBox Collider 2DのSizeとOffsetの値を設定し、Colliderの大きさを調整する。

スクリーンショット (2173).png
6:Unityエディタ上でキャラクターの場所などを調整する。

スクリーンショット (2175).png
7:ゲームを実行して表示や動きを確認しよう。

スクリーンショット (2151).png
8:いろいろな素材を活用して、楽しい画面にしよう。

##ワンポイントアドバイス 透過PNGの作り方
win10_png_transparent001.jpg
オブジェクトの外見を差し替える際、透過PNGを使用すると背景を綺麗に抜くことができる(いらすとやの素材はすべて透過PNGになっているので便利だ)。透過PNGはWindows10付属のペイント3Dで作成できる。

参考:ペイント3Dで背景が透過する画像の作り方

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?