Large Renderer == Low FPS

[Alex Tappin]

Hi Everyone!

So I have been working on a game for a little bit now, and have a few questions about performance "issues".

I have a pretty "graphic intensive" game that I have been working on with my uncle (he is the artist, not me!). Now, many of the images are 4k in quality, but I plan to downsize a majority of them in the future (this will increase the performance as I have tried a small sample). The issue I have ran into is that if the game has a large renderer, the fps will decrease. Example... if the Width and Height are 960X540 respectably, the FPS is usually ~55-60. If the Width and Height are 1920x1080, the FPS is ~30.

I have attached 2 images of the game with chromes fps counter on them for a reference. Besides scaling down images, are there any other tips and tricks I can implement to speed up performance? Ill post this and respond accordingly (if you need any code samples or how I am implementing it, I will provide it!).
I would say that I have taken pretty good steps in trying to be efficient, and I am quite surprised by the performance it is giving me. On my fast computer, I am getting 55-60fps regardless of the renderer size, it is mainly a few other computers/tablets I have tested on. there are currently around 17 layers of for the parallax effect. Like I said, I am pretty sure that the performance will dramatically increase once I downsize the images, but I am still concerned about why a larger renderer would cut performance that much...

Thank you! Images attached.

-Alex

[ivan.popelyshev]

Scaling down the images wont help. Mipmapping will do just that. I believe that I need access to your project to profile it. May be we can make better multitexture shader special for that project!

UPD. Actually, multi-texture super-effective shader for big parallax maps is a good idea

[Alex Tappin]

1 hour ago, ivan.popelyshev said:

Scaling down the images wont help. Mipmapping will do just that. I believe that I need access to your project to profile it. May be we can make better multitexture shader special for that project!

Scaling them wouldn't increase the performance? I am planning on scaling down the images anyways since it takes up a ridiculous amount of space for mobile users haha

I have not looked into using multitexture as of yet! Maybe this will be something I should look into. I am still on PIXI version 3.0.7 as well.

I can post my github repo? The project itself has a copyright as well. I am planning on making it private soon (since we are planning to release in a little bit...). I hope my code isnt too ugly;)

(Deleted)
in the JS file, I have a pretty organized setup... In the Scenes I have my title screen, scroller and loading.. I also have my unit sprites all grouped together, as well as the parallax stuff. I have some "Global" functions and helpers that are used to help control the gameflow. I have been working pretty fast and havent had much time to cleanup a lot of the code, but I plan to spend a bunch of time getting rid of all my property files and having a generic property file. Idk there is just so much stuff that needs to be done, and so little time haha

Thanks! Let me know what you think. Let me know if I am doing anything reaaaaaaaallly bad too. This is the first game I have ever made, and I have rewrote the code base a few times to get it how I feel is right.

[ivan.popelyshev]

Just now, Alex Tappin said:

Scaling them wouldn't increase the performance? I am planning on scaling down the images anyways since it takes up a ridiculous amount of space for mobile users haha

I have not looked into using multitexture as of yet! Maybe this will be something I should look into. I am still on PIXI version 3.0.7 as well.

I can post my github repo? The project itself has a copyright as well. I am planning on making it private soon (since we are planning to release in a little bit...). I hope my code isnt too ugly;)

https://github.com/alextappin/gumballseeds
in the JS file, I have a pretty organized setup... In the Scenes I have my title screen, scroller and loading.. I also have my unit sprites all grouped together, as well as the parallax stuff. I have some "Global" functions and helpers that are used to help control the gameflow. I have been working pretty fast and havent had much time to cleanup a lot of the code, but I plan to spend a bunch of time getting rid of all my property files and having a generic property file. Idk there is just so much stuff that needs to be done, and so little time haha

Thanks! Let me know what you think. Let me know if I am doing anything reaaaaaaaallly bad too. This is the first game I have ever made, and I have rewrote the code base a few times to get it how I feel is right.

Multitexture in pixiv4 will help only if you have many objects with different textures. Right now your parallax consists of large objects and not big number of few, right?

Anyway try pixiv4 first. Im gonna to look at your codebase for some minutes.

[ivan.popelyshev]

Remove console.log, its eating 30% of CPU time you spend. At least on my comp. Ground.js:37

[Alex Tappin]

4 minutes ago, ivan.popelyshev said:

Multitexture in pixiv4 will help only if you have many objects with different textures. Right now your parallax consists of large objects and not big number of few, right?

Anyway try pixiv4 first. Im gonna to look at your codebase for some minutes.

I have a lot of large images. For the parallax, there are around 17 large images. This is not a crazy amount of textures, but any performance I can gain would be good! Take a look and let me know what you think/find

[Alex Tappin]

3 minutes ago, ivan.popelyshev said:

Remove console.log, its eating 30% of CPU time you spend. At least on my comp. Ground.js:37

Are you on the master branch? There shouldn't be any console.logs. 

[ivan.popelyshev]

Dont call Text.updateText very often! It seems that it spend too much time while synchronizing style and everything else with your properties

[ivan.popelyshev]

2 minutes ago, Alex Tappin said:

Are you on the master branch? There shouldn't be any console.logs. 

There's one on gh-pages i think

[Alex Tappin]

2 minutes ago, ivan.popelyshev said:

There's one on gh-pages i think

Ohhh that one is maybe out of date... Anyways, that is fine to use.

Would you say I should have different update loops? For example, I don't need to update the background images EVERY update cycle... Maybe every 10 updates or so? Would setting something up like this be beneficial? I think that would maybe work...

Update: I feel that this will be the thing that will make it perform way better.

[ivan.popelyshev]

1 minute ago, Alex Tappin said:

Ohhh that one is maybe out of date... Anyways, that is fine to use.

Would you say I should have different update loops? For example, I don't need to update the background images EVERY update cycle... Maybe every 10 updates or so? Would setting something up like this be beneficial? I think that would maybe work...

Update: I feel that this will be the thing that will make it perform way better.

You need to move containers of parallax every frame, and all sprites too. As for other stuff, yes, you can call it every 10th frame or so.

Btw, I recommend to use spine (esotericsoftware.com) to animate main character and monsters, and may be gumballs on front. We have plugin for that , pixi-spine

[Alex Tappin]

1 minute ago, ivan.popelyshev said:

You need to move containers of parallax every frame, and all sprites too. As for other stuff, yes, you can call it every 10th frame or so.

Btw, I recommend to use spine (esotericsoftware.com) to animate main character and monsters, and may be gumballs on front. We have plugin for that , pixi-spine

Oh that sounds awesome. I was definitely having trouble doing that animations (took the longest to do). I will take a look at it and see if I can implement it!
Is there a reason we cant move the containers of the parallax every x frames instead of every frame?

[ivan.popelyshev]

3 minutes ago, Alex Tappin said:

Oh that sounds awesome. I was definitely having trouble doing that animations (took the longest to do). I will take a look at it and see if I can implement it!
Is there a reason we cant move the containers of the parallax every x frames instead of every frame?

Yes, we want 60FPS!!! That wont affect performance, moving stuff is cheap, unless you have like 100.000 objects there. Just remove everything else except animation from render loop, please  That way we'll be able to say "YES, that's pixels shader issue"

[ivan.popelyshev]

Why the heck are you spawning HelperFunctions every frame? You know that HelperFunction() creates about 10 new functions each time you call it, right? That's not good. Garbage Collector wont like that. Dont spawn Functions in render loop. Its better to not spawn thousand of new objects each frame

[Alex Tappin]

1 minute ago, ivan.popelyshev said:

Yes, we want 60FPS!!! That wont affect performance, moving stuff is cheap, unless you have like 100.000 objects there? Just remove everything else except animation from render loop, please  That way we'll be able to say "YES, that's pixels shader issue"

Okay! I will probably get that implemented sometime this week. I still have some stuff to implement (presenting this as my senior project tomorrow). I want to spend a TON of time getting it perfect!

[Alex Tappin]

2 minutes ago, ivan.popelyshev said:

Why the heck are you spawning HelperFunctions every frame? You know that HelperFunction() creates about 10 new functions each time you call it, right? That's not good. Garbage Colector wont like that.

Hmmmm. I should DEFINITELY change that. It is recreating every function everytime it is called (which is more than 60 times a second)... I will re implement that to be spawned ONCE like the other Globals. Thank you so much for pointing that out.

[Alex Tappin]

26 minutes ago, ivan.popelyshev said:

Btw, I recommend to use spine (esotericsoftware.com) to animate main character and monsters, and may be gumballs on front. We have plugin for that , pixi-spine

About spine... Is this free/opensource software? I am trying to refrain from using any type of paid software as there may be legal issues (My uncle who owns the copyright of this project is really iffy about using anything). If it isnt, are there any alternatives? My animation definitely seems to be the hardest to implement, there must be a better way.

[ivan.popelyshev]

@Alex Tappin Try profile your app. It will show something like 80% idle, 7200ms, that will mean that you did ran it 7200/0.8 milliseconds, and your app took 20% of them. Some of that was taken by "program", which is DOM things. Everything else is javascript. Then go down and see what functions are slow, fix them. The more % has idle, the better.

[ivan.popelyshev]

3 minutes ago, Alex Tappin said:

About spine... Is this free/opensource software? I am trying to refrain from using any type of paid software as there may be legal issues (My uncle who owns the copyright of this project is really iffy about using anything). If it isnt, are there any alternatives? My animation definitely seems to be the hardest to implement, there must be a better way.

Its paid, but everyone is using it. Runtimes are free and open-source (pixi-spine runtime code is mine), you can use whatever you have created for any of your apps, or give it to friends.

[Alex Tappin]

28 minutes ago, ivan.popelyshev said:

Its paid, but everyone is using it. Runtimes are free and open-source (pixi-spine runtime code is mine), you can use whatever you have created for any of your apps, or give it to friends.

Spine looks really awesome and I would love to use it. I will download the trial and see about using it. I am still learning about how it is used. Can I create the animations without spine (maybe another free open source project) and then use your pixi-spine to implement these? Sorry if this question doesnt make sense as I am not too familiar with how spine works. I am basically comparing spine to how texture-packer works... You can pay to use texture packer, or you can type out the files yourself (or use an open source tool like leshylabs...).

And I have just profiled my game and I see a lot of information. I will definitely take this and work on speeding up the game! Thanks for the tips!

UPDATE: After looking online, I came across something called DragonBones. It is apparently a free open source tool that is supposedly like spine. Any info on dragonbones?

[ivan.popelyshev]

1 hour ago, Alex Tappin said:

Spine looks really awesome and I would love to use it. I will download the trial and see about using it. I am still learning about how it is used. Can I create the animations without spine (maybe another free open source project) and then use your pixi-spine to implement these? Sorry if this question doesnt make sense as I am not too familiar with how spine works. I am basically comparing spine to how texture-packer works... You can pay to use texture packer, or you can type out the files yourself (or use an open source tool like leshylabs...).

And I have just profiled my game and I see a lot of information. I will definitely take this and work on speeding up the game! Thanks for the tips!

UPDATE: After looking online, I came across something called DragonBones. It is apparently a free open source tool that is supposedly like spine. Any info on dragonbones?

I dont know if DragonBones does export in spine format, I dont have dragonBones plugin, you'll have to make one out of DragonBones js runtime. DragonBones lacks best features of spine: FFD transforms and Inverse Kinematics. However these features are enabled only in full version of spine ~280$

[ecv]

Just chimed in to say that I love the looks, and performance issues are always an interesting thing to keep an eye on. Very interesting thread. Thanks.

Edit: @Alex Tappin I hope you'll release a free demo at the very least here?

[Alex Tappin]

11 minutes ago, ecv said:

Just chimed in to say that I love the looks, and performance issues are always an interesting thing to keep an eye on. Very interesting thread. Thanks.

Edit: @Alex Tappin I hope you'll release a free demo at the very least here?

The game will be free on the store! It may be a while since we are wanting to implement many more features haha but yes, it will definitely be free and ill let everyone know when it is up!

[Alex Tappin]

 ll revive this thread as I have made some updates.

First, you can demo the game Here and inspect the chrome console and such.

You can also download the  Apk Here to test out. On mobile devices I have found it works pretty good (especially on higher end where it works perfect) but on lower end devices, it is pretty slow. 

I have attributed this slowness to the amount of tiling Sprite and sprites for the parallax in the game. But I may be completely wrong.

I have read somewhere about making the image sizes powers of 2? Would doing this see a good performance increase?

I have also read about multitextures as well. Could this be used for a nice increase? I have about 15 layers of parallax all with different textures.

In the end, I could lose some of the layers in the parallax if needed... but would like to find some more opinions in the meantime.

[ivan.popelyshev]

Power of two is about better scaling, not performance. I think your problem is that fragment (pixel) shader is called too many times, its not about multitextures, its about area you are trying to fill with textures. I dont know what to do about that. I have lower-end device, i'll try it.