Hello everyone, and welcome to a new blog post… I know I haven’t written in a very, very long time.
This post is for aspiring developers, as well as curious people who have been wondering just how that awesome cyclepath game was done, or why the hell Oriol updated beatstar to run on this weird thing called Electron and why it now runs on mac.
Besides, isn’t JS a language for the web? How can you guys even think of coding audiogames like that?
However, I was pleasantly surprised to see that JS is not only a valid option, but a very interesting one at that. Not only is JS very fast, but it also has packages for anything you can think of (by the use of node and NPM).
There are many things you will need to learn that are quite different to BGT, and for this I suggest you to look at other audiogames written in JS such as Cyclepath, or the new upcoming version of Danger on the Wheel.
Firstly, I wanted to write Beatstar in JS as quickly as possible, so I took a bit of the bgt code and turned it around with the fewest code changes possible. Secondly, it was my first experiment in JS and thus I consciously ignored most of the advice I received from more experienced JS developers such as my friends Talon and Guillem.
With this in mind, Let’s move on to what really matters. The new audiogame coding template I am about to release for you all to start building games from.
A brief explanation about the development process
To download the game building template, you will have to get it via git clone by issuing the following command from the command line.
You will need to have git installed for this to work:
git clone https://code.oriolgomez.com:9900/ogomez92/template.git
This is going to be your preferred way if you are planning to release your game as an Electron app rather than a web browser link. This is good for sound-intensive games like Beatstar which load a bunch of music, etc because loading from the hard drive is usually faster than downloading from the internet, unless the sounds have stayed in your cache. Either way, playing from the internet obviously requires an internet connection and thus, if your game doesn’t need one, an Electron app is just fine.
Developing via Electron is good if you don’t want to bother opening your web browser just to test a game. I know other people who prefer using the http server bundled with express, which creates a server pointing to port 3000 (usually) which you can then point to via your web browser by going to http://localhost:3000
Express is not installed via my template, so if you want to use it, you will have to install it via npm (npm install express) and read the documentation to get started.
when you first download the template from git, the NPM modules are not included to save some space. Before running the game you will need to install these modules by running the following command:
This command installs all the necessary modules needed to run the template.
You can add new modules by typing npm install modulename –save
The –save switch puts that module in the package.json, which is the container for all your dependencies. This means that, the next time someone downloads your cool new game from a git repository or you use it on another computer, that new module you are installing will also be taken into account.
Parcel-bundler is a handy tool which compiles your game, modules and all your imports so they are optimized and harder to read by people who want to look at your code with electron archive extractors. In always include it in my games because it lets me use imports in an eficient manner. For this reason, if you use my template you will have to run the following command before starting the game:
npm run watch
npm run watch tells parcel that hey, start looking for changes in the code, whenever a file is modified rebuild my game.
Once this is done, you can type npm run start to tell electron to open index.html, which you will not need to modify until you know the name for your new game. The name for your new game is in the html’s title tag.
Once Electron runs, you can check that the template is working by hitting control shift i (control option i on a mac). This will display the developer options. Click on console, and the console window should pop up saying: Setup success!
A note about sound libraries
Hey, I see some confusing files here! sonoSource.js, soundSource.js, soundObject.js… Why!
The conclusion I came up with is that Howler is best for games which do not require HRTF, as it is much more lightweight. However, Sono has a bunch of effects, and both me and Talon have used it for games like Cyclepath and Danger on the wheel.
Please take a look at the explanations found in the file game.js, inside the client folder, and the sound playback example as well as the game timer.
If this post is well received, I will write more posts like this one explaining other things.
I hope this helps someone in their pursuit of audiogame development!