$250 Bounty

[demiculus]

Hello,

I'm creator of colonist.io

The game is heating up the computer in macs and lagging. I've looked everywhere (at the best of my skills) and couldn't find the bottlenecks which causing this. 

Here is some of our players complaining to give you a better idea about the problem: https://colonist.featureupvote.com/suggestions/55589/cpugpu-usage-optimisation

Once you play for 3 minutes you'll hear your mac fan. If you're using windows you should see the animation lagging. This is our testing server: https://hexs.io/ you can see the code in non minimized version. I've done a few performance improvements so 

Once you figure out the bottleneck which is causing all the lag you can email us the solution on [email protected] or post here.

I will post here who has received the bounty once someone solves the issue.

Let me know if there is anything else.

Best of luck

 

[rachel]

Hi,

I can surely help you in solving the issue.

Please share your response to rachel at cisinlabs dot com

[Milton]

I always have this with WebGL. Do you need it? Just use CANVAS, smooth...

[demiculus]

15 hours ago, Milton said:

I always have this with WebGL. Do you need it? Just use CANVAS, smooth...

I'm using pixi v5, not sure why but everything works very slow when I just use canvas.. 

[Milton]

I think you need to figure that out, because your game seems suited for Canvas. No heavy graphics, no rotation, turn-based.
You are using 'new PIXI.Application({forceCanvas: true, ...)' right? The API says: "prevents selection of WebGL renderer, even if such is present, this option only is available when using pixi.js-legacy or @pixi/canvas-renderer modules, otherwise it is ignored."

[demiculus]

3 hours ago, Milton said:

I think you need to figure that out, because your game seems suited for Canvas. No heavy graphics, no rotation, turn-based.
You are using 'new PIXI.Application({forceCanvas: true, ...)' right? The API says: "prevents selection of WebGL renderer, even if such is present, this option only is available when using pixi.js-legacy or @pixi/canvas-renderer modules, otherwise it is ignored."

I'm using pixi.js-legacy and when I do forceCanvas: true everything slows down. I know the game is simple and shouldn't need webGL but pixi is built for that I guess 

[Milton]

I've been using Pixi Canvas (with Phaser 1 and 2) for ages, and it is fast enough for most anything 2D.
Your game should not need WebGL. These GPU problems are mostly driver related, I've seen them happen even with an empty loop, there's nothing to fix.

[demiculus]

@Milton when I use webGL on my computer it works at 50+ FPS, when I do `forceCanvas: true` it works at 8FPS why is it so slow? 

Everything starts lagging on canvas while using pixi.js-legacy 

[Milton]

Hard to say. Maybe you could PM me the graphics stuff, so I can have a look. (The hexs.io files are not really manageable)

[Milton]

It could be that you're swapping textures like crazy. That would slow things down alright.
If you could use a png spritesheet instead of separate svg's, I think it would make quite a difference.
Or maybe there's another way to do it with svg, I've never used them.

[alex_h]

1 hour ago, Milton said:

If you could use a png spritesheet instead of separate svg's, I think it would make quite a difference.
Or maybe there's another way to do it with svg, I've never used them.

I agree, it is highly likely to be the use of svg format that is causing the problem. If you turned them all into pngs instead and then made atlases from them with texturepacker then the game should run perfectly fine in both canvas and webgl modes.

Kind of guessing though as I've also never used svg with pixi.js

[mansim]

I have turned on javascript performance tool, made CPU throttling 6x and i see instant huge lag on your game. Analyzing the chrome console performance results i see that most of the time it renders and renders, there is not much logic happening. You have to reduce rendering that much. Looks like you are trying to paint everything using canvas and using less images.

You also constantly redraw the whole canvas element and using just 1 canvas element. Thats the worst part actually. Your best and fastest way to fix the lag - make more canvas layers.

As i see here you can easily create 2nd canvas element layer and draw animations just in there. And 3rd layer for UI, on top of animation layer.. If you have animated UI, make it as 4th layer. 

Also, there are some shapes drawing with canvas which can be copy-pasted by reducing long game load, if you dont want to use png images.

That seems like a lot of work needed for you, to split the logic across several canvas element, but at the end result will be really good and the game will work easy on any weakest device. There is no other way. In canvas world that is usual, to use many canvas elements.

For my HTML5 browser game (armygrid) i use 15 canvas layers. 2 for global map backgrounds (grass/sand..etc and other for rocks, bushes.. on top), 1 for map animations, 1 for dynamic textes and lines, 1 for army fights background, 1 for army units animation, 1 for army editor units, 1 for cover of army editor, 1 for requirements textes, 1 for main navigation, 1 for chat, 1 for flash messages, 1 for tutorial UI, and the last one for mouse events. 

So, on top of that, i am redrawing navigation and tutorial just if something is triggered by click, or if there are some real-time animated counters/numbers, i redraw once a second. Its even not yet perfect with frontend performance, but the performance is quite good and can play using 6x CPU throttling without much problems, also on any weak mobile. To achieve that, had to study and learn a lot the chrome developer tools - performance and audit.