Tweet

Pocket

動作環境

このチュートリアルは、以下の環境で作成しております。

バージョンによっては説明と異なる箇所があるかと思いますのがご了承ください。

チュートリアル用プロジェクトの作成

まずは、チュートリアル用にプロジェクトを作成してください。

プロジェクトの作成やNostalgiaのインポートについては「Nostalgiaを使用するための準備」を参照してください。

TileSetテクスチャの準備

TileSetを置くフォルダの作成

まずTileSetを置くフォルダを作成します。

1. ProjectウィンドウからAssetsフォルダを選択。
2. Projectウィンドウの+ボタンをクリック。
3. メニューから「Folder」を選択。
4. 名前を「TileSets」に設定。

チュートリアル用素材のダウンロード

今回はTileSetに使用する素材を予め用意いたしました。

以下ボタンよりダウンロードして解凍してください。

(素材は https://ci-en.net/creator/1430 よりお借りしました。)

TileSetテクスチャのインポート

次にTileSet用テクスチャをインポートします。

1. ProjectウィンドウでTileSetsフォルダを選択。
2. ダウンロードしたチュートリアル素材のDungeon.pngをTileSetsフォルダへドラッグ＆ドロップ

TileSetテクスチャの設定

インポートしたDungeonテクスチャの設定を行います。

1. ProjectウィンドウからDungeonテクスチャを選択。
2. Inspectorウィンドウで以下のように設定。
   

   Texture Type	Sprite (2D and UI)
   Sprite Mode	Multiple
   Pixels Per Unit	32
   Filter Mode	Point (no filter)

3. Sprite Editorボタンをクリック。
4. 「Unapplied import settings」ダイアログが表示されたらApplyボタンをクリック。

Spriteの設定

1. Sprite EditorウィンドウのSliceドロップダウンをクリック。
2. 以下のように設定してSliceボタンをクリック。
   

   Type	Grid By Cell Size
   Pixel Size	X: 32, Y: 160
   Offset	X: 0, Y: 0
   Padding	X: 0, Y:0
   Keep Empty Rects	オフ
   Pivot	Center
   Method	Delete Existing

3. Dungeon_6とDungeon_7スプライトの下辺をドラッグしてサイズ調整
   (あるいはY: 224, H: 32に設定)
4. Sprite EditorウィンドウのApplyボタンをクリック。
5. Sprite Editorウィンドウを閉じる。

TileSetアセットの準備

TileSetアセットの作成

Dungeonテクスチャを使用するTileSetアセットを作成します。

1. ProjectウィンドウからDungeonテクスチャを選択。
2. Projectウィンドウの+ボタンをクリック。
3. メニューから「Nostalgia > TileSet from selected Texture or Material」を選択。

TileSetアセットの設定

TileSetアセットへタイルの設定を行います。

Spriteからインポート

Dungeonテクスチャの各スプライトをインポートしてTileを設定します。

1. Dungeonタイルセットを選択。
2. InspectorウィンドウのImport from spritesを開く。
3. 下部のCheck Allボタンをクリック。
4. Dungeon_4とDungeon_5はアニメーション用タイルのためチェックをオフにする。
5. Importボタンをクリック。
6. Import from spritesを閉じる。

Tileの設定

各タイルの詳細を設定します。

Dungeon_0(床)

オートタイルのフチあり床

1. Tilesから一番最初のタイル(Dungeon_0)を選択。
2. Typeを「Auto Floor Wolf」に変更する。
3. Combination Group Nameを「Floor」に変更する。

Dungeon_1(壁)

オートタイルの壁

1. Tilesから２番目のタイル(Dungeon_1)を選択。
2. Typeを「Auto Floor Wolf」に変更する。
3. Tile Colliderを「Tile Box Collider」に変更する。

Dungeon_2(天井)

オートタイルの天井

1. Tilesから３番目のタイル(Dungeon_2)を選択。
2. Typeを「Auto Floor Wolf」に変更する。
3. Combination Group Nameを「Ceiling」に変更する。
4. Tile Colliderを「Tile Box Collider」に変更する。

Dungeon_3(水)

オートタイルのアニメーション付き水

1. Tilesから４番目のタイル(Dungeon_3)を選択。
2. Typeを「Auto Floor Wolf」に変更する。
3. Animationを3に変更する。
4. Tile Colliderを「Tile Box Collider」に変更する。

Dungeon_6(黒天井)

Dungeon_2(天井)と連結可能な黒単色タイル

1. Tilesから5番目のタイル(Dungeon_6)を選択。
2. Combination Group Nameを「Ceiling」に変更する。
3. Tile Colliderを「Tile Box Collider」に変更する。

Dungeon_7(フチなし床)

Dungeon_0(床)と連結可能なフチなしの床

1. Tilesから6番目のタイル(Dungeon_7)を選択。
2. Combination Group Nameを「Floor」に変更する。

試し塗り

設定が終わったら試し塗りしてみましょう。

1. Hierarchyウィンドウの+ボタンをクリック。
2. メニューから「Nostalgia Map」を選択。
3. MapコンポーネントのTile Setを「Dungeonタイルセット」に変更。
4. Open Editorボタンをクリック。
5. 鉛筆ツールを選択。
6. Tilesから配置するタイルを選択。
7. SceneウィンドウのMap領域を左ボタンドラッグ。
8. 各タイルの設定に問題ないか確認する。
9. Playボタンをクリックし、Dungeon_3(水)のアニメーションを確認する。