Search the Community

Showing results for tags 'json'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 86 results

  1. Using tileset with json

    I created a map/level in JSON with "tiled map editor" which uses a tileset. Fot the JSON file look in the attachment. Now in code loop through the JSON and try to create the level/map. Problem is that it renders the same tile and not the different ones. If I run per layer it's ok (l=1, l<2), If I add the layer loop it renders with only 1 tile...(see attached image, there should be different walls) I tried several things. It looks like pixi does create all sprites with same tile? Many thanks Raymond // load json var level = require('../map/level1.json'); var tileHeight = level.tileheight; var tileWidth = level.tilewidth; var layers = level.layers; var height = level.height; var width = level.width; var tileset = PIXI.utils.TextureCache["./images/terrain.png"]; for(var l = 1; l < 5; l++ ) { // Layer var data = layers[l].data; for(var i = 0; i < data.length; i++) { // Postition on screen var y = i / height | 0; var x = i % width | 0; // Which tile we should use if( data[i] != 0) { var tileRow = (data[i] / 32) | 0; var tileCol = (data[i] - (tileRow * 32))-1 | 0; console.log('texture -> row: ' + tileRow + ' col: ' + tileCol + ' width: '+tileWidth+ 'tileHeight: ' + tileHeight); var rectangle = new PIXI.Rectangle(tileCol*32, tileRow*32, tileWidth, tileHeight); // x, y, w, h tileset.frame = rectangle; var layer = new PIXI.Sprite(tileset); layer.x = x * tileHeight; layer.y = y * tileWidth; this._game.stage.addChild(layer); } } } level1.json
  2. Hi folks. How do I get my character to walk and attack at the same time with 2 separate character atlas files? For instance, when you're walking, you press a key & while holding the walking keys, you can swing your sword WHILE walking at the same time through 2 separate but similar animation atlases. Thanks! ~M
  3. I have spent some time finding out how to animate tiles in a tile map loaded from a Tiled map exported to JSON. At first I built a utility class called TileMapAnimator (TMA) to animate some tiles using manual data and eventually I extended the class so that it could load animated tile data directly from the map files. With TMA you define your animations in Tiled and load them directly into your Phaser game! I'm sharing this code in the hope that others may find it useful. If you have invested into loading Tiled maps using the built in functions, I believe you can include animations in your game with very little retrofitting. TMA can animate hundreds of tiles without any notable performance degradation. Some usage restrictions apply: In TMA, each animation uses a fixed frame interval for all the tile frames. Tiled actually allows you to specify different durations per frame. Hence TMA picks the first duration as the frame interval. TMA requires tile animations to be defined on one of the tiles included in the animation. This is because TMA scans the map layer for these tiles and sets up the animated tiles at the designated locations Only one animated tile layer is supported for now. Perhaps I will extend TMA to support animation in multiple layers. How to use TMA Import the TMA class: import TilemapAnimator from "../graphics/TilemapAnimator"; In preload(), load the tile map and associated tile sets using the built-in Phaser map loading functions: this.load.tilemap('TileMap', 'assets/maps/world1/TileMap.json', null, Phaser.Tilemap.TILED_JSON); this.load.image('Ground', 'assets/graphics/world1/Ground.png'); Load the tile map again, but this time as a raw JSON file: this.load.json("TileMapAnimations", 'assets/maps/world1/TileMap.json'); In create(), set up the map and layers as usual: const tilemap = this.add.tilemap('TileMap'); const groundTileset = tilemap.addTilesetImage('Ground', 'Ground'); const groundLayer = tilemap.createLayer('Ground'); Create an instance of TMA, passing the game.time object, the tilemap and the layer containing the animations: const tilemapAnimator = new TilemapAnimator(this.time, tilemap, groundLayer); Load the animation into TMA, by specifying the cache key of the raw JSON object loaded in prefetch() using game.load.json(....) and start the tile animations: tilemapAnimator.addAnimationsFromTilemap("TileMapAnimations"); tilemapAnimator.start(); That's all there is to it! Note: I am no NPM expert, but if anyone is willing to turn this into an NPM package or some other practical library, please get in touch so we set it up! The TMA class file is attached below. TilemapAnimator.js
  4. Tilemap issue

    Hey guys I'm new to Phaser, I looked on Youtube and phaser examples for answers but didn't find any helpful one. I get this error on the console TypeError: location is undefined[Learn More] phaser.js:97736:25 getIndex http://127.0.0.1:5000/assets/phaser.js:97736:25 getTilesetIndex http://127.0.0.1:5000/assets/phaser.js:97770:16 addTilesetImage http://127.0.0.1:5000/assets/phaser.js:97313:19 create http://127.0.0.1:5000/main.js:36:5 loadComplete http://127.0.0.1:5000/assets/phaser.js:28709:13 finishedLoading http://127.0.0.1:5000/assets/phaser.js:75801:9 processLoadQueue http://127.0.0.1:5000/assets/phaser.js:75756:13 asyncComplete http://127.0.0.1:5000/assets/phaser.js:75828:9 fileComplete http://127.0.0.1:5000/assets/phaser.js:76711:13 loadImageTag/file.data.onload http://127.0.0.1:5000/assets/phaser.js:76098:17 Here is my code: var game = new Phaser.Game(500, 400, Phaser.AUTO, "", { preload: preload, create: create, update: update }); function preload() { game.load.spritesheet( "marioSmall", "assets/images/marioSmall.png", 34, 34, 6, 1 ); game.load.image("ground", "assets/images/ground.png"); game.load.tilemap( "map_01", "assets/tileset_json.json", null, Phaser.Tilemap.TILED_JSON ); game.load.image("tiles", "/assets/items.png"); } var mario; var ground; var map; var layer; function create() { // ground = game.add.sprite(0, 370, "ground"); // game.physics.arcade.enable(ground); // ground.body.immovable = true; // mario = new Mario(100, 100, 2000, 800, 200); map = game.add.tilemap("map_01"); map.addTilesetImage("items", "tiles"); layer = map.createLayer("Tile Layer 1"); } function update() { // game.physics.arcade.collide(ground, mario.sprite); // mario.checkInput(); }
  5. parsing JSON in firefox fails

    Hey guys, I'm new to this forum! Use to be an oldschool flash developer (erik.newgrounds.com) and am now seriously looking at building games in HTML5. I had zero problems until i opened my game in Firefox (54.0.1 (32-bits), and Pixi v4.5.0..) and it threw the following error: TypeError: resources['assets/images/bodyparts.json'].textures is undefined[Meer info] After digging a bit deeper and logging the above mentioned resource object i see: Object { _flags: 2, name: "assets/images/bodyparts.json", url: "assets/images/bodyparts.json", extension: "json", data: null, crossOrigin: "", loadType: 1, xhrType: "json", metadata: Object, error: Error, nog 17… } When i click the Error message i see the following error: Error trying to parse loaded json: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data I cant find anything wrong with my json, even JSONLint tells me its ok. Also in Chrome everything works perfectly fine. JSON object is attached to this topic. Any idea whats going on here? Thanks for the help! Erik Firefox v bodyparts.json
  6. Hi, I'm making platform games with phaser, and to do so i prepare my levels in inkscape, i give a label to each image so when i end it i finally get an .svg document with an x and a y for each labeled element. Then i replace and delete all the useless text with my code editor till i get it in a .json format so i can pass it to my game as a new level. Is a repetitive and boring work, i hate it. So now i'm thinking in write a little "program" or script to do it. What i really don't know is how to pass through a text that it isn't an html or a php. i would prefer to code it with js as is the language i know most, but i'm open to suggestions. I think it shouldn't be so difficult as is only gather some text and creating a new document, but i don't know where to start. Thanks!
  7. Preparing the Sprite-sheet

    I am trying to learn how to make a sprite from a spritesheet and I'm following Kitty's tutorial as a reference on how to work with spritesheets. https://github.com/kittykatattack/learningPixi#sprites I am using Texture Packer to create my spritesheet. I was successful in exporting all my images the only thing that has me confused is why do I have a .json file for each of my images? I suspect this is because I had to enable multipacking because all my images wouldnt fit on one sheet. In a lot of the examples I've seen online most devs just import one tile-sheet and one .json file. I was expecting Texture Packer to do the same, now I am unclear how I would import all of this...just for one sprite. Is there a better method of doing this? Quick info about the images I am using, I made a 3d render in Blender and exported the final render into .png frames, the size on each frame is roughly 2000x1000. Perhaps there's another way I could export my render and have it ready for PIXI?
  8. text fields from json-files

    Hello I working on a DonkeyKong-Game with multiple level-json-files and got a problem with text boxes/fields for the introduction-level. I wanted to create multiple text fields (content like x, y position and align is in json-files) between the platforms in the levels but I have problems with creating it. Is there something I can create text fields with? ForEach-functions and test=game.add.text don't work. Thank you text-data in json-file { "textData":[ { "height":90, "text":{ "fontfamily":"Arial", "halign":"center", "pixelsize":12, "text":"Bewege dich mit den Pfeil-Buttons der Touch-Steuerung unten links oder Pfeiltasten der Tastatur nach links und rechts.\nBer\u00fchre den Sprung-Button der Touch-Steuerung unten rechts oder den Aufw\u00e4rts-Pfeil der Tastatur um zu springen.", "valign":"center", "wrap":true }, "width":360, "x":0, "y":400 }, { "height":60, "text":{ "fontfamily":"Arial", "halign":"center", "pixelsize":8, "text":"Dein Ziel ist es, alle 3 Symbole eines Levels anzusammeln.\nUnd dabei nicht von den Hindernissen oder anderen Dingen gekillt zu werden.\nAnsonsten beginnt das Level von neuen.\nInsgesamt gibt es 6 Levels + die Winners Lounge am Ende.\n\nUnd Achtung, die Levels sind von der Art ziemlich ungew\u00f6hnlich. ", "valign":"center", "wrap":true }, "width":360, "x":0, "y":520 }, { "height":90, "text":{ "fontfamily":"Arial", "halign":"center", "pixelsize":12, "text":"Dies sind Feuer.\nUnd wenn du sie ber\u00fchrst, bist du tot.\nAlso spring dar\u00fcber.", "valign":"center", "wrap":true }, "width":360, "x":0, "y":280 }, { "height":90, "text":{ "fontfamily":"Arial", "halign":"center", "pixelsize":10, "text":"Achtung vor den F\u00e4ssern, sind wie die Feuer.\nBer\u00fchren = ToT\nDr\u00fcberspringen ist die \u00fcbliche Option, meistens.\nIn anderen Leveln sind sie durchaus gr\u00f6\u00dfer, schneller und\/oder zahlreicher.\nWerden von der Fassbariere aufgehalten.\n", "wrap":true }, "width":360, "x":0, "y":160 }, { "height":50, "text":{ "fontfamily":"Arial", "halign":"center", "pixelsize":8, "text":"Dies ist der B\u00f6se.\nIst total fussfaul und liebt neben F\u00e4sser werfen ganz besonders dich, pur und am St\u00fcck.\nAlso wenn du nicht als Zwischenmahlzeit enden willst, halt dich von ihm fern. ", "valign":"center", "wrap":true }, "width":180, "x":50, "y":80 }, { "height":50, "text":{ "fontfamily":"Arial", "halign":"center", "pixelsize":8, "text":"Das sind die 3 Zielsymbole.\nHier sind sie an einem Ort, in anderen Leveln irgendwo.\nSchnapp dir alle und du bist im n\u00e4chsten Level.", "valign":"center", "wrap":true }, "width":130, "x":90, "y":0 }, { "height":20, "text":{ "fontfamily":"Arial", "halign":"center", "pixelsize":8, "text":"Unsichtbare Fass-Barriere ->\n", "valign":"center", "wrap":true }, "width":120, "x":0, "y":230 } ], }
  9. I've been having a look through the phaser tutorials for json tiled maps and I've noticed that it's not clear on how to create a json tiled map that is 'phaser ready'. After creating a tiled map in tiled and following the code examples I've been unable to get passed the following error. Cannot read property '2' of undefined line phaser.js:98679 // find the relevant tileset sid = map.tiles[tile.index][2]; set = map.tilesets[sid]; version: 2.6.2 Is there anything obviously wrong with the code or the exported json tile map? Maybe there is a special way to export maps from tiled? Help would be appreciated. Thanks. game = new Phaser.Game(600, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }); function preload() { game.load.tilemap('map', 'assets/map.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('tmw_desert_spacing', 'assets/tmw_desert_spacing.png'); } function create() { map = game.add.tilemap('map'); map.addTilesetImage('tmw_desert_spacing'); layer = map.createLayer('Tile Layer 1'); } { "height":14, "layers":[ { "data":[0, 0, 0, 40, 40, 40, 40, 40, 40, 40, 40, 0, 0, 0, 0, 0, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 0, 0, 40, 40, 40, 40, 0, 0, 40, 40, 0, 0, 40, 40, 40, 0, 40, 40, 0, 40, 0, 0, 40, 40, 0, 0, 0, 40, 40, 40, 40, 40, 40, 0, 0, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 0, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 0, 40, 0, 40, 40, 40, 0, 40, 40, 40, 40, 40, 40, 40, 0, 40, 0, 40, 0, 40, 40, 40, 40, 40, 0, 40, 40, 40, 0, 40, 40, 0, 40, 0, 40, 40, 0, 40, 0, 40, 40, 40, 0, 0, 40, 40, 40, 0, 40, 40, 40, 40, 40, 40, 40, 40, 0, 0, 40, 40, 40, 40, 40, 40, 40, 40, 40, 0, 0, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 0, 0, 0, 0, 0, 40, 40, 40, 40, 40, 40, 40, 0, 0, 0, 40, 0, 0, 0, 0, 0, 0, 0, 0, 0, 40, 0, 0, 40, 40, 40], "height":14, "name":"Tile Layer 1", "opacity":1, "type":"tilelayer", "visible":true, "width":14, "x":0, "y":0 }], "nextobjectid":1, "orientation":"orthogonal", "renderorder":"right-down", "tiledversion":"1.0.1", "tileheight":32, "tilesets":[ { "firstgid":1, "source": { "columns":8, "image":"tmw_desert_spacing.png", "imageheight":199, "imagewidth":265, "margin":0, "name":"tmw_desert_spacing", "spacing":0, "tilecount":48, "tileheight":32, "tilewidth":32, "type":"tileset" } }], "tilewidth":32, "type":"map", "version":1, "width":14 }
  10. Atlas not working with Spriter Player

    Hey, i'm currently working on my first animation with phaser + Spriter Player for Phaser + Spriter obviously. The animations work with the provided Spriter files in the example project of the player (Atlas.json, Atlas.png, TEST.json) but when i try to import my own test animation i encounter this error: (index):149 Cannot set frameName: forearm_l for all my frames in the sprite and for everone the first from the list in spriter is used instead (see image attached) Attache you can see my exported files which import fine but don't display as described. Thanks for any help in resolving this! Cheers test.zip
  11. local storage with JSON error

    hi, i would use the local storage to store value of my object. i set the object draggable and when the drag stop i would reveal parameter of this object. the problem is that i have this error : Uncaught TypeError: Converting circular structure to JSON i follow this part of tutorial : var car = {}; car.wheels = 4; car.doors = 2; car.sound = 'vroom'; car.name = 'Lightning McQueen'; console.log( car ); localStorage.setItem( 'car', JSON.stringify(car) ); console.log( JSON.parse( localStorage.getItem( 'car' ) ) ); But in my case that don't work. Why ? Thanks for your help. https://jsfiddle.net/espace3d/cmd0158g/ var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload:preload, create: create }); function preload() { game.load.image('circle', 'https://s13.postimg.org/xjhlzmiev/disc_png.png'); } function create() { this.projectile=game.add.sprite(200,200,'circle') this.projectile.number=1 this.projectile.name="weapon" this.projectile.inputEnabled=true this.projectile.input.enableDrag(true) this.projectile.events.onDragStop.add(reveal_param,this) } var reveal_param=function(sprite){ localStorage.setItem('_projectile', JSON.stringify(sprite)); var _projectile_var= JSON.parse( localStorage.getItem( '_projectile' ) ) ; alert(_projectile_var.name) }
  12. Curious About Tiled Syntax Error

    I get a syntax error Uncaught SyntaxError: Unexpected token : in the console when I load my tiled json maps. Everything runs fine, my maps are loaded correctly, but why does it give this error? json looks like: { "height":32, "layers":[ { "data":"AAAAAAAAAA" etc. I understand that there's no var declared at the beginning of the object, but it's saved as a json file and loaded as a json file. Why give this error? Just wondering. Thanks,
  13. Three.js subdivision surfaces

    Hi there ! I'm trying to add a subdivision surface on a loaded json file with Three.js and SubdivisionModifier.js or BufferSubdivisionModifier.js without any result. I searched and found various code and topic but none of them worked. That's why I'm looking for help here. my code with the BufferSubdivisionModifier.js : function initMesh() { var loader = new THREE.JSONLoader(); loader.load('js/cube.json', function(cubeGeometry, materials) { cubegeometryClone = cubeGeometry.clone(); cubegeometryClone.mergeVertices(); cubegeometryClone.computeFaceNormals(); cubegeometryClone.computeVertexNormals(); var modifier = new THREE.BufferSubdivisionModifier(1); smoothCube = modifier.modify( cubegeometryClone ); mesh = new THREE.Mesh(smoothCube, new THREE.MultiMaterial(materials)); // of course cube appears if you replace smoothCube by cubeGeometry mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.95; mesh.translation = cubegeometryClone.center(cubeGeometry); scene.add(mesh); }); } no errors in console my code with the SubdivisionModifier.js which is the example I found mostly : function initMesh() { var loader = new THREE.JSONLoader(); loader.load('js/cube.json', function(cubeGeometry, materials) { smooth = cubeGeometry.clone(); smooth.mergeVertices(); smooth.computeFaceNormals(); smooth.computeVertexNormals(); var modifier = new THREE.SubdivisionModifier(1); modifier.modify(smooth); // if I comment this line, cube show but, of course, with no surface smoothing mesh = new THREE.Mesh(smooth, new THREE.MultiMaterial(materials)); mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.95; mesh.translation = cubeGeometry.center(cubeGeometry); scene.add(mesh); }); } console show : TypeError: undefined is not an object (evaluating 'v.x') any help will be apreciated, I'm getting mad after 2 days of tries thanks
  14. Phaser.tilemap

    I'm having trouble trying to load a tilemap that was created in tiled in its native tile width and height. In tiled it was 32x32 but upon loading it, it gets scaled down to 16x16, I'm not sure if it's a problem somewhere else in the code or a missing parameter. It wouldn't be a problem but a lot of tilesheets are 32x32 and scaling them down in gimp reduces image quality, doing it in the code causes odd behavior. Things I've tried: Adding tileWidth and tileHeight parameters to the loading of the tilemap as well as the spritesheets Removing min/max scaling Scaling the layers to 2.0. https://github.com/asmith9/god-dang-zombies/blob/master/js/Game.js To be more clear: the problem is in the loading of 'spritesheet' and 'TILESET-04' which are natively 32x32 but appear 16x16
  15. WEBGL, tileSprite and power of 2

    Hi everyone, I have a strange issue with the webgl and tilesprite behavior which seems for me to not follow the Phaser documentation. My background is contained inside a sprite atlas described by a json file. All the sprites have dimension equal to a power of 2 (height and width) and the png file too. I have followed the tutorial https://phaser.io/examples/v2/tile-sprites/tiling-sprite-atlas It works great with this example and the octopus dimensions used are "w":62,"h":94 But, when I change one of this parameters to a power of 2, for example: "w":64,"h":94, the tilesprite has a strange behavior: the entire image is displayed from x:0 y:0 No problem with canvas. I suppose it is a newbee issue... any help? Thanks!
  16. Issue with JSONArray Animation

    Hi I have come to a dead in, I have attempted various research on platforms such as google, YouTube and Lynda however to no avail. I have used TexturePacker to create a spritesheet assiociated with JsonArray so that I can incorporate animations within my project however I am met with this Index error which is assiociated with the first line of code: this.sprite.animations.add('walk', Phaser.Animation.generateFrameNames('Slide', 1, 10), 10, true, false); this.sprite.animations.play('walk'); I have preloaded the required JsonArray and Image path within the preloader by doing the following: this.load.atlasJSONArray('robot', 'src/images/robots.png', 'src/images/robots.json'); And an example of this .json file is like this: { "filename": "Slide1.png", "frame": {"x":3574,"y":361,"w":409,"h":356}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":31,"y":170,"w":409,"h":356}, "sourceSize": {"w":567,"h":556} }, { "filename": "Slide2.png", "frame": {"x":3572,"y":2665,"w":406,"h":358}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":34,"y":168,"w":406,"h":358}, "sourceSize": {"w":567,"h":556} }, { "filename": "Slide3.png", "frame": {"x":3561,"y":1412,"w":403,"h":360}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":37,"y":166,"w":403,"h":360}, "sourceSize": {"w":567,"h":556} }, { "filename": "Slide4.png", "frame": {"x":3084,"y":1781,"w":400,"h":361}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":40,"y":165,"w":400,"h":361}, "sourceSize": {"w":567,"h":556} }, { "filename": "Slide5.png", "frame": {"x":3159,"y":1412,"w":400,"h":361}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":40,"y":165,"w":400,"h":361}, "sourceSize": {"w":567,"h":556} }, { "filename": "Slide6.png", "frame": {"x":2763,"y":2660,"w":400,"h":360}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":40,"y":166,"w":400,"h":360}, "sourceSize": {"w":567,"h":556} }, { "filename": "Slide7.png", "frame": {"x":2763,"y":3022,"w":400,"h":360}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":40,"y":166,"w":400,"h":360}, "sourceSize": {"w":567,"h":556} }, { "filename": "Slide8.png", "frame": {"x":3165,"y":2982,"w":402,"h":359}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":38,"y":167,"w":402,"h":359}, "sourceSize": {"w":567,"h":556} }, { "filename": "Slide9.png", "frame": {"x":3165,"y":2622,"w":405,"h":358}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":35,"y":168,"w":405,"h":358}, "sourceSize": {"w":567,"h":556} }, { "filename": "Slide10.png", "frame": {"x":3572,"y":2306,"w":407,"h":357}, "rotated": false, "trimmed": true, "spriteSourceSize": {"x":33,"y":169,"w":407,"h":357}, "sourceSize": {"w":567,"h":556} }], (Manually Rename Filename from Slide (1) to Slide1 in order to work however still met with an error) I have tried to find videos which will help me with creating an animation spritesheet with Json but every resource I follow I still get this error. If my mistake is not obvious feel free to point me to a good resource. Regards, Connor Solved: No where mentioned extension had to be removed. Eventually got it working.
  17. Hello I cannot load the map (made using Tiled Map Editor) using Phaser. Phonegap Desktop console shows this messages: In function "preload" i have this code: game.load.tilemap('map', 'assets/mapas2.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('tiles', 'assets/tmw_desert_spacing.png'); In function "create" i have this code: map = game.add.tilemap('map'); // Now add in the tileset map.addTilesetImage('tiles', 32, 32); // Create our layer layer = map.createLayer(0); // Resize the world layer.resizeWorld(); mapas2.json: { "height":16, "layers":[ { "data":[30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 25, 26, 26, 26, 26, 26, 26, 27, 30, 30, 33, 36, 42, 42, 42, 42, 37, 35, 30, 30, 33, 35, 25, 26, 26, 27, 33, 35, 30, 30, 33, 35, 33, 36, 37, 35, 33, 44, 27, 30, 33, 35, 33, 35, 33, 35, 41, 37, 35, 30, 33, 35, 33, 35, 33, 44, 26, 45, 35, 30, 33, 35, 33, 35, 41, 42, 42, 42, 43, 30, 33, 35, 33, 35, 25, 26, 26, 27, 30, 30, 33, 35, 33, 35, 33, 36, 37, 35, 30, 30, 33, 35, 33, 35, 33, 35, 33, 44, 26, 27, 33, 35, 33, 44, 45, 35, 41, 42, 37, 35, 33, 35, 41, 42, 42, 43, 30, 30, 33, 35, 33, 44, 26, 26, 26, 26, 26, 26, 45, 35, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30], "height":16, "name":"Capa1", "opacity":1, "type":"tilelayer", "visible":true, "width":10, "x":0, "y":0 }], "nextobjectid":1, "orientation":"orthogonal", "renderorder":"right-down", "tileheight":32, "tilesets":[ { "firstgid":1, "source":"\/tmw_desert_spacing.tsx" }], "tilewidth":32, "version":1, "width":10 } Here I leave you 2 files just if you want to try it. Tank you very much! tmw_desert_spacing.tsx
  18. Hi, `Loader#pack` works as follow: It first downloads the json file using XHR and then all the related assets. `Loader#onPackComplete` is triggered when json file was downloaded and all assets were enqueued in its internal queue. What if I would like to be notified *ONLY* when all related assets of current pack were downloaded?? How can I achieve this kind of behaviour assuming that I'm downloading multiple packs! Thank you!
  19. I have a sprite sheet image ("character1.png") and a JSON file ("character1.json') indicating the frame positions. The positions of frames are specified as follows: { "count" : 264, "filename" : "character1.png", "position" : [ { "x1" : 5, "x2" : 65, "y1" : 4, "y2" : 86 }, { "x1" : 69, "x2" : 131, "y1" : 2, "y2" : 87 }, ... ] } How do I load the sprite sheet with the command `game.load.spritesheet(...)`. Also, how do I play the animation and access a particular frame? Thanks. character1.json
  20. I've been working on a Phaser game for a project at university. All of this is relatively new stuff to me, so I'm learning on the fly. I've managed to create a simple tilemap using Tiled, and got it to import to Phaser successfully. However, I can't make the player collide with the 'platform' layer, and I've tried just about everything I can find online. I've cut down my game code to just what's needed for you to (hopefully) point out my error, but it all runs without errors usually. I can also upload any JSON or Image files that might be needed. var SuddenGame = SuddenGame || {}; var char; var map; // GAMEPLAY STATE // SuddenGame.playState = function() {}; SuddenGame.playState.prototype = { init: function() { this.game.renderer.renderSession.roundPixels = true; }, create: function() { //Setup FPS Counter this.game.time.advancedTiming = true; //Stop game from pausing if a player tabs out this.stage.disableVisibilityChange = true; //Import and play background music music = this.game.add.audio('menumusic'); music.play('', 0, 1, true); //Create Dotted Background this.background = this.game.add.tileSprite(0, this.game.height - this.game.cache.getImage('background').height, this.game.width, this.game.cache.getImage('background').height, 'background' ); this.dots = this.game.add.tileSprite(0, this.game.height - this.game.cache.getImage('dots').height, this.game.width, this.game.cache.getImage('dots').height, 'dots' ); //Enable Physics Engine this.game.physics.startSystem(Phaser.Physics.ARCADE); //Add level one tilemap map = this.game.add.tilemap('levelone'); map.addTilesetImage('scifi_platformTiles_32x32', 'scifi_platformTiles_32x32'); backgroundTiles = map.createLayer('backgroundLayer'); Objective = map.createLayer('Objective'); Platform = map.createLayer('Platform'); this.game.add.existing(Platform); this.physics.arcade.enable(Platform); map.setCollisionBetween(1, 1000, true, 'Platform'); Platform.resizeWorld(); Platform.debug = true; this.char = this.add.sprite(50, 470, 'hero'); this.physics.arcade.enable(this.char); this.char.body.gravity.y = 1300; this.char.body.collideWorldBounds = true; this.char.scale.setTo(2, 2); //Create Player Animations var idle = this.char.animations.add('idle', [0]); var walk = this.char.animations.add('walk', [0, 1, 2, 1]); this.game.camera.follow(this.char); }, update: function() { this.game.physics.arcade.collide(char, Platform); this.physics.arcade.TILE_BIAS = 40; if (this.game.input.keyboard.isDown(Phaser.Keyboard.LEFT) && !this.char.body.touching.left) { this.char.body.velocity.x = -150; this.char.animations.play('backwalk', 10, true); } else if (this.game.input.keyboard.isDown(Phaser.Keyboard.RIGHT) && !this.char.body.touching.right) { this.char.body.velocity.x = 150; this.char.animations.play('walk', 10, true); } else if (this.game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) { this.char.animations.play('die', 10, true); } else { this.char.body.velocity.x = 0; this.char.animations.play('idle', 7, true); } if (this.game.input.keyboard.isDown(Phaser.Keyboard.SPACEBAR) && this.game.time.now > jumpTimer) { { this.char.animations.play('jump', 10); this.char.body.velocity.y = -1000; jumpTimer = this.game.time.now + 750; } } //if (this.cursors.up.isDown && !this.char.body.touching.down ) { if (this.game.input.keyboard.isDown(Phaser.Keyboard.SPACEBAR) && this.game.input.keyboard.isDown(Phaser.Keyboard.LEFT) && this.char.body.touching.left && this.game.time.now > jumpTimer) { this.char.body.velocity.y = -500; jumpTimer = this.game.time.now + 1; } if (this.game.input.keyboard.isDown(Phaser.Keyboard.SPACEBAR) && this.game.input.keyboard.isDown(Phaser.Keyboard.RIGHT) && this.char.body.touching.right) { this.char.body.velocity.y = -500; this.char.body.velocity.x = -2500; //jumpTimer = this.game.time.now + 1; } //More update code here }, render: function() { this.game.debug.text(this.game.time.fps || '--', 2, 14, "#00ff00"); } } Apologies if I've missed an extremely obvious mistake!
  21. I have started work on Photoshop script that exports layer data to a JSON file that can be imported at runtime by Phaser to recreate the design using images from a sprite sheet. This is still work in progress as I will be cleaning this up and adding more features such as bitmap text support and animated spritesheets. Add separation from the design from the game code. No more manually placing images. Make changes in Photoshop and see them right away in the running game. Does anyone else have a similar tool or process for updating and placing their images in Phaser? I used to use Flash and a FSFL script, but this new setup skips the Flash import process. The pipeline I use is as follows: 1. Photoshop using Generator and PhotoshopPhaserExport.jsx 2. TexturePacker auto creates a spritesheet from the Generator created images using a smart folder (Watch your atlases sizes in real time!) 3. Phaser imports the single spritesheet and the data JSON file for all the states as one file and creates each state when it is loaded 4. I didn't add it to my demo, but I use live.js to auto refresh the game when any changes are made 5. I use VirtualHostX to test locally across multiple devices at once, combined with live.js, they all refresh automatically when the game is updated Photoshop PSD Notes: Use Aa single Photoshop PSD for the whole game with a folder for each state, the name of the folder should match the state name in the code Any images that need to be exported as an image is a smart object with the extension .png , with Generator turned on in Photoshop, all those images will export in real time! Create additional instances of the smart objects can have a unique index as the extension instead of png so they share the same source image, for example blueBox.png, can have more instances named blueBox.1, blueBox.2 ect. The attached zip has a quick demo project, psd, and the Photoshop script that exports the JSON data. This concept is based on some of steps from this post bellow and is still very much work in progress. http://www.html5gamedevs.com/forum/14-phaser/?do=add projectNameZip.zip
  22. How should the son look for a Shader Material to specify initial shader properties. For example: { "customType" : "BABYLON.ShaderMaterial", "name" : "Items", "id" : "4341eb56-9415-44c4-a1c4-3236afe7df56", "backFaceCulling" : true, "wireframe" : false, "alpha" : 1, "shaderPath" : "AmigaShader", "options" : { "attributes" : [], "uniforms" : [], "needAlphaBlending" : false, "needAlphaTesting" : false, "samplers" : [], "defines" : [] }, "textures" : {}, "floats" : {}, "floatArrays" : {}, "colors3" : {}, "colors4" : {}, "vectors2" : {}, "vectors3" : {}, "vectors4" : {}, "matrices" : {}, "matrices2x2" : {}, "matrices3x3" : {} } So if did something like: "floats" : { "FloatParam1" : 1.0, "FloatParam2" : 2.0, "FloatParam3" : 3.0 } Is that basically the same thing as on client code: shader.setFloat("FloatParam1", 1.0); shader.setFloat("FloatParam2", 2.0); shader.setFloat("FloatParam3", 1.0); Will the scene loader automatically set these initial floats on the shader or do i still have to manually use client code look myself if shaderMaterial.floats has any key paris and manually class shader.setFloat for each key value pair defined in the shader material son as shown above? What goes in textures {} ... A key value pair of "name" --> BabylonTexture ? And will those textures get loaded as the initial shader.setTexture values or do i gotta manually load those as well?
  23. Easiest way to save data (for level editor)

    I come from java land, and am making a game which includes a level editor, so the data needs to be stored somewhere (json files), and I am curious about my options. The level editor is for my use, so I could have a separate version of the game for creating the data, using something like node.js or similar, but ideally there would only be one version. So, any ideas would be very welcome, the easier to implement for a phaser/html5 noob the better Edit: Forgot to mention that I'd prefer a permanent storage solution that ideally isn't reliant on a particular computer, since the levels will be developed over longer periods, and on multiple devices. But any ideas are welcome!
  24. Tiled map (json) collide fail

    Hello, I'm new at Phaser and i'm trying to make a map in Tiled and use it in my game, but the collide isn't working. My json Data: "data":[100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 89, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 91, 100, 100, 100, 100, 100, 100, 102, 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, 99, 100, 100, 100, 100, 100, 102, 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, 99, 100, 100, 100, 102, 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, 99, 100, 100, 102, 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, 99, 100, 100, 102, 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, 99, 100, 100, 102, 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, 99, 100, 100, 102, 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, 99, 100, 100, 102, 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, 99, 100, 100, 102, 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, 99, 100, 100, 102, 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, 99, 100, 100, 102, 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, 99, 100, 100, 102, 0, 0, 0, 0, 0, 0, 0, 0, 85, 86, 86, 86, 86, 86, 86, 86, 86, 86, 86, 86, 86, 86, 86, 86, 88, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 85, 86, 86, 86, 86, 86, 86, 86, 86, 86, 88, 0, 0, 0, 0, 0, 0, 0, 0, 0, 100, 100, 86, 86, 86, 86, 86, 86, 86, 86, 86, 86, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 86, 86, 86, 86, 86, 86, 86, 86, 86, 87, 86, 86, 86, 86, 86, 86, 86, 86, 100, 100, 100, 100, 100, 100, 100, 100, 100, 86, 86, 86, 86, 86, 86, 86, 86, 86, 86, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100], map.setCollisionBetween(0, 999, true); Already tyied everything... Any solutions?! Thanks in advance!