Low fps makes unplayable level

[morriq]

Hi,

 

i'm in mid of test on many devices. I found problem, which i'ts not easy to solve for me, because it depends on fps.

 

I want to track circle on the line from points. Correct version is here:

http://basiors.pl/phaser/normal/test.html

 

But on many devices with low fps, it looks like:

http://basiors.pl/phaser/lagged/test.html

(when circle start around, let to lose focus on window, and after that resume to game - it helps )

 

Any ideas? It's very important for me, because I cannot release game without solution .

 

I have another problems with low fps too, I'll prepare next samples in another thread soon. 

 

Thank you.

 

 

[gledex]

On mobile forget about 60fps, cap it to 30 fps and for desktop use 60 fps.

[Manifest]

Can you explain how to cap it to 30fps please, I was under the impression it was impossible to alter the frequency of the requestAnimationFrame call.

[gledex]

Yeah, this very thing got me confused for days, now this is how you do it: I dont use phaser but this is how you do it.

 

http://codetheory.in/controlling-the-frame-rate-with-requestanimationframe/

[george]

Modern browsers target 60fps as nearly every LCD runs on 60fps or more. There is a good reason for the 60fps. And most of the games run really fine with 60fps. There is absolutely no point in targeting 30fps. I can understand that it seems as an easy option to double your performance. But if your games struggles with 60fps there is no guarantee that it will magically work. It could be the physics, some expensive data structure, other expensive calculations. Most of the time not the graphics are bottleneck nowadays- as the GPU can handle it very,very well. Most of the time something else is blocking the CPU- and no fps decrease can help you then.

 

Anyway I just looked into your code. I couldn't see anything in the profiler. I downloaded your code and image and couldn't reproduce the lag version. I tried it with the edge version of phaser. Then I downloaded the official 2.0.3 release of Phaser which you're apparently using. Again, no lag. Now I downloaded the phaser file you're using instead of using the original one.

 

There it is. The lag appears. What the hell did you change in your phaser version ? Where did you download that version ? The banner at the top of the file is the same as the official release  from https://github.com/photonstorm/phaser/releases/tag/v2.0.3. But something is different. Only by switching between the two phaser files I can reproduce or fix the error.

 

Here your 'poisoned' version: http://basiors.pl/phaser/lagged/js/vendor/phaser.js

I tried a quick diff without success. So what did you do with that version ????

 

Regards George

[morriq]

Hello everyone

 

There it is. The lag appears. What the hell did you change in your phaser version ? Where did you download that version ? The banner at the top of the file is the same as the official release  from https://github.com/photonstorm/phaser/releases/tag/v2.0.3. But something is different. Only by switching between the two phaser files I can reproduce or fix the error.

 

Yes. It's broken version of phaser to simulate view on lagging devices. 18881 line. Here I added condition to execute only (frame % 25). Sorry for that I didn't point this before, wasting your time . It's similiar results like in lagging browsers. I'm trying to fix the problems on this version.

 

You have right, but many users on mobile use this one browser - I dont remember name of: http://screencast.com/t/LHbZNheHjao (nightmare!). And I run my game on this browser, and I couldn't have 30 fps. Max was 25. And it made little bugs.

 

On Motorola 4.1.2 with this browser, there is 16 fps. Unplayable

 

I cann't wrap this with cooconjs. It have to be in browser.

 

Guys, tell me please. How you'll handle with this problem?

[george]

Are you serious? That totally wasted my time! You could have done this in the update loop or everywhere else but not in the phaser file where nobody expect it. Really..

The icon is the Stock Browser from Android. In early versions not the best browser as far as I know.

 

The first thing I would do: Find ways to optimize your graphics so the GPU is happy. 

Do you use the power of spritesheets? If yes check their dimensions. If they are larger than 512x512 you could try to split them in multiple spritesheets. And please don't put everything in a spritesheet- a large background is better loaded for itself.

 

Do you use Canvas or WebGL ? WebGL has a bad performance on most mobiles- if available at all. Try to force Canvas. And no panic, I'm not one of the guys who tell you to use a app wrapper. I hate those backseat drivers.

 

Sorry I can't give you more help in this topic. It's quite extensive so I hope you win some FPS somewhere.

 

Regards George

[morriq]

Ok, I solved probably all problems in my game with fps.

 

About this problem:

I didn't work on performance. Look at lagged example now: http://basiors.pl/phaser/lagged/test.html

 

I noticed that phaser want move circle on distance equal velocity * delta framesTime. And in lagged version this distance + currentPosition is bigger than destiniy position. So I have to check new position before set on canvas this position.

 

I have to change circle.body.preUpdate

I add extra conditions(solution without including anchor):

 

        if(            (this.velocity.x > 0 && (this.position.x + this.newVelocity.x) > points[this.sprite.currIndex].x) ||                (this.velocity.x < 0 && (this.position.x + this.newVelocity.x) < points[this.sprite.currIndex].x) ){          this.position.x = points[this.sprite.currIndex].x;        }        else{          this.position.x += this.newVelocity.x;        }        if(            (this.velocity.y > 0 && (this.position.y + this.newVelocity.y) > points[this.sprite.currIndex].y) ||                (this.velocity.y < 0 && (this.position.y + this.newVelocity.y) < points[this.sprite.currIndex].y) ){          this.position.y = points[this.sprite.currIndex].y;        }        else{          this.position.y += this.newVelocity.y;        }

I think it will be helpfull for everyone.

[rich]

What did you change and where? (some line numbers and files would be helpful

[morriq]

Changes are in arcade/body/preUpdate.

http://basiors.pl/phaser/lagged/test.js lines:75 - 96.

 

Here, moving without these lines: http://basiors.pl/phaser/lagged/testBug.html

 

I lagged phaser. Only each 25th frame is executing.

I think it could be usefull.