Jump to content

JSON file is not work in the Phaser


mywebacc
 Share

Recommended Posts

I am learning tile map by using this link  http://examples.phaser.io/_site/view_full.html?d=tilemaps&f=mario.js&t=mario

 

I also download the original source from the offical Phaser website.

 

 

Now, I just use "Tiled map editor" to make a new JSON file and then replace the old JSON file.  I assume that the map will change as my new JSON file.  But in fact, there is no image.

 

 

I post my new JSON file here.  Please tell me whats wrong of the new JSON file?  Thank you.

 

 

 

 

{ "height":10,
 "layers":[
        {
         "data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 12, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
         "height":10,
         "name":"\u5716\u584a\u5c64 1",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":30,
         "x":0,
         "y":0
        }],
 "orientation":"orthogonal",
 "properties":
    {
 
    },
 "renderorder":"left-up",
 "tileheight":16,
 "tilesets":[
        {
         "firstgid":1,
         "image":"super_mario.png",
         "imageheight":64,
         "imagewidth":176,
         "margin":0,
         "name":"super_mario",
         "properties":
            {
 
            },
         "spacing":0,
         "tileheight":16,
         "tilewidth":16
        }],
 "tilewidth":16,
 "version":1,
 "width":30
}

post-10947-0-35968200-1412266396.png

Link to comment
Share on other sites

I am sorry.  I revise the question.  Please read the following code.

(index.html)<!doctype html><html>    <head>        <script src = "phaser.js"></script>     </head>    <body>        <script src = "main.js"></script>    </body></html>
(main.js)var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'example', { preload: preload, create: create });function preload() {    game.load.tilemap('mario', 'map.json', null, Phaser.Tilemap.TILED_JSON);    game.load.image('tile', 'superMario.png');}var map;function create() {    map = game.add.tilemap('mario');    map.addTilesetImage('tile');}
(map.json){ "height":10, "layers":[        {         "data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],         "height":10,         "name":"\u5716\u584a\u5c64 1",         "opacity":1,         "type":"tilelayer",         "visible":true,         "width":30,         "x":0,         "y":0        }], "orientation":"orthogonal", "properties":    {    }, "renderorder":"right-up", "tileheight":16, "tilesets":[        {         "firstgid":1,         "image":"superMario.png",         "imageheight":64,         "imagewidth":176,         "margin":0,         "name":"superMario",         "properties":            {            },         "spacing":0,         "tileheight":16,         "tilewidth":16        }], "tilewidth":16, "version":1, "width":30}

All files, image and phaser.js put in the same folder.   The superMario.png is attached in the first post.

 

Result:  screen is black 

 

Console error: 

Phaser v2.1.1 | Pixi.js v1.6.1 | Canvas | WebAudio     http://phaser.io    ♥♥♥                                  phaser.js:22727
Phaser.Tilemap.addTilesetImage: No data found in the JSON matching the tileset name: "tile"     phaser.js:59200
Link to comment
Share on other sites

Try this :

function create() {    map = game.add.tilemap('mario');    map.addTilesetImage('superMario', 'tile');}

[Edit] : Also I see that the name of your tilemap is a bit odd : "name":"\u5716\u584a\u5c64 1" 

 

game.add.tilemap() is taking the name of your tilemap that you give inside tiled map editor.

addTilesetImage() is taking 2 argument, the first is the name of the tileset you gave when you added it to your map (in tiled)  and the second is the tile you give in the preload().

Link to comment
Share on other sites

Thank you reply.

 

I try the code.

 

The screen is still black.  Console message:    Phaser v2.1.1 | Pixi.js v1.6.1 | Canvas | WebAudio     http://phaser.io    ♥♥♥       phaser.js:22727

 

 

I just use "Tiled Map Editor" to make the map.  I don't know why the name is so odd.

 

I use a blue tile to fill the whole map (like a sky) and then export as a JSON file.

Link to comment
Share on other sites

Woo.  Great

 

I revised somethings and its work.

function create() {    map = game.add.tilemap('mario');    map.addTilesetImage('superMario', 'tile');	    layerBg = map.createLayer("圖塊層 1");	    layerBg.resizeWorld();}

The first point is    map.addTilesetImage('superMario', 'tile')  ,  which has two parameter.

 

The second point is    layerBg = map.createLayer("圖塊層 1")  ,    "圖塊層 1" is the Chinese layer name in Tiled Map Editor.  You may use English name.

 

 

However, new question appears.  layerBg.resizeWorld() is not work.   The "blue sky" map is in the top left of the canvas.

Link to comment
Share on other sites

In your code you never create a layer.

Take a look at this example : http://examples.phaser.io/_site/view_full.html?d=loader&f=load+tilemap+json.js&t=load%20tilemap%20json

 

You need to use  

layer = map.createLayer('World1');layer.resizeWorld();

after the map creation, where "World1' should be replaced with the name you used in tiled for your layer.

 

 

Edit: I was a bit late.

Link to comment
Share on other sites

 

However, new question appears.  layerBg.resizeWorld() is not work.   The "blue sky" map is in the top left of the canvas.

 

As i can see the size of your tilemap is 480x160 which is lower that the canvas size (800x600). That will probably mean that you will see a small box for the tilemap and the rest will be a blank screen. Try increasing your tilemap's size or reduce the canvas size, depending on what you want.

resizeWorld() does not stretch the tilemap to fit the world. If makes the world the size of the tilemap.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...