How to use the Roblox MicroProfiler on mobile transcript

hi everyone it's Andrew from Roblox in this video we'll explore Advanced Micro profiler usage profiling mobile devices the web UI dumping data to shareable HTML files and Flame graphs so many flame graphs but I'm getting ahead of myself if you aren't familiar with the micro profiler check out my previous video before watching this one Link at the top of the screen when you use the micro profiler in Roblox Studio you might think to yourself this is great but my development machine is not the problem a desktop computer or powerful laptop can Brute Force its way through a whole lot of performance problems the smartphones and tablets just can't of course the micro profiler supports mobile devices too just with an extra step and a slightly different UI first make sure your smartphone or tablet is on the same network as your computer then open the settings menu in the Roblox client and enable the micro profiler you'll see a URL and Port appear at the bottom of the screen punch that information into a web browser on your computer and voila the micro profiler but maybe not as you know it this web-based version of the micro profiler isn't real time instead you get a static view of the 30 most recent frames which usually represents half a second or 1 second of gameplay if you want a larger set of frames add a slash and a number to the URL even though the web UI isn't real time you can and should continue to use your mobile device as you examine the data from it on your computer here my frame times look good but my tablet stutters when I move into a more cluttered area use the recapture button to get a fresh set of frames as you continue testing your experience basic interactions are similar to in studio or the desktop client hover over processes and frames for more information right click to jump to them left click and drag to pan and zoom in and out with the scroll wheel okay before we go any further let's talk color in studio the client and the web UI frames in the bar graph come in three colors orange blue and red orange frames indicate that at least one of the worker threads which do things like run scripts calculate physics and play animations used more CPU time than the main render thread blue frames indicate the opposite that the render thread took more CPU time than the worker threads neither frame color is inherently problematic as long as you're hitting your frame time goals this isn't a situation where you can just say orange is good or blue is bad it's all information if I look at a frame time graph where half the frames are orange half are blue but all are around 16.67 milliseconds that's fine but if for example your frames are all orange and taking 50 milliseconds a piece that's 20 FPS you know to investigate things like scripts physics and animations similarly if those frames are all blue you know to examine object density movement of objects and Lighting Red frames are more complex these are frames where the GPU had to do more work so much work that it caused the CPU to wait on it for an extended period of time which we Define as more than 2.5 milliseconds if you think of blue frames as rendering bottlenecks red frames indicate possible GPU bottlenecks you can approach red frames from two very different mindsets one approach is to try and optimize them the same way that you would optimize blue frames with an added emphasis on object complexity texture sizes and visual effects the other approach is to think of them as an opportunity if you're happy with the performance of your experience or don't want to compromise on the visuals red frames can be an indicator that you have at least 2.5 milliseconds of CPU time available to you in the render thread so you can investigate performance as normal but the webui has a few extra tricks up its sleeve first and I know this seems minor but it's huge use control F or command F to jump to the longest running occurrence of a process many processes run every frame by searching for one like compute lighting perform you can find the frame where it took the longest to run so this feature helps you navigate the UI and find problems but it also helps you establish a ceiling now you know that every other occurrence took less time than this one which is valuable information that you can verify by hovering over the process sometimes it can be hard to notice optimization opportunities if they aren't actively causing frame time spikes here we have a smooth frame rate every frame within the 16.67 millisecond window but we have a process in every frame that's taking a bit longer than the main rendering Loop in detailed mode it's easy to miss go to the export menu and choose CPU flame graph this visualization Aggregates every process across all included frames maintains the parent child hierarchy and sizes them based on duration what was non obvious before now sticks out like a sore thumb similarly it can be hard to quantify improvements that you've made to your experience over time you might be tempted to open the micro profiler and start scribbling down numbers on a piece of paper so that you can compare them to other numbers later instead use the save to file button to dump your data to a standalone HTML file make your improvements restart everything and repeat then open the original file in a web browser and start dragging this simple example looks at just two files but you can compare lots of files try downloading Frame data from three or four hotspots within your experience then make improvements and compare those files against new ones from the same hotspots you can periodically download Frame data as you develop your experience and build a library of comparison points over time the guy's the limit of course performance optimization is all done in the name of providing players with awesome experiences and one of the best ways to expand your addressable audience is to lower your memory requirements the developer console provides an outstanding detailed breakdown of memory usage but if you want to dive into the true nitty-gritty the Nitti of the gritty if you will press X in the micro profile or web UI to enable x-ray mode x-ray mode shows the frames and parts of those frames that are allocating the most memory by default it shows the number of memory allocations but you might be more interested in the amount of memory being allocated press C to show that information instead I know this all seems like a lot and it is but this video is in no way comprehensive I haven't even talked about timers mode which shows a sortable list of every process or how to profile the server or memory flame graphs memory flame graphs the micro profiler is such a treasure Trove of actionable information that the best I can do is implore you to dive in and see what you find as you bump into questions check out the documentation at create. roblox.com and thanks for watching