johann_dev

I'm working on a game and I've noticed it drops 4-5 frames on very regular intervals. I read an article that suggests it could be a "Memory Leak", in that the garbage collector is coming by and cleaning up dereferenced objects and that's what's slowing the game down. I ran the chrome profiler and this pattern of my Heap usage does suggest that's what's happening: So I'm trying to pool all my objects but the problem I have is with Tweens. I use a ton of them for juicing my UI text and whatnot so I create them on the fly very often. I tried reusing tweens instead of creating new ones, but in my tests I've noticed that it doesn't make a difference. I suspect it's because even if I reuse a tween, it's still creating tweenData objects under the hood, and that they're leaking memory. This is the example code I used to show that reusing a tween (using one at all?) causes memory leaks: var gameWidth = 704; var gameHeight = 396; var game = new Phaser.Game(gameWidth, gameHeight, Phaser.CANVAS, "game", { init: init, preload: preload, create: create, update: update }); var fullscreenKey; var snes; var speed = -300; var tween; function init() { game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; game.renderer.renderSession.roundPixels = true; game.camera.roundPx = true; game.stage.backgroundColor = '#facade'; Phaser.Canvas.setImageRenderingCrisp(this.game.canvas); game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; }; function preload() { game.load.image('snes', 'https://s8.postimg.cc/csffa5txx/snescontroller.png'); } function create() { snes = game.add.sprite(game.camera.view.width / 2, game.camera.view.height / 2, 'snes'); snes.anchor.setTo(0.5); tween = game.add.tween(snes.scale).to({ x: 2, y: 2 }, 50, Phaser.Easing.Linear.None, true).yoyo(true); game.time.events.loop(100, addTween, this); game.time.events.start(); } function update() { } function addTween() { tween.start(); } and the heap: Am I mistaken? Is it something else? Are my tweens slowing my game down because the garbage collector has to clean them up?

Apparently another mistake I was making was not waiting for audio to completely decode before leaving the preload state.

I can confirm, replacing tilesprites made a massive difference in performance on mobile firefox. mobile firefox is still slow to start, and there's a huge delay before the music in the game will start playing mobile safari crashes during the first loading screen Does anyone know if audio could be the source of my problems? I'm using audiosprites that reference both an mp3 and an ogg file.

Thanks! I had already done all of those things you listed. I read on someone's blog that tilesprites are really inefficient on mobile browsers, and my game uses tons of them. I'm trying to replace them all with an extended version of phaser.image, I'll report back if it helps.

I'm having huge difficulties getting my game to run smoothly on the big three browsers for desktop and mobile. How my game currently runs on each platform: Desktop Chrome: Great, 60 fps, no problems Desktop Firefox: also great Desktop Safari: great Mobile Chrome: little chuggy, but altogether decent Mobile Firefox: Unplayable, 5-20 fps, music doesn't start playing until several minutes into play Mobile Safari: Unplayable, constantly crashing. Is it unrealistic to assume I can get it to play at 60 fps on all of these platforms? What are some (broadly speaking) best practices for optimizing Phaser games for mobile browsers? I keep trying things to get my game to run faster (Object pooling, lower resolution, reducing number of sprites, optimizing algorithms) but in some cases these optimizations make the game run worse (specifically object pooling on mobile firefox). Should I abandon optimizing for mobile devices and instead deploy my games using CocoonJS/cordova/PhoneGap and put it up on the app stores?

Can you show examples of how to use the particle systems in a game? I've created a "particleEffect" in my game but I can't figure out how I'm supposed to use it.

Answer here: https://github.com/PhaserEditor2D/PhaserEditor/issues/71#issuecomment-366694277

I'm using the Phaser Editor and I created a prefab for my player sprite, but no matter what I do I can't get it to appear in the assets window or in the options to add prefabs to my scene files. I created the Prefab by using File -> New -> Sprite Prefab. I've tried adding the associated script file to the pack.json file, I've tried loading the script in index.html, I've tried shutting down and restarting the editor but I just cant use the prefab. The prefab shows up where it's supposed to in my folder structure, and I can edit the canvas file normally. I just can't add the prefab to any of my Scenes.

/** * Takes the collision data defined in the collision editor of Tiled and applies it to * and exisiting tilemap for use with P2 physics bodies. * * Tilemap json data MUST be loaded in the Preload state/function using game.load.json() before this function is called * map must only have ONE tileset * each tile can only have ONE polyline set for it's collision * the polyline MUST be a complete shape (the last point is indentical to the first) * * @param {Phaser.Tilemap} map - this is the map which you want polylines added to * @param {string} key - this is the key for the raw json tilemap data loaded in the preload state * @param {bool} [roundValues=true] - Will round the x,y coordinates for the polylines to nearest integer */ addPolylineCollision: function (map, key, roundValues) { if (roundValues === undefined) { roundValues = true; } // json with the collision data that was omitted by phaser let data = this.game.cache.getJSON(key); //console.log(data); let collisionData = data.tilesets[0].tiles; // array of the collision polygons that will get added to the tilemap var polygons = []; // tiles in the Collision Layer that will help define the polygons let mapData = map.layers[map.getLayer('Collision Layer')].data; for (let row in mapData) { for (let col in mapData[row]) { var wall = collisionData[mapData[row][col].index - 1]; if (wall !== undefined) { for (let i in wall.objectgroup.objects) { let poly = { height: 0, name: "", polyline: [], properties: undefined, type: "", visible: true, width: 0, x: mapData[row][col].x * map.tileWidth, y: mapData[row][col].y * map.tileHeight }; for (let j in wall.objectgroup.objects[i].polyline) { var coords = [wall.objectgroup.objects[i].polyline[j].x, wall.objectgroup.objects[i].polyline[j].y]; if (roundValues) { coords[0] = Math.round(coords[0]); coords[1] = Math.round(coords[1]); } poly.polyline.push(coords); } polygons.push(poly); } } } } console.log(polygons); map.collision['Collision Layer'] = polygons; } I'm writing a function to support Tiled's Collision editor and P2 physics. Everything seems fine but the values for all the polygons I defined get mangled to the same values. I thought it was a scope issue but nothing seems to work: pic: https://gyazo.com/17006a8d49e451a7d7010c77c31a7765 (Links to an external site.)Links to an external site. paste: https://pastebin.com/fv9sJpPc (Links to an external site.)Links to an external site. By the time execution reaches line 57, the console.log call, all the values in the polyline arrays are totally messed up, they're set to values between -1 and 1, and are always set to the same values every time. At every other previous point in this functions lifetime everything works exactly as expected.

bump

Support for Tiled's Collision Editor with p2 physics bodies.

Is there a solution to this problem? 3 years later Phaser's tilemap system still ignores the object properties defined in the collision editor.

I figured out the problem: I wasn't creating layers for the buffered tilemaps (the ones not being rendered) once I did that everything showed up correctly. I'm still very confused why this is, as I didnt need to create the collision layers, and they still worked. Nevermind the problem still persists. I thought I had found a fix but I was wrong.

I've tried manually debugging what's in the tilemap and it's pretty difficult to parse. From what I can see, all layers of my "worldMap" are correctly populated with tiles and seemingly all the tiles I'm expecting to not be blank have indices != -1 and alphas of 1. So it definitely looks like all the information is there.

Bump

I'm working on an endless runner than uses multiple tilemaps as segments in order to achieve a procedurally generated effect. I'm copying tile data from a buffered tilemap (not being rendered) and pasting that data to another tilemap (currently being rendered) but not all the tiles show up. I copy and paste the tiles in three separate batches. The first batch works fine. The second and third batch of tiles don't render at all, but the collision tiles still work. All the tiles are copied from the same tilemap. Attached is the relevant file. Runner.js

Yes I am using 2.6.2

So I switched from using the phaser.js file to the phaser.min.js file and it seemed to fix this issue. I don't have collision working yet for some reason but I'd still like to know if anyone has a fix for the aforementioned issue.

I'm trying to implement a simple tilemap in my Phaser game with this code: function preload() { game.load.tilemap('level0', '../static/images/maps/level0.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('stone0', '../static/images/stone0.png'); game.load.spritesheet('player', '../static/images/player.png', 32, 48); game.stage.backgroundColor = '#000000'; } var map; var tileset; var layer;var player; var facing = 'left'; var jumpTimer = 0; var cursors; var jumpButton; var bg; function create() { game.physics.startSystem(Phaser.Physics.ARCADE); map = game.add.tilemap('level0'); map.addTilesetImage('stone0'); map.setCollision(1); layer = map.createLayer('Tile Layer 1'); // layer.debug = true; layer.resizeWorld(); and when I start up the webpage I get the error: "this.postUpdateCore is not a function" which is occurring within the phaser.js file itself. I'm unclear on how to debug and fix this.