Tiled Map Editorの使い方

JavaScript

tiledMapLoader.jsを使ってenchant.jsでマップを表示させたい人向けの解説です。

用意するもの

  1. Tiled Map Editor
Tiled Map Editor

リンク先のページの右側のメニューから、自分が使っているOSのインストーラをダウンロードしてインストールする。
インストーラは日本語にも対応している。

マップを作る

Tiled Map Editorを起動して新しいマップを作成します。

タイルの大きさは16x16（そのままでOK）
マップの大きさは30x30に

レイヤーデータの保持方法をCSVに設定する

編集＞設定＞レイヤーデータの保持方法をCSVに設定する

タイルセットを追加する

RPGのサンプルのmap1.gifをpngに変換して、
マップ＞新しいタイルセットに追加する
map1.png

ポチポチとマップを作る

右下のタイルセットウィンドウから、塗る画像を選んでひたすら地道にぽちぽちやります。


タイルレイヤーを追加して木を生やす

右のレイヤーウィンドウでタイルレイヤを追加します。
レイヤーウィンドウでチェックを外し、非表示にしていると、ゲーム上でも表示されません。（後述する前景レイヤーも同じ）

マップの外周に木を生やします。
下に生えている木の上半分はあとから別のレイヤに追加します。


前景レイヤを追加する

タイルレイヤーを追加し、レイヤー名を「foreground」にします。
レイヤー名が「foreground」で始まるレイヤーは、プレーヤーより手前に表示されます。

前景レイヤーに先ほどした半分しかなかった木の上半分を追加します。

当たり判定を追加する

タイルレイヤーを追加し、レイヤー名を「collision」にします。
「collision」という名前のレイヤーに配置した画像は、どの画像でも当たり判定ありになります。
collisionレイヤーに配置した画像はゲーム上で表示されません。
つまり、プレイヤーが通れないところは「collision」という名前のレイヤーを作ってなにか塗ればいいということです。
レイヤーウィンドウでチェックを外し、非表示にしていても当たり判定は有効になります。

保存する

適当な名前をつけて保存

mapLoader.jsを使ってTiled Map Editorで作成したマップをenchant.jsに読み込む

JavaScript

タイトルの通り、Tiled Map Editorで作成したマップをenchant.js製のゲームで表示するプラグインを作りました。
enchant.jsのRPGのサンプルを使って使い方を説明します。

手っ取り早く動作サンプルが見たい人はRPG_mapLoader.zipかhttp://9leap.net/games/942をどうぞ。

用意するもの

  1. enchant.js
  2. Tiled Map Editor
  3. mapLoader.js
１．enchant.js

リンク先のページから"Download from github.com"のリンクをクリックしてZIPファイルをダウンロードする。
ダウンロードが完了したら圧縮ファイルを解凍する。

２．Tiled Map Editor

リンク先のページの右側のメニューから、自分が使っているOSのインストーラをダウンロードしてインストールする。
インストーラは日本語にも対応している。

３．mapLoader.js

ダウンロードしてenchant.jsの\examples\rpgに配置する

マップを作る

Tiled Map Editorを起動して新しいマップを作成します。

タイルの大きさは16x16（そのままでOK）
マップの大きさは30x30に

レイヤーデータの保持方法をCSVに設定する

編集＞設定＞レイヤーデータの保持方法をCSVに設定する

タイルセットを追加する

RPGのサンプルのmap1.gifをpngに変換して、
マップ＞新しいタイルセットに追加する
map1.png

ポチポチとマップを作る

右下のタイルセットウィンドウから、塗る画像を選んでひたすら地道にぽちぽちやります。


タイルレイヤーを追加して木を生やす

右のレイヤーウィンドウでタイルレイヤを追加します。
レイヤーウィンドウでチェックを外し、非表示にしていると、ゲーム上でも表示されません。（後述する前景レイヤーも同じ）

マップの外周に木を生やします。
下に生えている木の上半分はあとから別のレイヤに追加します。


前景レイヤを追加する

タイルレイヤーを追加し、レイヤー名を「foreground」にします。
レイヤー名が「foreground」で始まるレイヤーは、プレーヤーより手前に表示されます。

前景レイヤーに先ほどした半分しかなかった木の上半分を追加します。

当たり判定を追加する

タイルレイヤーを追加し、レイヤー名を「collision」にします。
「collision」という名前のレイヤーに配置した画像は、どの画像でも当たり判定ありになります。
collisionレイヤーに配置した画像はゲーム上で表示されません。
つまり、プレイヤーが通れないところは「collision」という名前のレイヤーを作ってなにか塗ればいいということです。
レイヤーウィンドウでチェックを外し、非表示にしていても当たり判定は有効になります。

保存する

「map.tmx」という名前で、\examples\rpgに保存します。

mapLoader.jsでマップを読み込んで表示する

index.htmlでmapLoader.jsを読み込みます
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no"> 
        <meta name="apple-mobile-web-app-capable" content="yes"> 
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
        <title>enchant</title>
        <script type="text/javascript" src="../../enchant.js"></script>
        <script type="text/javascript" src="../../plugins/ui.enchant.js"></script>
        <script type="text/javascript" src="game.js"></script>
        <!-- 必ずgame.jsよりあとに読み込んでください -->
        <script type="text/javascript" src="mapLoader.js"></script>
        <script type="text/javascript">
        //map.tmx以外のファイル名をつけた場合、ここで設定する
        //mapLoader.file = 'myMap.tmx';
        </script>
        <style type="text/css">
            body {
                margin: 0;
            }
        </style>
    </head>
    <body>
    </body>
</html>
game.jsで読み込んだマップを設定する

game.jsを開いて以下のように修正します。

修正前のソース
var map = new Map(16, 16);
map.image = game.assets['map1.gif'];
map.loadData([
    [322,322,322,322,322,322,（中略）421,420, -1, -1, -1, -1, -1, -1, -1, -1]
]);
map.collisionData = [
    [  0,  0,  0,  0, （中略）  1,  0,  0,  1,  1,  1,  1,  1,  1,  1,  1,  1]
];

var foregroundMap = new Map(16, 16);
foregroundMap.image = game.assets['map1.gif'];
foregroundMap.loadData([
    [ -1, -1, -1, -1, （中略） -1, -1, -1]
]);
修正後のソース↓↓↓↓
var map = new Map(16, 16);
map.image = game.assets['map1.gif'];   
map.loadData.apply(map, mapLoader.map);
map.collisionData = mapLoader.collision;
var foregroundMap = new Map(16, 16);
foregroundMap.image = game.assets['map1.gif'];
foregroundMap.loadData.apply(foregroundMap, mapLoader.foreground);
ブラウザで動作確認

index.htmlをfirefoxで開いて動作確認してみましょう。
（ChromeやOperaだと、XMLHttpRequestでローカルのファイルを読み込めない仕様のため、ウェブサーバーにアップロードしないと確認できません。）

ね、簡単でしょう？