Open the URL：https://arcade.makecode.com/beta?hw=n3
Start a New Project and name it whatever you like.
Once everything is ready, let’s create our first Sprite. Please click on “Sprites” in the Block Toolbox.
Drag the block “set [mySprite] to sprite [ ] of kind (Player)” into the “on start” block in the Workspace. This block helps us create a Sprite and store it in a container named a “Variable”. We will explain the concept of variables in later articles; for now, let’s focus on creating Sprites.
Click on the grey square pattern within the block. This will pop up the Image Editor window, allowing us to draw our Sprite. The interface is like standard drawing software: drawing tools and a color palette are on the left, while the canvas is on the right. The canvas displays a pixel grid to help us position and draw accurately.
The details of the drawing tools are shown below. Although the functions are simple, they are more than enough to create a 2D pixel game.
Let’s start with the “Pencil Tool”. Try selecting the “Pencil Size” and test out the three different sizes by clicking the left mouse button on the canvas. You will see that the pencil sizes occupy “1 x 1,” “3 x 3,” and “5 x 5” areas on the canvas respectively.
Note: The smallest “1 x 1” size covers a single unit on the checkerboard background (the white/grey grid). It doesn’t mean it covers just one grey block or one white block; it represents one pixel.
New lines will overwrite old ones. If you want to color a large area, you can use the “Fill Tool.” A special case is the “Circle Tool”: due to pixel limitations, it cannot draw perfect circles. Small circles might even look indistinguishable from squares.
As the saying goes, “With a pen and colors, creativity is limitless. 🎨” Now, let’s use our skills and creativity to draw our own Sprite.
If you find the canvas too small, you can change the size in the bottom left corner—don’t let the canvas limit your creativity.
During the drawing process, you can use the “Line Tool” and “Fill Tool”, or you can simply draw pixel by pixel. Once finished, click the “Done” button in the bottom right corner, and you will see your Sprite 🦖 appear on the Game Simulator screen.
If you find drawing too troublesome, there is a ready-made library available. Please click on “Gallery” at the top of the editor.
The existing assets are quite rich! If you don’t want to draw one yourself, just pick a character you like from here.
