maarcade

[maarcade]

Arcade video

[maarcade]

Game UI research and design.

The first UI I am researching is casltevania

This is a fairly simple UI with a pixelated font a few bars for health and stamina. This is a very simple UI that has some pixel made features that wrap around the bars. I think it looks clean and I may implement the less is more type UI.

This next one is from final fantasy.

This is a great UI that conveys the relevant information in a simple and understandable way. It has the stats for the players laid out on the right and all the things you can do in the middle. Then the name of the opponent on the left. I like this type of UI where there is no unnecessary information. I will try to add this style to my game.

This game is Kingdom hearts Re:coded

This is quite a full on UI which is a stark contrast to the last game. It has in the bottom right, the player, their level and their health. On the left it has their commands/ abilities. Then covering the bottom of the whole screen is a map of where you are. I think with all of the UI covering everything it creates a bit of an overloaded screen. I think the map should take the screen and pause the game in the background

[maarcade]

Controller compatibility

I need to add in a controller now so it works with the arcade machine. For my menus I have now made any key for most menus to use so that the player just has to press anything and it will work. For the movement when I pugged the controller in the movement worked as well as the jump.

[maarcade]

Quit game

I need a way for my players to quit the game to do this I will add a retriggerable delay for 30 seconds which is attached to quit game and any key re triggers the delay.

This works and means there is a way to close the game. I have to add this to every screen I made so that if a player walks away from the game it re sets.

[maarcade]

credits

I then added a quick credits scene for my game that is incorporated into the win screen.

[maarcade]

Adding music

I want a fast track that keeps up with the speed of my game. From the audios we have been given I chose Oscar Cartwright's gameaudiio.wav to be my main track.

To add this to my game I downloaded it then imported it to my content browser. Finally I dragged it to my game instance. This worked and played music throughout the game but it still played when the character dies.

I will now add a separate audio for the death.

For this I listened to a few audios and decided to go with Polly Robinson's failure track.

To add this to my game I went to my death screen and added the node play sound 2d and selected the imported track. I then hooked this up to an event tick.

This all worked almost perfectly but the audio was way too loud. to turn it down I needed to half the volume.

Lastly I want to add a jumping sound. To do this I will use the animations I made in the state machine. I will cast play sound 2d from flipbook.

Then I will add in jump.mp3 by Philip Lawicki

This now plays jump audio when jumping.

I now very lastly want to add a win music. We do this by doing the same as the death screen. The music I chose was victory track ray by Polly Robertson

[maarcade]

Making a banner

For my banner Artwork I want to have a fire like background with the name emerging from the flames.

I will start by making the name with the style I want.

Next I want to put an outline like a ring going around this.

This is the ring I made it is very simple but should separate between the flames and the name.

Then I filled this out with grey I now want to do a small trim around the border.

After adding colors I want to make it so it is like a name burning through paper.

I then added some lighting effects like the light gets dimmer further away from the flame.

I was really inspired by tape film burning up.

I like how it creates holes and I like how they aren't uniform.

[maarcade]

Creating a win condition

I now need to create a win condition. A win condition is pretty important for a game as it gives the player something to aim for and marks the end of a game

to make a win condition I was thinking of making a hidden trip at the end which takes the player to a win widget.

To do this I will start by adding an actor in and then putting a cube to the viewport. Then make sure the actor is hidden in game.

then I will make a widget like I have done for death. I will do this in exactly the same way

First I made a widget and added a canvas

Then added text skew and shadow.

Then I added a button with some text which will take the player to play again.

Then add the widget to the actor I made earlier casted from actor begin overlap. and hopefully it should now work.

It didn't but with adding it to viewport might help.

[maarcade]

Fixing the tile set and map.

When my player walks ho goes through the buildings and there is no collisions. I checked all of my settings and there should be collisions.

After reading through error messages I have found that there are collisions on but they are passable. I have now turned that feature off and it has wiped all of my custom collisions.

I will now have to re add the collisions

After making all of the collisions for my whole sprite sheet It now should work.

After testing the game I now run behind and in front of the tiles. To solve this I have re orientated all of the tile map and player so it now all lines up.

Everything now works.

[maarcade]

Making a state machine.

I need to make a state machine to make it so my animations fire off when they are supposed to.

I have already made on of these before so this should be relatively easy to make.

First start from the player character blueprints.

From an event tick cast to a branch with the condition being is falling node with the target of that being character movement.

From the branch true set flipbook and add your animation for jumping. From the false branch go to another branch.

This will have the condition of != and then get velocity, this means if the velocity is equal or less than 0 the branch is true. From the true branch add the walking animation. From the false add the idle animation.

[maarcade]

End Of the project.

This project was a lot of work and more effort than I anticipated.

I have made a lot in doing most of my pixel art and animations. I feel I could have made some variations of things but it was a solid set of items that could be used in a lot of ways.

While I have pretty much completed my game I haven't yet added a state machine to add my animations and I haven't added a win state or start screen.

I think I have been unfortunate with illness over the winter period with having long flu. but never the less I feel I could have planned better in choosing the most important things first. I should have made a base game and made all of the mechanics work first before I started doing lots of artwork. Another thing I did poorly was anticipation of how long artwork would take. During a session I would start a piece of art change it 100 times then do the same thing with animation.

One thing I am happy with is how I did most of the coding side myself and innovating certain systems like the fire wall system.

Some things came out slightly janky but it ultimately worked.

I feel that with a week more I could have finished the rest of the base systems and ironed out the kinks in the game.

[maarcade]

Making a tile sheet and map.

First I had to put all of my sprites on a new sheet then import it to ue.

Then create a tile set with them by applying 2d paper settings then right clicking and pressing create tile set

Then I start a tile map and import my tile set. then I simply paint what I want in.

One problem I have is the scale of all of the things. Like how the truck is bigger than the house.

After having to change and change the design of things I finally got something that I think looks good.

With the scale of everything I had to change about 5 times to make look good.

[maarcade]

Creating UI

I need to create a start and death screen.

For my death screen I think I will do a simple restart and exit button.

I like the idea of games like dragon spirit where it has a scoreboard at the end but I don't think it is realistic for the time period I have left.

I think I want my game to be like Pac man Jr in the video above. I like how the game over appears on screen but I want to add an exit and restart button.

To do this I will create a new widget when this has been opened add a new canvas and any artwork or text needed.

I first added my death message. Changed the color, skew and shadows.

I chose the colors to represent the fiery end that the player meets.

After coming back to this I found that I wanted a black background so I will add an image first.

I then cleared what I did and added a canvas in. Then I dragged an image in. and made sure it was anchored to the middle and the z order is -1 so the background loads behind the screen. Then I changed the color to black.

I then set the size to 3840 by 2160 so regardless of screen size It will be black.

Next I dragged text in as a child of the canvas.

Then set it to be in the middle of the screen and anchor it. Then type in text and color it. Create whatever you want.

The next thing I have done is make a small animation.

I first added an animation then color and opacity. I then add frames with varying levels of black so it fades to black after death.

I will also add buttons for restart.

For this just on clicked open level.

Now I have saved it and will go to third person character.

From the code I made earlier where it determines health. From the true part of the branch I added create widget then add to viewport.

This now whenever you die takes you to the death screen.

This now works in game. To enhance it I want to add actual art for the background.

Now I need to make a Start screen. For this I want to make a mural piece. I found a particular image while playing a game a while ago I cant find the exact image but it was a pixelmon banner originally.

I have the image on my phone.

It is in a forest that is on fire with a few characters in the foreground. I think this could make a great start screen for my game.

I will first make a basic version of what I want in photoshop.

I will make this in 1920 by 1280 to fit the monitor.

I have made a warm sunrise now I will try to stamp in trees.

[maarcade]

Making the fire wall.

I need to add in my fire wall which is the motivator for the player to run.

I want the fire wall to chase and try to catch up to the player.

If it then touches the player the player will then die.

To implement this I feel I could do it a couple of ways, these include making an enemy and pathing it or making a moving platform with no collisions that would deal damage.

After doing some research and playing around with nodes, the easiest way to make the fire wall would be an enemy that patrols.

To do this I will add my animation and create a flipbook.

I then changed the fps down to 5 so the animation was slower

Next we need to create a new blueprint class and select Character.

Call this whatever you want.

Then add a flipbook into it and rotate it 90 degrees.

Next create another blueprint, this time just an actor and call it patrol point.

Then add a sphere to the viewport of it. Make sure to scale it down. Then set collision to overlap all dynamic and check is hidden in game.

Then go to the event graph for the enemy and then make a boolean variable called move right and set default to true.

then add this code which casts to a patrol point which then tells it to move right.

Then we need to make this bit of code work so we need to make a float variable called movement speed, set the value to 10 and make it visible.

Now add 2 patrol points

In game this now works great and with some tweaks it will work well.

Now I need to make the damage feature.

First I added a box collision and made sure to make it massive so it spans the whole fire wall and all behind it. I had to do this as my fire wall did not pass objects, even on no collision. Therefore I had to make the wall further out then the character but with the collision the effects still reach him.

Next I need to make it deal damage to do this, in the enemy event graph. Add an event hit casted to apply damage.

This then is made to have 100 damage which kills the player.

[maarcade]

Creating a scrolling background.

I think I now have enough main obstacles for a small game. If need be I can alter colors of cars and things.

I now need to look for examples of backgrounds in games already.

I really like the look of this as I think it looks great and could be adapted for my needs. I could tint the colors to be of a more red hue.

I could also make it look like the buildings are on fire.

To make this I will start up a new photoshop document.

First I accidentally made it in the wrong aspect ratio and it way way too big.

While it looked good it will not work.

I then recreated this at the right scale.

I will make the buildings an overlay so then I can mix and match them so the background is not constantly the same.

[maarcade]

Creating scenery.

For my game I have now made cars, houses and a way to get higher up. While sure I could use those things and change the colours around to pad out my game, I feel this will become boring and repetitive to the player and me. Therefor I have decided to make other things for my game. Such as fences, trees and benches.

I feel it will add just that bit of diversity to the players experience. This also better represents what you would find in places affected by wildfires, such as LA.

First I will make a standard back garden fence. The shorter kind you get in the US, wood panelled and pointed at the top.

I really like the idea of making multiple types of fence. For my first one I think I will make a blend of the first and the last one.

I will start with a blank canvas and build an outline.

In game it looks great and will now let me add gardens and parks.

Creating a large dumpster.

I want to make this kind of design.

I think this is such a city type bin that is very recognizable and makes for something that is a good thing to jump over.

This will be the basic outline for my bin.

Next is to add color and definition.

In game I think it looks good but I may make other variations if I have time.

Next I will make a park bench.

I want to just make the classic wooden park bench.

I will start like always by making an outline.

While I don't like the outline hopefully with some clever shading I can fix it.

This one I am not so happy with but I will see what it looks like in game.

In game in looks ok but not how I intended. I think because I haven't got much time left and it is not a core aspect of the game i will leave it.

Next I want to make a tree.

I will start by making an outline.

This will be a rough outline but I will keep the general shape.

After coloring and shading It now looks like this. I really like it. With the previous branches in the tree I couldn't find a convincing way to keep them in.

[maarcade]

Making a wat for the player to traverse up and down.

I need a way for the player to get up and down the houses. This needs to be something that could be found in a city or town. I was thinking some planks or I could do a truck hauling planks.

I want my planks to be angled up, something like the second image. I also know I want to have a truck as a big lorry probably would be too tall to start with. I am going to start with making a 4x4 truck.

I will start a new photoshop canvas and make an outline. Then I will fill it with color and contour the truck.

I will lastly add the wood on the back and make a custom collision.

In game it looks great, Fits well with other things and is useable.