Introducing the new PlayCanvas Profiler

[will]

We’re pleased to announce the new PlayCanvas Profiler!

Read all about it on the blog.

This is a beta version but we want your feedback. How would you like to see it develop? What works? What doesn’t? What is hard to understand? And so on. Don’t hold back!

[Detzt]

Its a feature which could be very useful, but there are missing some funktions to make it so:

• Having these green and orange bars looks nice, but I don’t know which asset / shader is causing which bar exactly.
  So it would be good to have a tooltip or something like that pop up that notifies which asset / shader is behind that bar.
• Once you go to a specific point on the timeline you can’t go back to the first “always show current time” mode
• The stats are good, but they could be optical enhanced, like colouring the text depending on good/bad values and showing a little history line in the background of the text.

[alectora]

Nice and clean, also simply shows what is necessary. My only suggestion is please put a hide button, down to simple small button that we can drag anywhere to avoid issue where the position may block the game UI itself.

Minimizing the window to a small window showing FPS, MS, and mesh instances are also good, but the most important is the hide button cause I need to play the game along with it without blocking or alter the screen.

[Nebulae]

This looks great. Exactly the tools I were looking for

@Detzt

Having these green and orange bars looks nice, but I don’t know which asset / shader is causing which bar exactly.So it would be good to have a tooltip or something like that pop up that notifies which asset / shader is behind that bar.

@alectora

Minimizing the window to a small window showing FPS, MS, and mesh instances are also good, but the most important is the hide button cause I need to play the game along with it without blocking or alter the screen.

+1 to these.

Yet, a very nice and useful tool.

[max]

Remember, this is “beta” version of profiler, and we’ve decided to share it in such unfinished state. So all feedback is welcome!
Thanks guys for feedback, we’re glad you finding it useful and participating by providing feedback!

@Detzt

Having these green and orange bars looks nice, but I don’t know which asset / shader is causing which bar exactly.So it would be good to have a tooltip or something like that pop up that notifies which asset / shader is behind that bar.

Indeed, inspecting specific resources is essential for better debugging.

@Detzt

Once you go to a specific point on the timeline you can’t go back to the first “always show current time” mode

There is no button for that indeed, but if you scroll by dragging from top mini-map to the edge again, it will snap to “real-time” again.

@Detzt

The stats are good, but they could be optical enhanced, like colouring the text depending on good/bad values and showing a little history line in the background of the text.

What’s good or bad, is very very case dependant, and hard to be generic here. We could make some suggestions, like exclamation mark beside camera number if there is more than 1. But that’s again - very case dependant, and not always applicable to all cases. Developer should have some quality margins, and use the tool to meet them. We will be introducing best performance practices user manual sections some time in the future. They will help to understand what and how affects app performance.

@alectora

My only suggestion is please put a hide button, down to simple small button that we can drag anywhere to avoid issue where the position may block the game UI itself.

Yeah, overlapping is a bit tricky but toggle button should be enough usually.

@alectora

Minimizing the window to a small window showing FPS, MS, and mesh instances are also good, but the most important is the hide button cause I need to play the game along with it without blocking or alter the screen.

Making that panel more responsive, would help here.

@Nebulae, cheers.

[bjorn.syse]

I’m getting some strange issues with the profiler where the info tables on the left are just white. Doesn’t show any info at all.

I tried restarting my browser,. but same thing.

https://dl.dropboxusercontent.com/u/114792/ShareX/2017/02/2017-02-13_14-53-43.mp4

[Leonidas]

Hi @bjorn.syse, I am getting that issue from time to time myself.

Probably you are attaching a CSS stylesheet (.css) to your page that targets in someway the HTML elements of the profiler as well.

Try inspecting the profiler using the Chrome or Firefox Inspector, selecting one by one the elements (p, divs etc.) and see at the right if some of your CSS is activated on that element.

[bjorn.syse]

Thanks Leonidas, that was It I guess. Still not sure where those rules stems from but now I know where to troubleshoot at least. launch.css, is that some actuall css or just a generated name?

[Leonidas]

That are PlayCanvas default/editor CSS, not sure if you can edit them.

Best strategy in solving this:

• Wrap all your GUI/Interface elements in a specific HTML element (#myGui)
• Prepend all of your CSS rules with that selector (e.g. #myGUI .button )

Using preprocessors like SCSS or LESS to write your CSS makes this a breeze to fix.

[max]

@Leonidas is correct. You’ve overridden some CSS globally, affecting the panel.
With your CSS be more specific to avoid such cases. And using Inspector as @Leonidas showed on screenshot, at right panel you can see what styles are applied to elements and which file they come from.

[bjorn.syse]

I tracked it down to a rule i bootstrap.css which I’ve used. (http://getbootstrap.com/), overriding this on the .panel class.

[max]

It is recommended in any CSS to be specific when writing it especially using > child selector argument, which helps to clearly eliminate similar problems you had.