0
0

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】 自分で作成した画像をUnity2Dにテクスチャとして組み込む

Last updated at Posted at 2020-12-27

2Dゲームを作成する際に自分でイラレで書いた画像をUnityにテクスチャとして組み込む方法がわからなかったので自分用のメモとして記事を書きます。

#illustrator
イラレ側でしておくことは後ほどの切り分けのことを考えて四角で囲えるようにそれぞれのパーツをわけておくこと& png形式で保存しておくこと。背景は別にしておく。
↓この形での保存が望ましいアートボード 2.png
↓このように背景をつけておくと後で切り分けた時に背景も合わせて切り取られてしまうのでよくない
アートボード 1.png
#Unity
###1.プロジェクト内にTextureフォルダを作成し、そこに先ほど作成したpng画像を入れる
スクリーンショット 2020-12-27 15.31.43.png
###2.Inspector画面において、緑の丸の部分を設定し、赤丸の部分でApplyした後、青丸でSprite Editorを開く
(今回は一つのpngから複数のテクスチャを切り抜く場合を想定しているのでSpriteModeをMultipleに設定しているが、一つの画像をそのままテクスチャとして用いる場合はSingleで良い)

###3.スプライトエディタにてテクスチャ分割をする ####-形がオートで決まる場合 赤のSliceを押し、Sliceタブを出す。 TypeをAutomaticに設定し(青)、緑のSliceを押してテクスチャを分割。 この後は右上のApplyボタンを押すことで、分割されたシェーダーがフォルダに入る。 名前を変更したい場合はSlice後に各スプライトを選択後Nameを変更する。 フォルダ内ではRenameができないので注意。 ####-形を自分で設定したい時(背景透過で使いたいロゴなどの場合) 自分でドラッグしてサイズを決める。青色の四角で切り取った部分がShaderとなる。 青の線と緑の線がずれてしまった場合はBorderの部分のどれかの値が0で無くなっている場合だと思うので、0に直してあげればズレは直る。 サイズが決まったら右上のApplyを押してあげればそれぞれのShaderとして毎回保存される。 **ひたすら上書きされてうまくいかない時は諦めてもう一回画像読み込みからやり直すと直った** ###4.できたシェーダーはそのままSceneビューにドラッグすれば使える!

#まとめ
次回、自分で作った画像をボタンとして使えるようにするメモ!
まだまだ理解が甘いので間違ってるところなどあったら教えてください!!

0
0
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
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?