{"id":431,"date":"2022-05-18T18:55:15","date_gmt":"2022-05-18T17:55:15","guid":{"rendered":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/?p=431"},"modified":"2022-05-18T19:34:57","modified_gmt":"2022-05-18T18:34:57","slug":"indie-development-diary-week-7","status":"publish","type":"post","link":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/2022\/05\/18\/indie-development-diary-week-7\/","title":{"rendered":"Indie Development Diary Week 7"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Welcome to week 7 of the Indie Development project. Previously, I started developing the game&#8217;s project by creating the landscape using the mechanic made when testing them before development and then creating the collectable that the player can get and the mechanics that the player has to use while playing. After that, the user interface was created to display the current collectable score and how much stamina the player has. And finally, I set up the doors and switches for the player to use with conditions and the output from using the switches.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As the project&#8217;s development went very well last week, it achieved a state where everything was implemented toward what I needed. However, I still needed to work on developing the main menu and end screen so that the game can provide instructions for playing the game to the player and defining an endpoint of when the player has completed the game.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"617\" height=\"469\" src=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/MainMenu.png\" alt=\"\" class=\"wp-image-441\" srcset=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/MainMenu.png 617w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/MainMenu-300x228.png 300w\" sizes=\"auto, (max-width: 617px) 100vw, 617px\" \/><figcaption>Figure 1 (Self Generated.)<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Firstly, I designed the main menu using a widget blueprint, similar to setting the user interface. This time, I had to create 2 different maps specifically to load the main menu (Figure 1) and the end screen blueprint and loading blueprint to display instructions and controls on the main menu by clicking a button. The reason for this is to allow for the cursor to appear on these screens as, during gameplay, the cursor is removed to allow for camera movement.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"677\" height=\"589\" src=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/MainMenuBlueprint.png\" alt=\"\" class=\"wp-image-442\" srcset=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/MainMenuBlueprint.png 677w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/MainMenuBlueprint-300x261.png 300w\" sizes=\"auto, (max-width: 677px) 100vw, 677px\" \/><figcaption>Figure 2 (Self Generated.)<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">With how the blueprints work for the main menu (Figure 2), each button on the screen has an event bound to them called &#8220;On Clicked&#8221; which, when the player clicks on either button, the game will act depending on what it is. For example, the start button will just load the game or clicking the end game will end the game. However, the &#8220;Control&#8221; and &#8220;Instruction&#8221; buttons function by removing the current menu screen, such as the main menu, creating their own blueprint to the map, and then adding to the viewport for the player to see.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"947\" height=\"528\" src=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/ControlMenu.png\" alt=\"\" class=\"wp-image-443\" srcset=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/ControlMenu.png 947w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/ControlMenu-300x167.png 300w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/ControlMenu-768x428.png 768w\" sizes=\"auto, (max-width: 947px) 100vw, 947px\" \/><figcaption>Figure 3 (Self Generated.)<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"952\" height=\"532\" src=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/InstructionMenu.png\" alt=\"\" class=\"wp-image-444\" srcset=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/InstructionMenu.png 952w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/InstructionMenu-300x168.png 300w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/InstructionMenu-768x429.png 768w\" sizes=\"auto, (max-width: 952px) 100vw, 952px\" \/><figcaption>Figure 4 (Self Generated.)<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">To create the control and Instructions menu screens, I used a background image with the control screen (Figure 3) by uploading a texture previously created before development. This was then enlarged by setting an anchor to the full screen so that the image takes up the whole viewport. Anchoring components helped me to ensure that the user interface parts and menu stay in the corner and parts of the screen through where I want them. I used more anchoring toward creating the instruction screen (Figure 4) by setting it to stay in the middle as I wanted to be placed in the middle for easy reading.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"286\" src=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/ControlMenuBlueprint-1024x286.png\" alt=\"\" class=\"wp-image-445\" srcset=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/ControlMenuBlueprint-1024x286.png 1024w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/ControlMenuBlueprint-300x84.png 300w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/ControlMenuBlueprint-768x215.png 768w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/ControlMenuBlueprint.png 1141w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Figure 5 (Self Generated.)<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">With the &#8220;Go Back&#8221; button seen in the previous screenshot, I created a blueprint (Figure 5) that works similar to loading both screen but making it load the main menu back to the map and adding it as the viewport. With this, I was happy with how the main menu screen turned out in the end toward offering the basic information about playing the game. If there were more developing times to spend around this, I would have implemented an options menu to allow changes to the game, such as graphics and accessibility. I see these options as important to allow the player to play the game easier.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"942\" height=\"528\" src=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/EndScreen.png\" alt=\"\" class=\"wp-image-446\" srcset=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/EndScreen.png 942w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/EndScreen-300x168.png 300w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/EndScreen-768x430.png 768w\" sizes=\"auto, (max-width: 942px) 100vw, 942px\" \/><figcaption>Figure 6 (Self Generated.)<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Next, I created the end screen (Figure 6) by having texts that congratulated the player on completing the game and displayed their score during the game. The number score text changes depending on the current score during the game. There is also an &#8220;Exit Game&#8221; button to close the game so that the game can properly close.<\/p>\n\n\n\n<figure class=\"wp-block-image alignwide size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"976\" height=\"545\" src=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/EndScreenBlueprint.png\" alt=\"\" class=\"wp-image-447\" srcset=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/EndScreenBlueprint.png 976w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/EndScreenBlueprint-300x168.png 300w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/EndScreenBlueprint-768x429.png 768w\" sizes=\"auto, (max-width: 976px) 100vw, 976px\" \/><figcaption>Figure 7 (Self Generated.)<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">As mentioned about the number text, the blueprint for the end screen (Figure 7) works by the game casting back to the &#8220;GameInstanceData&#8221; through getting the score value and then setting the text of the score in the end screen based on the game score. I did as I wanted to experiment with giving results back from the game to menu screens and also allowing me to try out data carry over to other maps like the end screen in the game. From this, I was happy with how the end screen turned out; I did think originally about adding a reset button to the game for players to reset the game without closing it. However, it would require me to work out the blueprints around how I could reset all the data values used in the game and when to reset them. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As the game was finished with its development at this point, I looked at polishing the visual of the game by adding lighting to objects and a fog effect to have a sandstorm effect of the world. I first looked at adding lighting to the collectables and the switches to help guide the player toward important objects for them to collect and use. The coins and switches were done by using point light around the faces of the object. Lighting was also done to make the treasure items stand out as valuable items by making the lights in their room have a gold colour. To make the room cover lots of lighting, I had to use a spotlight that was aimed from above in the middle to help cover the entire room. Showcases of the lights can be seen below.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"545\" height=\"521\" src=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/CoinLights.png\" alt=\"\" class=\"wp-image-450\" srcset=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/CoinLights.png 545w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/CoinLights-300x287.png 300w\" sizes=\"auto, (max-width: 545px) 100vw, 545px\" \/><figcaption>Figure 8 (Self Generated.)<\/figcaption><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"386\" height=\"431\" src=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/SwitchLight.png\" alt=\"\" class=\"wp-image-451\" srcset=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/SwitchLight.png 386w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/SwitchLight-269x300.png 269w\" sizes=\"auto, (max-width: 386px) 100vw, 386px\" \/><figcaption>Figure 9 (Self Generated.)<\/figcaption><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"455\" src=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/TreasureLight-1024x455.png\" alt=\"\" class=\"wp-image-452\" srcset=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/TreasureLight-1024x455.png 1024w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/TreasureLight-300x133.png 300w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/TreasureLight-768x342.png 768w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/TreasureLight.png 1187w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Figure 10 (Self Generated.)<\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Lastly, I look into implementing a sandstorm effect to help bring the desert feeling around the world. Previously, the visual effect of the world did not feel like a desert and to be able to get the effect; I had a type of fog effect for it.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"488\" src=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/FogEffect-1024x488.png\" alt=\"\" class=\"wp-image-453\" srcset=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/FogEffect-1024x488.png 1024w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/FogEffect-300x143.png 300w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/FogEffect-768x366.png 768w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/05\/FogEffect.png 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Figure 11 (Self Generated.)<\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">The fog effect used here (Figure 11) is an Exponential Height Fog which was used to produce fog from height. To get the fog to cover the area, I had to move the fog high enough to where it could cover the whole ground for the player to explore. After that, I adjust some of the detail settings with the fog to bring some draw distance and also the colour. I was happy enough with the results that it achieved what I wanted. It could be improved more by having particles that generate sand dust on the screen to help create a better-looking fog effect.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Overall I was happy with the entire project of the game with how it looks and how well the mechanic turned out for the gameplay. If I had further development time for the game, I would like to explore around using animation as; currently, the player animation is limited to the game through visual movement but does not affect gameplay. However, this would require me to research more into the animation blueprints and understand the implementation behind it to be able to get them working.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Welcome to week 7 of the Indie Development project. Previously, I started developing the game&#8217;s project by creating the landscape using the mechanic made when testing them before development and then creating the collectable that the player can get and the mechanics that the player has to use while playing. After that, the user interface&hellip; <a class=\"more-link\" href=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/2022\/05\/18\/indie-development-diary-week-7\/\">Continue reading <span class=\"screen-reader-text\">Indie Development Diary Week 7<\/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-431","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\/431","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=431"}],"version-history":[{"count":3,"href":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-json\/wp\/v2\/posts\/431\/revisions"}],"predecessor-version":[{"id":454,"href":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-json\/wp\/v2\/posts\/431\/revisions\/454"}],"wp:attachment":[{"href":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=431"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=431"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}