bulboka Posted November 30, 2015 Share Posted November 30, 2015 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 More sharing options...
jmp909 Posted November 30, 2015 Share Posted November 30, 2015 did you remove your FPS meter from the Android version? if not, try removing it and using bitmap text to display your fpshttp://phaser.io/sandbox/BGpUHRyb/play Link to comment Share on other sites More sharing options...
bulboka Posted November 30, 2015 Author Share Posted November 30, 2015 Thanks for advice. I've tried it but the situation didn't change. To be honest I was sure it wouldn't: the performance issues began before I started using any fps display. Link to comment Share on other sites More sharing options...
forkgame Posted November 30, 2015 Share Posted November 30, 2015 maybe you can try lowering the resolution for the game..I'm not really sure, though.. Link to comment Share on other sites More sharing options...
shohan4556 Posted November 30, 2015 Share Posted November 30, 2015 maybe you can try lowering the resolution for the game..I'm not really sure, though.. decreasing game resolution make any scene ? Link to comment Share on other sites More sharing options...
bulboka Posted November 30, 2015 Author Share Posted November 30, 2015 I tried to make game width and height smaller — it didn't help. And besides, other apps with similar resolution run pretty well. Link to comment Share on other sites More sharing options...
Recommended Posts