When I was posting some gifs during development, some people were curious about how I achieved some of the effects in pico8. In this post, I'll be going over some of the effects in the transitions from infinimoes. However if anyone is interested in how I did something else in there, I'd be happy to make some more posts over them.

For this example, I made a small pico8 cart containing a sort of slideshow showcasing the effects. You can switch between the pages with the left and right arrow keys and activate the page's effect with the x or z keys (on qwerty). The code will be available, so you can take a closer look if you want.

https://www.lexaloffle.com/bbs/cart_info.php?cid=effects_of_infinimoes

(Unfortunately, it appears that page 3 and 4 don't seem to be working on the embeded web player. So here's a gif of it just in case you don't have pico8)

On page 1, It shows the dissolve/erode effect that occurs in transitions or when paused. This kind of effect is actually used quite often in pico8 tweetcarts. It's done by sampling a random pixel and then drawing around that pixel with that color. For this case, it is just expanding the pixel into a 3x3 square. A single step of this can be shown in more detail on page 2. This occurs a few hundred times per frame to create the effect of the original image eroding away. however, rather than drawing the sprite on top every frame, the previous frame is carried to the next so that the image can erode again.

On page 3, The screen is now transitioning from one image to another, while having the dissolve effect active and carried over multiple frames. To actually show both the new image and the eroding image, the eroding one needs to be stored. when you start the effect, the current screen is then stored into memory. This stored image is what is taking the erode effect. but to have the new image show below it, transparent pixels are drawn onto the stored image. when actually displaying anything, the new image is drawn first, and then the stored image with the new transparent/eroded pixels are drawn on top. By having the circle grow, the second image is slowly revealed. when the effect is done, the stored image is discarded and only the new image is drawn.

Page 4 shows the effect in a way that's closer to the version inside Infinimoes. the rate of the erosion increases over time, there's a border color between the new image and the old image, and there are smaller spinning circles where the edge of the original circle was.

Page 5 shows the transition effect that is similar to the main menu's that goes from/to the credits. For every row of pixels, there is a rectangle drawn that grows from the edges of the screen. The color of the rectangle is based on the pixel below the pixel closest to the center of the screen. Though this version has an extra step of color to it to make the stretching look nicer. 

Thanks for reading and/or checking out the game. If there's something else about Infinimoes that you would like to see, feel free to message me.