Search the Community

Hi All, I am trying with my friend to develop our first game using Phraser. We decided to have it in an Isometric view, after creating first simple map we tested it on PC and game was running smoothly however when we tried to run it on a mobile device (LG G2) FPS dropped down dramatically to less then 1 frame per second, to run it on mobile we tried: 1) cordova 2) intel xdk 3) cocoon 4) cordova+crosswalk Intel xdk was the best but still far from acceptable level. The question is how to build or what to change in our code started in phaser.js to make it work? Here is our code. Any help will be highly appreciated! var width = window.innerWidth; var height = window.innerHeight; var obstacleGroup, player; var marker, itemGroup; var floorGroup; var exitMarker; var grassGroup; var check; var controls; var cN, cS, cE, cW, cSE, cNE, cSW, cNW; var way; var water = []; //Initialize function var init = function () { var game = new Phaser.Game(width, height, Phaser.AUTO, 'test', null, false, true); var keyboard = new Phaser.Keyboard(game); var cursors; var BasicGame = function (game) { }; BasicGame.Boot = function (game) { }; BasicGame.Boot.prototype = { preload: function () { game.load.image('tree', 'images/tiles/tree.png'); game.load.image('trees', 'images/tiles/trees.png'); game.load.image('tree2', 'images/tiles/tree2.png'); game.load.image('gold', 'images/tiles/find1_gold.png'); game.load.image('exit', 'images/tiles/exit.png'); game.load.image('house', 'images/tiles/house.png'); game.load.image('E', 'images/controls/E.png'); game.load.image('N', 'images/controls/N.png'); game.load.image('NE', 'images/controls/NE.png'); game.load.image('NW', 'images/controls/NW.png'); game.load.image('S', 'images/controls/S.png'); game.load.image('SE', 'images/controls/SE.png'); game.load.image('SW', 'images/controls/SW.png'); game.load.image('W', 'images/controls/W.png'); game.load.spritesheet('terrain','images/tiles/terrain.png', 64, 64); game.load.spritesheet('characterAnim','images/tiles/vehicle.png', 128, 128); game.time.advancedTiming = true; // Add the Isometric plug-in to Phaser game.plugins.add(new Phaser.Plugin.Isometric(game)); // Set the world size game.world.setBounds(0, 0, 2048, 1024); // Start the physical system game.physics.startSystem(Phaser.Plugin.Isometric.ISOARCADE); // set the middle of the world in the middle of the screen game.iso.anchor.setTo(0.5, 0); }, create: function () { // set the Background color of our game game.stage.backgroundColor = "0x000000"; // create groups for different tiles floorGroup = game.add.group(); itemGroup = game.add.group(); grassGroup = game.add.group(); obstacleGroup = game.add.group(); // set the gravity in our game game.physics.isoArcade.gravity.setTo(0, 0, -500); var renderedPositions = new Array(32); for (var i = 0; i < renderedPositions.length; i++) { renderedPositions[i] = new Array(32); } for (var i = 0; i < 32; i++) { renderedPositions[31][i] = game.add.isoSprite(31*32, i*32, 0, 'terrain', 18, obstacleGroup); renderedPositions[31][i].anchor.set(0.5); game.physics.isoArcade.enable(renderedPositions[31][i]); renderedPositions[31][i].body.collideWorldBounds = true; renderedPositions[31][i].body.immovable = true; renderedPositions[30][i] = game.add.isoSprite(30*32, i*32, 0, 'terrain', 18, obstacleGroup); renderedPositions[30][i].anchor.set(0.5); game.physics.isoArcade.enable(renderedPositions[30][i]); renderedPositions[30][i].body.collideWorldBounds = true; renderedPositions[30][i].body.immovable = true; water.push(renderedPositions[30][i]); renderedPositions[29][i] = game.add.isoSprite(29*32, i*32, 0, 'terrain', 18, obstacleGroup); renderedPositions[29][i].anchor.set(0.5); game.physics.isoArcade.enable(renderedPositions[29][i]); renderedPositions[29][i].body.collideWorldBounds = true; renderedPositions[29][i].body.immovable = true; water.push(renderedPositions[29][i]); renderedPositions[28][i] = game.add.isoSprite(28*32, i*32, 0, 'terrain', 8, obstacleGroup); renderedPositions[28][i].anchor.set(0.5); game.physics.isoArcade.enable(renderedPositions[28][i]); renderedPositions[28][i].body.collideWorldBounds = true; renderedPositions[28][i].body.immovable = true; } // create the floor tiles var grasses = [2,7,12,17,22]; for (var xt = 0; xt < 32; xt++) { for (var yt = 0; yt < 32; yt++) { if (!renderedPositions[xt][yt]) { renderedPositions[xt][yt] = game.add.isoSprite(xt*32, yt*32, 0, 'terrain', grasses[Math.floor(Math.random() * 5)], floorGroup); renderedPositions[xt][yt].anchor.set(0.5); } } } // create a house object which will be our ending point in the game var house = game.add.isoSprite(300, 100, 0, 'house', 0, obstacleGroup); house.anchor.set(0.5); game.physics.isoArcade.enable(house); house.body.collideWorldBounds = true; house.body.immovable = true; // create collectible items marker = game.add.isoSprite(rndNum(300), rndNum(300), 0, 'gold', 0, itemGroup); game.physics.isoArcade.enable(marker); marker.body.collideWorldBounds = true; marker.anchor.set(1.0); // create the exit marker next to the house object exitMarker = game.add.isoSprite(400, 400, 0, 'exit', 0, itemGroup); game.physics.isoArcade.enable(exitMarker); exitMarker.body.collideWorldBounds = true; exitMarker.anchor.set(0.5); exitMarker.alpha = 0.5; // create control button sprites on the screen cNW = game.add.sprite(0, 100, 'NW'); cNW.fixedToCamera = true; cNW.inputEnabled = true; cNW.events.onInputDown.add(onDown, this); cNW.events.onInputOver.add(onDown, this); cNW.events.onInputUp.add(onUp, this); cNW.events.onInputOut.add(onUp, this); cW = game.add.sprite(0, 176, 'W'); cW.fixedToCamera = true; cW.inputEnabled = true; cW.events.onInputDown.add(onDown, this); cW.events.onInputOver.add(onDown, this); cW.events.onInputUp.add(onUp, this); cW.events.onInputOut.add(onUp, this); cSW = game.add.sprite(0, 252, 'SW'); cSW.fixedToCamera = true; cSW.inputEnabled = true; cSW.events.onInputDown.add(onDown, this); cSW.events.onInputOver.add(onDown, this); cSW.events.onInputUp.add(onUp, this); cSW.events.onInputOut.add(onUp, this); cN = game.add.sprite(76, 100, 'N'); cN.fixedToCamera = true; cN.inputEnabled = true; cN.events.onInputDown.add(onDown, this); cN.events.onInputOver.add(onDown, this); cN.events.onInputUp.add(onUp, this); cN.events.onInputOut.add(onUp, this); cS = game.add.sprite(76, 252, 'S'); cS.fixedToCamera = true; cS.inputEnabled = true; cS.events.onInputDown.add(onDown, this); cS.events.onInputOver.add(onDown, this); cS.events.onInputUp.add(onUp, this); cS.events.onInputOut.add(onUp, this); cNE = game.add.sprite(152, 100, 'NE'); cNE.fixedToCamera = true; cNE.inputEnabled = true; cNE.events.onInputDown.add(onDown, this); cNE.events.onInputOver.add(onDown, this); cNE.events.onInputUp.add(onUp, this); cNE.events.onInputOut.add(onUp, this); cE = game.add.sprite(152, 176, 'E'); cE.fixedToCamera = true; cE.inputEnabled = true; cE.events.onInputDown.add(onDown, this); cE.events.onInputOver.add(onDown, this); cE.events.onInputUp.add(onUp, this); cE.events.onInputOut.add(onUp, this); cSE = game.add.sprite(152, 252, 'SE'); cSE.fixedToCamera = true; cSE.inputEnabled = true; cSE.events.onInputDown.add(onDown, this); cSE.events.onInputOver.add(onDown, this); cSE.events.onInputUp.add(onUp, this); cSE.events.onInputOut.add(onUp, this); // create control functions for the control buttons function onDown(sprite, pointer) { switch(sprite.key) { case "N": case "S": case "SE": case "SW": case "NW": case "NE": case "E": case "W": way = sprite.key; } } function onUp(sprite, pointer) { way = undefined; } controls = game.add.group(); controls.add(cN); controls.add(cS); controls.add(cW); controls.add(cE); controls.add(cNE); controls.add(cNW); controls.add(cSE); controls.add(cSW); controls.alpha = 0.9; // Creste the player player = game.add.isoSprite(25*32, 3*32, 0, 'characterAnim', 0, obstacleGroup); player.alpha = 1.0; // add the animations from the spritesheet player.animations.add('S', [0], 10, true); player.animations.add('SW', [1], 10, true); player.animations.add('W', [2], 10, true); player.animations.add('NW', [3], 10, true); player.animations.add('N', [4], 10, true); player.animations.add('NE', [5], 10, true); player.animations.add('E', [6], 10, true); player.animations.add('SE', [7], 10, true); player.anchor.set(0.5); // enable physics on the player game.physics.isoArcade.enable(player); player.body.collideWorldBounds = true; game.time.advancedTiming = true; game.debug.text(game.time.fps, 0, 0, 'red'); game.camera.follow(player); }, update: function () { // Move the player var speed = 100; if (way === 'SE')// || (cursors.down.isDown && cursors.right.isDown)) { player.body.velocity.x = speed; player.body.velocity.y = 0; player.animations.play('SE'); } else if (way === 'SW')// || (cursors.down.isDown && cursors.left.isDown)) { player.body.velocity.y = speed; player.body.velocity.x = 0; player.animations.play('SW'); } else if (way === 'NW')// || (cursors.up.isDown && cursors.left.isDown)) { player.body.velocity.x = -speed; player.body.velocity.y = 0; player.animations.play('NW'); } else if (way === 'NE')// || (cursors.up.isDown && cursors.right.isDown)) { player.body.velocity.y = -speed; player.body.velocity.x = 0; player.animations.play('NE'); } else if (way === 'N')// || cursors.up.isDown) { player.body.velocity.y = -speed; player.body.velocity.x = -speed; player.animations.play('N'); } else if (way === 'S')// || cursors.down.isDown) { player.body.velocity.y = speed; player.body.velocity.x = speed; player.animations.play('S'); } else if (way === 'E')// || cursors.right.isDown) { player.body.velocity.x = speed; player.body.velocity.y = -speed; player.animations.play('E'); } else if (way === 'W')// || cursors.left.isDown) { player.body.velocity.x = -speed; player.body.velocity.y = speed; player.animations.play('W'); } else { player.body.velocity.x = 0; player.body.velocity.y = 0; player.animations.stop(); } game.physics.isoArcade.collide(obstacleGroup); game.physics.isoArcade.overlap(marker, player ,function(e){ e.destroy(); }); check = game.physics.isoArcade.overlap(exitMarker, player ,function(e){ }); game.iso.topologicalSort(obstacleGroup); }, render: function () { } }; game.state.add('Boot', BasicGame.Boot); game.state.start('Boot'); // generate random number function rndNum(num) { return Math.round(Math.random() * num); } }; // window.onload can work without <body onload=""> window.onload = init; main.js

Hi everyone Currently i'm building a game about drilling oil from the ground. The stage that im in right now is creating the ground and the driller. Here is an example image The way that I create this effect is by using group. When ever the white dot collide with the brown mud, the driller will kill the mud they collide. Size of the mud is about 5 x 5 px so in order to fill up the whole screen i use a 2 for loop to create hundreds of mud sprite under one single group. var game = new Phaser.Game(800, 600, Phaser.AUTO, 'game', { preload: preload, create: create, update: update, render: render }); function preload(){ game.load.image('mud', 'img/mud.png'); game.load.image('driller', 'img/square.png'); game.time.advancedTiming = true; } function create(){ floorLevel = 100; dirt = game.add.group(); dirt.enableBody = true; dirt.physicalBodyType = Phaser.Physics.ARCADE; for(var j = floorLevel; j < game.world.height; j = j+5 ){ for (var i = 0; i < game.world.width; i=i+5){ var mud = dirt.create(i, j, 'mud'); } } driller = game.add.sprite(100,50, 'driller'); game.physics.enable(driller,Phaser.Physics.ARCADE); drillerTween = game.add.tween(driller).to({x:400, y:300}, 3000); drillerTween.start(); } function update(){ game.physics.arcade.overlap(driller, dirt, function collisionHandler(driller, mud){ mud.kill(); }); } function render(){ game.debug.text('FPS: ' + (game.time.fps || '--') , 2, 14, "#00ff00"); } Here comes the problem, when trying to run this game it was REALLY laggy. In a PC local environment, the FPS was about 15-20. But when i export it to my mobile through CocoonJS, the FPS drops down to 2-3 fps. I've try to come up with a solutions by increase the size of the mud so less sprite would need to be create and handle by the CPU. But i'd want to avoid this method to not expose that much background to the players. I've also done some research on the tileMap. I realized that it is possible to have an collision event on the with the tiles, but is it possible to kill that tiles when collide??? QUESTIONS: So Are there any kind of way to improve my FPS?? Really appreciate for the time to read and Thank You.

Hello! When I create empty project and load assets, fps = 60, ok. After adding about 15 images to stage (game.add.image(0, 0, atlasKey, frameName)), fps jumps between 35 and 55. (All Images have: 208x208px, about 50KB, and keep in 1 xml atlas) Please, help to solve this problem. Thanks.

Hi, i got really low fps in my scene like 9fps on iOS (iPhone 6 Plus) so i started to test some things, and now i just created a simple scene with 2 meshes (boxes) 1 is invisible as template and second is on screen, there is nothing more and with just 2 meshes (1 invisible) i got 30-34 fps, using three.js i got constantly 60fps :/ Any ideas and could someone test it on android or something? here is a link: http://bcagroup.pl/babylon2

Hello! I´ve just a made a simple snake style game. Where I create sprites, sounds, starts arcade physics and inputs in the create of my game state. When the snake dies I do a restart on the state and reinit some variabels. This works fine on desktop (60 fps) but on mobile I got around 30 fps at first but after a restart call it drops to like 10 fps and after one more it drops again. What can be wrong? I´ve tried to do a clean up of the audio, sprites and inputs (buttons with touch handler) in a shutdown of the game state and move the arcade physics start to a preload state (so it just start once). But the performace on mobile (tested on iPhone 4) is still bad after a restart of the state. Any idés how to properly restart a game state with arcade physics or how I can track that whats causing the issue. You can preview a version of the game here, this version don´t have the clean up in the shutdown nor the fps in the renderer, but maybe it can show any memory leaks or double bodies in the physics?! http://campaign.nelly.com/