{"id":268,"date":"2022-02-11T13:16:46","date_gmt":"2022-02-11T13:16:46","guid":{"rendered":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/?p=268"},"modified":"2022-02-11T18:50:27","modified_gmt":"2022-02-11T18:50:27","slug":"2d-format-games-development-diary-week-6","status":"publish","type":"post","link":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/2022\/02\/11\/2d-format-games-development-diary-week-6\/","title":{"rendered":"2D Format Games Development Diary Week 6"},"content":{"rendered":"\n

Welcome to Week 6 on the 2D format games project. Previously, I started a new project on Phaser, which involved developing a game that uses the matter physics engine in Phaser and designing the function for mobile devices. Before beginning any development with the project, I needed to understand the implementation behind the matter physics engine to ensure that I understood the different properties I could define to the object. From understanding the matter physics engine, I developed a basic vertical mobile gameplay where the player must navigate to the end goal. During the gameplay, the player will need to move boxes out of the way to progress and avoid emojis to prevent being pushed back down.<\/p>\n\n\n\n

This week, I wanted to see what further customisation I could do with the project. What came to mind was that with how the gameplay turned out, I looked to first implementing a timer that continues to go up by counting milliseconds, seconds and minutes (Figure 1). This was done by writing in the update function, which always “setText” to show the current values of the “minutes”, “seconds”, and “milSeconds” followed by two conditions and continuously increment “millisecond”. These two conditions check first whether “milSeconds” equals 60 or not. If it is, the function will then increment “seconds” and set “milSeconds” back to 0. Later on, when “seconds” value is equal to 60, this will increment the “minutes” value and set the “seconds” and “milSeconds” back to 0. This timer I created works very since it can effectively loop very well with resetting the seconds and millisecond back and forth. Implementing it to the game gives the player some sense of trying to achieve a good time to beat the level. However, the problem I saw with the text of the timer is that I feel like it could do with including a 0 next toward each value in the UI if that value is less than 10 during the gameplay (Figure 2). The reason for that is this could make the timer UI look much more polished and not have disappeared digit as the timer runs and resets (To provide what I mean by this is look at the 9 in the milsecond below.).<\/p>\n\n\n\n

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

The next part of the customisation to the project was last week; I reflected on improving my skill to design mobile games by setting a goal. The goal would be toward making a button to which the player can tap on, and upon tapping, a specific action would be performed within the game. This particular action I had in mind to make upon tapping the button is a reset level button, which will reset the entire current level the player is on. Surprisingly, the action button would come very handle during some of the level designs I had made with the project. There were moments when the boxes were moved too much around the level to a point it made the level impossible to proceed any further. I saw this action as precious for any complex physics-based game because the complexes around these physics can quickly go out of control, and players could get frustrated without any means to reset the level.<\/p>\n\n\n\n

I implemented the touch button by adding an image called “resetButton” (Figure 3). After the image was added, a chained method is written next to this called “setInteractve”. What this method does is that it allows for a game object to call on input events. To demonstrate this, just under controls is an input listener on “resetButton” Whenever the pointer is down on the button image of “Reset, the “reset” function is called on. What the function does in the game is that (Figure 4), the game’s camera will fade once and then the entire level scene restart. How the touch button implementation turned out, the development of this part went very well, and it was easy enough to follow to get the touch buttons to work. I would like to expand these skills by making a main menu that operates on touch controls. This would not only improve my skills in developing touch controls but also in making UI for mobile devices.<\/p>\n\n\n\n

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

Lastly, with the customisation to the project, I wanted to further experiment on other matter physics with this project. I was looking into using “constraints”, which joints an object to be fixed at a specific distance. The joints can then be fixed to either maintain the distance between two bodies or a piece of the body and the game world space. In this project, I went with getting the joint connection between the body and the game world because I feel like this would be the easiest approach to working with constraints, and I could use the methods around the points in Tiled. To begin with, I went to making constraint platformers of rectangles that would move in a rotation based on the direction that force applied to them. <\/p>\n\n\n\n

The implementation behind the code with the rectangle is that I took a similar approach from creating the box from last week (Figure5). However, I added a “worldConstraint” that gets the information of the object spawn point and then joints it with the object body. To explain what each function does, they create a rectangle of either width of 64 or 128 and whether to flip the object or not and then apply the previously mentioned “worldConstraint”. The result is that the rectangle makes some interesting navigating around the gameplay toward the player can progress. For example, they will need to either swipe horizontally or vertically (Figure 6) to get on the other side of the rectangle. With understanding constraints, I would like to explore more by creating different shapes to use with constraints, such as circles or triangles. This will allow me to explore further toward creating more complex conditions for the player to navigate in the game world.<\/p>\n\n\n\n

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

After finishing off the project’s customisation, I would create five different levels where each one is designed to help introduce new physics mechanics to the player over time. This was done by laying the spawn points of the boxes and rectangle, where the emoji would spawn and placing the end goal. After this, I uploaded the project onto my webserver to test the game’s functionality on mobile to see if all five levels were deemed winnable. I found out from trying the game on mobile is that the overall controls felt rougher than playing on PC and made navigating some levels more challenging. Level three was one highlight (Figure 9), which features a few moments to navigate past boxes and horizontal rectangles that the player will need to jump up to get past them. I would need to adjust the physics properties around the player and other game objects to ensure that it does become too frustrating to progress. <\/p>\n\n\n\n

Overall, I’m happy with how the game turned out on mobile and would like to expand this further by implementing some of the previously mentioned features. However, the problem I had with the project was generally thinking about new ideas to try out due to the limitation on the gameplay, and it is on mobile, but the experience of developing the game was fun and I hope to expand my skills more on this in the future. Below are some screenshots of each level you can expect to encounter during the gameplay.<\/p>\n\n\n\n

\"\"
Figure 7 (Self Generated.)<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"
Figure 8 (Self Generated.)<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"
Figure 9 (Self Generated.)<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"
Figure 10 (Self Generated.)<\/figcaption><\/figure><\/div>\n\n\n\n
\"\"
Figure 11 (Self Generated.)<\/figcaption><\/figure><\/div>\n\n\n\n

You can try out the game by visiting the provided LINK<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Welcome to Week 6 on the 2D format games project. Previously, I started a new project on Phaser, which involved developing a game that uses the matter physics engine in Phaser and designing the function for mobile devices. Before beginning any development with the project, I needed to understand the implementation behind the matter physics… Continue reading 2D Format Games Development Diary Week 6<\/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-268","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\/268","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=268"}],"version-history":[{"count":7,"href":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-json\/wp\/v2\/posts\/268\/revisions"}],"predecessor-version":[{"id":289,"href":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-json\/wp\/v2\/posts\/268\/revisions\/289"}],"wp:attachment":[{"href":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=268"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=268"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=268"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}