Getting Started with Display-Shield
Explore how to use the Newbit Arcade Shield with Makecode Beta version using the new display-shield plugin.
✨The MakeCode platform has introduced a new "display-shield" plugin, which allows our Newbit Arcade Shield to be used on the MakeCode!🤗It enables programming of the buttons on the joystick and also provides control over the display, making the Newbit Arcade Shield an easy-to-use remote control for the Microbit.
Quick Start
Open the following URL in your browser: https://makecode.microbit.org/beta
Note: Please note that it is the beta version.

In the Extensions, search for “display-shield”.

The display-shield category includes two subcategories:
- Controller
- Drawing

Simulator
The buttons on the left side of the simulator correspond to the buttons on the Newbit Arcade Shield. The image display area on the right side corresponds to the screen of the Newbit Arcade Shield, which has a resolution of 160x120 pixels.

Categories
In the Controller category, you can program the directional keys and A/B buttons on the Shield.

In the Drawing category, you can display geometric shapes or custom patterns on the screen.

Controller Application
Write a program to control the dot matrix display using the controller buttons.
Simulator behavior:

Physical behavior:

Drawing Geometric Shapes
Draw a facial expression using geometric shapes.
Simulator:
Physical behavior:

Combining Gyroscope Data
Display charts combined with gyroscope data.

Custom Drawing
You can create custom tiles. The operations here are consistent with the tile operations in Makecode Arcade. There are 16 colors available for setting, and you can define the position of the tiles for display.

More Tutorials
For more details on the usage of the blocks, you can refer to the official Microsoft tutorial: