Search

A Long Post about Menus

Updated: Jul 13

Hi everyone! Chris here, back at the wheel of the blog machine. I'm doing a little bit of work at Wraith this month before I start my final (!!!) semester of college before I graduate. That being said, before we get into some of the bigger more serious Collapsus updates, we figured it might be fun to highlight some of the little visual retouches I made to the game over the summer! So without further ado,

WHO'S READY TO LOOK AT SOME MENUS???


"A Long Post About Menus" title card

Alright, so to start off, my big assignment was to try and make the menu transitions more "juicy"; I got a handful of notes and visual descriptions from Jay, but the specifics regarding the minor programming and formatting were left up to me. First, let's take a look at the menu transition in the last pre-release version of the game:


Old Collapsus menu GIF
That sure is Collapsus, all right

Also, fun thing to note: we're using some cool tech to recolor the specific elements into what you see on-screen, both to save on file sizes and to facilitate all the different colorblind options in the game. I'm sure we'll show this off at a later date. That being said, with the amount of changes needed, I more or less reworked things from scratch. Here's a look at the final bits of animation, and next I'll break down the specific changes that were made (though they may be a little obvious)

New Collapsus menu GIF
Well that certainly is new!!

Pretty cool, huh? Let's break it down. One of the biggest changes was making the buttons respond to being moused over. It has a slight scaling effect, so you can always tell which one you have selected. Then, if you hover over it for long enough, it transitions to a scale-in-and-out thing that helps you keep track even at a glance. Instead of having things just kinda phase in and out of existence, things slide and click into place to tie them back into how the game itself works and feels. You might also notice that the particles feel a little smoother, since they’re actually particles now instead of being driven by pure math like before.

Then comes the hard part: the transition itself. There are 2 kinds of screen transitions in the game that are used in different instances; if the player is transitioning to a screen that has the angled teeth in it, the teeth stay still and the buttons that aren't selected break like blocks and fall away. Then, the next set of options fall into place, also like blocks (with a little overdrawn motion to give it juice). The second type of transition is a little rarer, and harder to notice. If we're transitioning to a screen that DOESN'T have the little teeth, like the play field itself, or with teeth of a different size, like the Options menu, we get this little number:


New Collapsus options menu GIF

Cool, right? I personally refer to this one as the chomp transition, for obvious reasons. It took a lot of delicate masking, layering, and sprite slicing to get right, but the satisfaction of seeing it work is 100% worth it.

All in all, we’ve made a TON of changes to the game over the last year, and we can’t wait for you all to see what we’ve been working on; it’s been a long wait, and we want to make sure it’s absolutely worth it in the end. It’s been a ton of fun working with the whole team on this project, and you can expect to keep hearing from me a lot more in the near future :) And now, since this year has been kinda trash, here’s some (slightly cursed?) Leons I drew while doing menu mockups. Do with these what you will.


A bunch of Leon sketches from the menu concept art, including a photo of a Lego frog in a sketched hardhat
Lego frog is my favorite

Take care, and see you all in 2021! ~Chris