{"id":934,"date":"2026-02-13T09:53:49","date_gmt":"2026-02-13T01:53:49","guid":{"rendered":"https:\/\/edu.circuspi.com\/?p=934"},"modified":"2026-03-09T16:29:31","modified_gmt":"2026-03-09T08:29:31","slug":"11-1-5-sprite-walking-animations","status":"publish","type":"post","link":"https:\/\/edu.circuspi.com\/index.php\/gamebit-en\/11-1-5-sprite-walking-animations\/","title":{"rendered":"11.1.5 Sprite Walking Animations"},"content":{"rendered":"\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>Currently, our character moves as a static image slidin [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":524,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21,23],"tags":[],"table_tags":[],"class_list":{"0":"post-934","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\/934","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=934"}],"version-history":[{"count":2,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/posts\/934\/revisions"}],"predecessor-version":[{"id":1309,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/posts\/934\/revisions\/1309"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/media\/524"}],"wp:attachment":[{"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/media?parent=934"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/categories?post=934"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/tags?post=934"},{"taxonomy":"table_tags","embeddable":true,"href":"https:\/\/edu.circuspi.com\/index.php\/wp-json\/wp\/v2\/table_tags?post=934"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}