TiledMapEditor の変更点
[[トップに戻る>FrontPage]]
#ref(logo.png);
*TiledMapEditorとは [#l43058be]
TiledMapEditorとは高機能なレベルエディタです。
- 公式サイト
-- http://www.mapeditor.org/
----
#contents
----
*TiledMapEditorの仕組み [#s6e14380]
** TiledMapEditorが扱うデータの構造 [#we356481]
TiledMapEditorが扱うデータ(*.tmx)のデータ構造は以下の様になっています。
TMX
+-- version : バージョン番号
+-- orientation : 向き
+-- width : 幅
+-- height : 高さ
+-- tilewidth : チップの幅
+-- tileheight : チップの高さ
+-- property : プロパティ
| +-- name : キー
| +-- value : 値
|
+-- tileset : タイルセット
| +-- firstgid : 開始チップID
| +-- name : 名前
| +-- tilewidth : チップの幅
| +-- tileheight : チップの高さ
| +-- image
| +-- source : タイル画像のファイル名
| +-- width : 画像の幅
| +-- height : 画像の高さ
|
+-- layer : レイヤー
| +-- name : レイヤー名
| +-- width : レイヤーの幅
| +-- height : レイヤーの高さ
| +-- properties
| | +-- property
| | +-- name : キー
| | +-- value : 値
| |
| +-- data
| +-- encoding : データの種類(base64 / csv)
| +-- データ値
|
+-- objectgroup : オブジェクトグループ
+-- color : 透過色
+-- name : 名前
+-- width : オブジェクトレイヤーの幅
+-- height : オブジェクトレイヤーの高さ
+-- opacity : 透過値(0.0～1.0)
+-- object : オブジェクト
+-- name : 名前
+-- type : 種別
+-- gid : チップID
+-- x : X座標
+-- y : Y座標
上記は全体の構造ですが、重要な部分に絞ると以下のようにシンプルなものです。
#ref(overview.png);
TMX
+-- tileset : タイルセット
+-- layer : レイヤー
+-- objectgroup : オブジェクトグループ
+-- object : オブジェクト
それぞれにプロパティとして、キーと値のペアを持つデータを指定することができます。
** タイルセット [#i3d83e7b]
タイルセットとは、配置するチップのセットです。タイルセットは複数存在することができます。
** レイヤー [#e630ccd4]
レイヤーとは、配置したチップ情報の集まりです。データとしては、チップIDの単なる配列となります。
レイヤーには主に背景チップを配置します。理由はレイヤーの1つのタイルにはチップIDしか情報を持たせられないためです。
ただし、ゲームオブジェクトがID情報だけで事足りる場合には、レイヤーに乗せてしまったほうが、TiledMapEditor上での編集が楽になります。
** オブジェクトグループ [#ie705583]
オブジェクトグループとは、オブジェクトの集まりです。オブジェクトはレイヤーのチップとは異なり、複雑な情報を持たせられます。そのためゲームオブジェクトはこちらの情報を元に生成するのが、一般的な処理となります。
*** オブジェクト [#zbcf8a37]
オブジェクトには、XY座標・チップIDに加えて、名前と種類を設定することができます。
--
* TMXファイルのロード方法 [#u7a6b335]
[[flixel.addons.editors.tiled]] の TiledMap を使用します。
** Project.xmlの編集 [#cdbefa37]
TMXファイルの読み込みは拡張機能であるため、flixel-addonsを有効にします
#geshi(xml){{
<!--------------------------------LIBRARIES------------------------------------->
<haxelib name="flixel"/>
<!--In case you want to use the addons package-->
<haxelib name="flixel-addons" /> <!-- ←ここのコメントを外して有効にする -->
}}
** ロード方法 [#i5faabb4]
TODO:
* TiledMapEditor使いこなし方法 [#j7388362]
** ショートカットキー一覧 [#za26a643]
よく使うショートカットキーをまとめておきました。マウス操作も混ざっています。
|分類|項目|キー|h
|ツール選択|スタンプツール|B|
|~|消しゴム|E|
|~|バケツ|F|
|~|範囲選択|R|
|編集|元に戻す|Cmd+Z|
|~|やり直す|Cmd+Shift+Z|
|スタンプ|直線を引く|Shift+左クリック|
|~|円を描く|Cmd+Shift+左クリック|
|~|スタンプを垂直方向にフリップ|Y|
|~|スタンプを時計回りに回転|Z|
|~|スタンプを反時計回りに回転|Shift+Z|
|チップ変更|スポイト（マウスの下にあるチップを選択）|ビュー上で右クリック|
|~|指定の範囲を複製|マウス右ドラッグ|
|~|チップ番号のストア|Cmd+1〜9|
|~|ストアに保存しているチップ番号に変更|1〜9|
|範囲選択|削除|Delete / Backspace|
|~|切り取り|Cmd+X|
|~|コピー|Cmd+C|
|~|貼り付け|Cmd+V|
|~|選択解除|Cmd+Shift+A|
|表示|拡大|Cmd＋「+」/ Cmd+ホイール上 / ミニマップ上でホイール上|
|~|縮小|Cmd＋「-」/ Cmd+ホイール下 / ミニマップ上でホイール下|
|~|拡大リセット|Cmd+0|
|~|ビューのスクロール|Space+マウス移動 / マウスホイールクリック＋マウス移動 / ミニマップ上でクリックorドラッグ / カーソルキー|
|その他|F5|コマンドの実行|
より詳細なショートカットキーは以下のリンクを参考にしてください。
- [[TiledMapEditor - Keyboard Shortcuts>https://github.com/bjorn/tiled/wiki/Keyboard-Shortcuts]]
----
**ミニマップ [#dd76ea64]
***横長のマップを編集したい場合 [#l95f8049]
横スクロールのゲームでマップを作る場合は、ミニマップの配置を下に置くと良いです。
#ref(minimap.png);
ミニマップをマウス左ドラッグすることでスクロールできるので、作業効率がアップします。
----
**タイルセット [#d74783bc]
***チップ番号のストア [#hcd97db0]
チップを選択してCmd+1〜9を押すと、選択中のチップ番号がストアに保存されます。そして1〜9を押すことで対応する数字に保存したチップ番号に変更されます。
***複数のタイルを組み合わせたスタンプの作成 [#b593f7bb]
タイルセットを左ドラッグします。
#ref(tileset1.png);
すると複数のタイルを選択できます。
#ref(tileset2.png);
***作成済みのチップの配置情報を複製する [#e0bd0695]
スタンプツールを選択肢、複製したい領域をマウス右ボタンドラッグします。
#ref(dup1.png);
すると指定した領域が複製できます。
#ref(dup2.png);
----
**範囲選択 [#w34fbd8f]
***まとめて削除する [#q9a563db]
まとめて削除する場合、消しゴムで1つ1つ消すのは大変です。
そこで、選択範囲ツールを選択肢てマウス左ドラッグで範囲選択します。
#ref(cut1.png);
その状態でCmd+X(またはDeleteキー / Backspaceキー)すると、まとめて消すことができます。
#ref(cut2.png);
***まとめて移動する [#tde44928]
範囲選択ツールで選択した後、Cmd+Xで切り取り、Cmd+Vで複製モードに入り、左クリック貼り付けることで、まとめて移動することができます。
***まとめて複製する [#r39cce2c]
範囲選択ツールで選択した後、Cmd+Cでコピーして、Cmd+Vで複製モードに入り、左クリックで貼り付けます。
***複製モードの解除 [#m2135bbb]
別のチップを選択したり、右クリックでスポイトすることで解除できます。
*** 選択範囲の追加 [#l460402e]
左ドラッグで選択した状態で、さらにShift+左ドラッグします。
#ref(range1.png);
すると、選択範囲を追加できます。
#ref(range2.png);
*** 選択範囲を削る [#h0b131ec]
すでに選択した範囲を、Cmd+左ドラッグします。
#ref(range3.png);
するとドラッグした範囲が削られます。
#ref(range4.png);
----
**コマンド [#ib8f1623]
***Tiledからゲームを起動する [#ecf272ac]
Project.xmlが存在する場所に以下のシェルスクリプトを配置します。（ファイル名は「exec.sh」とします）
#geshi(bash){{
#!/bin/sh
cd `dirname $0`
lime test neko
}}
そして、サイコロアイコンの左側にある小さな三角ボタンをおして、コマンドの編集を選択します。
#ref(exec1.png);
コマンド編集画面が表示されるので、配置したスクリプトのパスを''フルパス''で指定します。
#ref(exec2.png);
すると歯車アイコンをクリックすることでゲームが起動できます。またはF5から起動することもできます。
Windowsの場合は以下のバッチファイルを用意します
#geshi(Winbatch){{
:: ドライブ変更
cd /d %~d0
:: カレントディレクトリ変更
cd %~dp0
:: 実行
lime test neko
}}
実行ツールで以下のようにバッチファイルがあるパスを指定すれば、実行できます。
#ref(exec_win.png);
* 自動マッピングのやりかた [#j9dad720]
- [[自動マッピングのやりかた>TiledMapEditor/Automapping]]
自動マッピングのやりかたを説明しています