efofecks [Lexaloffle Blog Feed]https://www.lexaloffle.com/bbs/?uid=47705 Simple Juicy Animation Engine <p> <table><tr><td> <a href="/bbs/?pid=83057#p"> <img src="/bbs/thumbs/pico8_duwapoguze-0.png" style="height:256px"></a> </td><td width=10></td><td valign=top> <a href="/bbs/?pid=83057#p"> juicy animation engine 1.0</a><br><br> by <a href="/bbs/?uid=47705"> efofecks</a> <br><br><br> <a href="/bbs/?pid=83057#p"> [Click to Play]</a> </td></tr></table> </p> <h2>Juicy Animation Engine</h2> <p>Hey guys, I'm posting a small animation engine that I'm using for puzzle games and such. It's only about 500 tokens even in its non-minified state, and can be less.</p> <p>At its core, it is a system that allows an object to self-modify its properties (such as its screen coordinates) over time, subject to an <a href="https://easings.net/">easing function</a>. This allows the creation of really nice looking animations with a minimum of code.</p> <img style="margin-bottom:16px" border=0 src="/media/47705/animation_4.gif" alt="" /> <h3>Features</h3> <ul> <li>Dead simple to use, 'fire and forget' method.</li> <li>Controls for how many times to repeat the animation, reversing after it's done, etc.</li> <li>Choose and select only the easing functions you need to save code</li> <li>Can be used for cycling through sprite frames (linear interpolation of sprite numbers!)</li> <li>Control for object depth (which sprites are drawn over others)</li> <li>Object code can be modified and extended easily depending on the game</li> </ul> <h3>Setup</h3> <p>All you need are these three things:</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>o = {} -- list that holds all objects to animate, put in _init() update_objects() -- put in update draw_objects() -- put in draw </pre></div></td> <td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> </tr></table></div></div> <p>To create an object, just call the object() function, which creates an object and appends it to the global object<br /> list. Delete the object when not needed.</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>obj = object(spr, x, y, [z]) -- spr (number) sprite number for the object -- x, y (number) current screen pixel coordinates of sprite -- z (number) sprite &quot;depth&quot;; lower numbered objects drawn first. If z not provided, it's assigned to 1+ the highest z depth in the object list</pre></div></td> <td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> </tr></table></div></div> <p>To set an animation for the object, simply call this:</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>anim(obj, p, to, d, [f], [rep], [rev]) -- obj (obj) an object, as defined above -- p (string) parameter to change (&quot;x&quot;, &quot;y&quot;, or &quot;spr&quot;; can be extended if needed) -- to (number) the object's parameter will be changed to this value... -- d (number) ... over d frames ... -- f (function) ... controlled by this interpolation function, default linear -- rep (number, -1 or &gt;=1) the animation will be repeated rep times, default 1. If -1, animation will loop endlessly -- rev (1 or 0) whether the animation will reverse, default 0</pre></div></td> <td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> </tr></table></div></div> <p>So for example, if you have an object called 'piece' at (36, 36), and use the following two functions:</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>anim(piece, &quot;x&quot;, 72, 15, out_quad) anim(piece, &quot;y&quot;, 72, 15, in_back)</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 means:</p> <ul> <li>change the x coordinate of piece to 72, over 15 frames, using an out_quad function (faster at the start, slows at the end)</li> <li>same for the y coordinate, but use an in_back function (&quot;pulls&quot; a bit backward like a rubber band, before shooting to the target)</li> </ul> <p>That makes this cute little hop. The animation wasn't set to repeat, so it deletes and garbage-collects itself after it's done.</p> <img style="margin-bottom:16px" border=0 src="/media/47705/animation_3.gif" alt="" /> <p>The cursor above is also animated with the following code: </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>cursor = object(2, 72, 72) -- create an object called cursor with sprite index 2 at (72,72) anim(cursor, &quot;spr&quot;, 9, 30, linear, -1) -- change the sprite index of cursor to 8 over 30 seconds (2, 3, 4... 8), linearly, and repeat forever&quot;</pre></div></td> <td background=/gfx/code_bg1.png width=16><div style="width:16px;display:block"></div></td> </tr></table></div></div> <hr /> <h3>Stuff to do / limitations</h3> <ul> <li>This is mostly used for puzzle games, so I didn't build a way to use sspr with it. Very easy to modify though</li> <li>Playing the reverse of the easing function just uses the same thing. The animations should switch - an out_quad should be replaced with an in_quad, for example.</li> <li>Currently uses _update60().</li> </ul> <p>Please feel free to message for any concerns or questions!</p> https://www.lexaloffle.com/bbs/?tid=39941 https://www.lexaloffle.com/bbs/?tid=39941 Sun, 18 Oct 2020 08:08:48 UTC