{"id":1,"date":"2021-10-07T16:11:43","date_gmt":"2021-10-07T15:11:43","guid":{"rendered":"http:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/?p=1"},"modified":"2022-01-07T15:00:14","modified_gmt":"2022-01-07T15:00:14","slug":"2d-games-development-diary-week-1","status":"publish","type":"post","link":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/2021\/10\/07\/2d-games-development-diary-week-1\/","title":{"rendered":"2D Games Development Diary Week 1"},"content":{"rendered":"\n

Welcome to Week 1 of my Games Development Diary. My name is Steven Raven. I will discuss and analyse the many topics introduced to me throughout each week by showcasing some exciting techniques I picked up. Then I followed by how I could use each knowledge I learned later in game development and finally plans toward learning next.<\/p>\n\n\n\n

Before discussing the topic introduced this week, I would like to outline that the overall purpose behind the blogs is that I am doing a project. The project involves understanding the programming fundamentals behind 2D games, from animation to physis and fully understanding the methods. Understanding all the fundamentals around developing 2D games will then be applied to developing a 2D game in Javascript. Creating 2D games is always seen as a good starting point to beginning games development. The movement around 2D games is linear since the player character moves on an X and Y to make it easier to determine an endpoint of the game. The controls are simpler to do since you could develop the game around a platformer. The player only needs to use jump and movements controls. Finally, the goal is easier to achieve in the game world due to the simple mechanics.<\/p>\n\n\n\n

\n
\n

My first introduction to 2D games fundamentals is around computational thinking, which involves abstracting the problems around a logical system and then formulating the solutions to allow the system to be automated. The topic around computational thinking was understandable enough for me to follow because of having previous experiences in creating UML for a game prototype and developing flowcharts around making software. To keep up with my knowledge around the topic, I created a flowchart on Old School Runescape that focuses on the player obtain logs from the tree in the game through the Woodcutting skill. I made this because I could quickly identify the game mechanics surrounding the player receiving tree logs from a tree in the game. <\/p>\n<\/div>\n\n\n\n

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

To determine the functions for the mechanics, I would look at the elements that would relate to the chances of obtaining tree logs with things such as the player level, what type of tree they are chopping and finally, the kind of metal axe they are using. To double-check if these elements are correct for the flowchart, I researched the mechanic around the Woodcutting skill in Old School Runescape and read through how the mechanic works for the tree in the games. With these elements in mind, I take this information to perform the calculations needed to determine the success chance of the player getting a tree log and ensure a loop in case the check fails. By creating this example flowchart, I could easily create many different flowcharts for the game because of having a great understanding of the game mechanics and seeing the logic through the many elements featured in the game.<\/p>\n\n\n\n

\n
\n

After understanding computational thinking is to begin learning Javascript, the language used to develop a 2D game later on. To start learning Javascript, the first thing to do was create a painting canvas using HTML and CSS to create the layout and then script it through Javascript. Due to previous experience working around HTML and CSS, I could easily make the layout around the paint canvas because I knew what each syntax is used and does what around the two languages. However, I ideally did some research around W3 Schools to help refresh my knowledge around the two languages and pick up some new techniques to creating the layout and overall learning to Javascript. <\/p>\n<\/div>\n\n\n\n

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

One example of this was that I applied a text-shadow around the title of h1 through CSS, to which using this method would make the title stand out and grab the user attention of what the application is. Following the shadows was the design of the coloured button, which functions as what colour the user will use once selected. These buttons were easily created by simply putting background colour followed with the colour to render on the screen. If the user wants to draw out faded colours, the CSS is changed by having numbers of RGB and alphas values at the end instead of the name of the colour. This method works ideally better because it allows for better customisation around the colour of the button toward how they appear but sadly limits the user selection since only ten controls can be fitted. A solution in the future would include some RGBA selector through Javascript to where the user can generate their colour to allow for freedom choices. <\/p>\n<\/div>\n\n\n\n

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

With the CSS and HTML done, the critical aspect to focus on is the Javascript by enabling the colour button to correctly assign a colour based on selection and drawing of shapes by coordinating where the line needs to be and finally getting an event working perform the above actions. To create the colour selection, I first set the variable to get the id of the colour, previously assigned in the HTML to create the array and then add an event listener to which listen on the click that function to set the colour based on the target. With this function, the paint app allows for choosing what is available to the user. <\/p>\n<\/div>\n\n\n\n

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

Lastly, I would start creating tools for the paint app, such as filling\/clear the canvas and drawing out shapes. The first step to creating the tools and drawing method was by adding event listeners to the canvas, where the mouse is on or off the canvas and when the user clicks. Doing this ensures that the user cannot draw outside the canvas through any means and also helps me get an understanding further through event listeners, which will be helpful when making the 2D game later toward adding mouse control to the game. The next thing after this was to create some essential function to fill the canvas and clear it. These tools were created by adding a function to call on whenever the user clicks on the buttons that say “Clear” or “Fill” with the context of clearRect while fillRect having fillStyle in the fill function to use the currently selected colour.<\/p>\n\n\n\n

\n
\n

With the basic “Clear” and “Fill” tools created, one final to add to the paint app is the ability to draw lines and shapes. I made a function that draws out based on the mouse location, which is gotten through the x and y-axis of the mouse location and performs the assigned line and colour variables to draw out. For example, if I selected line and the colour red, this would draw out a red line and will continuously keep drawing until I let go of the left click or the cursor is off the canvas. However, if I were to select the square shape, this would draw out a square by putting points around the centre of the cursor position and drawing a line between each point. By understanding the methods around this, it is possible to draw out any shape or form by working out where each coordinate point needs to be to generate the lines to draw out. As an experiment, I attempted to make a pentagon by analysing the shape’s vertices and coordinating around it to create the form. With this, the pentagon turned out very well around my planning. While it may not be accurate due to the difficulty of visualising it on the canvas, it was a good attempt. <\/p>\n<\/div>\n\n\n\n

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

Generally, from this experience, I have understood some Javascript that will aid me later in developing a 2D game, for example, event listeners being an essential important later. If I wanted to improve the paint app further, I could create many different shapes to understand how they can be drawn on the canvas and add a save function to where the user can save the image of the canvas they have created without the work be lost. Furthermore, I would also add the ability to select the different tools and colours by using the keyboard instead of the mouse. The reason to do this is that they would be an excellent quality of life feature to the app and add me to setting event listener to the 2D game through using the keyboard to act as the game’s controls.<\/p>\n\n\n\n

You can used the painting app by clicking: HERE<\/a>.<\/p>\n\n\n\n

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

Old School Runescape Wiki (2021) WoodCutting. Available at: https:\/\/oldschool.runescape.wiki\/w\/Woodcutting#Mechanics<\/a> (Accessed 12 October 2021).<\/p>\n\n\n\n

W3 school (2021) HTML Element Reference. Available at: https:\/\/www.w3schools.com\/tags\/default.asp<\/a> (Accessed 12 October 2021). <\/p>\n\n\n\n

W3 school (2021) CSS Reference. Available at: https:\/\/www.w3schools.com\/cssref\/default.asp<\/a> (Accessed 12 October 2021). <\/p>\n","protected":false},"excerpt":{"rendered":"

Welcome to Week 1 of my Games Development Diary. My name is Steven Raven. I will discuss and analyse the many topics introduced to me throughout each week by showcasing some exciting techniques I picked up. Then I followed by how I could use each knowledge I learned later in game development and finally plans… Continue reading 2D 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-1","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\/1","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=1"}],"version-history":[{"count":14,"href":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-json\/wp\/v2\/posts\/1\/revisions"}],"predecessor-version":[{"id":169,"href":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-json\/wp\/v2\/posts\/1\/revisions\/169"}],"wp:attachment":[{"href":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=1"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=1"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/stevenraven.nuacomputerscience.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}