{"id":164,"date":"2022-01-07T14:54:33","date_gmt":"2022-01-07T14:54:33","guid":{"rendered":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/?p=164"},"modified":"2022-05-15T20:20:44","modified_gmt":"2022-05-15T19:20:44","slug":"2d-format-games-development-diary-week-1","status":"publish","type":"post","link":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/2022\/01\/07\/2d-format-games-development-diary-week-1\/","title":{"rendered":"2D Format Games Development Diary Week 1"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Welcome to Week 1 on a new entire project of games development. My name is Steven Raven. I will discuss and analyse the many topics introduced to me throughout each week by showcasing some exciting techniques and knowledge I picked up. Then I followed by how I could use each knowledge and technique I learned later in game development and finally plan toward learning next.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Before discussing the topics introduced for this week, I would like to outline the purpose of the new project. The project consists of four different projects throughout the coming weeks. The first is working on slices of 2D format games by exploring to create complex mechanics to improve technique and then providing a guide to developing that slice of the game. The second project is to build awareness of the industry on entry-level jobs and roles and create a career plan to get into the industry. The third project discusses a chosen topic by writing and researching that area. Lastly, with all the previous projects completed, the final project will be to develop a single screen prototype using industry-standard game Engine Unreal that teaches simple mechanics and brings a sense of mastery to the game.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">My first project (Figure 1) is with 2D game format is first creating a top-down game where the player controls a tank that can move and turn in any direction and shoot bullets. The bullets that the player can shoot can destroy enemy tanks that can fight back and damage walls that eventually get destroyed to allow for that section to be moved and shoot pass by. The game slice will have a goal where the player will need to destroy all the enemy tanks on the level and move on to the next one. However, there are some challenges around the game. The player will need to think carefully about approaching the enemies since the game will have different tanks with different strategies for dealing with each enemy. For example, a boss tank would require more skills toward moving around to avoid all damage and eventually beat them.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/01\/Capture.png\" alt=\"\" class=\"wp-image-172\" width=\"747\" height=\"567\" srcset=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/01\/Capture.png 788w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/01\/Capture-300x228.png 300w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/01\/Capture-768x584.png 768w\" sizes=\"auto, (max-width: 747px) 100vw, 747px\" \/><figcaption>Figure 1 (Self Generated.)<\/figcaption><\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">The primary approach for this week for the slice was to focus on creating the UI (User Interface), mainly after having completed the base game with the mechanic except for the shooting due to needing to think on ideas on what information to give to the player. The UI design (Figure 1) will first use a non-diegetic design approach to the game because the gameplay itself does not bring itself an immersive experience to the player but help to bring everything that can be easy to read. For example, the UI feature a simple text that tells how many enemies remain on the level, the health bar is represented by a green tank that would show the amount of damage taken and a fuel bar that decreases over time. One goal that I want to set with this project for a week is to make a UI of the fuel and health bars animated to a specific frame based on how much health and fuel the player has, as this would be a good challenge to explore. While I had experience making health bar animated before, I have never made this approach through Phaser; doing so would benefit me toward UI designing and improve my skill with using Phaser.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">With the future of the project, another goal is the get the fuel mechanic working with the player tank, where the idea behind it is that when the player has entirely run out of fuel, their movement speed is reduced by a lot to make the dodging enemy bullet harder in the game. This work by checking (Figure 2) how much fuel the player has and if their fuel reaches &#8220;0&#8221; of the &#8220;currentFuel&#8221;, the player speed is changed. Initially, the idea was going to be another lose condition, but this idea felt too punishing and made the player worry more about another resource while playing the game.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/01\/FuelMovementCondition.png\" alt=\"\" class=\"wp-image-174\" width=\"582\" height=\"603\" srcset=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/01\/FuelMovementCondition.png 503w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/01\/FuelMovementCondition-289x300.png 289w\" sizes=\"auto, (max-width: 582px) 100vw, 582px\" \/><figcaption>Figure 2 (Self Generated.)<\/figcaption><\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Finally, one more thing to discuss is how the enemy tank counter works with the game (Figure 1). The logic around the counter (Figure 3) is that whenever a tank is spawned through the for loop of the script, the &#8220;enemyTankRemain&#8221; will increase and later decreases upon being destroyed, which will be added later. This approach works very well since the value behind &#8220;enemyTankRemain&#8221; will never need to be changed to reflect the current amount when adding some spawn. The loop will automatically apply new spawn, and the value can be set as &#8220;0&#8221; by default.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/01\/TanksCounter.png\" alt=\"\" class=\"wp-image-175\" width=\"662\" height=\"252\" srcset=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/01\/TanksCounter.png 642w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/01\/TanksCounter-300x114.png 300w\" sizes=\"auto, (max-width: 662px) 100vw, 662px\" \/><figcaption>Figure 3 (Self Generated.)<\/figcaption><\/figure><\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Welcome to Week 1 on a new entire project of games development. My name is Steven Raven. I will discuss and analyse the many topics introduced to me throughout each week by showcasing some exciting techniques and knowledge I picked up. Then I followed by how I could use each knowledge and technique I learned&hellip; <a class=\"more-link\" href=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/2022\/01\/07\/2d-format-games-development-diary-week-1\/\">Continue reading <span class=\"screen-reader-text\">2D Format Games Development Diary Week 1<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-164","post","type-post","status-publish","format-standard","hentry","category-uncategorised","entry"],"_links":{"self":[{"href":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-json\/wp\/v2\/posts\/164","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=164"}],"version-history":[{"count":4,"href":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-json\/wp\/v2\/posts\/164\/revisions"}],"predecessor-version":[{"id":176,"href":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-json\/wp\/v2\/posts\/164\/revisions\/176"}],"wp:attachment":[{"href":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=164"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=164"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}