{"id":901,"date":"2026-02-13T09:25:44","date_gmt":"2026-02-13T01:25:44","guid":{"rendered":"https:\/\/edu.circuspi.com\/?p=901"},"modified":"2026-03-09T16:04:40","modified_gmt":"2026-03-09T08:04:40","slug":"9-bringing-game-sprites-to-life","status":"publish","type":"post","link":"https:\/\/edu.circuspi.com\/index.php\/gamebit-en\/9-bringing-game-sprites-to-life\/","title":{"rendered":"9. Bringing Game Sprites to Life"},"content":{"rendered":"\n

In the previous unit, we completed a game where the player must eat a specific number of burgers within a time limit to win.<\/p>\n\n\n\n

Actually, we can add more elements to enrich the game content. For instance, we can add a “charming villain” (an enemy)\ud83d\ude08; if the player accidentally touches them, they lose health.\ud83d\udc94<\/p>\n\n\n\n

Of course, this villain shouldn’t just stand still; they need to behave dynamically. This is the focus of this unit: “Bringing Sprites to Life<\/strong>,” making the characters on screen flexible and alive.<\/p>\n\n\n\n

<\/div>\n\n\n\n

9.1 Making Sprites Move Automatically \u2013 Adding an Enemy<\/h2>\n\n\n\n

First, open the game designed in the previous unit. We are going to add an “Enemy<\/strong>.”<\/p>\n\n\n\n

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

You should be familiar with adding sprites. Click on “Sprites<\/strong>” in the Block Toolbox<\/strong>, use the create sprite block, and place it inside “on start<\/strong>.” <\/p>\n\n\n\n

You can design the sprite’s pattern yourself, just like the editor did, or use a pattern from the Gallery<\/strong>. Since it’s a villain, remember to make it look fierce!\ud83d\udc79\ud83d\udc79\ud83d\udc79<\/p>\n\n\n\n

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

After designing the pattern, besides remembering to “Rename the Variable<\/strong>,” please set the “Kind<\/strong>” to “Enemy<\/strong>.”<\/p>\n\n\n\n

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

9.2 Making Sprites Move Automatically \u2013 Adding Life (Health) Function<\/h2>\n\n\n\n

We want to set a rule: during the game, if the controlled sprite touches the enemy, health will be deducted. Since our current game doesn’t have a health design, we need to add this feature. Click on “Info<\/strong>” in the Block Toolbox<\/strong>. You can see blocks related to “Life<\/strong>” here.<\/p>\n\n\n\n

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

Just like the “Score<\/strong>” blocks in the previous unit, simply drag the Life-related blocks into the Workspace<\/strong>. After assembling the code correctly, a heart icon will appear in the top-left corner of the Game Simulator<\/strong>.<\/p>\n\n\n\n

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

Now, drag the “set life to ( 3 )<\/strong>” block into “on start<\/strong>.” It can be placed anywhere, as long as it is before<\/strong> the “start countdown ( 10 ) seconds<\/strong>” block.<\/p>\n\n\n\n

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

You can set the number of lives yourself. You can even set it to 100. Note that if the number exceeds 4 hearts, the display style will automatically adjust to avoid blocking the screen.<\/p>\n\n\n\n

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

9.3 Making Sprites Move Automatically \u2013 Reducing Life<\/h2>\n\n\n\n

We taught the method for triggering events when sprites touch in Unit 6: the “Overlaps<\/strong>” block in the “Sprites<\/strong>” list. The difference this time is that we need to set the other<\/em> Kind to “Enemy<\/strong>.”<\/p>\n\n\n\n

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

When the player touches the villain, we will change the initial life value. Click on “Info<\/strong>” in the Block Toolbox<\/strong> and find “change life by ( -1 )<\/strong>.” The usage is the same as “change score<\/strong>.”<\/p>\n\n\n\n

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

The “on overlaps<\/strong>” block functions such that it executes continuously as long as the sprites are overlapping. Because the program runs very fast, it might happen that before you can separate the sprites, your health is drained instantly. Therefore, we need to pause the program briefly upon contact (creating a temporary invincibility or cooldown period).<\/p>\n\n\n\n

Click on “Loops<\/strong>” in the Block Toolbox<\/strong> to find the “pause ( 100 ) ms<\/strong>” block.<\/p>\n\n\n\n

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

Drag this block out and place it below<\/strong> “change life by ( -1 )<\/strong>.” This prevents instant death from rapid health deduction!<\/p>\n\n\n\n

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

9.4 Making Sprites Move Automatically \u2013 Enemy Patterns<\/h2>\n\n\n\n

Before making the villain move, we need to adjust everyone’s initial positions to avoid losing health the moment the game starts.<\/p>\n\n\n\n

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

Common enemy behavior patterns fall into two types: “Chasing the Player<\/strong>” and “Teleporting<\/strong>.” Let’s introduce them in order.<\/p>\n\n\n\n

\n\n\n\n

9.4.1 Chasing the Player<\/h3>\n\n\n\n

Before we explain, you might have thought: “Since it needs to chase the player, do we need to know the ‘Player’s coordinates’ and the ‘Enemy’s coordinates,’ calculate the angle of the shortest distance, and then pursue?”<\/p>\n\n\n\n

No, no, no. While theoretically correct, practical operation doesn’t need to be that complex. MakeCode Arcade has already figured it out for us.<\/p>\n\n\n\n

Let’s click on “Sprites<\/strong>.” Inside the “Physics<\/strong>” section of the list, you can find the “set [myEnemy] follow [mySprite]<\/strong>” block.<\/p>\n\n\n\n

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

Drag this block into “on start<\/strong>.” Click the “+<\/strong>” sign at the end of the block to see the “Speed<\/strong>” setting field. The default speed of 100 makes the enemy as fast as the player\u2014playing at this speed is extremely difficult! You’ll be caught in the blink of an eye. So, please change it to a lower number.<\/p>\n\n\n\n

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

After setting it, test it with the Game Simulator<\/strong> and repeatedly adjust it to a speed you feel is appropriate.<\/p>\n\n\n\n

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

9.4.2 Teleporting<\/h3>\n\n\n\n

Another method is to make the enemy instantly “Change Position<\/strong>” at a “Fixed Frequency<\/strong>.” For example, setting the enemy to change position every two seconds creates a thrill when the enemy suddenly appears in front of you during gameplay.<\/p>\n\n\n\n

We learned how to randomly change positions in previous units. The key is: How do we automatically change the position after a specific interval?<\/em><\/p>\n\n\n\n

We can use the “on game update every ( 500 ) ms<\/strong>” block found in the “Game<\/strong>” category.<\/p>\n\n\n\n

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

When we set the “Interval<\/strong>,” this block will continuously run the code inside it according to that interval. We want to change the enemy’s position every 2 seconds, so enter 2000<\/strong> (since the unit is milliseconds) or select 2 seconds<\/strong> from the dropdown menu.<\/p>\n\n\n\n

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

Finally, place the “Random Position<\/strong>” method inside this block. Remember to select the Enemy’s variable name.<\/strong><\/p>\n\n\n\n

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

Once finished, try playing it in the Game Simulator<\/strong>.<\/p>\n\n\n\n

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

In this unit, we learned about “Life (Health)<\/strong>” and “Animating Sprites<\/strong>.” In addition to the original tension of the time limit, the addition of the villain adds a lot of excitement and fun to the process. Currently, the gameplay mainly involves using the joystick to dodge.<\/p>\n\n\n\n

Next, we will add the ability for the character to attack, just like the fighter jet in the “Space Destroyer” example, which can fire beams to destroy meteors.<\/p>\n","protected":false},"excerpt":{"rendered":"

In the previous unit, we completed a game where the pla […]<\/p>\n","protected":false},"author":1,"featured_media":444,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21,23],"tags":[],"table_tags":[],"class_list":{"0":"post-901","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\/901","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=901"}],"version-history":[{"count":3,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/posts\/901\/revisions"}],"predecessor-version":[{"id":1245,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/posts\/901\/revisions\/1245"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/media\/444"}],"wp:attachment":[{"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/media?parent=901"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/categories?post=901"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/tags?post=901"},{"taxonomy":"table_tags","embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/table_tags?post=901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}