Pico-8 Animation Operators
Code for combining simple animations together to create more complex animations using + and * operators.
The operator code plus the example combined are under 1k compressed bytes. The operators alone are 370 compressed bytes.
The example uses four simple animations—each one just a different coloured circle starting in a different corner and moving to the diagonally opposite corner—and combines them in different ways to create the final animation.
For simple animations A and B:
- The + operators first runs A and, once it's finished, runs B.
- The * operator runs both A and B at the same time.
As with normal addition and multiplication you can string together as many animations as you want and use parentheses to indicate a particular ordering.
To create animations use `new_animation()` and then give the animation object an `init` method. The `init` method should return a table containing a `draw` and an `update` function; `update` should return true when the animation has finished.
a = new_animation() a.init = function() local offset = 0 return { update=function() offset += 5 if offset > 128 then return true end end, draw=function() circfill(offset, offset, 2, 7) end } end
The animation object then needs to be instantiated to use it.
anim = a() -- or a.init(), same thing function _update() anim.update() end function _draw() cls() anim.draw() end
Having the `init` function means you can use the same animation multiple times since any internal values, like `offset`, will be re-initialized each time. You don't need to initialize the animation each time when combining animations, that's handled internally, you only need to initialize the combined animation as a whole.
-- creates a compound animation which will play the simple -- animation three times in a row. anim = (a + a + a)() -- or (a + a + a).init()
Status | Released |
Category | Tool |
Platforms | HTML5 |
Author | profoundrock |
Made with | PICO-8 |
Tags | Animation, example, pico1k, sourcecode |
Download
Install instructions
animation-operators.p8.png contains the code which implements the operators as well as the example animation which is embedded above. Drag'n'drop the png into your local Pico-8 to run it and see the code.
The code for just the operators is available in the files animation-operators.lua and animation-operators-single-space-indent.lua. The former is formatted to look better in external text editors while the latter should look better in Pico-8's built-in editor.