javascript で 2D RPG ゲームを構築し、canvas を使用して、browserquest に少し似ています。
単純な 2 次元配列を描画して、単一レイヤーのタイル マップをキャンバスに表示する方法を知っています。
しかし、プレイヤーが動き回っているときに効果を高めるために、Tiled でレイヤード タイル マップを作成できるようにしたいと考えています。私はこれらの層について考えていました：
地面情報と草、岩などを保持する背景レイヤー
プレーヤー/オブジェクト レイヤーは、プレーヤーがどこにいて、オブジェクトがどこにあるかに関する情報を保持します。
ユーザーが衝突する場所と衝突しない場所のビットを保持する衝突レイヤー。
プレーヤーが後ろに移動できるタイルを保持する前景レイヤー。木のてっぺん、家のてっぺんなど。
これでよろしいですか？
私の質問：
タイル マップ エディターから JSON として保存されたマップ データを読み込むにはどうすればよいですか? そして、この情報を使用してキャンバスに表示するにはどうすればよいですか?
また、プレイヤーレベルからレイヤーの詳細を確認するにはどうすればよいですか? たとえば、衝突が別のレイヤーにある場合、どうすれば衝突をチェックできますか?
助けてくれてありがとう
トム
編集: TILED を使用して json タイルマップを作成しました:
{ "height":15,
"layers":[
{
"data":[79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 28, 29, 30, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 28, 29, 30, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 28, 29, 30, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 28, 29, 30, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 12, 13, 13, 13, 13, 111, 29, 30, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 28, 29, 29, 29, 29, 29, 29, 30, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 28, 29, 128, 45, 45, 45, 45, 46, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 28, 29, 30, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 28, 29, 30, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 12, 13, 13, 13, 13, 13, 111, 29, 112, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 79, 28, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 79, 28, 29, 128, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 45, 79, 28, 29, 30, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 28, 29, 30, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 28, 29, 30, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79],
"height":15,
"name":"background",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":20,
"x":0,
"y":0
},
{
"data":[0, 0, 0, 0, 0, 149, 150, 151, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 165, 166, 167, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 168, 0, 0, 0, 181, 182, 183, 0, 0, 0, 0, 0, 0, 0, 0, 168, 0, 0, 0, 0, 0, 0, 0, 222, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 237, 0, 0, 0, 245, 246, 247, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 152, 0, 0, 0, 168, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 152, 222, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 152, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 152, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 168, 0, 0, 0, 0, 0, 0, 0, 0, 0, 149, 150, 151, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 165, 166, 167, 0, 0, 0, 152, 0, 237, 0, 0, 0, 0, 0, 0, 245, 246, 247, 0, 168, 181, 182, 183],
"height":15,
"name":"background_objects",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":20,
"x":0,
"y":0
},
{
"height":15,
"name":"collisions",
"objects":[
{
"height":32,
"name":"",
"properties":
{
},
"type":"",
"visible":true,
"width":100,
"x":-3,
"y":192
},
{
"height":31,
"name":"",
"properties":
{
},
"type":"",
"visible":true,
"width":32,
"x":159,
"y":448
},
{
"height":30,
"name":"",
"properties":
{
},
"type":"",
"visible":true,
"width":94,
"x":385,
"y":448
},
{
"height":31,
"name":"",
"properties":
{
},
"type":"",
"visible":true,
"width":33,
"x":511,
"y":160
},
{
"height":27,
"name":"",
"properties":
{
},
"type":"",
"visible":true,
"width":32,
"x":320,
"y":258
},
{
"height":30,
"name":"",
"properties":
{
},
"type":"",
"visible":true,
"width":31,
"x":128,
"y":97
}],
"opacity":1,
"type":"objectgroup",
"visible":true,
"width":20,
"x":0,
"y":0
},
{
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 206, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 197, 198, 199, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 213, 214, 215, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 221, 0, 0, 0, 229, 230, 231, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 206, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 197, 198, 199, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 213, 214, 215, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 221, 0, 0, 0, 0, 0, 0, 229, 230, 231, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"height":15,
"name":"foreground",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":20,
"x":0,
"y":0
}],
"orientation":"orthogonal",
"properties":
{
},
"tileheight":32,
"tilesets":[
{
"firstgid":1,
"image":"..\/..\/..\/..\/..\/..\/..\/xampp\/htdocs\/DIS\/images\/mountain_landscape_23.png",
"imageheight":512,
"imagewidth":512,
"margin":0,
"name":"level_1",
"properties":
{
},
"spacing":0,
"tileheight":32,
"tilewidth":32
}],
"tilewidth":32,
"version":1,
"width":20
}