Unityに関連する記事です

 以下の内容で順番に実装を進めていきます。

手順3 ーTileMap 用の画像の準備ー
 4.TileMap で利用する画像ファイルを Unity にインポートする
 5.画像ファイルの設定を行い、Unity にて利用できる状態にする



 新しい学習内容は、以下の通りです。

 ・Sprite Editor機能



4.TileMap で利用する画像ファイルを Unity にインポートする

1.設計


 2Dマップを作成するために必要な画像ファイルを探してダウンロードしたり、自分で作成したりして Unity 内にインポートします。
Unity の機能の1つである TileMap を利用することで、この画像をタイルのように敷き詰めて、1つのマップとして作成することが出来ます。
まずはこの手順で、TileMap で利用するために、画像ファイルの準備を行います。


2.マップとして利用したい画像ファイルを Unity へインポートする


 マップ用の画像ファイルを準備します。自由な画像を設定しましょう。
今回のプロジェクトでは、ぴぽや様の画像を利用させていただいています。無料でダウンロードできますが、しっかりと利用規約を守って利用しましょう。
イメージしているフィールドの画像を用意してください。例えば、ワールドマップ、市街地、ダンジョン、などです。

ぴぽや様
ホーム
https://pipoya.net/sozai/
ぴぽや様
マップチップ pipo-map001.zip
https://pipoya.net/sozai/assets/map-chip_tileset32...



 ダウンロードしたファイルは多くの場合、圧縮されていますので、まずは解凍して使用できる状態にします。
 
 Unity へ画像ファイルをするには、Assets 内に対象のファイルをドラッグアンドドロップをすればインポートできます。
インポート前に、Project 内に画像ファイル用の Textures フォルダ内に Fields フォルダを作成して用意しておくと細分化でき、管理がしやすくなります。

 先の手順を考えつつ、どのようにすればプロジェクトの管理しやすいかを考えながら操作を行うようにしていきましょう。


フォルダ画像



 画像ファイルですが、ダウンロードしたファイルすべてをインポートする必要はありません。
フィールドの地形用の画像として利用したいファイルを数枚、Unity へインポートしてください。
あとでインポートすることも可能です。


インポート後のフォルダ画像



 上記のフォルダ画像のように、画像のファイルの右横に矢印のアイコンが出ない場合もありますが、それは今後の設定で解消されます。
これは Texture Type の設定によるもので、インポートした画像が、Unity 内の 2D 画像としてすでに利用できる状態かどうかを示すものです。
作業を進めていくとちゃんと矢印が表示されて Unity で利用できる状態になります。今は気にせずに進めてください。

 以上でインポートは完了です。


5.画像ファイルの設定を行い、Unity にて利用できる状態にする

1.設計


 インポートした画像ファイルは2Dゲームで利用するための設定を行う必要があります。ここではその手順を進めていきます。


2.画像ファイルの設定を行う


 インポートした画像ファイルの設定を行います。

 画像ファイルを選択するとインスペクターに画像の設定情報が表示されます。


インスペクター画像


 
 画像ファイルは Unity では Texture(テクスチャ)と呼ばれます。詳細は、公式マニュアルを確認しておいてください。
インスペクターの設定項目についても記載されています。

参考サイト
Unity公式マニュアル
テクスチャ
https://docs.unity3d.com/ja/2018.4/Manual/class-Te...


 
 3箇所変更を行います。

 最初に、Texture Type を確認します。こちらを Sprite(2D and UI) に設定します。
この設定になっていないと、2D / UI 用のテクスチャとして利用することが出来ません

 続いて、上記の画像例のように、1枚の画像に複数の画像が登録されている場合、Sprite Mode を Single から Multiple に変更をします。
こちらを変更すると、Sprite Editor という機能を利用して、1枚の画像を複数の画像に分割することが出来るようになります。
1枚の画像に1枚の画像の登録の場合には、この手順は不要です。

 最後に Pixels Per Unit の値を 32 に変更します。
この値は Scene ビューのワールド座標の1単位(マス)当たりのピクセル数を指します。
例えばキャラクターの Pixels Per Unit の値を 32 にして、地形用の画像の Pixels Per Unit の値も 32 にすることで
1マスごとに地形とキャラの大きさが合うように設定できます。


Scene ビュー画像例



参考サイト
ぺんごや様
【Unity】pixelsPerUnit (1ユニットのピクセル数)をおさらい【2D向け】
https://pengoya.net/unity/pixelsperunit/

 以上の手順が終了したら、インスペクターの一番右下にある Apply ボタンを押してください
隠れている場合は、インスペクターを下方向にスクロールすることで表示されます。このボタンを押すことにより、設定が反映されます。

 完成した際のインスペクター画像です。


Apply 後のインスペクター画像


 
 先ほどインポートした画像の右横に矢印が出ていなかった場合は、Texture Type を変更したことによって、
この時点で矢印が表示されるようになっていますので、確認してみてください。



 なお、Filter Mode という設定については、初期設定は Bilinear という設定になっています。これは画像をぼかす処理です。
今後 Tilemap としてテクスチャを利用した際に、ならべたテクスチャがぼやけてしまう場合には、この Filter Mode の設定を Point (no filter)変更することでぼかす機能を解除できます。


 参考サイト
うにてぃブログ様
【Unity】Sprite の Filter Mode
https://hacchi-man.hatenablog.com/entry/2020/03/28...


4.Sprite Editor 機能を利用して画像を分割する


 インポートした画像に複数の画像が1枚の画像として登録されている状態の場合、Sprite Editor 機能を利用することで分割が出来ます。

 分割したいテクスチャをフォルダ内で選択します。
インスペクターに選択したテクスチャの情報が表示されますので Sprite Editor ボタンを押してください
ポップアップで Sprite Editor ウインドウが開きます。このウインドウの大きさや位置は可変可能ですので、見やすい大きさに適宜変更して使用してください


Sprite Editor画像



 ウインドウ内の左上にある Slice ボタンを押すことで、画像の分割ができます。適宜な大きさやサイズで分割してみてください。
分割したい升目がわかっているのであれば、Grid By CellCount を指定することで行の画像数と列の画像数を指定して分割できます(1×5、などの場合)

 Slice をすると画像に切れ目が入りますので、各画像が適切な大きさになっているかを確認します。
その後、修正する場合には Slice を押せば何回でも修正できます。

 問題なく Slice が終了しましたら、SpriteEditorウインドウの右上にある Apply ボタンを押してください。これで画像の分割が確定されます。
確定後でも Slice は可能です。変更した場合には最後に必ず Apply して分割情報を反映してください

 分割に成功すると、1つの画像ファイルであった画像を選択すると、その中に子として分割された画像ファイルが表示されます。


分割されたファイル



 このファイルをクリックすると、分割された各画像が表示されます。


 ファイルの通し番号が画像のように順番になっていない場合には、SpriteEditor 内で分割している画像を選択することで、ファイル名の変更ができます
分割画像を選択後、右下にある、下記の画像のような小さいインスペクターの部分で変更できます。


分割した画像のファイル名の設定(Sprite Editor 内の小さいウインドウ)



 以上でこの手順は完了です。


参考サイト
YTTMWORK 様
スプライト
https://yttm-work.jp/unity/unity_0014.html



 この手順は以上で終了です。

 次は 手順4 −Tile Pallete と TileMap の作成− です。

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

Menu



技術/知識(実装例)

2Dおはじきゲーム(発展編)

2D強制横スクロールアクション(発展編)

3Dダイビングアクション(発展編)

2Dタップシューティング(拡張編)

レースゲーム(抜粋)

2D放置ゲーム(発展編)

3Dレールガンシューティング(応用編)

3D脱出ゲーム(抜粋)

2Dリアルタイムストラテジー

2Dトップビューアドベンチャー(宴アセット使用)

3Dタップアクション(NavMeshAgent 使用)

2Dトップビューアクション(カエルの為に〜、ボコスカウォーズ風)

VideoPlayer イベント連動の実装例

VideoPlayer リスト内からムービー再生の実装例(発展)

AR 画像付きオブジェクト生成の実装例

AR リスト内から生成の実装例(発展)

private



このサイト内の作品はユニティちゃんライセンス条項の元に提供されています。

管理人/副管理人のみ編集できます