Making a Scrolling Credits System (Patreon)

The list of Patreon credits is getting longer every day, which is amazing! But also my worlds can't really hold all those names on one single wall. I decided to try making an animated, scrolling credits board that will show everyone's name for an equal amount of time, and take up less overall space.

I did a weird code thing instead of a simple animation thing. If anyone is interested, here are the diagrams I drew in MS Paint and the code I used.

How does this work? There is a canvas with a small box (called the "frame", and a really tall text box with all the names listed (called the "content"). The frame masks any of the content that doesn't fit the frame. I would fade in the content, which starts at the top position. Then I wanted a pause for some amount of time, so you could read the names at the top of the list. Next, the content scrolls through the frame for some amount of time at some speed, making sure each name along the way is within the frame for a decent amount of time so you can read them. Finally, it reaches the end, and pauses for a bit so you can read the names at the very end, before fading out and starting over from the top.

I wanted to make an elegant solution where I could select a desired amount of time for each name to appear within the "frame", then calculate the starting pause time, scroll speed, and ending pause.

Yeah, I could have just decided on a set speed for the text to travel, and moved the textbox over time... then transition to a fade in/out state and repeat. But I thought it would be more fun to model the fading and scrolling as functions based on a single time value. That way, I could synchronize the time (or "percent" through the animation) for players who join the world mid-animation.

Before uploading the world, I choose a fade duration (0.5 seconds, but this doesn't really matter) and some amount of time each name should be in the frame (for example 8 seconds). I could have scaled this time based on the area of the frame, but if I assume that all my credits boards will be roughly similar in size, I think it makes sense to just choose how long I want each name to be on the board instead. I can make this last longer or shorter just by changing one number.

Then I used the ratio of the small frame to the larger content scrolling through it to calculate how long the entire animation will be. This can change depending on how many patrons join. After calculating all the time ranges I needed, I could plot the opacity (fade in and out) of the text and the scroll percent of the text over time.

And because why not, I threw in a bouncing emoji and a speech bubble to make it a bit more cute.

I know this is a bit less exciting than having a GIANT WALL OF EVERY NAME... but I hope you still like this new credits system for the worlds I will be adding it to. With the animation synchronized as best I can for all players, you should still be able to point out your name to your friends I hope!

This new board is the first of my "Maintenance Month" tasks. Kitchen Cooks will be the first to have it because I want to save space in the kitchen area. Not all worlds really need this system but I might re-use it in other worlds with small lobbies. I still really like how the huge credits walls look in worlds like Kingdom Scrolls and Kitchen versus Kitchen, so we'll have to see how this looks and feels once it's published, and take it from there I guess!