• Content Count

  • Joined

  • Last visited

  1. I'm updating a game from Phaser 2 to Phaser 3 and needed this functionality, I grabbed the createFromObjects function from Phaser2 and updated it as below to add the props.data from the JSON to the new sprite object. I'm also adding my own Custom class like you used to be able to do with Phaser 2 as well, but you should be able to see that and pull it out fairly easily. I just added this to a scene helper file I have, I didn't update the core library in anyway and am currently using 3.7.1 function createFromObjects( scene, name, id, customClass, spriteConfig) { if( spriteConfig == undefined ) spriteConfig = {} var objectLayer = scene.map.getObjectLayer(name); if (!objectLayer) { console.warn('Cannot create from object. Invalid objectgroup name given: ' + name); return; } var objects = objectLayer.objects; var sprites = []; for (var i = 0; i < objects.length; i++) { var found = false; var obj = objects[i]; if (obj.gid !== undefined && typeof id === 'number' && obj.gid === id || obj.id !== undefined && typeof id === 'number' && obj.id === id || obj.name !== undefined && typeof id === 'string' && obj.name === id) { found = true; } if (found) { var config = Object.assign(spriteConfig, obj.properties); config.x = obj.x; config.y = obj.y; let sprite if( customClass != undefined ) { sprite = new customClass( config ) } else { sprite = scene.make.sprite( config ) } sprite.name = obj.name; if (obj.width) { sprite.displayWidth = obj.width; } if (obj.height) { sprite.displayHeight = obj.height; } // Origin is (0, 1) in Tiled, so find the offset that matches the Sprite's origin. var offset = { x: sprite.originX * sprite.displayWidth, y: (sprite.originY - 1) * sprite.displayHeight }; // If the object is rotated, then the origin offset also needs to be rotated. if (obj.rotation) { var angle = DegToRad(obj.rotation); Rotate(offset, angle); sprite.rotation = angle; } if (obj.flippedHorizontal !== undefined || obj.flippedVertical !== undefined) { sprite.setFlip(obj.flippedHorizontal, obj.flippedVertical); } if (!obj.visible) { sprite.visible = false; } sprites.push(sprite); } } return sprites; } And the function is called like below: createFromObjects( scene, 'objects', 200, Reward, { scene: scene } ) Good luck
  2. wkd-aine

    Tilemap Resize

    Hi, I am updating a game from Phaser2 to 3, and was hoping someone can help! The game is a platformer game, somewhat similar to the Mario demo game, but the tilemap needs to resize on smaller screens to allow a range of browsers to be used to play the game. In Phaser2 the following code worked layer = map.createLayer( 'tiles' ); layer.setScale( scale_y ) layer.resizeWorld(); if( scale_y != 1) layer.resize(tile_width, tile_height); I have tried multiple approaches to getting the tiles to resize in Phaser 3 and realise that we don't have the same scaling functionality as before, but was hoping someone has some ideas on how this can be achieved. I have managed to resize the actual tiles, but then the extra tiles that are then displayed aren't rendered, see print screen below. You can see that the physics body is being added correctly, not sure if it makes any difference but am using matterJS, see code below if( utils.DEBUG ) { scene.matter.world.createDebugGraphic() scene.matter.world.drawDebug = true } let size = utils.TILE_SIZE * utils.scale_y var map = scene.make.tilemap({ key: 'map_level' }) var tiles = map.addTilesetImage('world_tiles') var layer = map.createStaticLayer( 'tiles', tiles, 0, 0 ) .setScale( utils.scale_y ) .setScrollFactor( 0 ) .setCollisionByProperty({ collides: true }) // if( utils.scale_y != 1 ) layer.resizeWorld( utils.TILE_WIDTH, utils.TILE_HEIGHT ) scene.matter.world.setBounds( size, utils.TILE_HEIGHT ) scene.matter.world.convertTilemapLayer( layer ) If you need anything clarified please let me know. Many thanks in advance Áine
  3. Hi, When I test your game now, it works great, my game is juddering like your video in FireFox, what did you do to fix it please? Many thanks, Áine
  4. wkd-aine

    FireFox Lag

    Hi, I am working on a game where the hero runs through different levels and collects rewards, and have got it working really smoothly for Chrome on Mac, however when testing on FireFox on Mac or Windows it goes really laggy. At its most simple, the game uses a tilemap (70 x 15), which also handles the objects, the objects are split into various classes, and there are two background images (originally for parallax, but this has been disabled while we try and resolve the lagginess). The hero and a couple of other sprite objects have animations, but again these have been temporarily disabled, even with all of this there is still significant lag when running and jumping, its a reasonably large game so not really sure what code would be helpful without causing more confusion. I've tried several different approaches now, with no success. I have tried changing the 'renderer' for the game, the best result so far is CANVAS, not sure if it makes any difference but the physics library is P2, and I am only pre-loading the assets required for the current level. I have tried killing sprites, setting their visiblity to false, only dumping out a subset of objects, and none of it seems to affect anything. I have done some investigation, and the 'requestAnimationFrame' function seems to get called alot but the garbage cleaner not so much. I had a look at pixi.js and there is an issue from which looks to be similar but not the same. Has anyone else had this issue, know where I should investigate next? Many thanks, Áine