インディーゲーム開発者のためのツール、Tiledの魅力と使い方

デジタルコンテンツ
2024.08.15
この記事は約11分で読めます。

Tiledとは何か？

Tiledは、2Dゲームのマップやレベルを作成するための無料でオープンソースのエディタです。Tiledは、タイルベースのゲームデザインに特化しており、ユーザーがタイルセットを使用してグリッド上にレベルを構築できるように設計されています。

このツールは多様な形式のマップをサポートしており、JSONやCSVなどの形式でデータをエクスポートできます。また、カスタムプロパティを使用してゲーム内オブジェクトに追加データを付加することも可能です。非常に拡張性が高く、プラグインやスクリプトを通じて機能を追加することもできます。

Tiledの主要機能

多様なレイヤー対応: タイル、オブジェクト、イメージレイヤーの違いと用途。
自動タイリング: 効率的なマップ作成を支援する自動タイリング機能について。
カスタムオブジェクト: ゲーム固有の要素をマップに組み込む方法。
エクスポートオプション: サポートされているファイル形式とゲームエンジンとの連携。

Tiledのインストール

インストール手順

  1. Tiledの公式サイトにアクセスします。
  2. 「Download」ボタンをクリックすると、ダウンロードページへ移動します。
  3. 「Download Now」ボタンを押します。
  4. ダウンロードページでは、寄付を求める画面が表示されます。
    • 無料でダウンロードしたい場合は、**「No thanks, just take me to the downloads」**をクリックします。
  5. 各OS（Windows、Mac など）に対応したインストーラーが用意されています。
    • 自分の環境に合ったものを選び、ダウンロードしてください。
  6. セットアップウィザードが開始されるので、「Next」をクリックして進みます。
  7. 使用許諾契約書に同意した後、インストール先のフォルダを指定します（デフォルトの設定をそのまま使用することも可能です）。
  8. Finishでインストールは完了です。

古いバージョンはgithubから入手できます。

マップの作成と管理

この画面はTiledの「新しいマップ」を作成する際の設定ウィンドウです。マップの種類（形状）、出力形式、タイルの描画順序、マップのサイズ（タイル数）、およびタイルのサイズ（幅と高さ）を指定して新規マップを作成できます。

新しいマップの作成の準備

新しいマップを選択します。
ショートカットキーでは、Ctrl + N（Windows/Linux）または Cmd + N（macOS）を使用します。

種類

□型（長方形マップ） – Orthogonal：正方形または長方形のタイルが標準的なグリッド形式で並べられます。
※一般的なトップダウンや横スクロールゲームで使用されます。
◇型（◇型マップ） – Isometric：タイルが菱形で、斜め（ダイヤモンド形状）のグリッドを形成します。
※ゲームに3Dの錯覚を与えるために使用されます。
◇型（長方形マップ） – Staggered：Isometricと似ていますが、タイルが交互に配置されて長方形の形で表示されるため、六角形タイルの配置を模倣することができます。これにより、異なる方向への移動が可能となります。
※特に戦略ゲームで利用されます。
六角タイル（長方形マップ） – Hexagonal：六角形のタイルが使用され、密接に配置されたグリッドを形成します。
※六方向への移動を可能にし、戦略やボードゲームに適しています。

タイルの出力形式

XML (.tmx)：Tiledのデフォルト形式で、XMLベースのファイル形式です。この形式は他の多くのゲームエンジンやツールとの互換性が高いです。

JSON (.json)：ウェブベースのプロジェクトで人気のあるデータ形式。JavaScriptなどの言語で容易に扱うことができます。

CSV (.csv)：タイルデータをコンマ区切りの値としてエクスポートします。シンプルなデータ処理に適しています。

タイルの描画順序

左から右、上から下 (Left Down)：一般的な描画順序で、マップの左上から右下へとタイルが描画されます。
左から右、下から上 (Left Up)：マップの左下から右上に向かってタイルが描画される設定です。
右から左、上から下 (Right Down)：この設定では、マップの右上から左下へとタイルが描画されます。
右から左、下から上 (Right Up)：こちらはマップの右下から左上に向かってタイルが描画される順序です。

この設定に関しては、左から右、上から下のままでいいと思います。

マップの大きさ

マップの大きさは、タイルの数で定義されます。マップ作成時に、マップの幅（タイル数）と高さ（タイル数）を指定することができます。これにより、マップの全体的な広がりとゲーム内でのスクロールの必要性が決まります。

タイルの大きさ

各タイルのサイズもピクセル単位で定義されます。一般的なタイルサイズには、16×16ピクセル、32×32ピクセル、64×64ピクセルなどがありますが、プロジェクトのニーズに合わせて任意のサイズを設定することが可能です。

新しいタイルセットの設定

新しいマップの設定が完了しOKを選択したらマップが作成されます。右側にある、新しいタイルセットから、画像ファイルを開きます。イラストレーター等、ご自身で作成したものでも良いです。またはサイトからダウンロードして使用することもお勧めします。

タイルマップとタイルセットについて

下記、左側の画像は一般的に「タイルマップ」と呼ばれます。これは、ゲーム内で使用される背景や地形、建物などを配置した完成マップのことです。

下記、右側の画像は「タイルセット」または「スプライトシート」と呼ばれます。これは、マップを作成するための個々のタイル（画像）が格子状に配置されたリソース画像です。このタイルセットを使ってタイルマップを構築します。

出典: OpenGameArt – Mage City Arcanos
URL: https://opengameart.org/content/mage-city-arcanos
作者: Hyptosis

上記のタイルマップは、真上または斜め上からの見下ろし視点です。キャラクターが 上下左右に移動できる ため、トップダウン型（Top-Down） もしくは フリースクロール型（Free-Scrolling）のタイルセットと分類できます。

例：トップダウン型（ポケットモンスター 赤・緑）『ドラゴンクエスト』シリーズ（2D版）
例：フリースクロール型（クロノ・トリガー）ゼルダ（2D版）

画像の利用について

サイトに落ちている画像を使用する際に気を付けることがあります。第一にライセンスの種類を確認することです。次は有償の可否。サイズです。

ライセンスは、CC0やCC BYであれば、問題なく商用利用が可能です。

  • CC0（パブリックドメイン）: 完全自由。クレジット表記不要で商用利用も可能。
  • CC BY（クリエイティブ・コモンズ 表記あり）: クレジット（作者名など）を表記すれば利用可能。
  • GPLやMITライセンス: ソフトウェアと同じく条件付きで使用可能。

・不可または自由に使用できない場合、商用利用不可 NC、改変不可 ND、再配布不可 NR、利用禁止 Not Allowed, Prohibited、許可が必要 Permission Required

利用規約などに書かれているので、書かれている通りに利用すれば問題ないです。あとは作者の思いなどもありますが、決まりはないのでそこには私が触れることではありません。

タイルセットの読み込みを開始

  1. 右側の「タイルセット」パネルを確認します。
    • 「新しいタイルセット…」ボタンをクリックします。
    • 新しいタイルセットを作成する設定画面が表示されます（提示された画像の画面）。

ここで以下の項目を設定します。

名前（N）

  • タイルセットの名前を付けます。
    • 例: 「草原タイルセット」「城のタイルセット」など、後で分かりやすい名前にします。

種類

  • 均等にタイルが並んだ画像を使用を選択します（通常のタイルセットを使用する場合）。

マップに埋め込み

マップに埋め込み：チェックをする。マップファイル（.tmx）と一緒に保存されます。

マップに埋め込み：チェックをしない。タイルセットファイル（.tsx）。マップファイル（.tmx）から参照されますが、別途タイルセットファイル（.tsx）として存在します。

小規模プロジェクトや単一のマップで作業する場合、またはファイルを簡単に共有する必要がある場合は、「マップに埋め込み」を選択すると便利です。
複数のマップで同じタイルセットを使用する場合や、タイルセットの一貫性を保ちたい場合は、外部 .tsx ファイルとして保存する方が適しています。

画像を選択

  • 「参照（B）」ボタンをクリックして、タイルセットとして使用する画像ファイルを選択します。
    • 例: tileset.png（16×16や32×32のタイルが並んでいる画像ファイル）。
    • 対応する画像形式は主に PNG または JPG。

透過色を設定（必要に応じて）

  • 背景を透過したい場合はチェックを入れます。
  • 色を指定する方法:
    • 背景色（白、黒など）をクリックして指定。
    • タイル画像の透明部分を透過として認識させます。

タイルの幅・高さ

  • 画像内で 1つのタイルの幅と高さ をピクセル単位で指定します。
    • 例: 16px × 16px、または32px × 32px。
    • 使用するタイル画像に合わせて設定します。

上下の余白・タイル間の余白

  • 余白のある画像の場合にのみ設定。
    • 余白がない場合は「0px」のままにします。

ファイル名をつけて保存（S）ボタン

  • タイルセットを保存する場所を指定します。
  • タイルセットはTiled専用のファイル形式（.tsx）で保存されます。

例の設定

  • 名前: 森のタイルセット
  • 画像: forest_tileset.png（参照から選択）
  • タイルの幅: 16px
  • タイルの高さ: 16px
  • 上下の余白: 0px
  • タイル間の余白: 0px
  • 透過色: 必要に応じて指定。

タイルセット作成の準備と確認

レイヤーの作成手順

  1. 新しいタイルレイヤーを作成
    • 画面右側の「レイヤーパネル」で「新しいレイヤー」をクリックします。
    • 「新しいレイヤー」 を選択し、名前を「地面」など分かりやすいものに設定します。
  1. 新しいオブジェクトレイヤーを作成
    • 再度「+」ボタンをクリックし、「Add Object Layer」 を選択します。
    • 名前を「キャラクター」や「アイテム」に設定します。

レイヤーの順序を調整

  1. レイヤーパネルで、順序を変更したいレイヤーを選択します。
  2. レイヤーをドラッグ＆ドロップして、順序を変更します。
    • 一番下：地面
    • 中間：建物や道
    • 一番上：キャラクターやアイテム

マップのサイズを変更

上記のツールバーの「マップ」タブ、マップのサイズを変更からできます。

マップのタイルサイズを変更

上記のツールバーの「マップ」タブ、マップのプロパティから変更できます。

左側にプロパティが出現するので、タイル幅、タイルの高さを調整できます。他のプロパティも変更できるようになります。

地面を作成

地面を一色にするために、右のタイルセットから緑のレイヤーをクリックして選択します。

次にバケツのマークをクリックします。

そしてレイヤーを一度クリックするだけで、全て塗りつぶしになります。

タイルセットを追加

このマークをクリックして、新しいタイルセットも追加できます。

新規でタイルレイヤーを追加（オブジェクトレイヤー）

右上のレイヤータブの場所で、右クリック。

新規↠タイルレイヤー。

レイヤーが追加されます。タイルレイヤー2等と表示されるので、ダブルクリックして名前を変更します。

レイヤーを増やして管理すると、どこに何を配置したのか管理がしやすいです。

保存

保存形式は、tmx、jsonが主流です。後はcsvも使われます。衝突判定がいらないマップのみだと、画像png等の画像を保存してゲームに読み込ませます。

タイルマップチップ画像素材

タイルマップ用の素材を探す場合、以下のサイトが特に有用で、幅広いスタイルとタイプのタイルセットを提供しています。これらのサイトは、商用または非商用プロジェクトで使用できるリソースを豊富に揃えています。

OpenGameArt (オープンゲームアート)

  • URL: https://opengameart.org/
  • 特徴: 幅広い種類の無料のゲームアートと素材があり、多くのタイルセットが特に2D RPGやプラットフォーマーゲーム向けに提供されています。ライセンス条項を確認することが重要です。

Kenney (ケニー)

  • URL: https://www.kenney.nl/
  • 特徴: 高品質で統一感のあるアセットが多数提供されており、特に初心者にとって使いやすいインターフェースを持っています。商用プロジェクトにも使用できる無料のアセットも多いです。

Itch.io

  • URL: https://itch.io/game-assets/tag-tileset
  • 特徴: インディーゲーム開発者に人気のプラットフォームで、多様なタイルセットが販売・配布されています。商用利用可のオプションも含め、多様なライセンスが存在します。

GameDev Market

  • URL: https://www.gamedevmarket.net/category/2d/environments/tilesets/
  • 特徴: このマーケットプレイスは2Dおよび3Dゲームアセットを提供しており、専門的なタイルセットが豊富に揃っています。有料ですが、高品質でプロフェッショナルなアセットが見つかります。

コメント