2d-platformer-dw - Tumblr blog

[2d-platformer-dw]

Artists and Animation

yes, again. I missed this

Eadweard Muybridge

Muybridge [I swear I'm not adding letters to his name] was an English photographer who created rudimentary animation. He is credited with pioneering animation through his photography.

Stephen E. Wilhite

Wilhite was an American computer scientist who lead the engineering team that produced the GIF [actually it's pronounced greg] in the late 80's. This format would serve as the default for all web images due to its small size and quality of supporting animation

WANEELLA

WANEELLA pixel art (tumblr.com)

WANEELLA is a pixel artist and animator on Tumblr. They create highly detailed landscapes [in portrait, ironically] with a low frame-rate animation. You can't see the animation because you can't copy/past GIFs, at least not with ctrl-c/ctrl-v. Their pieces are often oriental in theming and nearly stationary.

Paul Robertson

Paul Robertson is a pixel artist, also on Tumblr, whose works I felt I shouldn't be going through in a class. He creates cartoonish characters of various sizes and themes with no rhyme or reason. I really don't have much to say, I just think they're neat.

Ivan Dixon

i love this

Ivan Dixon is a pixel artist on Tumblr [look, I'm doing my best alright. They're all on Tumblr. Well, not the first two. They're dead] alongside artist and illustrator. He has worked for a number of studios in the past [even on Fallout 4, the one better than 3 but not NV. I will die on this hill.], creating animations and ideas for shows and games. He also runs Cursed Shirts — Ivan Dixon which is the source for the images below

he just like me fr

Pedro Medieros

Pedro is a pixel artist and animator WHO IS NOT ON TUMBLR [FINALLY]. He leads the art direction team for EXOK games [Extremely OK games - the team behind Celeste]. He also runs Saint11 and has a number of Very Cool educational videos on the aforementioned site with advice on creating [predominantly pixel] art.

[2d-platformer-dw]

Win condition

This is the current end of the game. It's literally just doors. Originally, there was going to be another Dauber, this time with the candle unlit [the player robot is called a Dauber. Not a technical term, just a name] which would active upon overlapping the player character, hence the two candles in the win screen. Unfortunately, I couldn't program that in time [somehow the player and the other Dauber's hitboxes kept colliding instead of overlapping] so I settled for this as a stopgap. The hibox in front of the door is the win hitbox.

fun fact! the "V 2.012" on the HUD is a music reference, but I can't remember what to.

[2d-platformer-dw]

HUD implementation

This is the code for my HUD. It gets the player character's collactable score and displays it via the highlighted text. For some reason, it doesn't display the amount of collectables obtained. I know the problem is here as the collectable prints text when collected [which I'll remove for the final version]

[2d-platformer-dw]

Win screen implementation

This is the code I used to implement the win screen. This code is in a box collision actor and is just a hitbox. It detects when the player character overlaps it, removes the HUD and replaces it with the winscreen. The piece of code that isn't attatched changes the map to an empty one, such as the one I used for the start screen, but it had no tangible effect visually.

I also added a fade in/out for the win/loss screens through the animations tab in my widget. I did this by making a new colour/opacity track for the respective screen and setting the RGB value at 00:00 to 1 and those at 00:01 to 0, so that they would fade to black for a fade out or vice versa for a fade in.

In hindsight, I could have just made a fade in and reversed it for the fade out.

I also attatched the fade in to the "event construction" node for the win screen, so it fades in when appearing.

This makes the transitions far less jarring and is just a nice touch.

Unfortunately, I can't implement flipbooks or GIFs in widgets so the screens couldn't be animated. As a substitute, I replaced them with a summary frame of the animation. I also didn't implement a death screen despite creating one as it would ruin the gameplay loop

[2d-platformer-dw]

win/loss screens

This is my win screen. It is activated when the player beats the game [somehow].

This is my loss screen. It is activated when the player dies [they will see a lot of this] and yes I am very proud of it

[2d-platformer-dw]

Fixing textures and details

I fixed the foundry section by adding the grate texture to the catwalk walls. I also added a fallen floor section, and ropes to suspend it so that it's not floating

Also added glowing vents. No idea what they are but I think they look cool.

[2d-platformer-dw]

Adding to the start section

I overhauled the first quarter of the game as it was extremely empty [I couldn't program the falling objects correctly so I moved on]. I increased the height of the tower and made it bend down, with the office partially present below. The player can just about jump on top of the truss to get over it and move on, or can jump on top of the smoke vent, pipe and other vent to grab a collectable.

[2d-platformer-dw]

Fixing the moving grabber arm

When my player character went up the grabber arm, they would be pushed off to the left due to the angle of the upper claw. This meant that they were on the wrong plane as the rest of the game and so couldn't interact with it properly.

To fix this, I added a ramp at exactly 90 degreed so that the player will go up that and remain on the correct plane. I also toggled visibility off on it so that it couldn't be seen

[2d-platformer-dw]

Text distortion and fonts

this is a work of art.

By clicking on the style menu with a block of text selected, you can change the style to arc or curve it

By clicking on blending options, you can add a stroke [outline] or apply a gradient to the text

Update:

I applied a gradient to the background and, in a new layer, drew over the text with a soft round brush and then decreased the opacity of it to give the text a shine

I love this.

Fonts can be found on sites such as dafont.com, fontspace.com [my favourite] and fonts.google.com

[2d-platformer-dw]

Win/Lose screens

Win/Lose screens are screens displayed when a player either beats a game/objective or dies. They are typically stylised to be coherent with the game.

Example 1 - Undertale

This lose screen is visually in keeping with the rest of the game with its pixelart and monotone colour. The lower text is also randomised from an assortment of presets so that it doesn't feel repetitive. The text presets are also encouraging, which may not be extremely helpful but it's better than mockery.

Example 2 - Celeste

In Celeste, the win screen after somehow beating the game is dependent on how many strawberries you collected. The more you collected, the happier the people are and the better the pie looks. This incentivizes repeat playthroughs and collecting all the strawberries for no tangible benefit other than seeing them happy. I suppose that's a testament to Celeste's writing then.

Example 3 - Batman: Arkham

yeah that was unexpected wasn't it

Batman: Arkham's death screens are actually very interesting. If you die to an antagonist, one of their death screens will play as they walk towards you, look down at you, and say something. These range from outright mockery, respect [Two-Face] to disbelief [Joker] which, alongside being very entertaining, give a fascinating insight into each characters through their reaction to the death of their biggest nemesis.

[2d-platformer-dw]

Making textures

By going into the details of a texture, I can multiply the RGB values with a value and then input that into the "Emissive Colour" detail, the texture will emit light in the same colour as the source texture. The multiplied value can be anything, but I set it as 25 so that the lava texture isn't too bright, just enough to notably effect the environment. Attatched is the original texture.

This is the overall effect from the light-emittant texture in-game

[2d-platformer-dw]

Making a tiny lamp

I needed a light source ok.

I started with the two large blocks at each vertical end of the lamp, then the centrepiece and light source [I learnt how to make textures emit light later], then the walls and corner pieces. The lamps will be present throughout the game to illuminate specific areas so that hazards are always visible to the player

[2d-platformer-dw]

Moving platforms

This is how I programmed a moving platform. Effectively, my platform starts the timeline [2nd image], which changes a value over time. This value i then turned into the platform's X value, increasing it over time. Once this finishes, the timeline is played in reverse from the end, and upon finishing causes it to be played from start in a loop.

[2d-platformer-dw]

HUD and widgets

This is the HUD that I made for my game.

The colours are consistent with the game's palette and style, and the glass bar on the right represents health.

I would have added more detail to deal with how much negative space I had, but that would likely distract the player from the actual game.

This is the code and viewport view for my widget [HUD]. The above code is in the player character event graph and displays the HUD

A widget is a piece of self-contained code containing images that can be bound to code. In this case, I bound the number next to my heart icon and the progress bar [I may remove one of those] to the player score, so that they increase for each collectable obtained

This is the code for binding the score to the number next to the hearts. It checks what the score stored in dauber [the player character] is, checks what the score is, and displays it in the widget/HUD

[2d-platformer-dw]

Collectables

1 - Celeste

There are 200 strawberries in Celeste and they are a goddamn pain can be found in out-of-the-way areas or through a puzzle or mechanical challenge. They are animated smoothly in a pixelart style, following Celeste's creative direction

2- Borderlands II

In BD2, ECHO logs can be found around all world locations. They are audio recordings and often contain information about the main cast of characters - ECHOs found in story-relevant areas contain audio from Handsome Jack, the best villain of all time and BD2's antagonist whereas other ECHO logs may contain audio giving backstory to present playable characters and even characters from its sequel.

3 - Metal Gear Solid III

In MGS3, the player can play a minigame where they have to locate and capture monkeys in a Russian jungle [thank you Mr Headache Kojingles] for a professor. The single benefit from this is a mask based on the monkey's face which reduces vision and provides absolutely no benefit whatsoever.

It was a crossover promotion for Ape Escape because why not

4 - Fallout: New Vegas

There are 11 snowglobes that can be found for Mr House in Fallout: New Vegas. Unlike Celeste's Strawberries, they are very difficult to find, being very small and in areas unlikely to be traversed. Although only providing an achievement, they are another fun objective to complete in F:NV and by god I love that game

5 - GTA V

GTA V has 404 collectables. Monkey mosaics, spaceship parts, radioactive waste, hidden packages, etc. These take quite a while to find, and given that there's nearly 50sq miles, there is a lot of area to hide them

[2d-platformer-dw]

Resource sites

1 - Michael Myers - Pixel Art (drawsgood.com)

On drawsgood, Michael has a number of his personal and commissioned pieces. These range from small animations and static characters to the full gallery of a game. This site could provide inspiration for colour schemes or stylistic choices such as the stick-like limbs.

2 - https://lospec.com/

Lospec is a pixelart sharing site that hosts images, comments and palettes uploaded by users. Due to the nature of content being uploaded by an entire userbase, there is far more variety than on Drawsgood. Additionally, there is a section for user palettes so inspiration could be provided through that.

3 - https://pixeljoint.com/

Pixeljoint functions extremely similarly to Lospec, but displaying less images and no colour palettes. Instead, it has countdowns and a message board for users. What I said for Lospec [minus the palettes] applies here, but with the added bonus of hosting user competitions. This could provide inspiration by forcing a certain image size and palette

[2d-platformer-dw]

Health systems

1 - Health bar: Owlboy

The health system in Owlboy is a healthbar. This means that the amount of content left in the gauge corresponds to the amount of player health remaining. Healthbars don't rely on numerical information being displayed to the player, instead portraying it visually. This allows their size to be far more adjustable than other systems and can be far more visually and aesthetically coherent with the rest of the game.

Also seen in the Borderlands series

2 - Icons: Hollow Knight

The health system in Hollow Knight uses icons. This means that instead of attacks or hazards doing damage as a % of your health, they will take away 1 Icon [or reduce it's size as in Terraria]. This system relies on all hazards and attacks being comparable in their size as they deal the same amount of damage. Icon systems can be far less forgiving than healthbars as damage either takes away a large chunk of your health, represented as an icon, or it doesn't, whereas hazard and attack damage can scale with player advancement in a healthbar system. However, both can be equally stylised and aesthetically coherent.

Also seen in Terraria

3 - Single Hit: Kirby

In Kirby games, the player can't take any damage without dying. This makes for a far more difficult experience than the aforementioned systems, which necessitates use of save/load systems so the player doesn't feel the game is unfair

Also seen in Celeste