HTML5 Canvas MMORPG Games

Install Node.js in Windows

2011-12-07T07:43:00.001-06:00

If you're like me you are forced to use windows at work, and I know that is quite a few people. I'm not going to get into why that's a bad thing or any of the pro-linux talk, it is what it is. I'm also not going to get into the fact that if you're a gamer chances are you're running windows at home (although I hope http://www.humblebundle.com/ changes all that) as linux isn't the preferred os for gaming, not that it isn't better or worse, again: it is what it is. For the record, I am pro-linux.

For most of what this blog is about is based on node.js. So we need a way to install and use node.js in windows.

Let's proceed to http://nodejs.org/#download

That's the windows msi installer, the one we want. By the time you read this they might be on v1.0.0 for all I know, but I'm guessing it'll be about the same. Currently the 0.6.5 is ~3 MB. Let's run it.

And click "Next".

We're almost done.

Let's open up a text file in notepad and copy/paste this test node.js application:

  require('http').createServer(function(req,res){

        res.writeHead(200,'text/plain');

        res.end('Hello World!');

    }).listen('8080');

Save it as server.js to your root directory C:\ or whatever it may be.

So now we run in a command prompt/powershell:
You can bring that up with Windows Key + R and typing in CMD

Your node.exe is located usually <root>\Program Files\nodejs\node.exe
so probably: C:\Progra~1\nodejs\node.exe

node.exe c:\server.js

The server.js is the one I had you create and save to your root directory earlier.

If it's your first time doing this you'll end up with:

Click "Allow access"

Now open up your browser (here I am using Chrome 17)

And let's see if our server.js is running by following the link or typing it in:

http://localhost:8080/

If your results look something like this you've done it!

Node.js is fully installed, running, and tested. Awesome.

Node.js Options Parser

2011-12-06T11:52:00.001-06:00

To put it simply options parsing is a way to pass arguments to functions in external files. This doesn't sound like a big deal, but it is. Let me explain.

Lets say you have all of your game functions in one giant js file, functions for calculating attack, def, etc. A month down the road you realize that you want to change just about anything, you'll have to either rewrite a bunch or something far worse. Non-modularity is the hallmark of hard to maintain code or the 10lbs of 'stuff' in a 5lb bag.

Wouldn't it be much easier if we could just keep all of our functions separate? Pass arguments to them in a generic and modular way? Update a 20 line file instead of a 1,000+ line file? We can do all of that with options parsers.

Taken from: http://www.catonmat.net/blog/nodejs-modules-optimist/

This time I'll introduce you to node-optimist - the lightweight options parser library. This library is also written by James Halliday (SubStack), my co-founder of Browserling and Testling.

Wonder how lightweight an options parser can be? Check this out:
var argv = require('optimist').argv;
And you're done! All options have been parsed for you and have been put in argv.

Here are various use cases. First off, it supports long arguments:
#!/usr/bin/env node
var argv = require('optimist').argv;

if (argv.rif - 5 * argv.xup > 7.138) {
    console.log('Buy more riffiwobbles');
}
else {
    console.log('Sell the xupptumblers');
}
Now you can run this script with --rif and --xup arguments like this:
$ ./xup.js --rif=55 --xup=9.52
Buy more riffiwobbles

$ ./xup.js --rif 12 --xup 8.1
Sell the xupptumblers
I know you want to buy more riffiwobbles and sell your xupptumblers.

I'm guessing it's in order of magnitudes more complicated, but looks to be necessary.

Server Side functions

2011-12-06T11:15:00.001-06:00

So lets say we have a situation where we have a game where most of the player variables are stored server side, and only showed or used by the player as a "stats" page. The actual usage of the stats, lets say for calculating the attack power or something to that effect would all take place server side, because it's quicker that way. So how do we make these 'remote procedure calls' ?

A Node.js module called dnode: dnode-protocol github repo.

Here is what it is. This is the server.js:

var dnode = require('dnode');

var server = dnode({
    mul : function (n, m, cb) { cb(n * m) }
});
server.listen(5050);

And here is the client.js:

var dnode = require('dnode');

dnode.connect(5050, function (remote) {
    remote.mul(10, 20, function (n) {
        console.log('10 * 20 = ' + n);
    });
});

Now when you run client.js, you get the output:

$ node client.js
200

So the potential for this is great. Computing most things server side will greatly free up client side operations.

Node.js Auto Restart on github change

2011-12-05T09:03:00.002-06:00

Title should say it all: When you make a source code change, it will automatically restart the server. No more manually doing this. Wonderful for development.

https://github.com/remy/nodemon

From the github project:

nodemon
For use during development of a node.js based application.
nodemon will watch the files in the directory that nodemon was started, and if they change, it will automatically restart your node application.
nodemon does not require any changes to your code or method of development. nodemon simply wraps your node application and keeps an eye on any files that have changed.

Node.js Databases

2011-12-05T08:46:00.001-06:00

Been looking into which database to use with node.js for a mmo/rpg.

Criteria:
Fast
Ability to quickly push/pull small bits
Easy to use
Most online literature / largest online help
FOSS

Below we have a list of modules associated with node.js / databases, so these would be our options. There's a lot going on there, a lot of information, not a lot of explanation.

Stumbling on: http://nodejsdb.org/ , it looks like they promise something along the lines of 200% increase in speed, from what to what I have no idea. But this leads to mysql as an option. In fact quite a lot of literature out there leads to mysql as *the* option. If you disagree, let me know in the comments.

Taken from: https://github.com/joyent/node/wiki/modules#wiki-database

Database

SQL SERVER

node-mssql — A node.js MS SQL Server native driver
tedious — A pure Javascript implementation of the TDS protocol, for connecting to SQL Server databases

POSTGRESQL

node_postgres — Beginning of bindings to libpg
node-postgres — Well tested libpq binding and pure javascript PostgreSQL client
FastLegS – PostgreSQL ORM on top of node-postgres.
postgres-js — Postgres protocol implemented in pure JS
postgres-js — Fork of postgres-js, adds parameterized queries and prepared statements.

MYSQL

db-mysql – Binary driver for MySQL (using libmysql). Part of the Node.js DB effort
node.dbslayer.js – Interface to DBSlayer (MySQL)
node-poormansmysql — Asynchronous MySQL driver for node.js using the mysql command-line tool
node-mysql — A node.js module implementing the MySQL protocol
- node-mysql-pool — connection pool for node.js on top of Felix Geisendörfer’s MySQL client node-mysql.
- node-mysql-cache — MySQL query cache for node.js on top of Felix Geisendörfer’s MySQL client node-mysql.
~~node-mysql~~ ~~- -Pure JavaScript MySQL async driver~~ [obsolete]
node-mysql-native — Yet another pure JS async driver. Pipelining, prepared statements.
node-mysql-libmysqlclient — MySQL asynchronous bindings based on libmysqlclient
- RDX – An object-relational mapper (ORM) for node. Backends: node-mysql-libmysqlclient.
node-handlersocket — Pure JavaScript client for HandlerSocket Plugin for MySQL.
persistence.js — An object-relational mapper (ORM) for node. Backends: MySQL.
sequelize – An easy-to-use MySQL Object-Relational-Mapper (ORM) for Node.JS
moose – An ORM for node (Currently only MySQL). Based on node-mysql

SQL LITE

node-sqlite — Bindings for SQLite3. Interface conforms to the HTML5 Web SQL API.
node-sqlite — Fast asynchronous driver: New evented Node.js look, same great SQLite3 taste
node-sqlite3 — Full-featured, asynchronous SQLite bindings with query serialization/parallelization and verbose stack traces

NOSQL AND KEY VALUE

MONGO

mongojs — Simple driver that emulates the mongodb API as much as possible.
node-mongodb — Basic MongoDB client implementation in JS/C++
node-mongodb-native — A pure JavaScript driver for MongoDB.
- node-mongoskin — A future layer for node-mongodb-native.
- node-mongodb-wrapper — As close as possible to the command-line driver. Uses node-mongodb-native.
- mongode — Very thin wrapper around node-mongodb-native that simplifies the API a bit.
- N-Ext — Use Ext.data packages in your NodeJS apps (includes a MongoDB proxy based on node-mongodb-native)
- mongoq — MongoDB is: mongoq(‘mongodb://localhost/db’).collection(‘users’).find().toArray(function(error, docs){})
node-mongolian — Mongolian DeadBeef is an awesome Mongo DB node.js driver that attempts to closely approximate the mongodb shell
mongolia — Flexible wrapper for the nodejs Mongo driver. Lighter than a ORM but easier to use than the driver.
mongoose — Mongoose is a JavaScript library that makes working with MongoDB a breeze.
mongous — Mongous is a simple MongoDB driver that uses a jQuery styled syntax.
nosql-thin – Makes easier to work with MongoDB. Not an ORM. Not production ready.
mongoclikker – Simple MongoDB data viewer
GridFS – Simple GridFS capabilities built on node-mongodb-native.
Official driver – Vote for it on 10gen’s tracker

HIVE

node-hive — dead simple hive client using thrift api
node-thrift-hive — Hive client with multi versions support and a Readable Stream API.

REDIS

redback — a high-level Redis library with support for advanced data structures such as Social Graphs and Full-text Indexes.
awesome — a Redis clone in node.js
nedis — Redis server implementation written with node
redis-node — Comprehensive, high speed Redis client
redis-node-client — Redis Client by Fictorial (deprecated)
node_redis — Complete Redis client that works well with new node and new Redis
redis2json — Easily loads data from Redis into structured JS object
nohm — Redis object relational mapper (ORM)

COUCHDB

node-couchdb-api — An easy-to-use and powerful wrapper for the CouchDB API that follows Node.JS conventions for async code.
LazyBoy — a CouchDB ORM thats easy to use
node-couch — a CouchDB connector
~~node-couchdb~~ ~~- -A full API implementation~~ [obsolete]
node-couchdb-min — Light-weight client with low level of abstraction and connection pooling.
couch-ar — a active record implementation for couchDB (uses cradle)
couch-client — a simple wrapper around CouchDB’s http interface
PJsonCouch — PJs-on-Couch is a client lib for CouchDB’s HTTP API
cradle — a high-level, caching, CouchDB client
couchcmd — CouchDB command line utility using cradle
data.js — Graph persistence for Node.js with CouchDB
couchtato — CouchDB document utility tool
nano — Minimalistic driver for CouchDB based on mikeals/request
YACA — custom api for your couchdb instance generated through introspection.

NOSQL MISC

riak-js — Riak JavaScript client (works on node v0.1.30+)
node-mwire — Client for GT.M & Cache databases
alfred — a fast in-process key-value store for node.js that has functional indexes, streams, replication, …
barricane-db — a transparent object persistence mechanism
chaos — Chaos is a Node.js database
node-tokyocabinet — Tokyo Cabinet binding
node-tyrant — An implementation of the Tokyo Tyrant network protocol for the Node.js
kyoto-client — A client for the Kyoto Tycoon key-value store
keys — Unified interface for key/value store clients
neo4j — Neo4j graph database driver for Node

Node.js Hosts

2011-12-05T08:03:00.001-06:00

Let's get a good list going.

Managed:

Self-Managed (VPS)

DIY

Node.js Hosting

2011-12-01T15:05:00.001-06:00

Just stumbled on Nodester

From their main page:

Deploy your Node.JS applications on Nodester.com for FREE or deploy your apps to your own private cloud instance of Nodester running in your own datacenter or on Amazon EC2, Rackspace, or GoGrid!

Nodester is an open source Node.JS Platform-as-a-Service written in Node.JS with a RESTful API designed to run in any cloud without a VPS! It was the first of it's kind and 100% open sourced under the GNU Affero license on GitHub. -> Watch the video!

Ok, that's a lot of crazy-go-nuts terms.

To sum it up:
Host your game here for free.

Benefits we are looking for:
node.js [check]
nowjs [check]
github [check]
FOSS [check]

Really something to keep in mind.

Math Libraries

2011-12-01T13:59:00.001-06:00

Looking for fast math libraries in js turned out to be a little harder than I thought. If we are always trying to utilize the best available tools for the job than this is something to look at.

Looking down the list of popular choices:
closure (google)
TDLFast
EWGL
glMatrix
mjs
CanvasMatrix
TDLMath

There's a benchmark for webgl matrix libraries over at: http://stepheneb.github.com/webgl-matrix-benchmarks/matrix_benchmark.html

And that's where I derived that short list from.

Running the benchmark (higher is better):

Google Chrome 17.0.x

closure (google): 24.32
TDLFast: 23.53
EWGL: 17.23
glMatrix: 16.11
mjs: 14.76
CanvasMatrix: 11.57
TDLMath: 9.04

Firefox 10.0

TDLFast: 10.39
TDLMath: 9.24
mjs: 9.00
closure: 8.97
glMatrix: 6.90
EWGL: 6.07
CanvasMatrix: 4.88

Your results will vary. It's nice to think you have a large choice, but most of these operate in the same fashion, you're not comparing apples and oranges, you're just comparing apples that are growing on the same tree if not the same branch. Moreover, the less code we write the better to achieve our goals, so whatever scene graph manager we choose: if it implements a particular math lib that might not be the fastest, so be it, we're not about to reinvent the wheel.

Great Webgl Canvas Scene Graph

2011-12-01T13:01:00.001-06:00

Looks like we might have a winner here: http://labs.hyperandroid.com/animation

The project is called CAAT

From their site:

CAAT in essence is a multi-instance director-based Scene graph manager.
It is multi-instance in the sense that you can set an undefined number of directors up for each web page.
Each director is able to manage different Scenes with different timelines.
The scenes contain a graph of different Actor and Containers which conform the animation elements.

CAAT has some features out-of-the-box among which we can highlight:

Seamless zero-coding WebGL and CSS rendering engines.

Unlimited number of Scenes per Director.

Unlimited number of Actors and ActorContainers per Scene.

Hierarchycally applied affine transformations (rotations, scales and translations).

Hierarchycally applied alpha composition.

Unlimited number of timers per Scene.

Ability to define complex paths for translations applied to Actors and ActorContainers.

Easing and interpolation functions for affine transformations and alpha transparency application.

Homogeneous coordinate system. Each contained Actor will receive correct input coordinates on its coordinate system
regardless of its parents applied transformations.

Abstracted input system, from mouse events to keyboard and accelerometer.

Resource management and preloading.

Many types of actors supported: Sprites, Shapes, Text, Path, Interpolator, etc.

Easily extendable framework.

Open Source and MIT Licensed.

Performs properly in all major canvas enabled browsers. Internet explorer must be version 9 or greater.

I'm going to add in the fact that the project looks very professional, and extremely useful. The examples that are provided are very simple in context, and that is a good thing.

One of the many building blocks we need for online multiplayer games is a good solid and easy scene graph implementation. It is one thing drawing 1000 sprites, it is a whole other thing for your game to know it only has to draw 100 of that 1000 to achieve the same results, but much better frame rates. Or trying to propagate matrix multiplications down an unlinked chain of objects, it's like trying to hammer in a nail with your forehead without a scene graph.

CAAT looks like something we'll be exploring in the future on here.

Sandbox: Webgl

2011-12-01T11:44:00.001-06:00

A nice webgl sandbox http://webglplayground.net/

Html5 Webworkers Introduction

2011-12-01T10:12:00.001-06:00

The idea:

Multi-threaded html5 games. Sounds easy enough...

A little bit more detail.

So just about any game can benefit from being multi-threaded.

As an example:

1 thread for handling client side physics. (box2d.js)

1 thread for updating the server (nowjs / socket.io / node.js)

1 thread for managing the scene graph (scenejs, amino, cake, etc)

1 thread for rendering background (ground, buildings, etc)

1 thread for rendering foreground (player, baddies, items, etc)

A main thread for pushing from the backbuffer to the front. (canvas, webgl, etc)

The list can go on and on, not that it should. If a function is simple, quick, and not constantly running, chances are it shouldn't have it's own thread. The benefit of running multiple threads is the holy grail of games: consistent frames per second under variable load. That right there is a hallmark of great game designers. So many times I'll pop in a game that is professionally made for a closed source single system (ps3, xbox) with very known hardware specs and at points in the game they're will be a frame per second drop (offline). This could be debated and I'm sure it is other places.

And here is a little FPS loop (javascript):

var fps = 0, now, lastUpdate = (new Date)*1 - 1;

// The higher this value, the less the FPS will be affected by quick changes
// Setting this to 1 will show you the FPS of the last sampled frame only
var fpsFilter = 50;

function drawFrame(){
// ... draw the frame ...

var thisFrameFPS = 1000 / ((now=new Date) - lastUpdate);
fps += (thisFrameFPS - fps) / fpsFilter;
lastUpdate = now;

setTimeout( drawFrame, 1 );
}

var fpsOut = document.getElementById('fps');
setInterval(function(){
fpsOut.innerHTML = fps.toFixed(1) + "fps";
}, 1000);

This was taken from: http://stackoverflow.com/questions/5078913/html5-canvas-performance-calculating-loops-frames-per-second

I'm sure somewhere someone has come up with a hard fast rule about what a good fps is. I just like to think that anything above noticeably inconsistent and slow. My goal is almost always 30+ FPS for the composited flip, less than that and people will notice, less than 24 and people will really notice.

Here is a wonderful js file for FPS https://github.com/mrdoob/stats.js as always mrdoob is saving our butts.

So on to webworkers: a nice little tutorial: http://www.whatwg.org/specs/web-apps/current-work/multipage/workers.html and here: http://www.codediesel.com/javascript/introducing-html5-web-workers/

What are Web Workers

Web Workers are basically a API specification that lets you create background JavaScript threads to process CPU intensive tasks. Normally in browsers a single thread is created to handle all the JavaScript code. So whatever JavaScript code is run in the browser is executed in that single thread; whether you are doing some calculation or updating page elements. The downside of this is that some CPU intensive piece of JavaScript can render the page unresponsive or slow it to a crawl.

Web Workers alleviate this problem by letting you create multiple JavaScript threads that will run independent of each other, this will prevent one CPU intensive piece of JavaScript from interfering with the UI code.

And there you have it. This post is just an introduction. The eventual goal being an explanation of how to apply webworkers to just about everything. But first I have to figure that out. ha.

Canvas Cheat Sheet

2011-12-01T09:50:00.001-06:00

Looks like someone had their thinking caps on: http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html
It's the html5 canvas cheat sheet. Great for people just starting out.

This is just the tip of the iceberg though in terms of what you can do with canvas.

Install Node.js in Linux Mint

2011-12-01T09:20:00.001-06:00

Stub-in post for development OS.

As a matter of fact, I personally use Linux Mint. I'm just going to say it: it's better than anything else. It's nice having my own blog because I can say things like that, and not have to justify or rationalize. Ha.

So here is a wonderful sh script builder for Mint [Ubuntu] http://apptob.org/

Coffeescript IDE

2011-12-01T08:16:00.001-06:00

So we have to choose what IDE we are going to write our coffeescript in.

So we are looking for some basic things (in no particular order):

syntax hilighting/coloring
compiling to javascript
live debug
ability to handle .coffee files/support coffeescript
refactoring
indentation support/text formatting
simple expansion
very low entry level
free and open source
Javascript support

Let's take a look at the coffee script wiki:

Brewer: rbrcurtis's Brewer project browser based editor uses the ace editor (which cloud9 also uses) to show the compiled JS alongside your coffeescript, much like the coffeescript homepage, and runs a simple nodejs webserver on your machine to provide file manipulation functionality.

Cloud9IDE: tanepiper's Cloud9IDE CoffeeScript Live extension - provides a live debug environment for .coffee files in Cloud9. Of course, written in CoffeeScript too!

Coda/SubEthaEdit:

nfiniteset's CoffeeScript Coda/SubEthaEdit mode — A syntax mode that provides syntax coloring.

parkerl's CoffeeScript.codaplugin - Rough support for compiling and running in Coda's preview

CodeMirror: coffeescript-codemirror-mode

Emacs: defunkt's CoffeeScript Major Mode — provides syntax highlighting, indentation support, and some bonus commands.

gedit: wavded's gedit-coffeescript — provides syntax highlighting.

IntelliJ IDEA/RubyMine/PyCharm/PHPStorm/WebStorm:

yeungda's coffeescript-idea — provides syntax highlighting. development halted: see next item.

netzpirat's CoffeeBrew — an extensive refactoring and improvement upon coffeescript-idea. development halted: see next item.

Official Support is planned for RubyMine 4, using CoffeeBrew as a base. Whether or not this support will be more widely available is currently up in the air. Please add your comments to the bug tracker if you would like to see CoffeeScript support in other jetbrains products than just RubyMine, with all of the features one would expect from a jetbrains product (completion, inspections/intentions, auto-fix, go-to-definition, etc).

jEdit: dhotson's and balazstth's coffeescript-jedit — which provides syntax highlighting and indentation support in jEdit.

Kate: max99x's kate-coffeescript — provides syntax highlighting.

NetBeans: dstepanov's coffeescript-netbeans - compiles coffeescript files without Node.js, advanced syntax highlighting, error checking by background compilation and autocompilation

Notepad++: blakmatrix's CoffeeScript_notepad_UDL - provides syntax highlighting.

Sublime Text 2: jashkenas's CoffeeScript TextMate bundle above provides syntax highlighting and snippet expansion.

Textadept: rgieseke's CoffeeScript Textadept module — provides snippets, additional key commands and indentation support.

TextMate: jashkenas's CoffeeScript TextMate bundle — provides syntax highlighting, snippet expansion, and the ability to run bits of CoffeeScript from within TextMate itself.

Vim: kchmck's Vim CoffeeScript — adds Vim syntax highlighting and indentation support.

Vim snippets collections carlosvillu's CoffeeScript Vim Snippets - add snippets to be used with the snippets vim plugin.

Vim: claco's plugin for jasmine testing in vim with support for CoffeeScript Jasmine/CoffeeSCript Vim Plugin

Vim: clvv's fork of a.vim - support for switching between .coffee and compiled .js files.

Visual Studio:

CoffeeLite

Mindscape Web Workbench - works with CoffeeScript, Sass, and LESS. Free version provides syntax highlighting and compiles CoffeeScript files automatically on save. Pro version adds automatic minification of JavaScript files.

BBEdit: pmuellr's CoffeeScript BBEdit Language Module / plist - not perfect, but seems to handle most things in an acceptable fashion.

Eclipse: provided by Titanium (Aptana) Studio. For now just syntax coloring and a basic class/method outline.

This was ripped directly from the page itself, so I'm not claiming any rights here at all.

NetBeans.

Let's run down the scorecard:

syntax hilighting/coloring [check]
compiling to javascript [check] and it autocompiles in the background
live debug [check]
ability to handle .coffee files/support coffeescript [via https://github.com/dstepanov/coffeescript-netbeans]
refactoring [check]
indentation support/text formatting [check]
simple expansion [check]
very low entry level [not so much]
free and open source [check]
Javascript support [check]
support for node.js [check: on linux/mac]

It just seems like a more fleshed out IDE, although if you are use to something like c# in vs2010 it will feel lacking. Everything on the wiki list is worth a look though, because people spent quite a bit of time developing the coffee script plugins.

Cloud9 IDE

The currently most popular IDE and probably the tie for first place is Cloud9 IDE. It fulfills every requirement in spades, and it's the future of IDEs, without a doubt. My only concern is it's newness. So that's an issue that will resolve itself. Possibly the other concern would be no offline support. But I'd have a hard time remembering when I wasn't connected to the internet in some fashion. The big buzz is centered around it. And support for new technologies is abundant.

A link to the Coffee Script Cloud9 live plugin

Problems with very complicated IDEs I have found in the past are not with the IDE, but with myself. The more complex something is the more of a distraction it is. The "I need to know" syndrome. And after years of screwing around with different IDEs or just complex software: I *don't* need to know. I just have to realize that it is a tool and I just need the basic skills to operate the tool. At one point I had forced myself to not use complex software for much of anything, because I had thought that it was the software's fault that I got nothing done because I had spent all of my time writing plugins or learning all of the key commands, etc. So I had switched to a bare bones text editor. Wow, great, focus.... so where's that one useful tool that I used 1,000 times a day... it's not there, period. So you make due, and in the end you get more done but at the cost of 1.5x the amount of work. That's not smart. The solution: A complicated IDE being used as a simple IDE. Hide everything unless you use it, but don't forget it's there. If you need a plugin then someone else probably has written it, or you're making a mountain out of a mole hill. I could go on and on.

If you feel differently about any of this let me know in the comments.

Blogger Client Side WebGl Test

2011-11-30T14:43:00.002-06:00

First Blogger Webgl test code from:

see anything up there? a canvas with a square and triangle? no? ha.

Sandbox: Webgl Shaders

2011-11-30T14:06:00.002-06:00

Webgl Shader Sandbox: http://mrdoob.com/projects/glsl_sandbox/
Source: https://github.com/mrdoob/glsl-sandbox

This will let you futz around with webgl shaders. I'll try and build a list of sandboxes for the future.

Language

2011-11-30T13:26:00.002-06:00

Language:

There's quite a few to choose from, but if we are talking almost strictly web based, the first thing that comes to mind for most people is javascript. The big trend I have been seeing a lot of lately is coffee script.

From their website:

CoffeeScript is a little language that compiles into JavaScript. Underneath all those awkward braces and semicolons, JavaScript has always had a gorgeous object model at its heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way.

The golden rule of CoffeeScript is: "It's just JavaScript". The code compiles one-to-one into the equivalent JS, and there is no interpretation at runtime. You can use any existing JavaScript library seamlessly from CoffeeScript (and vice-versa). The compiled output is readable and pretty-printed, passes through JavaScript Lint without warnings, will work in every JavaScript implementation, and tends to run as fast or faster than the equivalent handwritten JavaScript.

Honestly do yourself a favor and take a look at their website. Coffee script will change how javascript is written in general, I have very little doubt about that.

So I'd like to state here that any code I post on this blog will either be in javascript or coffee script, this isn't set in stone, but close.

Threenode.js

2011-11-30T13:12:00.002-06:00

Just found out about ThreeNodes.js

It's a visual Webgl interface written in javascript.
Just link together elements and you're off and running.
Live demo: http://idflood.github.com/ThreeNodes.js/

While I love the idea, any kind of visual programming where someone with little to no programming experience can pick it up, this one looks better than most. I have played with Waterbear and things like it, ThreeNodes.js is just more fun. I do wish there was a Canvas version of ThreeNodes.... idea.

I don't really want to get into why someone would use canvas over webgl or the other way around. That's something for another post.

First Post

2011-11-30T12:11:00.002-06:00

Nov 30 2011:
First test post

The idea here will eventually be a working blog about web based games/gaming.

Currently, as of this post, I am looking into:
Javascript server: node.js
Realtime communication: node.js + nowjs
Canvas Scene Graphs: mabe cake.js?
Canvas Physics: Box2d.js?

More on all of this later, of course.

If you have any suggestions about any of this let me know.