Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

Low performance on Android

bulboka

By bulboka,
in Phaser 2

 Share

Recommended Posts

bulboka Newbie

bulboka

Posted
Posted

Good morning everyone!
 

I've made a very simple prototype on Phaser, tried to launch it on several Android devices and was discouraged by a rediculously low performance. Framerate was around 30 - 40 frames per second in Chrome and even lower in Firefox and Android browser, while displaying two short lines of a raster font text. iOS-device showed a bit better results, but still lagged sometimes.

 

Here is the app: http://bulboka.ru/games/christmas/

 

I've tried running pixi bunny test and other phaser games on the same devices and had got mostly smooth results.

 

I've read some forum topics on optimization but could not find anything usefull for my very basic primitive prototype. I've tried using rendering with canvas and webGL. Results varied a bit but still were unacceptably poor. Some people wrote about wrong embeding into html page and scaling viewport. I'm not sure I understand it right, I tried using meta-tag "viewport" to prohibit scaling and it alsow didn't help.

 

Due to my zero experience in Phaser and html5 developement, I'm sure, I'm doing some very basic mistakes but can't find the solution myself. Please help! Thank you in advance.

 

Here's my index.html:

<!DOCTYPE HTML><html><head>	<title>Christmas Bounce</title>	<meta charset="utf-8">	<meta http-equiv="X-UA-Compatible" content="chrome=1, IE=9" />	<meta name="format-detection" content="telephone=no" />	<meta name="HandheldFriendly" content="true" />	<meta name="robots" content="noindex,nofollow" />	<meta name="apple-mobile-web-app-capable" content="yes" />	<meta name="apple-mobile-web-app-status-bar-style" content="black" />	<meta name="apple-mobile-web-app-title" content="Christmas Bounce">	<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />	<link rel="stylesheet" href="css/stylesheet.css" type="text/css" charset="utf-8" /></head><body>    <div id="game"></div>    <div id="orientation"></div>    <script src="js/phaser.min.js"></script>    <script src="js/game.js"></script>    <!--FPS stats-->    <script>javascript:(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();stats.domElement.style.cssText='position:fixed;left:0;top:0;z-index:10000';document.body.appendChild(stats.domElement);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='//rawgit.com/mrdoob/stats.js/master/build/stats.min.js';document.head.appendChild(script);})()</script></body></html>

And here is the code. Please tell if there is a better way than attaching all the code. But I'm realy not sure what can be important.

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){'use strict';//global variableswindow.onload = function () {  var game = new Phaser.Game(960, 640, Phaser.CANVAS, 'christmas-catch');  // Game States  game.state.add('boot', require('./states/boot'));  game.state.add('menu', require('./states/menu'));  game.state.add('play', require('./states/play'));  game.state.add('preload', require('./states/preload'));  game.state.start('boot');};},{"./states/boot":4,"./states/menu":6,"./states/play":7,"./states/preload":8}],4:[function(require,module,exports){'use strict';function Boot() {}Boot.prototype = {	preload: function() {		this.load.image('preloader', 'assets/preloader.gif');	},	create: function() {		this.stage.disableVisibilityChange = true;		this.parentElement = this.game.canvas;		this.game.scale.fullScreenTarget = this.parentElement;		this.game.scale.scaleMode = Phaser.ScaleManager.USER_SCALE;		this.game.scale.fullScreenScaleMode = Phaser.ScaleManager.SHOW_ALL; // Important		this.game.scale.pageAlignHorizontally = true;		this.game.scale.pageAlignVertically = false;		this.game.stage.disableVisibilityChange = true;		this.game.input.maxPointers = 1;		this.game.scale.setResizeCallback(this.resize, this);		this.game.input.maxPointers = 1;		this.game.state.start('preload');	},	resize: function() {		var scale = Math.min(window.innerWidth / this.game.width, window.innerHeight / this.game.height);		this.parentElement.style.minHeight = window.innerHeight.toString() + "px";		this.game.scale.setUserScale(scale, scale, 0, 0);	}};module.exports = Boot;},{}],6:[function(require,module,exports){'use strict';function Menu() {}Menu.prototype = {	preload: function() {	},	create: function() {		this.startText = this.game.add.bitmapText(this.game.width * 0.5, this.game.height * 0.4, "chromoFont", "Tap\nto start", 48);		this.startText.align = "center";		this.startText.x = (this.game.width - this.startText.width) * 0.5;		this.game.input.onDown.add(this.tapHandler, this);	},	update: function() {	},	tapHandler: function() {		this.game.scale.startFullScreen();		this.game.state.start('play');	}};module.exports = Menu;},{}],7:[function(require,module,exports){'use strict';function Play() {}Play.prototype = {	create: function() {		this.startText = this.game.add.bitmapText(this.game.width * 0.5, this.game.height * 0.4, "chromoFont", "Gameplay", 48);		this.startText.align = "center";		this.startText.x = (this.game.width - this.startText.width) * 0.5;	},	update: function() {	}};module.exports = Play;}],8:[function(require,module,exports){'use strict';function Preload() {  this.asset = null;  this.ready = false;}Preload.prototype = {	preload: function() {		this.asset = this.add.sprite(this.width/2,this.height/2, 'preloader');		this.asset.anchor.setTo(0.5, 0.5);		this.load.onLoadComplete.addOnce(this.onLoadComplete, this);		this.load.setPreloadSprite(this.asset);		this.load.bitmapFont('chromoFont', 'assets/fonts/flappyfont/flappyfont.png', 'assets/fonts/flappyfont/flappyfont.fnt');		this.game.stage.backgroundColor = 0xffffff;	},	create: function() {		this.asset.cropEnabled = false;	},	update: function() {		if(!!this.ready) {			this.game.state.start('menu');		}	},	onLoadComplete: function() {		this.ready = true;	}};module.exports = Preload;},{}]},{},[1]);
Link to comment
Share on other sites
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...