{"id":201,"date":"2022-01-25T21:50:26","date_gmt":"2022-01-25T21:50:26","guid":{"rendered":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/?p=201"},"modified":"2022-01-26T20:45:16","modified_gmt":"2022-01-26T20:45:16","slug":"2d-format-games-development-diary-week-3","status":"publish","type":"post","link":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/2022\/01\/25\/2d-format-games-development-diary-week-3\/","title":{"rendered":"2D Format Games Development Diary Week 3"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Welcome to Week 3 on the 2D format games project. Previously, I finished a top-down project where the player controls a tank and has to destroy the different enemy tanks on the map while conserving as much fuel as possible to complete the game. This week, a new project has started by developing Pathfinding.<\/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\">Pathfinding plots a path of two points within an application. A pathfinder is done to determine the shortest route for both points to meet. For example (Figure 1), think of where you start on the map and see the goal. While the destination can sometimes be simple to reach, you may have an obstacle, such as a wall blocking the path straight to the goal. Pathfinding can then map out a better way if a problem arises while reaching the destination. The applications for Pathfinding is made through a set of Algorithms that works with graphs that features sets of vertices where edges are connected to them. For example, a tiled map is considered a graph because it features vertices and edges in the game world. While the Algorithm can help with planning out the path, it does come at the cost of it being slower due to planning and risks of becoming stuck for the points to meet up. But, this approach is still helpful since the path results will become more precise, and the overall movement speed will be faster. While we have the common sense of the distances between the two points, the directions to take and the symmetry with grids, using an Algorithm will help to allow us to take advantage of the game map.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center 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\/concave1-1.png\" alt=\"\" class=\"wp-image-205\" width=\"433\" height=\"339\" srcset=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/01\/concave1-1.png 433w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/01\/concave1-1-300x235.png 300w\" sizes=\"auto, (max-width: 433px) 100vw, 433px\" \/><figcaption>Figure 1 (Patel, A.)<\/figcaption><\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Throughout this Pathfinding Project, I will use the A* Algorithm approach. This features a flexible way for a game object to planning out a path and can be used in various ways. To explain this Algorithm more, A* is used to find the shortest path for a point in the game world. This works by using different terminology around the algorithm, combining information from Dijkstra Algorithm (which uses vertices close from the start) and Greedy Best-First-Search (which uses vertices close from the goal). The first thing we have in the Algorithm is g(n), which represent the exact cost of a path from the starting point of any vertex of the n. Next, we have h(n), which estimates the vertex&#8217;s estimated cost to the goal. A diagram is presented below (Figure 2) to show how this works, where the yellow areas are presented as h of the vertices far from the goal. The teal being g to represents the vertices being far from the start. We can use A* to help balance out the planning of reaching the destination with moving the point across in the most optimal path to take.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"557\" height=\"404\" src=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/01\/AStar.png\" alt=\"\" class=\"wp-image-214\" srcset=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/01\/AStar.png 557w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/01\/AStar-300x218.png 300w\" sizes=\"auto, (max-width: 557px) 100vw, 557px\" \/><figcaption>Figure 2 (Patel, A.)<\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Understanding how Pathfinding works can create a more-complex movement for game objects to move around the game world. For example, the goal of this project is to have an enemy always follow the player based on their last destination through using a precise movement to reach their goal. First, I create the tilemap and place the enemy spawn point in the centre of the map grid. This will help provide precise movement for the pathfinding later on. With this, the enemy mechanic of spawning and movement can start to be used for the game. This is done by (Figure 3) checking what tiles are available within an array of the tile grid and whether that tile is valid or not. If the tile is valid, the enemy pathfinding can allow to move on that tile and detect non-valid ones as obstacles. The map&#8217;s info is created by using an easyStar.js, which is the A* Algorithm but made in Javascript and is easy to use but is required to calculate the path for the enemy and how it can move.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"488\" height=\"674\" src=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/01\/CreateEnemyPath.png\" alt=\"\" class=\"wp-image-221\" srcset=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/01\/CreateEnemyPath.png 488w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/01\/CreateEnemyPath-217x300.png 217w\" sizes=\"auto, (max-width: 488px) 100vw, 488px\" \/><figcaption>Figure 3 (Self Generated.)<\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">This is all done by using two different functions: &#8220;handleEnemyMove&#8221; (Figure 4) and &#8220;findPath&#8221; (Figure 5). What &#8220;handleEnemyMove&#8221; does is handle the points of where the enemy will move to around the tilemap. For example, the enemy will move to the player sprite and then calculate the points within &#8220;findPath&#8221; function. &#8220;findPath&#8221; is used to find the path between the player and the enemy. This is used to check if there is an available path on the tilemap for the enemy to reach the player. If there is a path, it will then do a callback to move the enemy through &#8220;moveEnemy&#8221;<\/p>\n\n\n\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\/HandleEnemyMove.png\" alt=\"\" class=\"wp-image-223\" width=\"710\" height=\"136\" srcset=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/01\/HandleEnemyMove.png 896w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/01\/HandleEnemyMove-300x58.png 300w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/01\/HandleEnemyMove-768x147.png 768w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/><figcaption>Figure 4 (Self Generated.)<\/figcaption><\/figure><\/div>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/01\/FindPath.png\" alt=\"\" class=\"wp-image-222\" width=\"715\" height=\"422\" srcset=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/01\/FindPath.png 586w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/01\/FindPath-300x178.png 300w\" sizes=\"auto, (max-width: 715px) 100vw, 715px\" \/><figcaption>Figure 5 (Self Generated.)<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">With all of the calculating of the path being found, the &#8220;moveEnemy&#8221; is performed (Figure 6) where this will begin the movement through what path has been found previously and move within a tween. Depending on the direction the enemy is moving, the angle of the enemy sprite will change to reflect the movement direction is head toward to. For example, if the sprite moves left, it will face left during the gameplay.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"910\" height=\"585\" src=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/01\/MoveEnemy.png\" alt=\"\" class=\"wp-image-225\" srcset=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/01\/MoveEnemy.png 910w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/01\/MoveEnemy-300x193.png 300w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/01\/MoveEnemy-768x494.png 768w\" sizes=\"auto, (max-width: 910px) 100vw, 910px\" \/><figcaption>Figure 6 (Self Generated.)<\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Several ideas came to mind with how the pathfinding mechanic works for this project and how I have delays on enemy spawn. I believe that customising this project further is to create a survival-based game. The player will need to survive as long as possible by defeating the enemy and earning points. The more points they earn, the higher they can reach the next wave, which increases the game&#8217;s difficulty with more enemies spawning on the game world. Another idea around this is to have a combo system. Suppose the player keeps defeating enemies without taking damage for a while. In that case, they can be rewarded more points in the process. This mechanic would bring in a more rewarding approach to the player, which they will want to try their best to keep their combo up at all times. Below is a screenshot of the project progress so far of what the game look likes (Figure 7).<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"894\" height=\"889\" src=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/01\/PathFindingWeek1.png\" alt=\"\" class=\"wp-image-226\" srcset=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/01\/PathFindingWeek1.png 894w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/01\/PathFindingWeek1-300x298.png 300w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/01\/PathFindingWeek1-150x150.png 150w, https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-content\/uploads\/2022\/01\/PathFindingWeek1-768x764.png 768w\" sizes=\"auto, (max-width: 894px) 100vw, 894px\" \/><figcaption>Figure 7 (Self Generated.)<\/figcaption><\/figure><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><span style=\"text-decoration: underline;\">Bibliography:<\/span><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Patel, A (1997) Introduction to A*. Available at: <a href=\"http:\/\/theory.stanford.edu\/~amitp\/GameProgramming\/AStarComparison.html \">http:\/\/theory.stanford.edu\/~amitp\/GameProgramming\/AStarComparison.html <\/a> (Accessed: 25 January 2022.)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Welcome to Week 3 on the 2D format games project. Previously, I finished a top-down project where the player controls a tank and has to destroy the different enemy tanks on the map while conserving as much fuel as possible to complete the game. This week, a new project has started by developing Pathfinding. Pathfinding&hellip; <a class=\"more-link\" href=\"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/2022\/01\/25\/2d-format-games-development-diary-week-3\/\">Continue reading <span class=\"screen-reader-text\">2D Format Games Development Diary Week 3<\/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-201","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\/201","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=201"}],"version-history":[{"count":16,"href":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-json\/wp\/v2\/posts\/201\/revisions"}],"predecessor-version":[{"id":229,"href":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-json\/wp\/v2\/posts\/201\/revisions\/229"}],"wp:attachment":[{"href":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=201"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}