Graphics, Game Dev, Emulators, and other geeky stuff


I’ve finally got around to working on the game I’ve been thinking about for a few years – mainly as an excuse to code something fun and learn something new. That way if I don’t finish it (likely), at least I’ve gotten something from it! Right now it’s HTML5/WebGL/Javascript based, and may get some multiplayer at some point. It’s all open source, under some yet-to-be-determined license – assume probably MIT or BSD.

There are really two kinds of games I want to make, and I’m still trying to figure out how to mash the two ideas together into one – until I do, I’m just going to experiment and see what feels best. To start, I needed some easy way to do that so I wrote a little framework to get going. I’m hosting it on github and you can find it here:

The big bits in it right now are the WebGL helpers and a simple MegaTextures implementation. I’ll be writing more about MegaTextures in a future blog post, but first I wanted to just give a quick overview of what’s included so if anyone is interested in the code they aren’t totally lost.

  • Shared/ has all the framework code, with subfolders for each big area of functionality
    • A lot is pretty simple/unimplemented/etc, so ignore it
    • HNProfileGraph.js draws a nifty graph fairly efficiently, making it great for visualizing timing
    • HNMath.js contains vector, quaternion, and matrix types as well as a matrix stack
    • HNFPSCamera.js is a simple FPS-style camera (x, y, z/yaw, pitch, roll)
  • Shared/GL/ is the WebGL helpers:
    • HNGL.js does setup and works around some compatibility issues
    • HNGLProgram.js wraps vertex/fragment shader programs up in an easy to use form
    • HNGLGrid.js draws a simple grid on the XZ plane
    • HNGLGeometry.js keeps collections of buffers together and has some helpers for creating standard geometry types
    • HNGLQuadDrawer.js draws textured or colored 2D quads – it doesn’t do batching yet, but will in the future
    • HNGLFeedbackBuffer.js handles render-to-texture and retrieval – useful for all kinds of GP-GPUish activity
  • Shared/MegaTextures/ — see next post
  • Experiments/ will have all my little experiments, mainly exercising certain parts of the framework for development and testing

If you grab the repo, Experiments/Template/index.html is the place to start – it’s a simple 3D scene with a grid that can be hacked around on. Use WSAD/arrow keys to move the camera. Escape will toggle the frame loop on and off.

All of this is only tested in the latest Chromium/Windows nightlies, as Firefox has some bugs preventing my stuff from working there and WebKit nightlies on OS X don’t work for me (for some reason). If anyone can provide any help there, I’d greatly appreciate it! ^_^

Also, I’m not a Javascript guy, I just do it in my spare time. If I’m doing something stupid (either in terms of design or performance), please call me out on it!

Add Your Comment

* Indicates Required Field

Your email address will not be published.