Visual Ideas & Tests

In 2D workshop we learnt how to create 2.5D art. Aka 2D art from the Isometric view to give the impression of 3D.

First we started by using the vector tools in photoshop while using a grid to guide our drawing and were able to create 3D shapes using 2D Vectors, using the lighting of the sounds to give the 3D illusion.

I then used these Vectors and followed the same principles to create these 2.5D game tiles of grass. Again using lighting.

This is compared with the following Dead Cells and Katana Zero:

When it comes to these 2 games, I much prefer the visual design rather than the visual style. As such I also like the level design as they've been made with an action platformer game in mind, adding cover and jumping areas but also keep flat areas with scenic views. An important part that I like is the lighting used in dead cells as it really accentuates the whole look of the game.

Here's a photobash of some concept art that I made by using a level environment from dead cells and characters from castle crashers. The important part of this was that to get the visual style I wanted that leant more towards the same themes of dark souls and bloodborne I had to do a lot of colour shifting into darker and more blue colours, which I liked. Especially with how it contrasted with light blue or red lights.

This is a level from dead cells from its dlc. Which focuses on more darker environments which follows the same visual style and overall "mood" colour and design wise that I would like to follow

Here I've sampled some colours from the level to get a grasp of colours that I could use for my own level and what I would like to do myself for foreground, middleground & background.

I then have played with colours, adding basic exposure and contrast effects first before then shifting the colour. As I originally had a black purple colour theme in mind. Different to the black red and orange of dark souls or black and blue of bloodborne but a clear view. And this reconfirms for me that I want a more purple look.

This is where I took to designing the look and layout of the game.

This is where I decided on the 3 way system of background, middleground and foreground as it works best for side scrolling action platforming type games. Where the character and all gameplay is on the middleground, which may be more than 1 layer, but then you have your background and foreground to create a sense of depth.

Here are my layers for my basic layout of foreground, background and middleground (play area).

I created 2 seperate backgrounds as I wasn't sure when it came to natural light to stick on colour theme and use a purple or go natural and use a yellow.

Also when it comes to actual environments for this sketch I chose a "Pit" like area, as I believe multiple stage areas would work best for as you go deeper into the "AB·yss" or pit. So for the starting areas of the game, it should be generally cave like as you start at the opening on the ABYSS.

Adding a character and colour it would look something like this:

This layered idea was taken as inspiration from "Castle Crashers" as it uses these 3 layers to create depth even tho the movement on the z axis is very limited in the side scroller action game.

Here's some concept art of the location to get a better understanding. The dungeon "AB·yss" is a giant never ending pit of evil. At the edge of a cliff face, surrounded by walls and a city next to it, also a large forest. It's full of layers of all sorts, forests, dungeons, caves and settlements. Meaning that the previous art of a "level" would be a layer inside of the pit. A cave of scaffolding.

This location and environment was heavily inspired by 2 location in the Destiny game series on the moon. 1 is the "pit of heresy", a dungeon full of an evil magic using hivemind race of aliens, full of large architecture and open cave like spaces. The other is the "hellmouth", a large pit that opens up on the face of the moon as like some sort of evil pit, with layers of areas and environments that continually go deeper into dungeons, prisons and even open areas. Full of evil mystery both of them while having large awe inspiring structures and also closer in environments.

I want to make similar environments to these locations in Destiny as although the colours are different, it captures the same mood and feeling. It's just designing similar looking environments but as a 2d platformer.

This leads me into specific level design, rather than overall environment location. As inside the pit, like for my first concept, there will be large open cave areas but also much smaller or still large but more compact more traditional dungeon like areas. More closer to my using of original concept art using a dead cells level.

These level environments would be more traditional and have less foreground material, instead focusing on now having verticality in the level allowing in the end for more play space.

For these inside dungeon like environments, the levels would be built using a series of platforms and backgrounds with also assets for set dressing, e.g barrels, boxes & junk. For this I'd need a background tileset or image + a tileset for the ground and platforms, even if I leave the centre of them black. For the most part it's the same with open environments, it's just using platforms and a foreground and a 2nd background. by 2nd background I mean a layer behind the player character then also the actual background behind.

Something like my previously made tileset would work the stone inner environments.

Then using some photoshop pixelation techniques, although it's not the style of pixel art I want, seeing it in pixels does give a clearer final image.

Here are some close ups for the helmet based off castle crasher character designs, These are actually close ups that would be used for a UI piece but still help on developing the final look for the character as even though the character would be small, the design of the helmet would be most visible. and affect the UI.

Then moving onto Asset ideas.

Then I made some designs for pick ups, different keys to show where they would be used, dark for a gate or door, and gold for a chest.

ENEMY IDEAS: at first I started working on a 'Hound' or dog like enemy, but then after creating my 1st sketch idea of the enemy type, I decided to make varying editions of the enemy as I saw potential in creating varying difficulties of the same enemy type. Changing the design dependent on real life animals and their size.

List of potential features (e.g Interface options, menus and scenes) in my game:

• Start Screen (start, options, quit buttons + name & logo)

• Options screen

• Volume Slider

• Quit button

• Tutorial (tutorial mission or text based tutorial)

• On Screen Controls

• Starting level

• Ammo Counter

• Points / Score

• Win Screen

• Stars ?/3 dependent on points

• final score

• Lose screen

• Retry button to try again during level

• restart button if lose

• Pickups / collectables (coins, non required)

• Enemies

• Obstacles

• Subsequent levels/missions in section (different level design for difficulty)

• new ammo types

• (maybe) pickup ammo to use mid mission.

• Final screen

• Leaderboard + quit or retry

• Pause menu during gameplay

• (maybe, slightly irrelevant due to points system) Timer (per mission + leaderboard)

• Ray cast or some UI to show direction of physics based projectile

• Catapult

• Destructible Enemy base

Entire Game General Flowchart:

(between flowcharts next level can be any amount of levels as its a repeating process for making final level count)

Thumbnail WireFrames for 1st game idea:

To create good UI, these generalized UX design principles should be used:

• Consistence: keep the UI consistent in design for it to feel more intuitive

• Uniqueness: the more unique the UI is in animation, colour, size and position creates a clear visual style and a "hierarchy" of sorts for clear view of the UI over gameplay

• Minimalistic: keep the UI uncluttered for a more user friendly experience and also use icons sparingly as you don't want to clutter the screen and instead should focus on making it intuitive and readable

• Thematics: staying on theme with the UI design helps it feel a lot more natural.

These are some of the UI asset examples I made in Photoshop following these design principles and while using shapes, vectors and the layer style settings.

When making these 2 I quickly learnt that for the UI definitely wanted to include a small sprite of the character along with a health bar and current level. However some things like an ammo counter or a stamina bar I wasn't so sure about. Another factor was the design of the health bar and elements, from typography to colour. When it comes to the levels it's likely I'm going to have some sort of foreground image So maybe contrasting the black of the foreground with a white UI might work (2nd) but also on sections that don't have a foreground or a black one. A UI on the top side of the screen might work better or rather have a dedicated bar/section rather than floating so it would always be visible no matter the background.

Here are some sprite iterations on the helmet as a piece to show the character. One possible thing to do would be to change the image depending on the character's health, so as they take more damage and their health gets lower the close up of the character gets a more damaged and worn look.

Then i moved onto designing a health bar, In this case I thought an actual bar would be better than individual hearts, as it would work better if other bars were implemented.

For example, this stamina bar I made. Again using an icon to show what it is and then actual bar itself.

Here, these are damaged variations where the health and stamina are low so it affects the sprites around it, also showing some colour and the behind of the bars.

When it comes to placement of UI, I was thinking something like this:

However, like I said earlier because of the black on black, the UI would either need some sort of background or to be designed changing the black to white or something lighter.

So a Fix would look like this. Having a background.

and although the sizing might not be perfect, the final UI in game would look like so:

Very Basics: Load in, clear and figure out the path to the exit, go off and find the key and pick up the key, come back to exit and travel to next level without dying from traps, enemies and falls. Do this in fastest time, option of finding or picking up as much money to get a higher score at end of level.

Emphasis on movement in 2D:

WASD - walk

Shift + WASD - run

C - crouch

Shift + WASD + C - Slide

Left Click - light attack

Shift + Left Click - heavy attack

Right Click - Block(held)/Parry(tap)

Space - Jump

E - Interact

(Numbers) 1-9~ = weapon swap (weapons and tools, place traps, shoot arrows, sword, axe, mace etc -> different uses & effects)

Mouse movement - target/aim reticle direction

For better flow, allow player to interrupt own actions, movement. Cancelling moves, adapt to read enemies or environments

Allow movement in the air to have better specifics when jumping and platforming: feels easier to control.

Weapons affect player speed - health too?

Movement and input direction separate - like 2 joysticks, mouse + wasd separate

-Focus on player adaptability-

Goal: get to end of level/exit and escape

Achievement: low time track and high score at end of level

How to reach goal: get through or around enemies and environments - dungeon crawling platforming & combat - stealth

Obstacles from goal: Traps (pressure plate), platforming sections (spikes), enemies (roam, view cone, distract) - hardcore, easy to die

Needed for goal: key-to open exit, not be dead,

Optionals: choose how to approach areas/levels - stealth, combat, platform around, pick up money/score, pick up consumables/ other weapons/tools)

Specific Weapons/Tools:

sword+shield (default): block arrows, average damage against most opponents, high def, weak vs armoured & large, average speed

Large sword: AOE, high damage, slow speed (not best vs fast, but aoe so maybe), slow attack, strong vs large, weak vs armoured, low def,

Mace/flail: longer range, high damage vs armoured, avg vs all else, avg speed, slight lower def

Rapier: high speed, short range, very directional, low def, cant block, avg dmg, high dmg vs small

Bombs: thrown consumable, high aoe, high dmg vs all

Bow & arrows: directional fire, ranged, charged shot, avg dmg, weak vs armoured, Projectiles cost ammo, avg def

Whistle: lure enemies in your direction, enemies move in your direction, doesnt work on all enemies

Caltrops: useable item to make enemies move slower, consumable

Unarmed, Cloak: Highest speed, lowest defence, no attack, slight increased jump, harder to spot by enemies

First, the overall game design of a dungeon crawler and how the game actually goes from loading and playing.

• forgot to add the "restart level" function to pause menu

Then looking at basic player controls:

For standard movement:

float speed

On key down/pressed

+ x transform * direction (key) * speed

physics based?

"rigidbody2D.moveposition"

// affect the rigidbody rather than transform.

The actual individual Level flow:

When it first came to thinking about sound design, I took a look at the types and variabilities of sound in games. From types to styles, I created these mind maps to show areas of importance and the connectivity of sound to game. These weren't looking at specifics for my game but rather overall design when it comes to games and what sort of cause & effect system would need to work for a sound to work in a game.

This was where are how sounds could be found in a Game. Before modern hardware, games were forced to limit not only their colours but also sound, this is where you get 8bit songs as they are 8bit -> 64bits of information meaning less information, like sound information (amount + complexity) compared to modern 64bit -> 4096bits.

This video goes over the intricacies of sound design:

The main issue however was the colour, or lack off colour correction as from researching the colour theme of my game's style from other game research I knew these plain textures wouldn't work so well. However using in game lighting systems can be used as a work around from the base colours rather than recolouring the assets themselves.

Colours selected from "Dead cells" artwork:

Light affect on textures example: ("dead cells")

The main issue I felt like I was going to face when it came to making the game is the beginning menu as not only was it the starting place of the game so it was what needed to be worked on first but also I had no experience in creating a menu before so I did some prior research on top of my small understanding of how to go about doing it. I had a general consensus on how to go about creating the menu as I had some experience in working with SceneManagement in Unity to restart a scene and some work with a canvas/UI to have an interactable button that achieved the desired effects. Although I didn't follow this tutorial it did help cement my knowledge on specifics like code & scene management when it came to building the starts of a menu.

So this was the beginning Title screen I came up with. Using my Title / Title Screen (concept) Art to make a background with buttons for starting and quitting the game. This was all made on a Canvas and used a single script on the camera for controlling the actions of buttons. (I also used Unity's anchor feature to make sure the buttons on the canvas would always follow the aspect ratio of the screen and not move so much).

The first sort of asset testing I did was creating fake in game Hud with a mix of themes and detail in a fake game environment to see what sort of direction I wanted to take the project. This was looking at the complexity (style) and location of UI but also focusing on things like camera. What looks more like a game and what looks like a playable game, is the camera position comfortable. How is it in comparison to player size etc. To get a feel of what the final product might look like and to build around that "look".

This was essentially testing whether or not my ideas or created assets could work inside of a game like environment.

Then I started working a bit into Unity looking at a Main Menu / Title Screen.

I decided on using this font I liked with the concept art background as a 'look over' the environment before entering. Which is something used in other video game Title Screens, mainly to show scale and bestow a sense of awe upon the player before letting them dive into it all and the world.

E.x: "Enter The Gungeon" title screen

I tried these harsh edged designs as they were originally what I thought would work and be bold but I didn't really like any of them. However I liked the design of the 'S'-es especially with them tilted to form a prism. I then made a start on more rounded designs:

Then adding some details and changing sizing, playing around with the design.

Taking elements from previous designs ive liked:

To then create a design I liked:

To work in a starter screen like this: