Modules to help build Audio Games in the browser
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.
I wanted to give to the community, so I've spent the last few days decoupling all these snippets of code and making them completely reusable by anyone. Furthermore, they're all on GitHub, so anyone with the knowledge of _javascript_ can help me improve them and end up in the published module on NPM. I'd be very happy.
For those of you that already know how to develop using modern ES6 _javascript_ and don't want to read about how to set up a testing and development environment because you already know how, all these modules are on GitHub and NPM.
My GitHub profile: https://www.github.com/ghorthalon/
My NPM profile: https://www.npmjs.com/~ghorthalon
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
The -g tells it to install these modules globally. That means they'll run everywhere in your terminal as well as be globally available in your _javascript_s.
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.
OK, we have the module. I usually set up a client directory for all my HTML, sounds and _javascript_.
mkdir client
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=""
</body>
</html>The main.js file will be created by parcel in the next step in the client folder, not inside the js folder. The JS folder contains your written code, the main.js file outside of the JS folder will be the compiled _javascript_.
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
Parcel has a few commands. Watch will open a server that constantly looks for changes in your _javascript_, and when a change is detected it will automagically rebuild the bundle. Furthermore, if your browser tab is currently open the browser will automagically reload the changes you've made. Awesome right?
Next, open a new terminal and get back into your game directory. Then simply run:
http-server ./client
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 you didn't understand any of this, then that means you've not messed much with modern _javascript_. That's OK. There are so many resources to learn _javascript_ development out there it's unreal. Just go wild and don't be afraid to mess around.
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
_______________________________________________ Audiogames-reflector mailing list Audiogames-reflector@sabahattin-gucukoglu.com https://sabahattin-gucukoglu.com/cgi-bin/mailman/listinfo/audiogames-reflector
