{"id":927,"date":"2026-02-13T09:50:39","date_gmt":"2026-02-13T01:50:39","guid":{"rendered":"https:\/\/edu.circuspi.com\/?p=927"},"modified":"2026-03-09T16:27:38","modified_gmt":"2026-03-09T08:27:38","slug":"11-extended-creative-application-projects","status":"publish","type":"post","link":"https:\/\/edu.circuspi.com\/index.php\/gamebit-en\/11-extended-creative-application-projects\/","title":{"rendered":"11. Extended Creative Application Projects"},"content":{"rendered":"\n<p>In the previous units, we created a game. Since it was relatively simple, we couldn&#8217;t cover all features or different game genres. Therefore, this unit will propose some interesting ideas and solutions, guiding you through them step-by-step. We hope this will help you with problems you might encounter when designing your own games, or provide you with different directions for thinking.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">11.1 Learning More Game Design Methods<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">11.1.1 Projectile Variations<\/h3>\n\n\n\n<p>Besides basic gameplay, standard<a href=\"https:\/\/en.wikipedia.org\/wiki\/Shooter_game\"> 2D shooting games<\/a> often feature character enhancements. For example, picking up an <strong>&#8220;Energy Ball&#8221;<\/strong> might strengthen the player&#8217;s abilities or change the missiles fired. There are many types of projectile variations: simple damage increase, size increase, quantity increase, or shape changes.<\/p>\n\n\n\n<p>We will use a simple example to teach you how to increase the number of bullets or change their appearance. We will demonstrate with the simplest method. The image below shows the block for firing projectiles:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"669\" height=\"308\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/eng-11-1-1_01.png\" alt=\"\" class=\"wp-image-1277\"\/><\/figure>\n\n\n\n<p>Let&#8217;s start with changing the appearance. First, duplicate the &#8220;<strong>on [A] button [pressed]<\/strong>&#8221; block and change it to &#8220;<strong>B button<\/strong>.&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"705\" height=\"286\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/eng-11-1-1_02.png\" alt=\"\" class=\"wp-image-1278\"\/><\/figure>\n\n\n\n<p>Next, change the projectile image in the &#8220;<strong>on [B] button [pressed]<\/strong>&#8221; block, and test the effect using the <strong>Game Simulator<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"858\" height=\"390\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/eng-11-1-1_03.png\" alt=\"\" class=\"wp-image-1279\"\/><\/figure>\n\n\n\n<p>What if you want a <strong>Shotgun (Spread)<\/strong> effect? It&#8217;s very simple: just add a few more projectile blocks inside the container. (=\uff9f\u0414\uff9f=) \u2584\ufe3b\u253b\u2533\u2501 \u00b7\u2026`.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"832\" height=\"324\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/eng-11-1-1_04.png\" alt=\"\" class=\"wp-image-1281\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"598\" height=\"484\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/eng-11-1-1_05.gif\" alt=\"\" class=\"wp-image-1282\"\/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">11.1.2 Triggering Changes (Power-Ups)<\/h3>\n\n\n\n<p>We will use &#8220;eating a Burger&#8221; as the trigger to change the bullets. First, add a new Sprite of kind &#8220;<strong>Food<\/strong>&#8221; (the Burger) and adjust the distance between it and the player.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"474\" height=\"279\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/eng-11-1-2_01.png\" alt=\"\" class=\"wp-image-1283\"\/><\/figure>\n\n\n\n<p>Next, set up the &#8220;<strong>Overlap<\/strong>&#8221; event so the Burger disappears (with an effect) when touched.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"542\" height=\"172\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/eng-11-1-2_02.png\" alt=\"\" class=\"wp-image-1284\"\/><\/figure>\n\n\n\n<p>You are already familiar with the steps above. But what about the crucial &#8220;Change&#8221;? We can implement this using the &#8220;<strong>Variable<\/strong>&#8221; concept we mentioned before.<\/p>\n\n\n\n<p>First, inside &#8220;<strong>on start<\/strong>&#8220;, create a new variable and set an initial value. You can name the variable whatever you like, but a name that fits its purpose helps keep your logic clear. Since we are changing the bullet style to represent increased attack power, let&#8217;s name it &#8220;<strong>PowerUP<\/strong>&#8220;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"481\" height=\"312\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/eng-11-1-2_03.png\" alt=\"\" class=\"wp-image-1285\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>When the variable &#8220;<strong>PowerUP<\/strong>&#8221; is &#8220;<strong>0<\/strong>,&#8221; we want the bullet to be the original style.<\/li>\n\n\n\n<li>When it becomes &#8220;<strong>1<\/strong>,&#8221; we want the upgraded bullet style.<\/li>\n<\/ul>\n\n\n\n<p>So, at the end of the &#8220;Burger Eaten&#8221; block, add a block to <strong>set variable [PowerUP] to [1]<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"561\" height=\"195\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/eng-11-1-2_04.png\" alt=\"\" class=\"wp-image-1286\"\/><\/figure>\n\n\n\n<p>Finally, inside the &#8220;<strong>on [A] button [pressed]<\/strong>&#8221; block, add a logic condition (<strong>if&#8230; else&#8230;<\/strong>). Copy the bullet logic from the &#8220;B button&#8221; block into the appropriate slot.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"631\" height=\"287\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/eng-11-1-2_05.png\" alt=\"\" class=\"wp-image-1287\"\/><\/figure>\n\n\n\n<p>Since the &#8220;<strong>on [B] button [pressed]<\/strong>&#8221; block was just for testing our design, now that we have integrated the patterns into the &#8220;<strong>on [A] button [pressed]<\/strong>&#8221; block, you can delete the B button block.<\/p>\n\n\n\n<p>Please test in the <strong>Game Simulator<\/strong> to see if the bullets change.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"476\" height=\"382\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/eng-11-1-2_06.gif\" alt=\"\" class=\"wp-image-1288\"\/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">11.1.3 Jumping and Crouching<\/h3>\n\n\n\n<p>If you want to design a game like the <strong><a href=\"https:\/\/dino-chrome.com\/\">Google Dino Game<\/a><\/strong>, the character needs to &#8220;<strong>Jump<\/strong>&#8221; and &#8220;<strong>Crouch<\/strong>.&#8221; For crouching, we also use the method of changing the sprite&#8217;s image.<\/p>\n\n\n\n<p>However, unlike projectiles where we spawn <em>new<\/em> objects, here we are modifying the <em>existing<\/em> character, so the process is slightly different.<\/p>\n\n\n\n<p>To change the sprite&#8217;s appearance, we can use the &#8220;<strong>set [mySprite] image to [ ]<\/strong>&#8221; block found in the &#8220;<strong>Sprites<\/strong>&#8221; category.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"930\" height=\"590\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/eng-11-1-3_01.png\" alt=\"\" class=\"wp-image-1289\"\/><\/figure>\n\n\n\n<p>Set the variable name to the character you want to transform and draw the &#8220;<strong>Crouching Pose<\/strong>.&#8221; We want the character to crouch when &#8220;<strong>A is pressed<\/strong>&#8221; and return to the original state when &#8220;<strong>A is released<\/strong>.&#8221;<\/p>\n\n\n\n<p>Therefore, we need to add another block: &#8220;<strong>on [A] button [released]<\/strong>,&#8221; and place the original standing image inside it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"958\" height=\"245\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/eng-11-1-3_02.png\" alt=\"\" class=\"wp-image-1290\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"792\" height=\"654\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/eng-11-1-3_03.gif\" alt=\"\" class=\"wp-image-1291\"\/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">11.1.4 Method for Jumping<\/h3>\n\n\n\n<p>For movement, we can refer to &#8220;<strong>Projectiles<\/strong>.&#8221; Projectiles move because we adjusted their <strong>Velocity<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"844\" height=\"243\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/eng-11-1-4_01.png\" alt=\"\" class=\"wp-image-1292\"\/><\/figure>\n\n\n\n<p>By the same logic, if we adjust the character&#8217;s velocity, can it fly into the sky? Yes! In the &#8220;<strong>Sprites<\/strong>&#8221; category, you can find blocks to change sprite position and velocity.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"865\" height=\"661\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/eng-11-1-4_02.png\" alt=\"\" class=\"wp-image-1293\"\/><\/figure>\n\n\n\n<p>Once velocity is changed, if not adjusted again, it will maintain that state (flying upwards forever).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1272\" height=\"1050\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/eng-11-1-4_03.gif\" alt=\"\" class=\"wp-image-1294\"\/><\/figure>\n\n\n\n<p>So, let&#8217;s use the &#8220;<strong>pause (ms)<\/strong>&#8221; block. After flying up for a short time, we change the velocity to the opposite direction (downwards) to make it fall.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"510\" height=\"281\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/eng-11-1-4_04.png\" alt=\"\" class=\"wp-image-1295\"\/><\/figure>\n\n\n\n<p>To prevent the player from spamming the &#8220;<strong>A button<\/strong>&#8221; and causing unexpected behavior (like infinite jumping), we add a check condition: only trigger the jump when the character&#8217;s <strong>Velocity (vy)<\/strong> is &#8220;<strong>0<\/strong>.&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"622\" height=\"361\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/eng-11-1-4_05.png\" alt=\"\" class=\"wp-image-1296\"\/><\/figure>\n\n\n\n<p>Okay, now the character keeps falling downwards forever, right? This is because the velocity hasn&#8217;t been reset to &#8220;<strong>0<\/strong>.&#8221;<\/p>\n\n\n\n<p> We need to restrict the character so that when it hits the &#8220;ground,&#8221; the velocity becomes &#8220;<strong>0<\/strong>.&#8221; Assuming the character&#8217;s ground position is at <strong>y = 60<\/strong>: We can continuously check the character&#8217;s &#8220;<strong>y coordinate<\/strong>&#8221; during the game. As long as it is <strong>equal to or greater than 60<\/strong> (the lower the position, the larger the number), we set the character&#8217;s velocity back to &#8220;<strong>0<\/strong>,&#8221; as shown below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"508\" height=\"324\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/eng-11-1-4_06.png\" alt=\"\" class=\"wp-image-1297\"\/><\/figure>\n\n\n\n<p>This way, the character can jump and land normally.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"902\" height=\"740\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/eng-11-1-4_07.gif\" alt=\"\" class=\"wp-image-1298\"\/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">11.1.5 Sprite Walking Animations<\/h3>\n\n\n\n<p>Currently, our character moves as a static image sliding around. We can make it more lively using blocks from the &#8220;<strong>Advanced<\/strong>&#8221; &gt; &#8220;<strong>Animation<\/strong>&#8221; category.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1118\" height=\"639\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/eng-11-1-5_01.png\" alt=\"\" class=\"wp-image-1299\"\/><\/figure>\n\n\n\n<p>Click the &#8220;<strong>Frames<\/strong>&#8221; option in the block (the square icon) to add multiple images on the right side. We will piece these images together to create an animation. The more frames you have, the smoother it looks!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1900\" height=\"893\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/eng-11-1-5_02.png\" alt=\"\" class=\"wp-image-1300\"\/><\/figure>\n\n\n\n<p>Since we want the character to animate when direction keys are pressed, we can change the &#8220;<strong>A<\/strong>&#8221; button to &#8220;<strong>Any<\/strong>&#8221; button in the dropdown menu. Place the animation block inside and turn &#8220;<strong>Loop<\/strong>&#8221; to &#8220;<strong>On<\/strong>.&#8221;<\/p>\n\n\n\n<p>Now, the character will animate when moving. Don&#8217;t forget to add the action for when the button is &#8220;<strong>Released<\/strong>.&#8221; There is a &#8220;<strong>stop [all] animations on [mySprite]<\/strong>&#8221; block in the &#8220;<strong>Animation<\/strong>&#8221; category; use this to stop the animation when you are not moving.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"847\" height=\"396\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/eng-11-1-5_03.png\" alt=\"\" class=\"wp-image-1301\"\/><\/figure>\n\n\n\n<p>Doesn&#8217;t it look much more lively now? (\u00b4\u03c9)\u4eba(\u00b4\u03c9)<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"668\" height=\"546\" src=\"https:\/\/edu.circuspi.com\/wp-content\/uploads\/2026\/02\/eng-11-1-5_04.gif\" alt=\"\" class=\"wp-image-1302\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>In the previous units, we created a game. Since it was  [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":522,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21,23],"tags":[],"table_tags":[],"class_list":{"0":"post-927","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\/927","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=927"}],"version-history":[{"count":2,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/posts\/927\/revisions"}],"predecessor-version":[{"id":1303,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/posts\/927\/revisions\/1303"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/media\/522"}],"wp:attachment":[{"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/media?parent=927"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/categories?post=927"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/tags?post=927"},{"taxonomy":"table_tags","embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/table_tags?post=927"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}