{"id":392,"date":"2025-07-08T16:37:17","date_gmt":"2025-07-08T06:37:17","guid":{"rendered":"https:\/\/nonlinearexperience.com\/?p=392"},"modified":"2025-07-11T12:12:46","modified_gmt":"2025-07-11T02:12:46","slug":"animation","status":"publish","type":"post","link":"https:\/\/nonlinearexperience.com\/index.php\/2025\/07\/08\/animation\/","title":{"rendered":"Animation"},"content":{"rendered":"<h1 class=\"wp-block-post-title\">Animation<\/h1>\n\n\n<p class=\"wp-block-paragraph\">See also:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">System:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">ANIMATION<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">this is NOT necessarily movement &#8211; in fact, for frame based animation, it is likely not to be\u2026<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">So, this is just for the animation bit. There will also need to be a bit that has data about the sequence:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>length (get length of array dynamically),<\/li>\n\n\n\n<li>x\/y position of source,<\/li>\n\n\n\n<li>dimensions of source<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This is the sort of data TILED will produce. See <a href=\"https:\/\/docs.google.com\/document\/d\/1AG3jOFts8Txf6aYTNznSe3lBOa0GsQ8yWp8YigJkfGc\/edit#heading=h.q2cwztccjud0\">TILED IMAGES<\/a> for info on getting the images from a tile map (you want to do this)<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Onwards!<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">using modulo to loop stuff from a timer<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Step 1 set game frame to 0<\/li>\n\n\n\n<li>Step 2 set frame rate<\/li>\n\n\n\n<li>Step 3 set loop sequence length<\/li>\n\n\n\n<li>Step 4 calculate game frame divide by frame rate<\/li>\n\n\n\n<li>Step 5 &#8211; modulo the amount of frames in the sequence (this can be different, depending on the sequence\u2026)<\/li>\n\n\n\n<li>Step 6 &#8211; return the number as a whole number (Math.floor)<\/li>\n\n\n\n<li>Step 7 &#8211; go to step 4<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Javascript e.g.<\/strong><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nlet gameFrame = 0;\nconst staggerFrames = 5;\nlet seqLength = 6;\n\/\/\nlet position = Math.floor(gameFrame\/staggerFrames) % seqLength;\n<\/pre><\/div>\n\n\n<pre class=\"wp-block-code\"><code><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Pico 8 e.g.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the getframe function, we have:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>get the animation array<\/li>\n\n\n\n<li>for each element in the animation array\n<ul class=\"wp-block-list\">\n<li>get the value of T<\/li>\n\n\n\n<li>divide T by 15 to slow down the effective rate of increase <strong>(t\/15)<\/strong><\/li>\n\n\n\n<li>get the floor &#8211; which rounds down to the nearest whole number <strong>flr(t\/15)<\/strong><\/li>\n\n\n\n<li>modulo the number by the array length (use # to get array length) <strong>flr(t\/15)%#ani<\/strong><\/li>\n\n\n\n<li>add one so that it is in the range we are using (which begins at 1\u2026)<\/li>\n\n\n\n<li>return this number now. Job done.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: python; title: ; notranslate\" title=\"\">\nfunction getframe(ani)\nreturn ani&#x5B;flr(t\/15)%#ani+1]\nend\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">And we call the function from inside draw_game() function:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: python; title: ; notranslate\" title=\"\">\nspr(getframe(p_ani),p_x*8,p_y*8)\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">We now have a reusable script that we plug in an animation array and it returns a frame value for it.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Using delta time for animations\u2026<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Movement patterns<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Use sin\/cos for&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Circular movement from <a href=\"https:\/\/www.youtube.com\/watch?v=GFO_txvwK_c\">JavaScript Game Development Course for Beginners<\/a>@2:02:30<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nthis.x = this.curve * Math.sin(this.angle * Math.PI\/180) + (canvas.width\/2 - this.width\/2);\nthis.y = this.curve * Math.cos(this.angle * Math.PI\/180) + (canvas.width\/2 - this.height\/2);\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">cos\/sin curve movements<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ideas &#8211; random placement &#8211; animate towards new random location<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Resources<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">the kittykat thing&#8230;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>See also: System: ANIMATION this is NOT necessarily movement &#8211; in fact, for frame based animation, it is likely not to be\u2026 So, this is just for the animation bit. There will also need to be a bit that has data about the sequence: This is the sort of data TILED will produce. See TILED [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"wp-custom-template-nlx-the-knowledge-page","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[],"class_list":["post-392","post","type-post","status-publish","format-standard","hentry","category-the-knowledge"],"_links":{"self":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts\/392","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/comments?post=392"}],"version-history":[{"count":5,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts\/392\/revisions"}],"predecessor-version":[{"id":495,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/posts\/392\/revisions\/495"}],"wp:attachment":[{"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/media?parent=392"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/categories?post=392"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nonlinearexperience.com\/index.php\/wp-json\/wp\/v2\/tags?post=392"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}