Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

JSON file is not work in the Phaser

mywebacc

By mywebacc,
in Phaser 2

 Share

Recommended Posts

mywebacc Newbie

mywebacc

Posted
Posted

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
mywebacc Newbie

mywebacc

Posted
  • Author
Posted

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
SuperMarco Newbie

SuperMarco

Posted
Posted

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
mywebacc Newbie

mywebacc

Posted
  • Author
Posted

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
mywebacc Newbie

mywebacc

Posted
  • Author
Posted

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
j0hnskot Newbie

j0hnskot

Posted
Posted

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
j0hnskot Newbie

j0hnskot

Posted
Posted

 

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
 Share
Go to topic listing

  • Recently Browsing   0 members

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