km-independent-project

[km-independent-project]

City setting and inspirations

Katana Zero

Style: Sports a neon-drenched pixel art style with dynamic lighting and relaxed rain effects. Why it works: It captures the gritty, filled with debauchery atmosphere of urban nightlife with its vibrant colors and smooth animations that only highlight the immoral nature of the night time in the city. As our character also does immoral things we could say that the player needs to connect with the story to fully immerse themselves into the game.

Reference: https://moewalls.com/pixel-art/city-at-night-katana-zero-pixel-live-wallpaper

The Last Night

Style: Cinematic pixel art style with with a rich blend of 2D and 3D elements, showcasing a futuristic urban city. Why it works: Offers a cramped, immersive environment in a bustling city with beautiful dynamic lighting, flashing lights and depth. There is a noticeable emphasis on lighting effects such as ambient occlusion and

Reference: https://store.steampowered.com/app/612400/The_Last_Night/

Night in the Woods

Style: Stylized, minimalist and cartoonish 2D art with a main focus on small-town settings under the night sky and bright sunsets, evoking nostalgia in its players. Why it works: Conveys a sense of nostalgia and introspection through its use of color and lighting, as well as its concepts. This is also helped by the story involving a feline character going back to their hometown. The game also uses colors with naming of characters and use of gothic prose.

Reference: https://youtu.be/kdUew1TIQU8

https://www.wired.com/2017/03/night-in-the-woods-malaise

Tokyo 42

Style: Isometric pixel art with vibrant colors and intricate, arguably futuristic city designs in a sci-fi setting it is also quite simple with the design and colors on the sides of the buildings, which helps the player to focus on the well crafted, visually appealing details on the top of the buildings and where it is actually walkable. Naturally however, in this Tokyo areas where you can walk will always have a nice design which its critics have praised. Why it works: Presents a detailed and lively cityscape with a unique perspective that allows the player to focus on the environment in the city as they go to their objective.

Reference: https://arstechnica.com/gaming/2017/05/tokyo-42-review/

Valenberg's Pixel Art

Style: High-detail pixel art animations and drawings inspired by cyberpunk aesthetics with a focus on neon coloring, flashing lights and constant noise with occasional unique drawings and mystery. Why it works: Captures the essence of futuristic and modern city life at night with dynamic scenes and lighting with undertones of depression, dystopia and rapid progression that evokes feelings such as sadness and despair that just as quickly as they come, fleet.

Reference: Valenberg https://www.deviantart.com/valenberg/gallery/48386669/featured

Genesis Noir

Style: Monochromatic art with abstract representations of urban environments. Unique story and gameplay assisting its unique art style. Why it works: Blends noir themes with cosmic elements to create a surreal cityscape and constant edge of your seat experience as well as keeping a constant sense of mystery.

Reference: https://storiesatworldsend.com/genesis-noir

Signalis

Style: Retro and anime inspired pixel art with a focus on atmospheric environments. Contains detailed animations and effects are included such as electrical distortion which reflect the character being a robot. Why it works: The game depicts a dystopian, strange setting with moody, dark lighting featuring colors such as yellow for caution, danger and green for elements such as disease and unhealthiness. It has detailed interiors and a visually appealing, realistic shadow system.

Reference: https://youtu.be/xZcMzpVKkLA

Whisper of the Heart (Studio Ghibli)

Style: Hand-drawn animation capturing the serenity of suburban Tokyo at night of suburban Tokyo both at night and day. Why it works: It offers a realistic yet romanticized view of modern city life after dark which holds up even today in evoking emotions such as nostalgia in the watcher.

Reference: https://japancultureguide.com/spots/207

Night City Pixel Art Collections

Style: Various artists' interpretations of nighttime cityscapes in pixel art. A mix of neon, realistic and minimalistic portrayals which allow for creativity to ensue and ideas to be created. Why it works: Provides a wide range of styles and moods for inspiration which can help the watcher in creating a background for a 2D pixel art drawing, maybe even a game.

Reference: https://www.pinterest.com/ideas/night-city-pixel-art/918608556284

[km-independent-project]

Visual Novel/Interactive Fiction

● View: Static scenes with text and portraits ● Features: Story-heavy, dialogue choices, branching paths

Ace Attorney

Game about a rookie attorney. It is heavily focused on the story with impactful decisions scattered throughout that the player can make. This game has a Japanese art style which caters to a large amount of people.

Doki Doki Literature Club

This is another visual novel game with a Japanese art style with a heavy focus on story. It is actually a psychological horror which becomes very noticeable when you play through it yourself. Decisions can lead to extreme outcomes, with the theme suddenly becoming dark and surprising the watcher.

[km-independent-project]

Platformers

Differences between old school platformers and platformers of today include art style, hardware limitations meant games primarily had pixel graphics as opposed to today where platformers can be realistic in graphics. Generally, mechanics of typical platformers might not have changed too much, however in modern times it would be natural to assume that visual effects in recent games will be vastly improved in quantity and quality due to improved processing power of modern machines.

[km-independent-project]

Roguelike/Roguelite

● View: Top-down or side-scrolling ● Features: Procedural levels, permadeath, replayability

Dead Cells

This video talks about dead cells, which features a permanent upgrade system which means you don't lose all of your progress when you die and each time you respawn the game becomes slightly easier as a result.

Dead Cells has a pixel side on art style which relates to my game, although my game is an endless runner, dead cells is a roguelike metroidvania game.

Spelunky

How (and Why) Spelunky Makes its Own Levels

Spelunky is a game with procedurally generated levels which keep it challenging the player with each attempt, but it also manages to keep each playthrough fair and fun. A book made by the author Derek Yu tells how he made a perfect balance between authored and randomly generated content from an algorithm.

The levels are made up of 16 rooms in a 4x4 grid. First step to making the level in the script is picking a random room from the top row and makes that the entrance. Then it randomly chooses a room to the left, right or bottom of it. This process repeats from room to room. If it hits the edge, then it will go down. When it reaches the bottom, if the algorithm decides to go down again, then an exit will be created. The rooms that have not been selected on this main path will either be blocked off or have an entrance. Then, each room is given a random template from the many which Derek Yu crafted. These templates however, are not set in stone and have parts which are randomly generated that make it appear unique. After this, a script checks every tile and a dice is rolled to see if a monster, treasure or random object should be placed. This placement is not fully random however, since places with walls are more likely to have treasure and enemies won't be in cramped places.

This randomness which players can't consistently predict leads to the player needing to rely on learning the game mechanics ie. how the player moves and playing strategically to not rush into enemy areas/traps.

[km-independent-project]

Isometric games

● View: Angled top-down (3D illusion) ● Features: RPGs, strategy, simulation

Stardew Valley

Stardew Valley featured in GMTK - Has lots of short term goals that keep the player engaged as well as its freedom in building your farm, as well as featuring optimised systems; you start off watering the crops by hand, but then you get to use sprinklers. This game has a pixel art style which is not side on, but top down.

Hades

Hades featured in GMTK - This game includes a progression system where when you die and respawn, you learn about character backstories and get lore in the form of a codex. This means you can progress the game even when you die which helps the player feel less bad about themselves. This game uses a top down pen and ink art style.

This interesting video breaks down and explores the art style of Hades. One of the topic is how shadows are made, the technique used is Hatching which uses perpendicular lines that get closer for darker shadows and further for lighter shadows. Another technique is putting color flecks on the characters which add stylistic value to it and implies the setting of the art. Terminators are also used to show depth.

[km-independent-project]

Creating Pause menu

Create a new action mapping and name it something like PauseGame.

Edit -- Project Settings -- Engine - Input -- Action Mappings

Click the arrow so you can set the keybind you want for the action.

Open your bpthirdpersoncharacter and place the pause game input action node.

Now we want to create a flip flop; this will do A and then B and repeat.

Then after flip flop, we want to create a Set Game Paused.

I will create a user widget for the pause menu.

I created a new horizontal box for quit to desktop and quit to menu.

Make sure this box is set as a variable.

Create a new input action and name it IA_Pause.

Then open your IMC_Default and create a new mapping, then set it to the new IA_Pause you have created.

Open up IA_Pause and add the keys you want to use to pause.

[km-independent-project]

Making mouse cursor disappear when entering game level.

In your main menu widget, on the node that opens the map when you select play, set show mouse cursor like so. Make sure to also get player controller from Player.

Then add a Set Input Mode Game Only; this will stop the cursor from showing when you start.

[km-independent-project]

Top Down

● View: Directly above ● Features: Exploration, combat, puzzles

The Legend of Zelda: A Link to the Past

Enter the Gungeon

Although this is in the top down investigation it has more of an isometric style viewpoint, this tends to be the case on more modern "top" downs as it allows for the level to be more engaging and helps artwork be more visually appealing. a chair top down is not as good to look at as one with a little depth to it.

[km-independent-project]

Side-Scroller / Platformer

● View: Side-on ● Features: Running, jumping, combat, puzzles

This is the most classic game type, when I think of 2D games - this is the type of game that I think of.

Super Mario Bros.

Celeste

Why does it feel so good to play - GMTK

The Run - Around 6 frames to get to full speed and around 3 to stop. This makes Madeline feel human and stops the player from making massive standing jumps instantly but does it just about quick enough to do what the player wants her to do. There is also no run button but Madeline feels swift enough to be fluid and just slow enough to feel controlled.

The Jump - In her jump, Madeline travels up and down very fast with enough hang time so the player can line up their landing. She jumps up to three times her own height. This makes her feel bouncy and animated, but definitely not floaty. She can change direction very quickly. She also has massive amounts of air friction which means she can stop very quickly mid air so the player can easily control their landing.

The Climb - Madeline can snap to a wall and climb up it smoothly, this is controlled by a dynamic stamina system which means you cannot continuously do moves and different types deplete more or less. She can also jump off walls for a springy jump.

The Dash - Madeline can only dash once midair and when she can no longer jump, her hair turns blue. You will have to touch a crystal midair or touch the ground to get a new dash back. Madeline only dashes in one direction at full speed which takes a bit of control away from the player. However, you can cancel the momentum at the start for approximately 0.15 seconds after dashing if you choose, which keeps the player from going straight into spikes.

These three mechanics are the foundation of navigating the game.

Also, the forgiving nature of the game is illustrated in many ways, including how spikes have a small hit box which means you won't die if you hit the very tip of the spikes. If you jump just before touching the ground the game will remember it so you don't need to be frame perfect because if you did have to do that, then the game would get quite frustrating quickly.

When making the game, ideas had to be scrapped because they simply didn't work. Mechanics such as moving blocks and wind may have needed the character movement code to be changed up slightly during development.

Hollow Knight

The world design of Hollow Knight

Hallownest - Hints at other places with things such as signposts that point down. It includes some secret paths and you can be soft locked if you don't have enough cash. You can get lost but usually you will find a way and will as a result have a much better understanding of the level. Or, as Team Cherry said, learning the layout of the kingdom on a much more personal level. The game intentionally blocks off the Forgotten Crossroads to keep the player from using a quick shortcut to the boss and instead makes them go all the way around to get there. But once the gate has been unlocked, the shortcut is permanently available to use.

Bypassing sections by using different tricks - Using the kickback blast of the Vengeful Spirit to propel yourself to areas that normally require the Mothwing Cloak. Using the Crystal Heart to bypass bits that need Isma's Tear. Using the Nail to bounce off background decorations and flying enemies to propel yourself instead of using the Monarch Wings. As Team Cherry said, they knew that players could sequence break with the nail bounce technique, and it was intended to be found and gave them joy and made the players feel empowered. The Hollow Knight community found even more skips than the team intended.

[km-independent-project]

Creating a Main Menu for my game

Create new user widget and drag a canvas panel into it.

Create a Vertical box as a child of canvas panel.

Anchor this box to the middle of the screen

Then create a Button and make it the child of the vertical box.

I will make three buttons; play, settings and quit.

We can use padding to space the buttons out.

Drag text onto each of your boxes and type into them what you want.

Select all your text options from the Hierarchy; we want to change the size and font of the text.

Create a new empty level from content drawer.

Create a new game mode from Blueprint.

In your new level, open the World Settings.

Make your game mode in this level the one you made.

In your blank level, open the level blueprint.

In the event graph, we want to create a new widget from event beginplay, just make this the main menu widget and make sure to add to viewport at the end.

First, we will want to make the Play button open up our main level. To do this, go back to your widget and select the play button. Go to details and make your way to On Clicked and select it.

Create an open level by object reference from On Clicked. This will open the level when you click Play.

[km-independent-project]

Mindmap for the word Horizon

[km-independent-project]

Plan of my game

My game must have a working score and meters travelled system to show the player progress, a death screen, a main menu and also have a UI during gameplay that shows distance travelled.

It should have animations for the player walking and jumping. It also should have working obstacles that the player must dodge to not die.

It could have enemy characters as obstacles that you need to dodge too.

My game won't have lives so if you get hit once then you will be out

[km-independent-project]

Creating obstacles that will go at the player and cause damage

After finding the sprites, I decided to change their looks; I wanted them to appear darker because they seemed too light to work with my game setting and theme I was going for, which is primarily night; dark, low visibility. To do this, I went in photoshop and had to select all the layers seperately to change their 'lightness' by going into Images, Adjustment and Hue/Saturation and lowering the option there.

Before:

After:

Make sure you have your sprites on a spritesheet in photoshop and that the background is transparent. Then import this into Unreal from the content drawer.

Apply 2D paper settings to the spritesheet in Unreal.

Extract the sprites from the same place after this too. In the menu that appears when you do, select Grid and change cell width and height to your sprite pixel size.

[km-independent-project]

Creating obstacles that will go at the player and cause damage: Finding obstacle to use from the internet

I found some sprites from the internet that I decided to use as my obstacles

Credits: 2D asteroid sprite | OpenGameArt.org author: nightzero

[km-independent-project]

Creating Death screen and buttons

Creating a retry button for my death screen.

To create a button you need to create a seperate widget for the button ie. a seperate widget for a retry button.

Firstly, make a new widget and open the Designer section of it up.

Create a new button, and then create a text block.

Now, we need to make the text block a variable, so we can use it in the Event Graph. To do this, select the text block in Hierarchy so you can access its Details.

Then make sure the 'Is Variable' is ticked.

Then, we need to make text display on the button. To do this, you need to create a SetText which will allow text to display onto the button. Text to Display is necessary too because it stores the value you choose to display in the textbox.

To set this value, select Text to Display from Variables.

Then, go to the details tab and find Default Value. From here, you can choose what you want to be displayed in the box.

Now, in the Designer, we want to make the clickable area big enough, so we want to create a new Size Box. To do this, right click on the Button in Hierarchy.

Then, select Wrap With and select Size Box.

Now, select size box in the hierarchy, and go to the Child Layout section in details.

From here, you can change the width and height of the size box; the button.

Select your button from variables; we want to create an event for when the button is clicked. To do this, in your details section, find Events.

Now, select On Clicked and you should see it in your event graph. From here, we want to call our event dispatcher; in my case OnRetrySelected. To do this, drag it out from the Event Dispatchers and onto the event graph. Then select Call.

Now, I went back into my main menu widget and created a horizontal box.

[km-independent-project]

Using a timer instead of event tick

Since event tick was creating performance issues, I decided to make a set timer by event function which doesn't constantly update the distance like event tick, and can instead update it after a set time period of the users choice.

I just connected the two events to a sequence because I thought it would look nicer.

[km-independent-project]

Creating obstacles that spawn

Open content drawer and right click your parenttile. Create a child actor from this actor. Do NOT duplicate the parenttile.

Open this new actor up and go into the viewport. Add a cube and set its collision to OverlapAllDynamic.

Select the cube from components and go to the details panel. Add an on component begin overlap event.