{"id":867,"date":"2026-02-12T17:17:37","date_gmt":"2026-02-12T09:17:37","guid":{"rendered":"https:\/\/edu.circuspi.com\/?p=867"},"modified":"2026-03-11T14:56:49","modified_gmt":"2026-03-11T06:56:49","slug":"4-1-methods-for-creating-sprites","status":"publish","type":"post","link":"https:\/\/edu.circuspi.com\/index.php\/gamebit-en\/4-1-methods-for-creating-sprites\/","title":{"rendered":"4.1 Methods for Creating Sprites"},"content":{"rendered":"\n

Open the URL\uff1ahttps:\/\/arcade.makecode.com\/beta?hw=n3<\/a><\/p>\n\n\n\n

Start a New Project and name it whatever you like.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Once everything is ready, let’s create our first Sprite. Please click on “Sprites”<\/strong> in the Block Toolbox<\/strong>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Drag the block “set [mySprite] to sprite [ ] of kind (Player)”<\/strong> into the “on start”<\/strong> block in the Workspace. This block helps us create a Sprite and store it in a container named a “Variable”<\/strong>. We will explain the concept of variables<\/strong> in later articles; for now, let’s focus on creating Sprites.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Click on the grey square pattern<\/strong> 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.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Let’s start with the “Pencil Tool”<\/strong>. Try selecting the “Pencil Size”<\/strong> and test out the three different sizes by clicking the left mouse button<\/strong> 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.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

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”<\/strong>: due to pixel limitations, it cannot draw perfect circles. Small circles might even look indistinguishable from squares.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

As the saying goes, “With a pen and colors, creativity is limitless. \ud83c\udfa8”<\/strong> Now, let’s use our skills and creativity to draw our own Sprite.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

If you find the canvas too small, you can change the size in the bottom left corner\u2014don’t let the canvas limit your creativity.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

During the drawing process, you can use the “Line Tool”<\/strong> and “Fill Tool”<\/strong>, or you can simply draw pixel by pixel. Once finished, click the “Done”<\/strong> button in the bottom right corner, and you will see your Sprite \ud83e\udd96 appear on the Game Simulator<\/strong> screen.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

If you find drawing too troublesome, there is a ready-made library available. Please click on “Gallery”<\/strong> at the top of the editor.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The existing assets are quite rich! If you don’t want to draw one yourself, just pick a character you like from here.<\/p>\n\n\n\n

\"\"<\/figure>\n","protected":false},"excerpt":{"rendered":"

Open the URL\uff1ahttps:\/\/arcade.makecode.com\/beta?hw=n3 Sta […]<\/p>\n","protected":false},"author":1,"featured_media":313,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21,23],"tags":[],"table_tags":[],"class_list":{"0":"post-867","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-gamebit-en","8":"category-freeinfo-en","9":"czr-hentry"},"_links":{"self":[{"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/posts\/867","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/comments?post=867"}],"version-history":[{"count":3,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/posts\/867\/revisions"}],"predecessor-version":[{"id":1548,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/posts\/867\/revisions\/1548"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/media\/313"}],"wp:attachment":[{"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/media?parent=867"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/categories?post=867"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/tags?post=867"},{"taxonomy":"table_tags","embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/table_tags?post=867"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}