peace [Lexaloffle Blog Feed]https://www.lexaloffle.com/bbs/?uid=95335 Loopi Function: Time-Based Index Looping for Animations and More <p>Hey everyone,</p> <p>I wanted to share a standalone function I've been using in my recent PICO-8 projects called <code>loopi</code> (LoopIndex). </p> <p>It's designed to loop an index across a specified range based on the elapsed time, making it really handy for animations or any time-sensitive indexing. The function also includes an optional 'invert' feature, which creates a smooth back-and-forth motion.</p> <p>Here's the snippet (46 tokens):</p> <div> <div class=scrollable_with_touch style="width:100%; max-width:800px; overflow:auto; margin-bottom:12px"> <table style="width:100%" cellspacing=0 cellpadding=0> <tr><td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> <td background=/gfx/code_bg0.png> <div style="font-family : courier; color: #000000; display:absolute; padding-left:10px; padding-top:4px; padding-bottom:4px; "> <pre>function loopi(range, delay, invert) local idx = flr((time() / delay) % (invert and 2 * (range - 1) or range)) if invert and idx &gt;= range then idx = 2 * (range - 1) - idx end return idx end</pre></div></td> <td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> </tr></table></div></div> <p>Minified (42 tokens):</p> <div> <div class=scrollable_with_touch style="width:100%; max-width:800px; overflow:auto; margin-bottom:12px"> <table style="width:100%" cellspacing=0 cellpadding=0> <tr><td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> <td background=/gfx/code_bg0.png> <div style="font-family : courier; color: #000000; display:absolute; padding-left:10px; padding-top:4px; padding-bottom:4px; "> <pre>function loopi(r,d,i)local x=flr(time()/d)%(i and 2*(r-1)or r)return i and min(x,2*(r-1)-x)or x end</pre></div></td> <td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> </tr></table></div></div> <p>Note: If you don't want to tie the timings to the time() output, you can replace it with something else or by adding a new argument - Otherwise, it works nicely as a standalone function :)</p> <p><strong>Example Usage:</strong></p> <p>Let's say you want to cycle through sprites at positions 5 to 8 based on time. You can use <code>loopi</code> to calculate the appropriate sprite index:</p> <div> <div class=scrollable_with_touch style="width:100%; max-width:800px; overflow:auto; margin-bottom:12px"> <table style="width:100%" cellspacing=0 cellpadding=0> <tr><td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> <td background=/gfx/code_bg0.png> <div style="font-family : courier; color: #000000; display:absolute; padding-left:10px; padding-top:4px; padding-bottom:4px; "> <pre>function _update() -- Loop through sprite indexes 5 to 8 every 0.5 seconds without inversion sprite_index = 5 + loopi(4, 0.5, false) end</pre></div></td> <td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> </tr></table></div></div> <p>This setup will continuously loop the sprite index from 5 to 8, changing every 0.5 seconds. If you want the sprites to animate forward and then backward (like a ping-pong effect), just set the <code>invert</code> parameter to <code>true</code>.</p> <p><strong>Demo:</strong></p> <p> <table><tr><td> <a href="/bbs/?pid=146768#p"> <img src="/bbs/thumbs/pico8_loopidemo-0.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=146768#p"> loopidemo</a><br><br> by <a href="/bbs/?uid=95335"> peace</a> <br><br><br> <a href="/bbs/?pid=146768#p"> [Click to Play]</a> </td></tr></table> </p> <p>I'm not sure if there's something similar already out there, but this has been very useful in my latest experiences with PICO-8. I hope you find it helpful too! Feel free to tweak it and share any improvements or uses you come up with.</p> https://www.lexaloffle.com/bbs/?tid=141765 https://www.lexaloffle.com/bbs/?tid=141765 Tue, 16 Apr 2024 15:53:45 UTC