Need help in rendering loop

Arcade
#1

Hi all,

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.
Display update, flushing and synchronisation and light sensor peculiarities
What does fps mean exactly in show stats?
#2

We are working on adding documentation about this, but right now the only place where this is listed is in the code here: https://github.com/microsoft/pxt-common-packages/blob/master/libs/game/scene.ts#L34

The basic steps for each frame are (in order):

  1. The controller state is updated (which buttons are pressed)
  2. Sprites that have controller.moveSprite() get moved
  3. Physics and collisions are applied to sprites
  4. game.onUpdate() is run
  5. game.onUpdateInterval() is run
  6. The background image is drawn
  7. game.onPaint() is run
  8. The sprites are sorted by depth and drawn to the screen
  9. game.onShade() is run
  10. All of the HUD elements from the info category (lives, score, countdown, etc) are drawn
  11. 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.

#3

Just added some documentation describing the core game loop, including how the physics and rendering works: https://arcade.makecode.com/developer/game-loop

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.

3 Likes