Search the Community

Hi guys! So I am trying to create a mobile racing game in Phaser. But the game has really poor performance on mobile. I tried to reduce a lot of things in the game and test if I get a better performance, but so far no success. What I have so far after reducing everything to absolute minimum is a sprite of a car (79x160 png image), a sprite for the background (100150 png) and in the update function I only scroll the background adding to the background y some value to move it down. I am running the game in CANVAS mode. Any thoughts what might be happening, or any tips or tricks that will improve the performance? Thanks!

I am having some performance issues with collision groups on mobile. I have 13 enemy sprites in game that collide with map polygon boundaries. Having the enemy sprites in game degrades the fps from 60fps down to 30fps. As I reduce the number of enemies in game the fps increases. 13 seems like a really small number of sprites to have in game so I feel like I must be setting up the collision detection incorrectly. I am trying to setup a base map with polygons to use for collision boundaries of the map. I want to have enemies go back and forth horizontally between the map boundaries. They will change direction (both a change in x velocity and flipping the scale so they visual point the opposite direction) when they make contact with the boundary. Is this the proper way to setup this type of collision detection? If so, any thoughts on why it is so slow on mobile devices (testing on iPhone 5)? Here is the code I currently have: // Init gamevar game = new Phaser.Game(1024, 640, Phaser.CANVAS, 'test-game'); // Load the assetsgame.load.image('level01', 'assets/level01.png'); // Image 1024x4608 game.load.physics('level01_physics', 'assets/level01_physics.json'); // Physics data format is Lime + Corona (JSON)// Setup collision groups var landCG = game.physics.p2.createCollisionGroup(); var enemyCG = game.physics.p2.createCollisionGroup();// Load map background imagevar map = this.add.sprite(0, 0, 'level01');// Create sprite and load polygon physics data for the map boundaries var mapCollisionPolygons = this.add.sprite(15, 15); this.physics.p2.enableBody(mapCollisionPolygons, false); mapCollisionPolygons.fixedRotation = true; mapCollisionPolygons.body.motionState = Phaser.Physics.P2.Body.STATIC; mapCollisionPolygons.body.clearShapes(); mapCollisionPolygons.body.loadPolygon('level01_physics', 'left'); mapCollisionPolygons.body.loadPolygon('level01_physics', 'right'); mapCollisionPolygons.body.setCollisionGroup(landCG); mapCollisionPolygons.body.collides(enemyCG); // Create a new enemy and setup collision var enemy = new Enemy(game, 100, 100, 100, 100, 100); enemy.body.setCollisionGroup(enemyCG); enemy.body.collides(landCG, enemy.collided, enemy); The extended Sprite class called 'Enemy': var Enemy = function (game, x, y) { this.hasCollided = false; this.speed = 100; Phaser.Sprite.call(this, game, x, y, 'boat'); game.physics.p2.enable(this); this.body.fixedRotation = true; this.body.motionState = Phaser.Physics.P2.Body.DYNAMIC; this.body.onEndContact.add(this.endCollided, this); game.add.existing(this); return this;};Enemy.prototype = Object.create(Phaser.Sprite.prototype);Enemy.prototype.constructor = Enemy;Enemy.prototype.update = function() {};Enemy.prototype.collided = function(body1, body2) { if(!this.hasCollided) { this.scale.x *= -1; this.speed *= -1; this.body.velocity.x = this.speed; this.hasCollided = true; }};Enemy.prototype.endCollided = function(bodyB, shapeA, shapeB) { this.hasCollided = false;};module.exports = Enemy;The 'assets/level01_physics.json' file: { "left": [ { "density": 2, "friction": 0, "bounce": 0, "filter": { "categoryBits": 1, "maskBits": 65535 }, "shape": [ 0, 4608 , 224, 4016 , 384, 4056 , 384, 4608 ] } , { "density": 2, "friction": 0, "bounce": 0, "filter": { "categoryBits": 1, "maskBits": 65535 }, "shape": [ 384, 264 , 224, 303 , 0, 0 , 384, 0 ] } , { "density": 2, "friction": 0, "bounce": 0, "filter": { "categoryBits": 1, "maskBits": 65535 }, "shape": [ 224, 4016 , 0, 4608 , 0, 0 , 224, 303 ] } ] , "right": [ { "density": 2, "friction": 0, "bounce": 0, "filter": { "categoryBits": 1, "maskBits": 65535 }, "shape": [ 640, 4056 , 800, 4016 , 1024, 4608 , 640, 4608 ] } , { "density": 2, "friction": 0, "bounce": 0, "filter": { "categoryBits": 1, "maskBits": 65535 }, "shape": [ 1024, 0 , 800, 303 , 640, 264 , 640, 0 ] } , { "density": 2, "friction": 0, "bounce": 0, "filter": { "categoryBits": 1, "maskBits": 65535 }, "shape": [ 800, 4016 , 800, 303 , 1024, 0 , 1024, 4608 ] } ] }Here is a link to a related post with some of my performance testing with different options for displaying the background map and boundaries in case it helps. http://www.html5gamedevs.com/topic/9677-vertical-scrolling-background-with-collisions-in-p2/

Mobile devices are limited in comparison to desktop browsers or native apps in resources. I've noticed quiet a lot of times that if your games get's a little bit more complicated in update-processes, physics etc that the performance is lacking on mobile devices. Even as a result there are as more errors in the physics etc as your game-performance is limited. So maybe it is useful to compare how to improve performance. 1. Update function In my code I strongly try write as less code into the update function as possible. Because of redrawing sprite etc you do not need to - or even you don't need to check for some attributes only on specifically events. 2. file sizes My files are always the size which they are needed and pixel-perfect exported. (That's even a "must be" for design). So I think you guys know a lot more how to improve the game perforce of Phaser on mobile Platforms. I run my Games to Cooconjs. Experiences in PhoneGap offered me much less performance. cheers,