モーリーのメモ

プログラミングやCG作成等、アプリ開発を中心に情報を収集中!

Tiledのオブジェクトのデータの中身を見る!:Cocos Creator

 Tiledについては、こちらの記事で基本的なマップの作り方やオブジェクトデータの取得方法について説明しています。
mmorley.hatenablog.com
 Tiledでは、下記のオブジェクトを配置出来ます。

f:id:mmorley:20160526115923p:plain四角形
f:id:mmorley:20160526115954p:plain楕円形
f:id:mmorley:20160526120007p:plainポリゴン
f:id:mmorley:20160526120020p:plainポリライン
 これらをCocos Creatorで読み込んだ時のデータの中身について調べました。

使用環境

 私が使用している環境です。

  • 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)

四角形

 四角形を追加ボタンf:id:mmorley:20160526115923p:plainで作成したオブジェクトです。

Tiledのデータ

 Tiledで作成したオブジェクトとそのプロパティです。
f:id:mmorley:20160527011942p:plain:w350f:id:mmorley:20160527000947p:plain:w200

Cocos Creatorで取得したデータ

 Tiledのプロパティと取得したデータで座標系が異なります。

プロパティ備考
name"shikaku1"自分で付けた名前
type"square"自分で付けた種類名
x96形状の左下の座標
マップの左下が原点
xは右向きを正、yは左向きを正
*Tiledと異なります。
y96
width128Tiledと同じ値
height64Tiledと同じ値
rotation0時計回りを正、Tiledと同じ値
myProperty1"myValue1"プロパティ名、値ともに自分で付けた値

楕円形

 楕円形を追加ボタンf:id:mmorley:20160526115954p:plainで作成したオブジェクトです。

Tiledの作成データ

f:id:mmorley:20160527094757p:plain:w350f:id:mmorley:20160527094915p:plain:w200

Cocos Creatorで取得したデータ

 Tiledのプロパティと取得したデータで座標系が異なります。

プロパティ備考
nameen1自分で付けた名前
typecircle自分で付けた種類名
x128外接する四角形の左下のワールド座標
マップの左下が原点
xは右向きを正、yは上向きを正
*Tiledと異なる
y96
width64Tiledと同じ値
height64Tiledと同じ値
rotation0時計回りを正、Tiledと同じ値
myProperty1myValue1プロパティ名、値ともに自分で付けた値

ポリゴン

 ポリゴンを追加ボタンf:id:mmorley:20160526120007p:plainで作成したオブジェクトです。

Tiledのデータ

 Tiledで作成したオブジェクトとそのプロパティです。
f:id:mmorley:20160527121845p:plain:w350f:id:mmorley:20160527120220p:plain:w200

Cocos Creatorで取得したデータ

 Tiledのプロパティと取得したデータで座標系が異なります。

プロパティ備考
name"sankaku1"自分で付けた名前
type"polygon"自分で付けた種類名
x1601点目のワールド座標
マップの左下が原点
xは右向きを正、yは上向きを正
*Tiledと異なる
y192
points[]x:0, y:0各点の座標
1点目を原点とするローカル座標
xは右向きを正、yは下向きを正
x:-64, y:96
x:64, y:96
width0Tiledと同じ値
height0Tiledと同じ値
rotation0時計回りを正、Tiledと同じ値
myProperty1"myValue1"プロパティ名、値ともに自分で付けた値

ポリライン

 ポリラインを追加ボタンf:id:mmorley:20160526120020p:plainで作成したオブジェクトです。

Tiledのデータ

 Tiledで作成したオブジェクトとそのプロパティです。
f:id:mmorley:20160527132927p:plain:w300f:id:mmorley:20160527132933p:plain:w200

Cocos Creatorで取得したデータ

 Tiledのプロパティと取得したデータで座標系が異なります。

プロパティ備考
nameoresen1自分で付けた名前
typepolyline自分で付けた種類名
x641点目のワールド座標
マップの左下が原点
xは右向きを正、yは上向きを正
*Tiledと異なる
y128
polylinePoints[]x:0,y:0各点の座標
1点目を原点とするローカル座標
xは右向き、yは下向きを正
x:64,y:-96
x:128,y:-96
x:192,y:0
width0Tiledと同じ値
height0Tiledと同じ値
rotation0時計回りを正、Tiledと同じ値
myProperty1myValue1プロパティ名、値ともに自分で付けた値

あとがき

 Tiledは、右上が原点で、xは右向きを正、yは下向きを正としています。
 取得したデータは、左下が原点で、xは右向きを正、yは上向きを正としています。
 ただし、取得したデータのポリゴン、ポリラインの頂点の座標は1点目が原点で、xは右向きを正、yは下向きを正としています。
 原点の位置、y軸の向きには注意が必要ですね。