tt2dplatformer

[tt2dplatformer]

What is a statemachine?

A statemachine is a piece of code that allows u to have multiple states something can be in and works by having multiple values that can apply to the thing and needs specifc requirements from these values for each state.

[tt2dplatformer]

Final Gameplay Video

[tt2dplatformer]

Animation Videos

[tt2dplatformer]

Game Character Research

Super Meat Boy:

super meat boys design is very small and condesed. his face and torso are the same part, his design is a bright red which makes it stand out from the background well. overall his design is compressed and stand out well from a distance.

Castle Crashers:

castle crashers characters all include a main colour which makes the easy to identify from the other characters, there heads are also very large behing other half there body which helps with making them stand and makes it easy for them to be expressive.

Minit:

minits design is very simplistic being only 16bit from the looks of it and only having 2 colours being white and black.

[tt2dplatformer]

Character Research

Mortal Kombat:

To make the sprites in mortal kombat they took pictures and videos of actual people and digitised them. which means for every animation and character sprite a person in real life had to act them out.

Limbo:

due to the limited colour in limbo as its only monotone colours means the characters are limited in colour options as they need to stand out from the background which means they have to 1 solid colour and that colour cant be used in the background. due to this they made the character fully black with a single white dot for an eye and the background is normally a lighter shade of grey so the character isnt similar colour to it.

[tt2dplatformer]

Mega Man walk Cycles

the megaman 1 walk cycle is a lot more simple being only 3 frames which makes it look clunky and a lower bitsize, it also has an outline and only 4 diffrent colours.

the megaman 8 walk cycle is a lot more smooth as it has more frames and uses shading which helps u keep track of which limb is closer to the camera which i like, this walk cycle is also in a larger bitsize allowing it to have more detail, this walk cycle lacks an outline which i dont like compared to the mega man 1 walk cycle.

overall i prefer the megaman 8 walk cycle as it has more detail, smoother animation and overall looks better than the megaman 1 walk cycle.

[tt2dplatformer]

What is a GIF?

A GIF (Graphics Interchange Format) is a file format that can be used for still or animated images,, its mostly used for logos or basic animations.

[tt2dplatformer]

Celeste research

the player has many mechanics in celeste like climbing walls,jumping off walls, dashing mid air and momentum thats applied for moving platforms in the levels.

all the levels in celeste take advantage of these mechanics to the best of there abilities by having u use most if not all the mechanics in most levels. and later maps have a pickup that allow u to dash again without having to touch the ground to replenish ur dash so that makes the later levels more complex.

the art style of celeste is fairly simple with the character herself only having 4 or so colours and having no facial details during the actual gameplay and her hair being her main aspect which also changes colour to show u if u got ur dash still. during the scenes with dialog theres pictures of the characters faces so u can feel more attached to the character as otherwise they lack features and thus hard to have emotional connection with them.

[tt2dplatformer]

Research Of Pixel Artists .2

Micheal Myers:

i like the way they do faces with very little detail, having only the eyes or just a flat colour, and how they draw legs with the bottom half a few pixels back so they arnt just straight lines.

[tt2dplatformer]

Research of pixel artists

Army of trolls:

i like the vibrant colours used in these and the fairly simple shading used for most of it, however i dont like how they draw people as the chin and pose looks weird.

Octavi navarro:

i like how simple they draws the faces of people and animals with just 2 dots for eyes and only a single dot for the nose of people, and i like how much detail he manages to get into each image in the background.

Derek Yu:

i like how all the enemies and characters have outlines and bright colours as it helps them stand out from the environment.

Johan Vinet:

i like the outlines they use on the character and most objects, and the bright colours. i also like how his projectiles flash between light and dark so they are easy to see.

[tt2dplatformer]

What is a sidescroller game

the 3 things that i think make a sidescroller game:

Having the screen move with u so the character is in the center of the screen.

having platforms that u jump on the move around the map

obstacles that u need jump or go under.

[tt2dplatformer]

Adding sprites to my game

i imported my sprite sheet and applied paper 2d settings so the sprites dont become blury when i use them

i then extracted the sprites with a 32x32 grid

i then went into my damage blueprint and added a papersprite and set it to the pufferfish as thats what i made for my damage object.

i then set the collision to NoCollision so that it cant hit anything an get in the way.

i then repeated this for the rest of my objects like score and the character

[tt2dplatformer]

Adding My Animations To Unreal

first i made a canvas where the height is 32x(the amount of animation) and the width is 32x(max amount of frames)

then i copied each of the frames from my animations into it

i then exported it as a png

i then imported it and applied paper 2d settings so that the background is transparent and that the image doesnt blend.

i then extracted the sprites by putting them on a 32x32 grid

then i selected all the sprites i would need for my animation and made a flipbook

i repeated this for all my animations and then i went into my character and made the character not visible

i then added a paperflipbook and selected my idle animation as the source

i then changed the capsule height and radius to be similar shape to the character

i tested it and the animation was working

i went into the character so i could get the rest of the animations on the character.

this checked if the characters velocitys is above 0 and if it is it plays the walking animation and if it isnt it plays the idle animation

i then added in a jump animation above this so it takes priority and then put the death above that so it takes even more priority

this checks if the characters health is below 1 and if it is it turns the looping off as i dont want the death to loop, it then plays the death animation and freezes the character in place.

if the health is 1 or above it checks if the character is falling and if they are it stops looping and plays the jump animation. if its not falling itll turn looping back on and go through the rest of the code.

this worked well and all the animations work other than the death animation which doesnt play if u die while in the air.

[tt2dplatformer]

Adding Projectiles

first i made a actor blueprint and named it projectile

I added a sphere to it and set the size to 0.25 to make sure it was smaller than my character.

i then added a destroy actor and connected it to a delay and overlap componets so that when the projectile hits something or after 3 seconds it gets destroyed.

after that i went into the third person character and added a any key component and set it so when the left mouse button is clicked itll spawn a projectile with the spawn actor component, to set where it spawned i used a arrow and get world transform so it spawned where the arrow is.

When i tested it it spawned the projectile close to the character and pushed the character back and u could climb the projectiles like stairs.

to fix this i moved the arrow further from the character to stop them spawing inside the character and pushing them back and i set the projectiles collision to overlap all dyamic instead of block all dyamic so stuff could overlap with the projecile so u cant climb it

[tt2dplatformer]

Adding Enemy patrol

i made a character blueprint and named it enemy

i added a cube and gave it a texture so it stands out

i set the cubes collision to noCollision

i then restricted the whole character to the Y axis to make sure it cant fall off the map

i then made a actor blueprint, named it patrol point and added a sphere and made it so it isnt visible in game but is in the editor

i then made the enemy cast to the patrol point and added a variable called "move right" i then added a branch so that if move right is true itll set move right to false and if its false it sets it to true

i added a branch to the event tick and put the move right variable into it so if its true itll run the top code and if its false itll run the bottom code, i added a movement speed variable so i can make sure the movement speed is regulated, the movement speed direction variables set in which direction they move.

i placed the patrol points on 0 on the y axis and on a flat surface and put the enemy between em to test it

[tt2dplatformer]

Animating my Character

first i made a new canvas that was 32x32 as thats my character size

then i set my grid so i could see the centre as i need to keep all my frames centred in the canvas

i then put timeline on as thats what ill be using to do my animation

i made sure it was on frame animtion and pressed create frame animation

now im ready to start making animations so first im going to make my walking animation. for my walking animation i wanted to make my character roll as he is ball shaped. so i started off by getting my image of character and by going to having him go sideways.

after that i made him going into the roll and him in each stage of it and i had some variations during this that i forgot to take pictures of.

to export them as a gif u go on export and select "save for web(legacy)"

in there u set the quality to nearest neighbour so that when u change the size it will stay the same looking as itll take the colour from the nearby pixels to make the new ones.

the final animation looks like this:

after that i made a idle animation which was very simple as it was just the normal image of him and then him squished slightly which allowed me to make an animation of him bobbing up and down

after that i made the jump animation which was also very simple as it was just 2 frames one of him normally and one of him with his legs down and arms up

after that i made the death animation which i decided to have him explode like a balloon, for this i cut chunks out of him and moved them further from the centre for each frame and made some disapear to make it have a seamless disapearence.

i also made another death animation after as the explosion one is a bit simple the second death animation is him losing his colour and then a ghost him flying up from his mouth.

first i made him lose his saturation by 20 for each colour and darked the white by 10 each time.

once he was fully desaturated i made a ghost pop out his mouth

after that i made the ghost fly up and go out of the screen.

the final animation looks like this:

[tt2dplatformer]

Designing my Character 64bit-2bit

for my 64bit character i drew a ball like shark with a fairly simple design

for my 32bit one i bassicly just made it smaller

for my 16bit one i tried to make it round but it was a harder so i ended up with a more lumpy shape

for my 8 bit one i was running out of room for space so i just made a ball and added in blue,white and red in the shape of his face and mouth

for 4 bit i bassicly just did the inner 4x4 part of the 8bit one

for 2 bit i only had 4 pixels to work with so i did half of it blue and the other 2 red and white