“The ‘something’ connected to the, ‘other thing’!”
Before we continue, I would like to first acknowledge that I did not create these character image animations or level sprites used for this project. I have downloaded them previously as a free-to-use resource and have utilised them in educational and experimental projects, though nothing commercially, I do not own these images. I would love to give the artist a mention and I will do when I can locate the name of the original artist, these animations are excellent and have provided a lot of practical use when figuring out the application of game-mechanics in a JavaScript game.
To the original artist of these images, thank you so much. Please send me an email if you happen to come across this and let me know who you are, and if you are happy for these to still be used in this manner.
Making a game in JavaScript Pt 3. Files and Folders
I will include 2 characters with complete animation sets. These will be available to download so that we can explore and experiment with the code required for game mechanics and loading a JavaScript game, but please remember these images supplied are not mine and I cannot authorise their use in a commercially licensed product.
The two characters have the same animation action sets, there is:
You can use either for the purpose of the project, just remember to use the correct filename when loading the animation frames.
When you download and extract these images, please maintain the existing folder structure within the compressed file and extract the included files and folders to your images folder.
Eg.
\GameJS\
\GameJS\images\
\GameJS\images\NinjaBoy\
\GameJS\images\NinjaBoy\Idle\
\GameJS\images\NinjaBoy\Run\
…
\GameJS\images\NinjaGirl\
\GameJS\images\NinjaGirl\Idle\
\GameJS\images\NinjaGirl\Run\
…
\GameJS\js\app.js
\GameJS\index.html
With the images extracted we now also want to look at creating the script files required for the game loop, and the animation loading.
We can see the game starting to take shape in very distinct parts. We have the game loop, the update and render function, but we also have: Animation Frames grouped together to make a complete Animation, these Animations will each be linked to an Action, which for the player character will be determined by Input.
We are going to use these parts to break up the code and divide it into separate script files, however this introduces a problem. Separating the code into individual files is a great way to maintain readability for the coder and to ensure that the code for each part is easily located. Need to edit an animation? Open the animation script. Need to adjust the input? Open the input script.
The problem introduced with this modularisation is that JavaScript modules will not open and import directly when accessed with the file loading method in the browser. JavaScript modules have a requirement that they are served with a http server. If you try the file loading method by opening directly through the browser on your PC, what will happen is that the JavaScript will only load one JavaScript file deep. Any other script file that this script tries to import, will be ignored. This would mean that to work with the file loading method in your browser, we would have to include all the code within the initial JavaScript file. This can be done, but it adds a level of complexity to the code that is best avoided where possible. Then how do we load the code with separate scripts?
There are a few ways to host the files, I have included one here that is overly simple and excellent for the purpose of code-and-test. It requires Python to be installed, and with it a simple command from the folder directory in the Windows PowerShell or Linux terminal you can start a http server for that folder, and then access the hosted folder as if it is a website by going to the local host address in your browser.
If you don’t already have Python 3 installed, you can download and install it from
https://python.org/ in the Downloads section.
At the time of writing this Python 3.11.4 is the latest version and should work nicely with the mentioned steps.
In Windows or Linux, there will often be an option to right-click within an open folder in the File explorer and select ‘Open location in terminal’ or ‘Open in Terminal’. Alternatively, you can open PowerShell in Windows or the Linux Terminal in Linux and navigate to your directory folder ‘GameJS’.
With the terminal or PowerShell window open and Python installed, you can start a simple http server with the following command:
python -m http.server
With the http server now running in the PowerShell or terminal window, you can access your site by opening your browser and typing the address:
This will open the website up that is hosted on ‘localhost’ (your PC) on port 8000 (the default for the simple python http server).
So far, in this project, there is nothing to see except the blank web page and the empty canvas with a thin outline for the canvas border. If you can’t see that then there is something missing and you may need to retrace the steps to determine what was missed or could be causing the issue with the page loading.
Next we will jump into making some of the additionally required modules for the core game functions, and for displaying the initial ‘idle’ animation for the player character, which will include the animationFrame, animation, and animationCollection objects. We will also handle the image loading for each of the animation frames and displaying these to the canvas. From there we can add input and vary the animation selections, and then it is on to game mechanics and playability. I am looking forward to a test play-through when this is done! 😊
“I don’t play games; I make them.
And test them.
And evaluate them for educational purposes.
Which involves immersing myself in them, exploring the game world and game mechanics, determining the capabilities of the in-game items, experiencing the playability first-hand…”
Brent McEwan