- 追加された行はこの色です。
- 削除された行はこの色です。
#contents
*Tilemap [#l669dae2]
それではステージを作っていきましょう
*はじめに [#l669dae2]
[ひつじを動かしてみる]の続きです
この項ではステージを作っていきます
前回の講座で作ったボックスは邪魔になるので削除しておいてください。
*Tilemap [#f339a9bc]
UnityにはTilemapというものが標準的に備わっていて、簡単にマップを作ることができます。
ヒエラルキーを右クリックして、2D object>Tilemap>Rectangular を押してください
#br
#ref(Tilemapを追加.png,,900x900)
#br
画面に格子状の線が出てきましたね。この画面では画像を簡単に張り付けることができます。それでは地面の画像を追加していきましょう。
#br
#ref(tiles.png)
#br
この画像を保存して、UnityのほうのAssetsにドラッグ＆ドロップしてください。
#br
#ref(tiles画像を追加.png,,900x900)
#br
このままでは一枚の画像としか認識されないので、画像をスライスしていきたいと思います。画像のtile_mapを選択して、InspectorのspritemodeをMultipleに変更してください。
#br
#ref(multipleに変更.png,,900x900)
#br
これで画像を切り分けられるようになりました。InspectorのSprite Editorを押してください。この時、警告が出るのでApplyを押してください。
#br
#ref(画像をスライス１.png,,900x900)
#br
左上のSliceから自動的に画像を分けることができます。今回はグリッドごとに分けたいので、「Grid by cell size」を選んでください。この時、PixcelSizeのxとyを32にしてから、Suliceを押してください。
#br
#ref(画像をスライス２.png,,900x900)
#br
そして、Tilemapに合わせるため、InspectorからPixels Per Unitの数値を100から32に変更してください。
#br
#ref(Pixcel per Unitを変更.png,,900x900)
#br
これで画像を切り分けることができました。画像の右の三角をおすと、切り分けた画像を選択できるようになっています。
#br
#ref(切り分けた画像を選択.png,,900x900)
#br
まだマップを作る準備は終わっていません。次はタイルパレットを作っていきます。画面上部からWindows>2d>Tilepaletteを選択してください。
#br
#ref(tilepalette起動！.png,,900x900)
#br
また、tilepaletteの画像を保存するフォルダを作ります。Assetsで右クリックして Create>Folderを押してください。今回は名前を「Tilepalette」にします。
#br
#ref(Tilepaletteフォルダを作成.png,,900x900)
#br
その後、Tilepalatteの画面から、Create New Paletteを押して、新しいパレットを作成してください。この時、フォルダは先ほど作ったフォルダを選択してください。
#br
それでは、maptaletteにマップチップを追加しましょう。スライスした画像ををパレットにドラッグ＆ドロップしてください。
#br
#ref(マップチップを追加だ.png,,900x900)
#br
これでマップを作る準備ができました。
ここで、maptaletteの操作を説明しておきます。
#br
#ref(tilepaletteの操作.png,,900x900)
#br
左から
・マップチップを選択します。
・選択中のマップチップを移動します。
・選択したマップチップでグリッドを塗ります。Shift押しながらで削除できます。
・マップチップを範囲選択できます。
・スポイトです。このツールを選択した状態でシーンビューのマップチップをクリックすると、そのマップチップで塗れるようになります。
・消しゴムです。
・選択したマップチップでグリッドを塗りつぶします。
となっています。マップチップを選択して、３番目を選択してSeane上をなぞると画像を配置することができます。
地面の画像はいろいろ用意されているので、自由に配置してみましょう。
#br
#ref(map制作です.png,,900x900)
#br
とりあえず適当にマップを作ってみました。
見た目はできてきますが、今の状態だと当たり判定がありません。この画像に当たり判定を付けてみましょう。
tilemapのインスペクターのadd componentでtilemap collider2dを検索して出てきたものをクリックしてください。
#br
#ref(tilemapcollider2dを追加daa.png,,900x900)
#br
これで、それぞれのグリッドの画像それぞれに当たり判定がつきました。この当たり判定を一つにまとめることができます。
tilemapに、さらにComposize collider 2D を追加してください。
この時、勝手にrigidbody2Dがついてきますが、ステージには重力の影響を付けたくないので、rigidbody2Dのtypeをstuticにしてください。
その後、tilemap collider 2Dのused by composizeにチェックを入れると当たり判定がまとまります。
#br
#ref(composizeを追加.png,,900x900)
#br
SEAP22マニュアル
