12
5

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 5 years have passed since last update.

タイルマップ使ってみた

Last updated at Posted at 2017-12-12

グレンジ Advent Calendar 2017」12日目を担当のMiyaAtsuです。

今回はUnity 2017.2から実装されたのタイルマップを使ってみたので、その時のことを書きたいと思います。
よろしくお願いいたします。

Unityのバージョンを確認

メニューの「Help」→「About Unity…」で確認できます。

qiita1.png

qiita2.png

もしUnity 2017.2より前のバージョンの場合はアップデートしましょう。

確認出来たら2Dの新規プロジェクトを作りましょう。

qiita3.png

スプライトの用意

適当なフリー画像を探して、ドラック&ドロップで任意の場所に置きます。
自分は「タイルマップ 素材 フリー」で検索しました。

「Sprite Mode」「Pixels Per Unit」を下画像のように変更し「Sprite Editor」をクリックする。
qiita6.png

メニューの「Slice」から「Type」「Pixel Size」をした画像のように変更し「Slice」をクリックする。
qiita7.png

最後に「Apply」をクリックして、スプライトの設定を終わりです。

TilePalette、TileAssetの作成

メニューの「Window」→「Tile Palette」を選択
qiita8.png

下図のウィンドウが開かれるので、「Create New Palette」を選択し任意の名前を入力し「Create」を選択。
保存場所は人の場所を指定。

qiita9.png

2で用意したスプライトをドラックするとTileAssetが作成される。
任意の保存場所を指定。

qiita10.png

これでTilePalette完成(下図)

qiita11.png

タイルマップ作成

まずはHierarchyの「2D Object」→「Tiltmap」を選択。
qiita12.png

下図のようにGameObjectが配置されます

qiita13.png

では、早速描画していきましょう。

まずはTilePaletteで描画したいタイルは選択(範囲選択もできます)
次にペンのアイコンを選択
あとはScene上でクリックすると選択したタイルが設置されます(長押しスライドもいけます)
ちなみに「[」で左回転「]」で右回転できます。

qiita16.gif

このペン以外の項目について簡単に説明したいと思います。
qiita15.png

これは矩形描画

qiita17.png

qiita18.gif

これで消せます

qiita19.png

qiita20.gif

これは塗りつぶし

qiita21.png

qiita22.gif

これで選択して移動できます

qiita23.png

qiita24.gif

これは範囲を変えれます

qiita25.png

qiita26.gif

項目の説明は以上です。

最後にレイヤーの描画順についてです。
例えば地面の上に建物を配置したい場合、普通にやると建物のタイルの地面部分がみえなくなります。
なので地面と建物を配置するレイヤーを分けて表示順を設定するとう解決方法をとります。
今回はOrder in Layerで指定する方法を使います。

まずタイルマップを1つ追加して、「Order in Layer」を1に設定します。

qiita27.png

qiita28.png

あとは地面と建物を分けて描画するだけです。

qiita29.gif

簡単にではありますが、以上になります。
ありがとうございました。

12
5
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
12
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?