I'm not sure if you've yet noticed, but I've been very into making browser games recently. I think the web is an exciting platform with a lot of cool things you can do. From Binaural Audio to doing things with sensors like Gyroscope and Accelerometer and other cool things, as well as the fact that they run virtually everywhere a modern web browser does, the web has it all and I thought it was time we started experimenting with this.
I already wrote a couple of games using these web technologies, the most known is probably Cyclepath. It uses sensors to help with turning on mobile, snappy Keyboard Input, as well as binaural Audio with environmental effects, basically everything an audio game would need.
The libraries you will find there:
AGK-Input: Helps with Keyboard Input, and let's you use the Keyboard somewhat like you were used to from BGT in the browser.
AGK-SoundObject: An easy way to load, preload and play sounds.
AGK-SoundSource: Quick wrapper around AGK-SoundObject, which is a wrapper itself so this is a total WrapperCeption, to quickly create 3D sound sources.
AGK-TTS: Quick way to speak in the browser
AGK-UI: Build simple user interfaces like Menu's and scrolling text
AGK-Utils: Random stuff like distance, collision, random numbers, stuff that hasn't yet made it into it's own module but will at some point.
Examples and usage is on the respective GitHub or NPM pages.
If you don't know how to set any of this up then don't worry. I'll work on sharing my development template or boilerplate code including all my scripts to build and test games and quickly get to production. This is going to take me some time though, so please be patient with me.
I'll also be working on an example game that utilizes all of these libraries and is easy to understand.
But a quick introduction
I use the parcel bundlers to bundle my code. This is more or less necessary to make use of modern ES6 modules properly. If you want to quickly set up an environment:
Install Node.JS. You can get Node.JS from www.nodejs.org.
Create a directory for your game.
Open a terminal and enter your game directory.
Type npm init
Fill out the fields to your liking.
Once it has written the package.json file, install the modules.
The ones you'll need globally are:
npm install parcel-bundler -g
npm install http-server -g
Time to install the modules for the game.
Make sure you're still in the directory of your game. For now, we're going to only write a quick script that uses AGK-SoundObject to play a sound. Then:
npm install agk-soundsource --save
The --save tells NPM to update the dependencies in your package.json. This is useful for when you share your code. If a package.json is present in the current directory, simply typing npm install will install all the dependencies present in your package.json file.
Cool. Go into that directory and create an index.html, a js folder and a sounds folder.
Drop any wave file you want in that sounds folder. It doesn't need to be just wave files, you'll have to look at your browser and what codecs it supports.
Sweet. In the js folder, create a file called main.js.
Populate the file with this contents:
import SoundObject from "agk-soundobject"; SoundObject.directory = "./sounds/"; SoundObject.extension = ".wav"; const sound = SoundObject.create("meow"); sound.play();
This will load the meow.wav from the sounds folder in your client folder and play it.
Right. Next open index.html outside of the JS folder and populate it with this:
<html> <head> <title>My game yay!</title> </head> <body> <script src="./main.js"></script> </body> </html>
Open a terminal and make sure you're inside the client directory of your game.
Then run this:
parcel watch ./js/main.js -d ./ --target=browser
Next, open a new terminal and get back into your game directory. Then simply run:
This will open an HTTP-Server to your client folder.
Now you can open your browser and go to http://localhost:8080 and if everything goes as planned you should hear meow.wav!
If this seems counter productive and like a lot of work, yeah you'd be right. It used to be much more convoluted when we didn't have Parcel and had to configure webpack by hand to build the files, luckily parcel exists now and that step falls away.
That said, I'll soon upload my development template, so you will just be able to clone it with git, npm install and start coding right away.
If you have any questions feel free to ask.
I hope I didn't miss anything and I hope this is of use to someone. Have fun! <3