Twitter

Skype

Location

Interests

I am looking to develop a 2D game using Phaser and want to target HTML5, Android and iOS with it. I see there are wrappers that can do this like the Intel wrapper, Cordova or Phonegap but what would be the best choice performance-wise? I am getting very confused by all the choices. What are your experiences using any of those wrappers?
Is it also possible to use native OS functions? Things I would love to have are:
"More apps/games" button which launches the app store.
iOS Game Center and Android Google Play Services for highscores and achievements
Mopub or Admob for launching interstitial ads/videos between levels.
Are those functions available when using a wrapper and do they work well or would it be too buggy? On top of that, will device specific problems like screen-size cost a lot of time to solve or are there already approaches that can handle that efficiently?

Hi everyone,
I'm making a platform game for mobile(crosswalk, cordova).
Everything works great on my computer, but when I import my game on a smartphone and I move my player to scroll my map, it's really jerky... :/
I have like 3-4 parallax in the background who works really good with any movement of my player, but my principal tilemap with collision seems to be the problem here.
I tried to resize everything, even with 32x32px tiles and 512px height (16 tiles of height), it's jerky again.
Any ideas ?

I've been working on a naive multiplayer CTF game with a p2.js simulation on the client and server.
- Live demo: http://p2-space-arena.herokuapp.com/ (may take 10 seconds for the server to boot)
It's created from this level data where each "X" is a 32x32 p2.Body that contains a p2.Box shape:
.............XXXXXXXXX.............
........XXXXX.........XXXXX........
.......X....X.........X....X.......
......X.....X...XXX...X.....X......
.....X...........X...........X.....
.....X.......................X.....
.....X....X......X......X....X.....
.....X....XXX....X....XXX....X.....
.....X....X.............X....X.....
......X.......XX...XX.......X......
......X.........X.X.........X......
.......X.........X.........X.......
..XXXXXXXX.......X.......XXXXXXXX..
.X>>>>>>>>.......X.......<<<<<<<<X.
X>..............X.X..............<X
X>.............X...X.............<X
X>.....X.....XXX...XXX.....X.....<X
X>.....XXXXXX...X.X...XXXXXX.....<X
X>.....X.........X.........X.....<X
X>.....X.........X.........X.....<X
.X.........X..r..X..b..X.........X.
..X..............X..............X..
...X.......X.....X.....X.......X...
....XXXXXXXXX...XXX...XXXXXXXXX....
.............XXX...XXX.............
It works and performs well enough, so I pushed my naive implementation farther by doubling the resolution of the map (16x16 tiles this time) and supporting sloped tiles.
Here's the map.txt data for this iteration: https://gist.github.com/danneu/81cf7c0d22e1f02ab00e4baacf8bcc98
However, the performance is atrocious. That's ~512 p2.Body's each with its own p2.Box or p2.Polygon (slopes).
The profiler says that most of my CPU time is spent in p2's default broadphase's .getCollisionPairs(). Even though the broadphase only produces 4-10 pairs, it's just too many bodies to sift through every frame.
The obvious approach from here is to merge adjacent tiles into single p2.Body entities. For example, instead of having a row of twenty 16x16 p2.Bodies, I could have a single 320x16 p2.Body. This would drastically reduce the amount of work the broadphase has to do.
But to what end do I try to reduce the number of p2.Bodies in the world? To follow this to the end of the spectrum, I could encode the level with a few p2.Polygons, but they'd be large and complex. Is there a rule of thumb?

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.

Hi so, I'm trying to make a FlappyBird game with Day/Night Cycle so to do this I have 2 Background images set up on my game; one morning and another one for evening.
I understand that I can just use loadTexture on this.background, but I want to Tween it for a better effect (hence the 2 background images).
The animation that I wanted was to Tween this.nextBackground's opacity from 0 to 1.
In my create function I have the following:
this.game.physics.startSystem(Phaser.Physics.ARCADE);
this.background = this.game.add.sprite(0, 0, 'morning');
this.nextBackground = this.game.add.sprite(0, 0, 'evening');
If it helps, I have a pipeGenerator timer that generates the pipes.
this.pipeGenerator = this.game.time.events.loop(Phaser.Timer.SECOND * 1.25, this.generatePipes, this);
and I'm planning to implement a dayNightCycler timer that changes from morning to night and vice versa by tweening.
But as is, I'm already having poor performance while just adding the nextBackground.
I noticed that whenever I create this.nextBackground, I am having poor performance issues, anyway I can make this work? Sorry was new to Phaser.

I'm using WebGL to render N triangles in 2D.
The triangles' geometry and colors are random, computed once and placed in buffers at start up. My shaders are super simple.
Then I render them by one call to drawArrays, and animate via requestAnimationFrame. The FPS drops rapidly as N grows (both on my PC and my MacPro).
When N = 10k, it's painfully slow.
All over the web I see smooth demos with very large numbers of triangles.
What I'm doing is very simple:
https://jsfiddle.net/CaptainHarlock/mphd96L5/
You can vary the number of triangles and see performance go down.
I don't get it. Isn't WebGL expected to excel at this type of things? What am I doing wrong?

What are some general performance tips that you would have for newcomers to Pixi? Also what should we really take care of if we want to avoid memory leaks, performance issues, etc. I currently destroy all graphics objects, sprites and textures that I use. I also take care of the stage and the renderer. Also I store references to dynamically created objects in arrays and then clear them afterwards when I need to. However I still see small memory leaks here and there. I use chrome dev tools to identify the leaks..
Also, consider this scenario. I have two pages, and on both of them I have a Pixi canvas with some stuff being drawn. When switching from page 1 to page 2, the whole page 2 throttles, until the Pixi canvas is loaded, although this is just a guess for now. However when I remove the Pixi canvas the page loads, fast, normal.. I am just asking this vaguely, since I haven't looked at what might be causing the issue yet, but I want to have some more input before I start. I do draw around 100+ different graphics elements on the second page.. Are there any ways to improve this loading, rendering time of the second canvas? Also I am running this on a 3rd party device, and that's why I need to be very conservative with memory and performance. When running on PC, I do not see performance issues, however the device is also really powerful, so I would not say this is a hardware limitation.

Hi, just noticed my game has suddenly dropped fps quite dramatically (only on Chrome).
I found when I reduce my texture atlas from 4096 x 4096 to 4096 x 2048 my frame rate is back up to 60.
I'm a bit confused by this. My framerate only drops when I transition to a new screen which draws a few new sprites, but these sprites are still from the same texture atlas, so there is no additional memory used.
The rapid drop of frame rate that continues to fall seems to be a symptom of texture thrashing, but my understanding of texture trashing is that it's caused by running out of texture memory and continually swapping textures on the gpu to draw the image. But in my case I'm not adding additional textures to trigger the frame rate decrease...
I'm using the CANVAS renderer.
Anyone have ideas?
Cheers,

Hi there, Im having some issues with performance when i render thousands of sprites. Currently having issues with loading around 20k sprites, but eventually plan on having more (maybe even up to 60k) around the map. I did some research and found this is a somewhat common issue but cannot get a clear and concise answer. I ran some chrome profiles on my game to see whats holding me back: here are my results. To be honest, I don't really understand what that information means other than 20k sprites is too much. (I have a fairly decent computer and its slightly choppy at 20k trees, at say 60k its very choppy) Also, when I say choppy, I mean like it looks choppy, my movement is still fine (to make the point that its not like the game loop thats lagging).
Essentially I have 20k trees being placed around a very large map that's being rendered with a tileSprite. However, it's not the map size that is holding me back since the performance I get is very dependent on the number of tree sprites. The tree's have no physics enabled on them and are just rendered and placed in a group then never touched again. Here is a snippet from my create function and how i render the trees.
for(var i = 0; i<20000; i++){
treeX = Math.round(Math.random()*(mapSize-1));
treeY = Math.round(Math.random()*(mapSize-1));
temp = position(treeX, treeY);
createTree = game.add.sprite(temp[0],temp[1], 'tree2');
treeGroup.add(createTree);
}
The position function I called in the loop just gets the pixel location of the tree's based on a tile, as shown below:
var position = function(col, row){
column = (33*col+1);
rowFin = (33*row+1);
return [column, rowFin];
};
Any ideas as to how i can beef up my performance? Any way I could not render the tree's until they are in view? (Kill then revive when seen?) Any tips are greatly appreciated!
Side note (if its useful), right now all I have is the tileSprite background, 20k trees, and movable player sprite.
Edit: Would creating a chunk system be a good idea? If so anyone have any idea where to start with the best way to make one?

Hey guys,
long time no see, eh? How are you all doing?
I started digging up some old game ideas and playing around. I ended up with one where I create a field of hexagons as the game world. Unfortunately I am having performance problems when creating bigger maps and zooming out to show the whole map. Here is an example of what I am trying to do:
http://www.babylonjs-playground.com/#RFIRC#0
Any idea how I could improve performance for this kind of game world?

Hi,
Players in my game leave trail. When update is called I'll make the trail image based on the current player position and add it to the trail group:
let trailImg = state.make.image(playerX, playerY, 'trail');
this.trailGroup.add(trailImg);
The game world might be big and after a while this group holds few thousand trail images. This leads to performance problems. The methods which take really long to execute are Phaser.Group.preUpdate, PIXI.WebGLSpriteBatch.render and PIXI.DisplayObjectContainer.updateTransform.
How should I handle this?

That's mah fork: https://github.com/gameofbombs/
This branch is also known as dev-experimental-geometry and pixi v4.1. It is the bleeding edge, and only about 5% of it was discussed as PRs in main pixi.js (like https://github.com/pixijs/pixi.js/pull/2465 )
Demos: http://gameofbombs.github.io/pixi-bin/
Best demo is outdated, though it will be converted to pixiv4 soon: http://monsterisland.chimeracompanygames.com/lux-demo/index.html (use mouse and QE)
Changes:
1. 3d Transforms. We have them now.
2. Static transforms: enabled by default, new Transform2d(true), dont have to recalculate whats already calculated, increases performance for most-static 2d and 3d scenes.
3. Camera: lookPosition, lookRotation and lookEuler - camera looks at specific point
4. Camera: zIndex, zOrder - YES, THE PAIN IS GONE! Regardless of how will you group your sprite into containers, they will be sorted for rendering and interaction
5. Proxies - experimental, special for gameofbombs.com, I dont guarantee their work in other projects yet.
Contributions:
1. This fork will have fast iterations, the only relatively stable thing will be API that specified in demos
2. Binaries are stored in pixi-bin and not pixi.js sources3. PR's should be made into 'master' and not some 'dev' nonsence
Current projects:
1. gameofbombs.com conversion to pixi
2. Poker game with 3d cards.
UPD. Babylon goes 2D according to this:
Well, now PIXI strikes back!

Hi, so first thing i'm new to this, 3d modelisation and babylon.js so i'm kinda of a huge noob, but anyway.
I started to work on this demo http://www.babylonjs-playground.com/#8EUPP#1. It seems like i get very bad performance from firefox compared to chrome. Do you have an idea why ?
you can try the demo on the playground or i hosted the demo on my website : www.fleurantmaxime.com
Thx !

Hello dear Forum,
i have a Question regarding dynamic Asset Loading in Babylon.js. I was not able to find Information about this topic in the Documentation or the Forum (don´t slay me if I missed something ).
So basically what I want to be able to achieve is:
1. User clicks a HTML-Button (for Example "Load Model") // Button should be outside of the Canvas if possible
2. Button calls Function with modelName as Parameter
3. Function checks if Model with modelName exists in some Kind of Library
4. If so, the Model gets Downloaded
5. Model gets rendered
So, as far as i was able to find out, it is totally possible to pass Information from a HTML-Element to the Babylon Engine. But is it possible to download something at runtime (CORS is considered) that has never before been used inside the Project. The reason for this is that I want the Game to handle almost the whole "What shall i display?, Where shall i display it?, Which Components does the Object have" - Functionality dynamically without defining too much of it inside the Project.
I hope I was able to give you an insight into what I want to achieve.
Regards,
Markus

Just want to put out our experience. (since there was a post with a different experience).
We are developing a browser multiplayer game. and in v3 it was barely playable on regular laptops and office-pc's without "resonable" graphics cards.
V4 actually doubled the performance of those lower-end devices, so when they would be running 30-40 fps, they are now pulling 80 fps which is more than the requred 60 to get the soft feel. I read that you improved the performance on mobile devices, and i wished it would have the same effect on lower end pc's. and it did!
This is really important to us, because our game is probertly going to be played mostly from school computers, laptops etc. so thank you!.
But, there's still alot of bugs, and I will keep reporting them on github, when i find simpler ways to reproduce them.

In short, I've just recently updated the html5 app I'm working on to use the newest version of Pixi (v4) recently. It looked nice & all and it basically didn't break anything.
(Well, except for a ColorMatrixFilter because v4 for some reason has a padding attribute set as default to 4.)
Anyway, I was really happy with the new promises such as WebGL renderer mobile optimizations and I quickly compiled my project (using Cocoon.io) to an Android apk to test.
Well saying that it ran slower is an understatement. Gameplay parts where the previous Pixi v3 provided an estimated 50-60 fps, this struggled to get 20-30.
I made some other changes to the code so I wasn't sure if it was the update's fault at first, but I quickly reverted to v3 and regained the old and much better performance.
Some info:
- I'm probably not using any SpriteBatches
- I'm initializing the renderer as this: renderer = new PIXI.WebGLRenderer(window.innerWidth, window.innerHeight);
- I'm drawing a lot of Sprites with different sizes at the same time, maybe 100 at max
- A lot of the above Sprites are visibility/alpha toggled many times during gameplay, but I do not store them outside the render area
- I'm using manual scaling on a lot of Sprites individually, I just rarely scale a container
Well, that's all I could think of right now. The strange thing is that v4 actually seemed to run faster on desktop (Firefox).

How could BabylonJs possibly be faster ? or Why is BabylonJs slower than what it could be ? What needs to be done. Any area we can help to make this engine faster ? Give us concrete directions so that we can help.
I know BabelJs itself is not slow. It does nothing by itself. However, I would like also to know: what are the best practices to take full advantage of BabylonJs speed.
This demo is really slow :
http://flightarcade.com/missions/tin/play
Why is it so slow, and what can we learn from it ?

Hi guys
I'm working on a game developed with phaser.JS (and phonegap), and i'm facing a surprising problem. FPS is pretty good (it's between 55 and 60) but the avatar moves are not smooth. So i guess it's caused by the use of phaser feature.
You can see the problem on the video here : https://www.youtube.com/watch?v=JfYBcvl4b78
Have you ever met this problem ? Do you have some idea to improve that ?
Thanks for your time !
Dorian

Hi everyone !
Remember "Macromedia Flash" ? It is a dead technology that used to allow total freedom at the expense of HUGE computation. It has been abandoned... As much as I loved the possibilities at the time, fact is, running a somewhat simple game within your browser would require all the power and memory your computer could give, no matter how powerful, and in my humble opinion, I'm happy it has been discontinued, I HATED the way my -powerful then- MacbookPro would start to spin its fans at full speed, full noise, full heat.
Now I'm a beginner in trying to master BABYLON.JS, and in my first experiments, I notice the fans of my brand new super-spec MacbookPro behave sorta the same way, soon after loading my scene, the fans start to turn fast and loud, Babylon.js pushes the computer to high temperature. And I don't want my beloved Babylon.js framework to end up like Flash !!! lol
Checking demos on the official babylon.js site, I notice some of them render well without making the fans turn on (ex : http://www.babylonjs.com/Demos/Sponza/) but others demand too much (ex :http://www.babylonjs.com/Demos/Train/).
###So, trying to make it short, what is the good way to go in order to keep the CPU usage low ? (like in the Sponza demo)###
-Textures: -What is the recommended size ?
-How much CPU does it take to use bump, specular, etc... on top of the Diffuse one ?
-Lights: -Is there dynamic lighting on an optimized scene ? Of which kind ? how many ? How to bake static lighting ?
-Programming: -Is there a way to writing javascript code that would be better than another ?
-example: Is calling "scene.getMeshByName("mesh.name")" more demanding than just "mesh" ?
-how does the "scene.registerBeforeRender()"should be handled ?
-example: Is it a problem if calling "for (var i=0;i<scene.meshes.length;i++)" or "for (i=0;i<scene.textures.length;i++)" multiple times rather than just one time ?
-Is there a way to handle/optimize memory ?
Well this is just a few questions this topic can bring up ... I hope people participate with questions and answers, we can decipher the magic behind perfect programming together !

When I open this phaser example on Chrome, Windows 10 on a Surface Pro 3 (i7, 8GB RAM), my CPU usage jumps from about 2% to about 25% and stays there. This leads me to believe that running phaser will at a minimum use 20-25% of my CPU, and that's before I add anything like animations and sounds, physics, and anything in an update() method.
Running this PIXI example shows CPU pegged at about 11%. I understand that Phaser is providing much more than just rendering, but I can't help think that when it's using at a minimum double the CPU of the renderer when idle that something is off.
Is this what everyone else is finding? Is this just the cost of using Phaser? There are other threads that have optimization tips regarding limiting the amount of tweens and sprite reuse and physics etc, but are there any tips folks can share for optimizing when none of extra features are being used such as in the phaser example above?