Updated: May 14
Hi everyone! Chris Quay here, back after a semester of college and most of a semester of doing Wraith things. In this blog post, since Jay has already given a rundown of the events of this year thus far, I’d like to take this opportunity to give a bit of a look into what exactly I’VE been up to this past semester with Wraith. Be warned, this one might be a tad long!
So, I’ve been lucky enough to be working with the rest of the team to design and iterate some of Collapsus’ core art assets! Designing blocks, animating effects, that sort of thing. And I’ve been given permission to not only debut one of my animations here, but break down some of my personal design processes and how I go from a list of objectives from a creative director, to some VERY rough mock-ups, all the way to final, ready-to-ship assets. So, as an example, I’ve selected my redesign of:
The Jolt Powerup!
To start things off, let’s take a look at how it USED to look:
The old Jolt powerup, in all its stringy blue glory
Not too great, huh? Well we’re about to make it a million times better!
For starters, we need an idea of what exactly was wrong with the old placeholder one, in order to know when we have the right new one. Here’s some of the notes that Jay gave to me to work with:
“The jolt block should be arcing electricity (much like a Super Saiyan or the current effect). It should not be larger than the block (the current one is). When it goes off, it should be a few frames that can be used vertically and horizontally. Take some inspiration from the current effect, but in general make it more illustrative, and more closely match the game’s art style”
Now this might not seem like a lot to go off of, but we already have everything we need. Plus, it gives me plenty of wiggle room to kind of do what I want with it to an extent. Let’s break it down:
“Should be arcing electricity (much like Super Saiyan or the current effect)”. Easy enough, all this entails is studying up on how electricity moves, especially in a frame-to-frame sense.
“It should not be larger than the block” Done and done.
“When it goes off, it should be a few frames that can be used horizontally and vertically”. Also easy, the current effect already does this. We just need to make the file the size of 1 block wide by 10 blocks tall, and it can be flipped and scaled in-engine however it needs to be.
“Take some inspiration from the current effect, but in general make it more illustrative, and more closely match the game’s art style” So in general, Collapsus’ art style is heavily inspired by pop art and screenprinting practices, with bold, flat colors. This honestly makes our job a little easier, since we don’t have to worry about shadows or lighting.
Oh, we also have this marker sketch by Jay to go off of:
Sketchy at best
Alright, now that all that has been established, let’s break this job down into its 2 main elements: The zappy bits that go on the block before it’s used, and the long bits that show up when the block is tapped. And finally, just because I think it’ll help make it look a little peppier, let’s add a third bit, something to go where the lines intersect while everything else is exploding.
To start, let’s make the big zappy lines so we can base the rest of the parts on it. Here’s what I came up with, rotated so it doesn’t take up the whole screen:
It’s a good start, but it lacks impact and feels a bit too fast. So let’s add a few extra frames of it petering out and make it get to the biggest part right away:
Much better! It feels quick, and the residual bits give the animation some extra flair to look at while the board behind it spawns in replacement blocks and whatnot. Here’s a quick breakdown of how the individual frames look next to each other on the spritesheet:
So many fiddly bits!
So now that we have this, let’s make a centerpiece for where the lines intersect. A little circle with smaller zappy bits should do the trick!
Now, with both of those done, let’s toss them together and see how it looks on a game board:
Perfect! It feels much more lively, fits the art style of the rest of the game, and manages to feel impactful! Now, on to the zippy bits that go on the block itself. To start, we should keep the colors and such consistent between all the parts, for cohesion purposes. Here’s the first version:
It’s alright, but still a little too reserved. The design fits vaguely with the bigger lines of electricity, but its size presents a new problem; plus, here’s how it looks on a yellow block:
It’s almost completely invisible! So, to fix this, let’s change some things: Let’s make the whole thing a bit crazier. I originally made it stay in the corners so that it wouldn’t obscure the design of the center of the block it’s placed on, but if just one or 2 frames go over the symbol it shouldn’t impact the player’s visibility of the block. Next, let’s make that blue outline around all the little pieces a bit darker so they can be seen on all the different colors. And with that, we arrive at our final sparky bits:
And now all that’s left is put all the pieces together to get our final design! Add some fake animated block physics, and you’ve got a heck of a powerup!
Now of course, this is just one of several things that I was tasked with re-designing and animating over these past few months, and it’s been a great way for me to flex my artistic muscles and help make Collapsus the prettiest game it can be. Letting people see behind the curtain and explaining some of my design processes is loads of fun, and I’m glad I could share this little glimpse with you all. Let me know what you think about the redesign on mine or Wraith’s social medias, and maybe we’ll show off some more stuff soon! With that, I’ll see you all around!