I’m thinking of writing a game in Arcade MakeCode, but need help understanding the rendering loop in Arcade MakeCode, where I can’t find relevant resources.
AFAIK I can put things on the background image, in game.onPaint, and in game.onShade. But I have a few questions:
Is there any definitive resource on the rendering loop?
Is there any way to suppress the background image or the sprites?
What are the performance characteristics of the rendering loop? I wonder if a full redraw takes a lot of time from a STM32F4 console like MeowBit.
The controller state is updated (which buttons are pressed)
Sprites that have controller.moveSprite() get moved
Physics and collisions are applied to sprites
game.onUpdate() is run
game.onUpdateInterval() is run
The background image is drawn
game.onPaint() is run
The sprites are sorted by depth and drawn to the screen
game.onShade() is run
All of the HUD elements from the info category (lives, score, countdown, etc) are drawn
The screen is shown to the user
For information on performance, check out our profiling docs. For a simpler metric that’s easier to run on hardware, you can also go into the menu and choose “show stats” (the stopwatch) which will cause the uncapped FPS to be printed to the screen.
It’s worth noting that this describes the current state of the game engine, based off the most recent /beta release – there are some slight differences between that release and the current live site relating to rendering.
In particular, the live site doesn’t have the same rendering timing as beta, as we are moving towards all the rendering behaviors having a z-index; the order things are drawn is still the same, but in beta setting a sprite to have a z-index of 200 will place it ‘on top of’ the info UI, where in the live site there is no easy way to do so.