# Need help in rendering loop

**URL:** <https://forum.makecode.com/t/need-help-in-rendering-loop/408>\
**Category:** Arcade\
**Created:** [August 6, 2019, 10:21am UTC](https://forum.makecode.com/t/need-help-in-rendering-loop/408 "2019-08-06T10:21:20Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![lwchkg](https://avatars.discourse-cdn.com/v4/letter/l/ecb155/32.png) [@lwchkg](https://forum.makecode.com/u/lwchkg)\
**Post date:** [August 6, 2019, 10:21am UTC](https://forum.makecode.com/t/need-help-in-rendering-loop/408/1 "2019-08-06T10:21:20Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)\
**Post date:** [August 6, 2019, 6:17pm UTC](https://forum.makecode.com/t/need-help-in-rendering-loop/408/2 "2019-08-06T18:17:53Z")

</div>

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](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](https://makecode.com/js/profiling). 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.

---

<div class="post-metadata">

**Author:** ![jwunderl](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/jwunderl/32/5308_2.png) [@jwunderl](https://forum.makecode.com/u/jwunderl)\
**Post date:** [August 12, 2019, 8:53pm UTC](https://forum.makecode.com/t/need-help-in-rendering-loop/408/3 "2019-08-12T20:53:38Z")

</div>

Just added some documentation describing the core game loop, including how the physics and rendering works: [https://arcade.makecode.com/developer/game-loop](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.