hidden GUI objects slow game render?

[can2nac]

How GUI objects slow game render? 

Hi,

i have pretty much GUI panels in RPG game (nav bar, loot panel, inventory, dialogs, quests, stats etc). All of the are a background and a set me.GUI_Object + some labels (up to a 50 objects per a single panel). All together they dropped the refresh rate from 50 down to 40 frames. The thing is that they are not in Viewport i.e. position is  -100000;0 , but game still thinks that they are in Viewport (obj.inViewport=true;) despite thier actual position. Floating is set to true for them by me. According to line 13162 in melon.js they will always be inViewport:

melon.js, line 13162

// check if object is visible

obj.inViewport = isFloating || viewport.isVisible(obj.getBounds());

// update our object
isDirty = ((obj.inViewport || obj.alwaysUpdate) && obj.update(dt)) || isDirty;

So if obj is floating it will be always inViewport. Why? 

What is a proper way to temporarely remove GUI objects from the viewport?

 

best

[can2nac]

I added obj.floating = false to GUI obj hide function and obj.floating = true to GUI obj show function and got 50 fps per second. Is this a correct approach to deal with GUI elems hidden/visible states?

[obiot]

Hello,

well technically checking for `floating` is not wrong, as floating objects are meant to stay in the viewport space coordinates. Now admittedly we could check for the object bounds and it would solve the issue I suppose, but since floating were meant to be "always" visible, checking for `floating` is a shortcut, and giving it an offscreen location does not sound right to me anyway.

so my recommendation would be to actually add or remove them from the world container,  and this is actually what we do for the debug panel :

https://github.com/melonjs/melonJS/blob/master/plugins/debug/debugPanel.js#L491-L516

also I would recommend using a user-defined container for all you GUI elements. Not only it's then easier to add or remove them from the root world container (also, assuming you actually need to update but not draw your UI Elements, you can still trick it by overriding the drawing function, and add a visibility test yourself when you want to show or hide any elements).

below is a very basic example of an UI Container:

https://github.com/melonjs/melonJS/blob/master/examples/UI/js/entities/UIContainer.js

 

Hoping this will help !
 

 

[can2nac]

i have already tried to do this way but forgot to set keepalive to true. Will have some time to try such approach tomorrow.

BTW why giving offscreen position doesn't sound like a good idea to you? It seem like a common approach at least in web dev.   

[obiot]

8 hours ago, can2nac said:

BTW why giving offscreen position doesn't sound like a good idea to you? It seem like a common approach at least in web dev.   

well, again it was more because of the shortcut we used (checking for the boolean) and the assumption we took that those object would always be in the current viewport area. And checking against one boolean is way cheaper that checking if a rect is fitting or overlapping another one

but ok, fair enough, it does not cost that much to actually modify that to make it more "generic" (I would say), I created a ticket here , let's see if other developer/contributors have any objection on this

[obiot]

@can2nac FYI https://github.com/melonjs/melonJS/issues/943

I know that since you changed the way you implemented the UI, but yet I did the changes we discussed in the thread.

 

how is your game progressing by the way ?