2018-03-08 13:54:52

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 JavaScripts.
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="./main.js"></script>
</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

--
Talon
Wanna play my Games? Listen to my Music? Follow me on Twitter, and say hi~
Code is poetry.

2018-03-09 03:38:28

ok ghort, this is definitedly awesome. you did a small framework for build games in JS, using your favorite tools and libs. keep doing that amazing work.
Waiting for the voilerplate for a complete project!

2018-03-09 04:47:53

Doing things in the web is good, but I do want a fake desktop app, that is to say, Electron. Reason I say fake is because in actuality it's a web app bundled to look like a desktop app, from how I understand.

2018-03-09 11:57:44

The easiest way to build an Electron app out of your web app is to change into the directory of your game, the main directory. Then type:
npm install --save-dev electron
--save--dev saves Electron in the development dependencies of the project. These are only installed when you're on your development machine. Open package.json, find the scripts section and add a comma after the one that's already there, then add:
"start": "electron ./client"

Save the file. now, when you run
npm start
Electron will open with your game.
To build your electron app into executables for all platforms, install electron-builder into your global modules like so:
npm install electron-builder -g

Then, in your main directory of the game, type:
build

It will build for all major systems. Mac, Windows and Linux. Code signing will only work if you're on Mac and have a developer account, however it is possible to build for Mac, windows and linux on one platform. Cyclepath was built for all systems on Windows, so you don't need mac to write Mac applications, however only Mac can create DMG files so you will have to distribute your Mac applications as zip files if you're developing on Windows.
That said Mac has quickly become my favorite development platform. LOL

--
Talon
Wanna play my Games? Listen to my Music? Follow me on Twitter, and say hi~
Code is poetry.

2018-03-09 14:21:36

What do you use on Mac to develop? How is it better than Windows?
I'm on Mac, however I hate VoiceOver on the web because when viewing tutorials, VoiceOver reads code all on one line, and it's hard to view it even when interacting with it.

2018-03-10 19:03:34

If you turn quicknav off and arrow up and down on the page, the code will read properly.

I don’t believe in fighting unnecessarily.  But if something is worth fighting for, then its always a fight worth winning.
check me out on Twitter and on GitHub

2018-03-11 06:40:50

I never have quicknav on. I'll try that again but last I tried it was acting odd.

2018-03-11 11:28:24

That only works in Safari, as far as I know Chrome struggles with that. I just like the unix shell and CodeRunner/TextMate make forget code editors. I also figured out how to make VS Code read properly, and that gives you easy access to consoles with breakpoints etc. This also works on Windows though. And other than that it's mainly the laptop. The MacBook Air is great for portability and especially battery life. There's more obviously, but yeah I guess that could warrant it's own topic.

--
Talon
Wanna play my Games? Listen to my Music? Follow me on Twitter, and say hi~
Code is poetry.

2018-03-12 20:35:28

Does CodeRunner do pretty much the same things as TextMate? CodeRunner I like for it's IDE code completion stuff, but would there be a reason to have TextMate as well in the toolbox?

2018-03-15 21:43:08

Awesome! Thanks so much for this! I have two questions:
1. In the libraries you provided, are there functions to read raw binary sound data? I ask because people could potentially make sound packaging formats. Many benefits to this, one of which allows for encrypted .dat files, or custom formats. I assume NPM has modules for compression, etc? I don't know, I haven't messed much with NodeJS. smile I'm so used to C/C++.
2. If not too much to ask, how did you learn about all of this? Just a quick summary would suffice. I suppose that an answer to any such question could be something as simple as, "I learned it through experimentation and article reading." smile But if anything else helped, I'd like to know about it.

Thanks again.

2018-03-15 23:19:10

How I made js audio games back in the days of IE6:

Usually, the script for the game was in the html file, so as to have easy access to named elements. I offloaded the "getElementByX" crap to functions as much as possible.
I kept an ever-expanding script file with seemingly useful stuff. Somehow, I mostly only used my workaround for the array length issue (it seems like that's been solved since?), cookies, changing the contents of divs, and moving images.
So an example might look like:

<html>
<head>
<title>Demo Game</title>
<script src="specialFile.js" type="text/javascript">
<!— sound was only really available through embed objects: —>
<embed name="mysound" src="mysound.wav" autostart=false hidden=true loop=false mastersound>
</head>
<body onkeydown="keyPressed(window.event.keyCode)" onkeyup="keyReleased(window.event.keyCodegg">
<div id="textlayer">Press any key to begin?</div>
<script language="javascript" type="text/javascript">
<!— Hide the script from ancient browsers...
function keyPressed (k) {
if (!k) k=window.event.keyCode;
if (k==65) document.mysound.play();
else if (k==90) WriteLayer("textlayer", "You pressed z, right?");
}

function keyReleased(k) {
if (!k) k=window.event.keyCode;
if (k==65) WriteLayer("textlayer", "Wasn't that fun?");
else if (k==87) document.mysound.stop();
}
// end hide —>
</script></body></html>

I might have made some mistake in there, but that's the idea I understand that window.event is deprecated and all the many tutorials telling me to use it should have gone with, like, document.event or something instead. Also, people have decided to drop the hiding, since the internet is gated now or something and who uses Netscape anymore, anyway? And apparently audio is ... is audio easier now? Because I had balance, volume, and rate available through embeds, so 2d sound was trivial. I understand we have 3D now (for whatever that's worth in a world without 3d audiogames), and that <embed> has to preload everything and that takes forever and clashes with post-IE6 security things. But how you do audio seems to be different every year and requires all of this additional setup, and I am lost and slow to trust anymore.
Oh, and I left out timeouts. For some reason the setTimeout function always made me nervous, not that I didn't use it.

So, my main question: after doing everything in the OP, installing this that and the other, typing 5 CLI commands, and setting up one of those hidious standardized project directory trees, how complicated are handling events, playing sound, and dealing with HTML elements? Will it work? Because if I follow the steps as given and cannot get these things to happen with comparable ease after 3 tries, I give up entirely and resign myself to being the annoying old person whose response to everything is "back in my favorite decade..."

看過來!
"If you want utopia but reality gives you Lovecraft, you don't give up, you carve your utopia out of the corpses of dead gods."
MaxAngor wrote:
    George... Don't do that.

2018-03-16 00:23:57

Haha Cae. smile


It really depends. My answer would probably always be NPM. Events are super easy to handle and do with something like event-emitter3, or the normal javascript event listeners through the event API. WebAudio is basically OpenAL in the browser, and you have things like webBluetooth and other webSensors like accelerometer and gyroscope, etc.

The thing you don't need to worry about is something breaking. We're at a point where we can only move forward and add, not remove. If something gets removed then there was a significant problem with it and there are huge security reasons not to do such anymore.

You do not need to go through the complicated way of setting up a web project like I have. You can just go out and grab your favorite libraries as .js files and write your scripts like you always have. The reason I do not is because NPM is huge. If I need physics I go on google and search for physics npm.
Let's say I find bullet.js. It has a convenient NPM page, I quickly read up on the API, then switch back to my terminal and do npm I bullet.js --save and I can start using it right away. When something get's updated in libraries later I simply npm update, and it makes sure to not pull in any code breaking changes while updating at least minor versions and patches.

I also like the OOP way of programming since I come from Java, or at least that's what work made me use. Writing code in the way I do let's me use classes and inheritance like you were kind of used to from Java.

class MyObject {
    constructor(someParameter) {
        this.parameter = someParameter;
    }
   
    someMethod() {
        console.log("Do something in here");
    }
   
}

class AnotherObject extends MyObject {
    constructor(anotherParameter) {
        super(anotherParameter);
        this.anotherMember = "Meow";
    }
   
    anotherMethod() {
        console.log("Both functions are now accessible on the object yay");
    }
   
}

const object = new AnotherObject();

This is epic I'd say.

Another reason I do it like this is to use imports. Say I want to have those two classes in one file and export them to be able to be used in another file.

I simply add export { MyObject, AnotherObject};
Or, if I just have one object,
export default MyObject;

Now, in any script I need this function in, I can import it using either
import { MyObject, AnotherObject} from "./myFile.js";
or, if there's only one...
import CustomName from "./myFile.js";

This way, everything is kept within it's own scope and you don't clutter up your main scope with things. So things that aren't supposed to read other things won't be able to read those other things. Makes your code a bit more secure and safer to write.

Also there's const for constants now, and let to instantiate variables within the scope. Var was never sure where it'd end up, and usually it was either the entire function or even just globally. Now you can bind your variables to whatever you wanted them to be.

I know it sounds super confusing but if you give it a chance it's super powerful. A lot is happening there, we already have our new JavaScript for this year with a lot of cool things for templating and promises, and promises are especially cool for working with asynchronous code and avoiding tons of callbacks, but maybe I'm rambling on here.

Your old code probably still works today. Just... please... Let IE6 die in peace. It's endured too much already and it's time for it to rest and not come back tongue

Oh and I totally forgot to answer where I learn. You're just about right. Reading tons of articles, tons of just messing about, but I also think that there are a lot of really good talks about node.js, JavaScript in the browser and how to code modern JavaScript on YouTube. And, you know, just asking around.

NPM is great though. Literally anything you could ever want is up there. Over 800 thousand packages. No matter what you're looking for someone probably already wrote it. You just pull it in and it manages all your dependencies for you. Of course there's some dangers with that, like broken or unuqdated or unoptimized packages, but really you would get that just as much if you were copy/pasting from Stack Overflow tongue just look at how often it gets updated and what people are saying and you should be fine. I never had problems so far.

God what a messy post. I better send this off before I get too caught up in myself...  LOL

--
Talon
Wanna play my Games? Listen to my Music? Follow me on Twitter, and say hi~
Code is poetry.

2018-05-12 23:49:29

Hi, does anybody know how to solve this problem? Whenever i type the parcel command and start up the http server, i go and edit my main.js to make a change and it doesn't reload. After restarting parcel and http server it still won't see the change.
If anybody can help with this I'd really appreciate it.

2018-05-16 20:47:14

I'm so glad someone else is using JavaScript.

Of course my main focus is in the web (especially now I have me a ChromeBook), but looking at that electron stuff looks awesome.

I keep promising myself that next time I write something server-shaped I'll use node.js, but it's not happened yet... mainly because I'm so damn used to Python.

Loving coding in the browser though... My only bitch is that there's no simple way (that I have found) to insert random numbers after the script src so that the web page doesn't use its cached version.

With mindspace I use the last modified timestamp of the client.js file but that seems stupid dirty.

Anyways, bring it on, the web is awesome and being able to play games on phones and basically anywhere else (minus them stupid blind-specific devices which should be scrapped anyhow) is seriously cool.

Take it easy.

-----
I have code on GitHub

2018-05-27 13:56:44

So I finally got around to trying this.
I did everything as written (except for one bit where I had to restart the command prompt so it'd recognize that npm had been added to the path).
Result: http://localhost:8080 does nothing in firefox, and gives a 404 in IE.
????????

看過來!
"If you want utopia but reality gives you Lovecraft, you don't give up, you carve your utopia out of the corpses of dead gods."
MaxAngor wrote:
    George... Don't do that.

2018-05-31 20:54:35

Post 15, make sure that the "main" entry in the package.json file is appropriately filled in as per OP's instructions. Instead of "index.js," replace with "main.js". I am really liking this stuff. Did anyone get electron to work via start up script as per post 4 instructions? I added "start": "electron" to the json file, but when I run "npm start", it gives me an error. Do I have to explicitly tell it where to find electron executable? Also, when doing a test build for an app I have, it only seems to build for windows. This is when I run the "build" command. I would like to see if it will build for other OS. I finally got back to trying this after some time. Hopefully, someone can shed some light on this. I'm making sure everything works before I commit to building something serious. smile

Thanks.

2018-06-01 05:54:54

So any ideas how to solve the problem in post 13 anybody?

2018-06-01 16:57:00

Post 17, make sure you follow the instructions posted on post 1 very carefully. You need to type
parcel watch ./js/main.js -d ./ --target=browser
If you're following along with those instructions, you should be in the client folder. Then, you need to open up another Terminal instance in where you navigate to the root of your project and from there you type
http-server ./client
Note: You have to leave both of these command line windows open for parcel to detect changes, etc.
Also, with some help from OP, I was able to get the electron thing to work. If anyone is interested, here are some instructions (slightly different from Post 4) that should get the sample app up and running in an executable:
first, you download, clone, whatever, the electron-quick-start repo from https://github.com/electron/electron-quick-start. Then, in that folder, you'll find main.js. Open it up and modify the line that points to index.html to point to the location of your index.html file. That is, if you're following along with post 1 instructions, modify the line to point to "./client/index.html" . Copy that main.js file into the root directory of your project. Now, in your package.json file, in the scripts section, instead of the entry reading
"start": "electron ./client"
Make sure it reads:
"start": "electron ./"
finally, to get the thing to run properly, you go back into your client directory and type
parcel build ./js/main.js -d ./

It took me a long time to consider that this is the only step I was missing. lol So, I hope this helps someone. Anyway, now when you run
npm start
from your project's root directory, you see that if you were successful in making it work locally with http-server, it should work within the electron executable. Finally, you can proceed with building it according to post 4.
Interestingly though, it keeps telling me that I need a Mac to be able to build on Mac. Fortunately, I do have one if I ever do release a product with this setup, but I am curious as to how OP was able to generate builds for Mac using electron-builder on Windows. Maybe you guys have better success. I even ran
build -lwm --ia32
to explicitly tell it that I want to build for 32-bit windows, linux, and mac.
Anyway, nevertheless, I hope this helps someone.

2018-06-01 19:26:01

hi all, are there any examples included in these utils?

best regards
never give up on what ever you are doing.

2018-06-01 20:47:24

sorry for double posting, but how do i get started running some examples from a js app like ghorthalon makes his apps?

best regards
never give up on what ever you are doing.

2018-06-23 01:14:00

It still won't update the changes, I've tried like 5 times, following it exactly.

2018-07-01 00:20:01 (edited by kingzombie 2018-07-01 00:20:38)

Anyone? I'd really like to get started making things with this...

2018-07-17 01:08:52

Hey Talon, I'm glad I'm not the only one trying to do JS audio games. I've struggled a bit finding a good audio library though.

My trials with "Sono" can be seen at the end of this AudioGames forum topic, which I think you were part of once: http://forum.audiogames.net/viewtopic.p … 32&p=4

So, at the minute, I still haven't grokked Sono and 3D sound from the POV of the player. Which is limiting me to left/right panning right now. Which granted, is good enough for some things but not really what I'm after.

So, what audio library are you using under the hood? Or are you directly using the AudioContext?

I suppose I could just look at the GitHub itself and save myself posting, but I thought it was worth asking as you'd know directly.

2018-09-15 23:04:03

Do any of you screen reader users have a suggested browser javascript debugger?

I'm getting back into front end development after taking a long break, and I'm taking a little while to remember how to do javascript debugging in the browser with a screen reader. Any assistance would be appreciated.

2018-09-18 10:15:09

Hi,

It's been way too long. new job, moving, yada yada, you get the drill. Let me ansewr a few questions while I get back into the swing of things.

At the moment, AGK uses Howler. I'm planning to change this though, as there are some pretty big issues with it that, to my knowledge, won't be fixed. Reported a year ago on GitHub and there have been releases since then, but none of my issues. sad

no example apps at the moment, sorry. I'll get to it eventually.

As for debugger, use Chrome Remote Debugging with VS Code, I've had a lot of good experience with that professionally.

i've started writing a few blog posts explaining how to create games in the browser in JavaScript. I can't promise anything, so don't take my word for it, but I've been meaning to record YouTube videos/audio recordings of building a game in JavaScript, possibly in a livestream or multiple livestreams. I haven't found the time for any of this yet, so what I can offer at the moment is for you to message me on Twitter, Mastodon, Discord, Matrix or Skype and work out a time that we can sit down and talk about it, voice is probably easier. Please keep in mind that I can't teach you how to code at the moment, though i've been thinking of offering this as a paid service as well, so I'd recommend you to have some knowledge in the JavaScript or Node ecosystem before you get in touch right now. I can help you get started with my, very rudimentary for now, audio game toolkit things, bundlers such as webpack or parcel, audio libs like Sono, howler or Resonance, any of that as well as some Electron specific things if you choose to go the desktop route. This is likely the easiest way to get an answer out of me at the moment, so I'll leave my contact info below. I most likely won't answer random calls, so I'd appreciate it a lot if you messaged me first.

Twitter: @dragon1424
Mastodon: @[email protected]
Matrix: @talon:matrix.iamtalon.me
Discord: Talon#4851
Skype: drake1424

Again, only bother if you have some experience with JavaScript. I will ask you about this. Node is not required, but a nice to know for sure. Sorry, I really don't have a lot of time at the moment otherwise I'd like to help out anyone. sad But maybe I will in the future.

--
Talon
Wanna play my Games? Listen to my Music? Follow me on Twitter, and say hi~
Code is poetry.