Production - Unit 10

character animation: 25/11/24 - 1/12/24

For the slime, I wanted to create a design that was neutral so that if I end up adding a character customiser, there's enough space on the character to add parts and accessories. I originally had the character have a darker palette, but I gave them lighter colours since lighter blues have more calming themes. I added some light to make the slime look more reflective, and adding some lighter pixels to fill the empty space. When designing a face, I wanted a neutral expression so that the character could show more expression when jumping or getting hit, only adding some lines under the eyes in the final version.

For the walk cycle, I wanted something quick and fluid, making a 4 frame cycle with some squash and stretch to make the slime appear more liquid like. When I made the slime thinner, I also made it taller to keep the volume of pixels the same, applying the same logic to the stretch.

For the jump, I had a more exaggerated squash and stretch, and added some light pixels on the eyes so the slime can look as though it's looking up and down, giving it some hang time in the air to look down. While stretching, I made the lighter blue pixels dotted around the sprite stretch up and down depending on where the slime is in the animation.

With the hit animation, I moved the middle part inwards to illustrate the impact of taking damage. I created a closed eye expression to add more emotion to the hit, then making the character jump back, meaning in game the player will be knocked back, adding up to their time. This mechanic means players have to be precise and avoid getting hit to maintain control and get a fast time for each level.

For the crouch, I created two transition animations that play when the player starts playing crouch and lets go of crouch. For the walk itself, I shortened the animation to make sure the collision box size decreasing more believable. By adding an extra outline pixel on either side inside the slime, I intended to create the impression that the slime has squashed into itself, building up energy, and making the higher jump more convincing.

For the wall climb fall, I started by doing a layout of the first and last frame I wanted, which helped me to visualise where I wanted the animation to go by using the animation principles. I decided for the actual climb, it would be no different to the walk cycle except rotated to match which side of the wall the character is climbing. Initially, when adding frames, I had a sweat effect to indicate the player was about to fall and have each frame last longer so it was more visible. This ended up getting scrapped since the individual pixels moving around didn't look right, so I opted to show the fall differently.

I rearranged the sweat pixels a little, but I still couldn't get it to look right, so I instead had the slime strect out as if it was slipping, made more clear by the slime slowly peeling off of the wall. This will be the player's last chance to jump before they fall down, so I made the build up long enough for player's to recognise the anticipation and react to it.

I reused some frames from the fall of the jump animation and applied some more exaggerated squash and stretch for greater impact. Some of this animation's greatest challenges were positioning the frames, specifically getting the animation to flow smoothly from being on the wall to slipping off.

SPECTURN TRIO:

These were the initial silhouettes created in the early stage. Using the three ghosts that were the most popular from my Microsoft form, I started experimenting between colours players suggested.

I tried going for a primary colour theme, using colour theory to assign each ghost the colour that fits the most with their expression. I made the tail lighter like in the silhouette, along with any other features apart from the main body like the arms and eyes. While the blue worked with the second ghost, purple was also a popular choice from the form, leading me to choose it over a blue iteration.

I later added features in the animation stage, giving the red one more horns for more triangular shape language, making the mouth move with the up and down of the arms. For the purple one, I added a down to create some follow through on the hood, while also adding shading on the eyes for greater depth. To add more diversity, I used the mouth movement from the red version and instead had the mouth move against the up and down frames, making something unique about each ghost aside from their colour. Once I completed the frames for the red ghost, I recoloured segments of the animation that were the same and re used them for the other two to have more synchronisation.

AMBUSH:

I started by blocking out the basic shape and applying colour, then changing the outline to match the colour of each part, splitting up the main body and the spikes more clearly. I added some eyes and some dark green pixels to give the eyehole more depth, along with a leaf placed above the face to spread different shades of green across the design. To make the spikes appear pointy, I added some light at the end of each of them. To make the design more fluid and natural, I used more shades of green, making lines with different greens in between to create a layered effect.

When I added the extra texture and detail, the design became too crowded by visual noise, so I removed the leaf but kept the shape as it gave the eyes more expression. I tried out different eye shapes and decided to use a more neutral shape as I can make the eyes look angrier when the player gets close. This process allowed me to decide how the enemy could behave. By placing the enemy on mossy tiles, I could have it walk normally but when the player gets close, part of it rises from the floor and makes it harder to jump over. For this reason, I went back to shorten the spikes on each frame so the angry face had more impact when the spikes got bigger while it grew taller.

When animating the walk cycle, I used the arms to indicate movement since the legs are covered. I used the up and down to create some weight to the sprite, and had the right arm appear when the left arm was furthest away from the face for realistic motion. To make the spikes seem more connected to the body, I put some outline tiles below the spikes to cover them, giving the impression they are connected to the face inside the moss, by applying motion to the spikes on the frame after the up created some overlap in the animation for more movement.

Starting a new animation of Ambush with the same frame makes the transition more smooth. I used anticipation to make the spikes come in while the eyes close, then have the eyes have more of an angry expression when they are shown again, and have the spikes raise up immediately more rapid motion. Exaggeration was used to have the frame the big spikes appear have the spikes be taller than they're supposed to be, making them move down slightly to create some overlapping motion.

SPIKEDISCS:

When designing the enemy, I use the ideas from my research to make two different versions, deciding on a purple colour for the slow version. I add a face in the middle, separating it from the rest of the body as the inner part won't rotate. I put a darker purple around the outside but kept the spike one pixel inside so that it looks like the spike is rotating between two points. While building the animation, I found that the rotation wasn't perfectly clear, so I added some marks below each spike which help convey the message I'm trying to express. After going through some facial iterations, I found a combination I liked that looked like two eyes with tears coming from the side.

When designing the fast version, I first designed the face, then converted the purple palette to a red one since the colour has strong connotations with danger. Combined with the face change it's clear to the player that this enemy is more of a threat. The final addition was to speed up the frame duration of the angered version so it rotated faster, right clicking on the selected frames and going into Properties to change the millisecond values.

SNOWSCOOPS:

Using the same method I made the basic shape then added any limbs like the legs and arms. when designing the face I used lighter shades of the pixels that make up the eyes to create depth, making it look as though the eyes are hollow- I created the same effect with the mouth. I added sprinkles arranging them so that each of the colours where scattered, but the colours contrasted too much with each other. When I imagined the creature walking, I instead came up with the idea to make the legs melted ice cream, then I could animate it in waves as it moves across the floor. Changing the eye shape and facial expression, I quickly find an eye shape I'm more pleased with. I liked the width of the mouth but I also liked the shape of the previous version, so I combined them in the next design. The last thing I changed was the arms, as they looked better then they were longer. 

I started adding some of the accessories peers who answered my form wanted to see, squashing the top middle pink pixels down so the cherry looks like it's stuck in. I made the arms longer and added a drip to the top tooth by making it stretch, aiming to illustrate this effect in the animation stage. I changed the pattern of the sludge at the bottom and made it lighter in colour, like how when ice cream melts, it gets thinner and more liquid like in property. I animated an up and down, focusing on the main body and face first for each frame, then the cherry, then the melted cream at the bottom. By splitting the animation up, the process was more manageable as I could focus on one aspect at a time.

I set the animation to be 8 frames, putting the cherry and the cream on a 4 frame loop so that they'll loop twice over the course of the walk cycle. I moved the sludge one pixel to the right each time, adding curves in different spots so that when strung together, it will move up and down, creating the wave effect I want. I opened the mouth to varying levels of exaggeration for more character, then moved the end pixel on the dribbly tooth to either side to make it look as though it's wobbling, creating an anticipation for when it falls off.

I had to design an object that would function as the goal in the level, so I started by sketching out a diamond shape and using some darker pixels to add lines inside the sprite, recreating the geometry of traditional gemstones. I use the same outline method but make more of a contrast with the colour so there's more of a contrast between the lighter shades, using this effect to try to achieve a shinier texture on the sprite. For the last step, I gave it a simple animation similar to some other collectibles I have animated before, making the object stand out to players. I then went over each frame with a very bright blue shade and moved it closer to the right each time to make it look as if the object was a reflective surface like many other gems.

I had the idea to include a chest in the level, serving as an optional challenge. When designing the chest itself, I went for a classic style at first to align with the RPG theme I've been applying to my sprites so far, defining my demographic audience more clearly. After applying shade to a similar level of detail to the other sprites to mirror the same style, I changed the colour to make the object feel more distinct. I originally had the idea to open the chest when you collect it rather than it disappearing, so I designed a sprite to illustrate this, adding a range of gold pixels to resemble coins. However, through production, I realised that the collectables wouldn't fit with the game style, and it would be more fitting for the fast-paced levels to include no temptation on each split path to base players' decisions merely on their instincts. 

tILESETS: 2/12/24 - 3/12/24

When making the tileset, I started by making a black outline for each main piece, then put some tiles together and added the main character to the canvas to see how the scale would work. Once I had all the base tiles in mind, I began to add more detail to the design before colouring. Since one of my enemies was a creature made of moss, I wanted some mossy tiles for the enemy to walk on. I made a copy of the tiles and separated them into "Tower" and "Moss", this way I know which tiles I wanted to add the moss onto.

For added detail, I refined the palette by adding texture, creating a cobbled effect for the main tiles by using blocks of varying sizes and copying over each tile to make them link smoothly. I added shading to the same degree of detail as the characters to make the world I'm creating feel more connected. I added some new background tiles like the flowering versions of the vines, making sure that the flowers don't overlap over one tile as this would result in an inconsistency when making the vines various sizes. I added two middle versions to switch between the ones I used for the longer vines, making the level less uniform and more natural. In the final version, I added some spikes in between tiles for walls and ceilings with moss only covering half of the tile. Later on, I changed the contrast of the flower colours so they stood out more against the dark green of the vines.

UNREAL BLUEPRINTS: 3/12/24 - 14/12/14

The blueprints set each frame and add the collision types depending on what frame the animation is playing. I made it so that once the spikes go up, the SpikesUp variable adds the collision and the SpikesDown variable takes it away, also making sure that when the spikes are up, the player takes 1HP of damage. 

USER INTERFACE: 7/12/24

Instead of a health bar, I wanted to use a hit point system so it wouldn't take up so much of the main HUD, putting the icon in the top left and putting the timer in the top middle of the screen. Instead of numbers, I used facial expressions, making the slime look more concerned with the lower the amount of hit points the player has. I decided on a neutral face for 2 HP and a more concerned face for 1 HP. This would give me a dead face for when the player runs out of health.                                                                                        

Since I cut the health sprite into quarters, the first step to designing the health system was to create a variable named health and define the set value as 4. Then I wanted to make the player able to lose health and make a clear visual indication when they were hit. This is achieved by making a boolean variable and hooking it into a branch node, then using a Set Health and a subtract to take the health away. Using the same Boolean variable in a Set function, I ticked Has Taken Damage to true and put the sprite variable into a Set Colour node. To separate the next few nodes, I used a sequence, connecting a Health variable to an Equals which connects to a branch. This allows the player to be defeated when the player has lost 4 health, meaning their health would equal 0. Another thing that needed to happen was setting the character back to the original colour, using the same node as before along with a delay so that the colour change is still apparent. To implement invincibility frames, I added a third node from the sequence that for 1.5 seconds prevents the player from taking damage by setting the Has Taken Damage variable to false.

To allow the sprite for the HP to switch between each version, I use the Get Flipbook Length in Frames node to make the sprite change alongside getting hit.

LEVEL DESIGN: 12/12/24

GAMEPLAY: 15/12/24