If you played my latest HTML gameJust Jump on your mobile device before January 5, you surely noticed the game was really really slow.

As a Phaser enthusiast, I was a little concerned about this because I like to code with Phaser and I was wondering why a simple game like Just Jump was lagging that bad.

I tried to remove as much code as possible from update function, as it’s executed at each frame, but nothing changed. Tried to remove ARCADE physics but nothing changed, the framerate was ridiculously slow.

Until…

if you read theoriginal blog post about the game, I wrote:

The game has only one graphic asset, a small 64 x 64 pixels PNG white square. Everything, from background walls to particles, from the player to size-changing obstacles, has been made starting from that single image

Having just one graphic asset, I made large use of tileSprites, and this practice caused the problem.

So I changed all tileSprites to sprites, by modifying the code from:

var spike = game.add.tileSprite((floor % 2 == 0) ? gameOptions.floorWidth + gameOptions.floorX : gameOptions.floorX, gameOptions.floorY[floor], game.rnd.integerInRange(1, 16) * 2, 40, "tile");

to

var spike = game.add.sprite((floor % 2 == 0) ? gameOptions.floorWidth + gameOptions.floorX : gameOptions.floorX, gameOptions.floorY[floor], "tile"); spike.width = game.rnd.integerInRange(1, 16) * 2; spike.height = 40;

Don’t mind the arguments of each call, just watch how I turned a tileSprite into a sprite.

And guess what? The game now runs smoothly, as you can see by playing the game on your mobile phone .

I also made two videos to show you the difference between the two games being played on my iPad:

Using tileSprites

Using sprites adjusting width and height


Optimize your Phaser HTML5 games on mobile devices by using more sprites and les ...
Optimize your Phaser HTML5 games on mobile devices by using more sprites and les ...

Ok, I suck at this game and probably the whole game sucks too, but at the moment I want you to focus on the dramatic performance increase just by changing tileSprites with resized sprites.

Bear this in mind when designing your games for mobile devices.

From null to full html5 cross platform game

I will take you by hand from the bare bones of javascript programming through the creation of a full cross platform HTML5 game, with detailed explainations and source code.


Optimize your Phaser HTML5 games on mobile devices by using more sprites and les ...

If you don't know where to start, then From null to full HTML5 cross platform game is the book for you.

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: HTMLHTML5JavaScriptJavaiPad
分页:12
转载请注明
本文标题:Optimize your Phaser HTML5 games on mobile devices by using more sprites and les ...
本站链接:http://www.codesec.net/view/520180.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(49)