{"id":248,"date":"2022-02-07T07:49:35","date_gmt":"2022-02-07T07:49:35","guid":{"rendered":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/?p=248"},"modified":"2022-02-09T19:38:23","modified_gmt":"2022-02-09T19:38:23","slug":"2d-format-games-development-diary-week-5","status":"publish","type":"post","link":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/2022\/02\/07\/2d-format-games-development-diary-week-5\/","title":{"rendered":"2D Format Games Development Diary Week 5"},"content":{"rendered":"\n

Welcome to Week 5 on the 2D format games project. Previously, I finished developing and customising my pathfinding project by adding several different mechanics to the game. This included adding a wave-based system in which the player scores points by defeating enemies in the game. When the player has gained enough points, they proceed to a new wave with increasing difficulty. The increased difficulty involves extra enemy spawns, which were done to make the gameplay more challenging to survive.
Additionally, a combo mechanic was added where the player could earn bonus points by performing well in the game by not taking damage at all. However, to help with the survival approach to the gameplay, a sprint mechanic was also developed to give the player additional movement speed. The player could only sprint for a short duration and be reused again after waiting.<\/p>\n\n\n\n

This week, I started to work on a new project involving the use of the matter physics built within Phaser while developing the project to be playable on mobile devices. Before beginning development on the project, I first needed to understand how matter physics works around Phaser and how they can be used in games.<\/p>\n\n\n\n

Matter is another type of JavaScript 2D physics engine that simulates more realistic physics around the game world. These physics work by having assigned various properties around the game object such as body shapes, mass, density, constraints, restitution and friction as typical examples used to make matter-based objects. In my previous projects, the game objects used Arcade-based Physics to create fast and simple physics for the game through axis-aligned boxes bounding boxes and circles. While this type of physics works well to generate gameplay with basic platforming, to create something with a puzzle that involves physics, Matter is needed to achieve this as the engine offers a variety of customising to the physics of a game. This can also create more complex mechanics, such as making balls or moving boxes that can simulate realistic physics from the real world.<\/p>\n\n\n\n

From understanding the Matter-based physic engine, this project will use the engine by creating several game objects of different shapes and properties listed before. Before further discussing the game objects, the project gameplay is where the player will need to reach the door’s exit. The player controls the character by swiping the screen to move left, right or jump while trying to climb up a vertical world while avoiding rolling emoji and spikes.<\/p>\n\n\n\n

The first game object to create is giving the player the matter physics. The reason for this is to allow the player to be knocked back by the emoji object and have slope-based platforms. This is done by setting different player class properties on the matter physic engine (Figure 1). The first is “setBody”, which allows assigning a specific body type to the player. In the game, the player will use a circle based body which will help to enable them to move onto slope based platforms in the game world. This is also followed by giving them a radius that determines the circle’s size for the player. The following properties are “setBounce”, sometimes referred to as “restitution”. This defines the elasticity of the object body to allow for it to bounce. Since the value for this property is set at 0.01, which will mean that the object will not bounce very slightly after some force has been applied to the body. Next is “setFriction”, which defines the slideness of the body after an amount of force is applied to the object. Since the value is set around 0.0001, this will mean that the player will slide very significantly, and this was done to allow for movement. Lastly, there is “setMass”, sometimes referred to as “density”, which defines the mass per unit within the area of an object. This all refers to giving an object a definition of a material type that the game object has around the physic engine. For example, if you have a rock in the game, the density will be higher than most objects due to the heaviness. With the player, their mass set is the highest in the game, allowing them to move any object at a significant force during the gameplay.<\/p>\n\n\n\n

\"\"
Figure 1 (Self Generated.)<\/figcaption><\/figure><\/div>\n\n\n\n

By following the same methods around creating the player through matter physics, this logic can also be applied to make the emoji (Figure 2) and the boxes (Figure 3) that the player will encounter during the gameplay. The purpose behind each of these game objects is that the emoji acts as an obstacle that the player will need to jump over to avoid being pushed back. The emoji do respawn that spawn from the top of the game worlds and start to roll down until they collide with a plane area which will despawn them and bring them back in the group. The emoji texture does randomize when created to create more variety to the object in the game.
As for the box object, the purpose is that the player will need to move toward them to push them to progress further into the level. These will sometimes block the player path to the level goal, but the challenge around the boxes is that the physics will bump the player back, making it harder to navigate to get to the level goal.<\/p>\n\n\n\n

\"\"
Figure 2 (Self Generated.)<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"
Figure 3 (Self Generated.)<\/figcaption><\/figure><\/div>\n\n\n\n

The last part to focus on next is to get the game to work on mobile devices where the player can swipe the device screen to control the player. To do this, several codes are implemented (Figure 4) to ensure this function work by first creating input of “pointerup” and “pointerdown”. This will allow the game to listen whenever a pointer is up or down and perform the function within their methods. These functions include “handlePointerUp” and “handlePointerDown”, which controls the “touchData” that gets the information of the current pointer location. After this, it is managed around a “handleTouch” function that will controls the movement direction the player will head toward based on where the player swipes the screen from the player position.<\/p>\n\n\n\n

\"\"
Figure 4 (Self Generated.)<\/figcaption><\/figure><\/div>\n\n\n\n

With how the project turns out so far with the fundamental gameplay physics created and touch controls that work on mobiles. During development, several ideas came to mind that I would like to work on later. The first I thought on is looking into more matter physics and seeing what other examples I could try to develop as this would improve my skills with using the Phaser Matter engine. Secondly, since I have understood touch controls with the project, I would like to see if I can get a functional button. This button would require the player to touch on, and then the game would perform some specific action like resetting the level. This would be a good idea to try out as this would improve my skills with developing UI to mobile-based games and improve my implementation skills on touch controls.<\/p>\n\n\n\n

To show what the game looks like so far, here is a screenshot below (Figure 5) of one of the many levels the player will encounter during the gameplay. Later levels will be shown in next week blog.<\/p>\n\n\n\n

\"\"
Figure 5 (Self Generated.)<\/figcaption><\/figure><\/div>\n\n\n\n

Bibliography:<\/span><\/strong><\/p>\n\n\n\n

Hadley, M (2018) Modular Game Worlds in Phaser 3 (Tilemaps #4) – Meet Matter.js. https:\/\/itnext.io\/modular-game-worlds-in-phaser-3-tilemaps-4-meet-matter-js-abf4dfa65ca1<\/a> (Accessed 9 February 2022.)<\/p>\n","protected":false},"excerpt":{"rendered":"

Welcome to Week 5 on the 2D format games project. Previously, I finished developing and customising my pathfinding project by adding several different mechanics to the game. This included adding a wave-based system in which the player scores points by defeating enemies in the game. When the player has gained enough points, they proceed to… Continue reading 2D Format Games Development Diary Week 5<\/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-248","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\/248","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=248"}],"version-history":[{"count":10,"href":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-json\/wp\/v2\/posts\/248\/revisions"}],"predecessor-version":[{"id":265,"href":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-json\/wp\/v2\/posts\/248\/revisions\/265"}],"wp:attachment":[{"href":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=248"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=248"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=248"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}