Tiledについては、こちらの記事で基本的なマップの作り方やオブジェクトデータの取得方法について説明しています。
mmorley.hatenablog.com
Tiledでは、下記のオブジェクトを配置出来ます。
四角形 | |
楕円形 | |
ポリゴン | |
ポリライン |
目次
使用環境
私が使用している環境です。
- Mac OS X El Capitan Version 10.11.4
- Tiled Version 0.16.1
- Cocos Creator Version 1.0.3
- ブラウザ:Google Chrome Version 51.0.2704.63 (64-bit)
四角形
四角形を追加ボタンで作成したオブジェクトです。
Tiledのデータ
Tiledで作成したオブジェクトとそのプロパティです。
Cocos Creatorで取得したデータ
Tiledのプロパティと取得したデータで座標系が異なります。
プロパティ | 値 | 備考 |
---|---|---|
name | "shikaku1" | 自分で付けた名前 |
type | "square" | 自分で付けた種類名 |
x | 96 | 形状の左下の座標 マップの左下が原点 xは右向きを正、yは左向きを正 *Tiledと異なります。 |
y | 96 | |
width | 128 | Tiledと同じ値 |
height | 64 | Tiledと同じ値 |
rotation | 0 | 時計回りを正、Tiledと同じ値 |
myProperty1 | "myValue1" | プロパティ名、値ともに自分で付けた値 |
楕円形
楕円形を追加ボタンで作成したオブジェクトです。
Tiledの作成データ
Cocos Creatorで取得したデータ
Tiledのプロパティと取得したデータで座標系が異なります。
プロパティ | 値 | 備考 |
---|---|---|
name | en1 | 自分で付けた名前 |
type | circle | 自分で付けた種類名 |
x | 128 | 外接する四角形の左下のワールド座標 マップの左下が原点 xは右向きを正、yは上向きを正 *Tiledと異なる |
y | 96 | |
width | 64 | Tiledと同じ値 |
height | 64 | Tiledと同じ値 |
rotation | 0 | 時計回りを正、Tiledと同じ値 |
myProperty1 | myValue1 | プロパティ名、値ともに自分で付けた値 |
ポリゴン
ポリゴンを追加ボタンで作成したオブジェクトです。
Tiledのデータ
Tiledで作成したオブジェクトとそのプロパティです。
Cocos Creatorで取得したデータ
Tiledのプロパティと取得したデータで座標系が異なります。
プロパティ | 値 | 備考 |
---|---|---|
name | "sankaku1" | 自分で付けた名前 |
type | "polygon" | 自分で付けた種類名 |
x | 160 | 1点目のワールド座標 マップの左下が原点 xは右向きを正、yは上向きを正 *Tiledと異なる |
y | 192 | |
points[] | x:0, y:0 | 各点の座標 1点目を原点とするローカル座標 xは右向きを正、yは下向きを正 |
x:-64, y:96 | ||
x:64, y:96 | ||
width | 0 | Tiledと同じ値 |
height | 0 | Tiledと同じ値 |
rotation | 0 | 時計回りを正、Tiledと同じ値 |
myProperty1 | "myValue1" | プロパティ名、値ともに自分で付けた値 |
ポリライン
ポリラインを追加ボタンで作成したオブジェクトです。
Tiledのデータ
Tiledで作成したオブジェクトとそのプロパティです。
Cocos Creatorで取得したデータ
Tiledのプロパティと取得したデータで座標系が異なります。
プロパティ | 値 | 備考 |
---|---|---|
name | oresen1 | 自分で付けた名前 |
type | polyline | 自分で付けた種類名 |
x | 64 | 1点目のワールド座標 マップの左下が原点 xは右向きを正、yは上向きを正 *Tiledと異なる |
y | 128 | |
polylinePoints[] | x:0,y:0 | 各点の座標 1点目を原点とするローカル座標 xは右向き、yは下向きを正 |
x:64,y:-96 | ||
x:128,y:-96 | ||
x:192,y:0 | ||
width | 0 | Tiledと同じ値 |
height | 0 | Tiledと同じ値 |
rotation | 0 | 時計回りを正、Tiledと同じ値 |
myProperty1 | myValue1 | プロパティ名、値ともに自分で付けた値 |
あとがき
Tiledは、右上が原点で、xは右向きを正、yは下向きを正としています。
取得したデータは、左下が原点で、xは右向きを正、yは上向きを正としています。
ただし、取得したデータのポリゴン、ポリラインの頂点の座標は1点目が原点で、xは右向きを正、yは下向きを正としています。
原点の位置、y軸の向きには注意が必要ですね。