Unity AssetStoreまとめ

アセットストア日替わりタイムセールの記事を書いていきます。

Unity2017.2.0b2のタイルマップエディターを触ってみた感想

今回は、コーギーエンジンのセールの時に書いてた話の続きです。

 

Unity2017.2.0b2で「タイルマップ試してるけど、使い方が全然わからないよ」って方の参考にもなるかと思います。 

f:id:assetsale:20170709220244j:plain

こんな感じにまで作れるようになりました。

 

 

Unity 2D Tile Map Editor intro and demo game tutorial - YouTube(9:06)

 

Unity 2D Preview Tilemap Tutorial - scriptable Tile and Tilebrush - YouTube(12:25)

 

Tile Map Editorのチュートリアル動画を参考にしながら、少し触ってみた。

 

UnityのTile Mapについて

2D Experimental Previewというテスト版で昔から開発が行われていて、それがUnity2017.2.0b2でやっと実装されたみたい。

 

色々探してみたけど、日本語で書かれたチュートリアルっぽい記事が見当たらない。

Unity2017.2.0b2でどこまで触れるか、人柱として触ってみました。

 

この方法であってるか分からないけど、

「現状どうなの?」って楽しみにされてる方の参考になればと思います。

 

 

ここから初心者でも使えるレベルで事細かく書いてみました。

ちょっと長いので、慣れてる方は読み飛ばしながらお進みください。

 

1.Unityベータ版をダウンロード&インストール

https://unity3d.com/jp/unity/beta

(現在使用中のUnityに上書きされないように、フォルダ名を変えて避難するように)

 2Dモードで新規プロジェクト作成

 

※Youtubeの「Robodash Demo-Project」をMac環境で開いた所、namespaceが被ってるからダメだよ的なエラーが出る。

ダウンロード先(https://bitbucket.org/Unity-Technolog...

適当な名前に変えて回避しようとしたけど、時間がかかりそうなので保留


 

2.素材を入手

今回はRPGツクールのフリー素材を配信されてるakiroomさまからお借りしました。

ツクール素材 - akiroom

ありがとうございます。

 

3.素材を加工

スプライトの透過は色で判定できない?ので、

適当なペイントツールで「色を選択→消す」で透過させる。png形式で保存。

f:id:assetsale:20170710013231j:plain

 

 

4.手順3で加工した素材をProjectにドロップ

 

f:id:assetsale:20170710021146j:plain

スプライトの設定を行います。

Sprite Mode :「Single」を「Multiple」へ変更(複数あるから)

Pixels Per Unit:「100」を「16」に変更(1マス16ピクセル)

「Sprite Editor」ボタンをクリック -> Applyで適用する。

 

f:id:assetsale:20170710021311j:plain

Sprite Editorで、上部タブの「Slice」をクリックします。

 

Typeを「Automatic」から「Grid By Cell Size」に切り替えて、

Pixel Sizeを「X = 16」「Y = 16」

「Slice」をクリック

上部のApplyタブをクリックして適用します。

f:id:assetsale:20170710021613j:plain

処理が終わったらウィンドウを閉じて、一服しましょう。

 

5.WindowからTile Paletteを開く

f:id:assetsale:20170710022023j:plain

Sceneビューの下に配置してみた

f:id:assetsale:20170710022306j:plain

 

「Create New Palette」をクリックして

f:id:assetsale:20170710022602j:plain

Nameを「Town Palette」に変更し、他の設定は触らず「Create」をクリックします。

アセットの保存場所を聞かれるので、「Palette」フォルダを作って格納しました。

これはお好きな感じで。

 

 

6.スプライトをパレットにドロップする

Tile Paletteウィンドウがスプライト入れて下さいに変わるので、

手順4で作ったスプライトをドロップします。

f:id:assetsale:20170710023149p:plain

アセットの保存場所を聞かれるので、

「Tiles/Town」フォルダを作ってそこに格納しました。

大量に生成されるのでフォルダ作った方が良いです。

 

f:id:assetsale:20170710023506j:plain

ジェネレート中・・・ 30秒くらい?

 

f:id:assetsale:20170710023641j:plain

パレットが出来上がり!

いきなりブラシで塗りたいですが、まだ塗れません。

 

 

7.HierarchyにTilemapを作る

 

f:id:assetsale:20170710023830j:plain

「2D Object -> 「Tilemap」を選択すると、「Grid / Tilemap」が作られます。

f:id:assetsale:20170710024012p:plain

このTilemapがレイヤー1層分です。

2個、3個と作って何層ものレイヤーを作れるようになっています。

それはまた後で

 

 

8.ペイントする

f:id:assetsale:20170710025424g:plain

 

イメージ通りにペイントで配置することができました!

SHIFTキーを押しながらペイントすると消しゴムになります。

f:id:assetsale:20170710025702j:plain

しかし透過レイヤーを配置しようとすると・・・

 

このようになってしまいます。

f:id:assetsale:20170710025737j:plain

 

9.レイヤーを追加する

透明にならないのは、最下層のレイヤーだから

新しいレイヤーに描き込めば正しく表示されます。

 

HierarchyビューのGridを選択して、Tilemapを選択する。

f:id:assetsale:20170710025921j:plain

Gridの子にTilemap(1)が生成される

f:id:assetsale:20170710030024p:plain

Inspectorの「Tilemap Renderer」で、

「Order in Layer」の値を0から1に変更します。

f:id:assetsale:20170710030653p:plain

レイヤーの番号はデフォルト0。

手動でセットしないと後々正しく表示されなくなります。

何層もレイヤーが作れますが、数値が被らないように割り当てましょう。

※UIのCanvasとは勝手が違うみたい。

 

f:id:assetsale:20170710030724j:plain

Tile Paletteのツールパレット下部が「Tilemap(1)」に変化しました。

※本当はオブジェクトの名前を変えて分かりやすくすると良い。

 

これで、Tilemap(1)のレイヤーに透過タイルをペイントする事ができます。

f:id:assetsale:20170710031058j:plain

 

シーンビューのグリッドラインを消したいときはGizmos->Show Gridのチェックを外す

f:id:assetsale:20170710031241p:plain

 

隣の銅像を消すには、レイヤーをTilemapに戻して塗りなおします。

f:id:assetsale:20170710032218g:plain

 

これで途中だった屋根も完成!

f:id:assetsale:20170710032555g:plain

 

 

10.8方向ブラシは?

 

残念ながらここで終了。

色々探しましたが、チュートリアル動画にあったブラシのCreateボタンが無い。

f:id:assetsale:20170710032655p:plain

↓チュートリアルの画面

f:id:assetsale:20170710033137p:plain

「CustomAssets」を入れる手順もあって、

実際に入れるとスクリプト側にエラーが出るので、まだ使えないみたいです。

 

ギミック付きのタイルも、ブラシを変えないとできないみたいなので、

現時点で私はここで止まっています。

 

以上が「Unity2017.2.0b2」で体験した「タイルマップエディター」の感想です。

 

ブラシの作り方がわかる人居たら教えてください〜。

 

関連アセット

過去セールで紹介させて頂いたタイルマップの出来るアセットまとめ

 

オートタイルが使える! : 『Nostalgia 2』    $21.60

日本作者さんによるタイルマップ生成エディタ / アニメ付きタイルやタイルにコンポーネントが付けられる

RPG Map Editor    $48.60

2Dタイルマップ作成エディタ / 高機能タイルマップと、RPGタイプのイベントのキャラ移動がセット

Super Tilemap Editor    $37.80

2D横スクロール、トップダウン両方OK / RPG Map EditorからRPGの機能を省いたタイプ

 

Tile Tool    $32.35

3Dタイルマップツール / タイルメッシュの最適化が凄い

Isometric 2.5D Toolset    $43.20

2.5Dのアイソメトリック作成ツール / キャラクターを歩かせる機能付き