All of the code on this site is completely free to use as you see fit. If you do use any of this stuff in your own projects, I'd be very interested to see them, but please don't feel obliged to request permission or anything. Hopefully some of this code will be useful to someone, somewhere!


WebZombies


A zombie survival game taking place in a procedurally generated world.

The default world has a pre-set seed value, however you can override this by using:

http://www.basementuniverse.com/zombies/?seed=N

There is an editor included so that players can create their own configurations - basically, the entire content list (including initial player properties, zombie AI/generator settings, world generation settings, etc.) is saved to the database for each configuration, so it should be possible to modify pretty much anything. The editor can be accessed by pressing Escape during the game, or at this address:


The editor GUI exposes most of the main settings, but it isn't extensive so if you want to modify a setting that isn't exposed, just get the default content data from:


Then use any JSON formatter to make it easier to read (http://jsonviewer.stack.hu/ is fantastic) and change whatever you want, then POST the data back to the above address (server.php). It should save the configuration and respond with the configuration id. To play the game using this new configuration, go to:





2d Portal


A 2d browser puzzle game, inspired by Valve Software's Portal and Portal 2. It includes an editor so that players can create their own puzzles.









Controls:

  • The game should be entirely playable with the mouse (it should work with touch events as well, but this is currently un-tested). There are also some keyboard short-cuts for desktop PC players.
  • Use the arrow keys to move the player. You can also use the mouse to move - select the 'Player' button in the top right corner and then use the left mouse button to move. You can only move horizontally or vertically.
  • Hold CTRL and left-click on a tile wall or surface to place portals. Alternatively, select the 'Portal' button in the top right corner and then use the left mouse button to place portals. You can only place portals on a tile with the same X or Y position as the player. Click on the portal button multiple times to cycle through portal modes.
  • Press the space bar to pick up and drop cubes, and to press pedestal buttons. When you are carrying a cube or standing in the same tile as a cube or pedestal button, a button will appear in the top right corner allowing you to do this.
  • Each puzzle can have two levels - lower and upper. Lower level tiles are slightly darker than upper level tiles. Dark walls and textured tiles represent non-portal-able surfaces.
  • If you are unable to place a portal, check the path between the player and the target position: when you are standing on the lower level, you are unable to place portals on upper level floors (however you can place portals on upper level walls). There might also be one or more elements blocking the portal path.

Editor notes:

  • Use the tile button (the button with the cube icon) to modify and place tiles. Click this button multiple times to cycle through modes. The portal button next to it can be used to make tile walls and floors portal-able/non-portal-able.
  • To create an element, click on the button in the lower left corner. Once you have created an element, select it and click on the 'Element Settings' button at the bottom to configure its options.
  • To connect elements together, click on the 'Connect Element' button at the bottom of the screen. To remove a connection, just connect the element again (connections toggle on and off).




Platform Game Engine


A basic platform game engine with editor (access the editor here).

This project is currently in progress...

Note: I created a quick list interface for creating user accounts here:

http://www.basementuniverse.com/platform/list.php






Some features:

  • Graph-based entity system for creating interactive maps and scripted sequences
  • Basic event/state system for defining enemy behaviours
  • Lighting (uses multiply composite operations, so probably won't work in IE - only tested in Chrome, so far)
  • etc...




Skeletal Animation Tool


A really simple 2d skeletal animation tool which renders animation sprite-sheets.

I realise there are much better and more comprehensive tools available for doing 2d animation, I just thought it would be fun to build one myself.

It's quite basic - just draw the skeleton, drag and drop images onto the joints and then create animations with keyframes. When you're finished, click 'Render project' in the toolbar and it will download a PNG image with each animation on a separate row.

Note: The link will take you directly into the tool, but you will need to create a user account before you can save projects. I created a quick list interface for creating user accounts and viewing a list of projects here:

http://www.basementuniverse.com/skeleton/list.php




Basement Universe


A single-player space RPG (unfinished as of yet). I started this in December 2010, mainly to see what the HTML5 canvas tag was capable of, and it kind of developed from there. I've not touched it since about May 2011 unfortunately, as the project started getting a bit too difficult to manage - I do intend to re-start this project some time this year though, with a proper plan this time!

Note: it's probably best to resize the window down to 640x480 or something, the framerate is pretty bad otherwise - it's limited to 30 fps using setInterval instead of something sensible like requestAnimationFrame...



Controls:

  • Use the mouse to control where the ship is pointing and hold the left mouse button to apply thrust. You can also use the WSAD keys to move the ship.
  • Space bar is the 'handbrake' (yes, I know, doesn't really make sense in space...)
  • Double-click on items to select them. In the case of the players ship, this will display the hard-point menu and all mounted hardware - select hardware with the left mouse button. For other items, left clicking will target them.
  • You can also hover the mouse pointer over the player's ship and use the mouse wheel to quickly select mounted hardware.
  • Right click or hold the right mouse button to use the currently selected hardware.
  • Click on the planet icon in the top left corner to access the map, ship and options screens.
  • When planets, moons or space stations are selected, they will display the port menu. Click on a port to 'dock' your ship. Press 'X' on the keyboard to exit the port.

Particle demonstrations:




Random Scenery Demo


A simple scrolling scenery demo, inspired by the artwork in Alto's Adventure.












WebGL Tile Test


This is an unfinished JS port of a C#/DirectX tile engine I wrote during summer 2010 - currently it only has a small block of terrain, whereas the C# version had state management, menu systems, actors (using the decorator pattern) and so on...
Use W,S,A,D to move around and mouse wheel to zoom.





The main features are:

  • Terrain tile shader - the terrain textures are stored in a texture atlas. There is also a single-channel terrain texture map, where each pixel represents an id/offset into this texture atlas, so we get textured tiles.

    The only problem with this shader is that the texture id cannot be stored in vertex information, since it would be automatically interpolated, causing a texture banding effect. However, the texture map sampler can be set to not interpolate. Unfortunately I couldn't find anything in the GLSL docs (or HLSL for that matter in the original version) that would exclude a particular vertex property from being interpolated - this means that when building a new chunk of world, the server would have to generate a chunk of texture map as an image and serve it to the client instead of just including the texture id with each vertex.

    The terrain shader also has a second layer for alpha detail textures. These could be used for transitions (e.g. grass edge in various directions/corners etc.) or decals.

    Download Terrain Vertex Shader
    Download Terrain Fragment Shader

  • Water flow shader - I figured out a simple technique for creating multi-directional flowing water in a grid of quads, and it turns out that Valve had actually developed the exact same technique several years earlier (great minds, as they say...)

    In the HLSL/C# version, I calculated the saw-tooth fade value on the CPU so that I could do the same thing in the vertex function, but with cos/sin on the X/Y axis respectively, thus creating directional waves. I'm pretty sure the GLSL/JS version has this included as well.

    There's a great explanation of how the technique works here: http://graphicsrunner.blogspot.co.uk/2010/08/water-using-flow-maps.html

    Download Water Vertex Shader
    Download Water Fragment Shader
    Download Water Flowmap Vertex Shader
    Download Water Flowmap Fragment Shader
    Download Test Flowmap (PNG)

  • Sky shader - mostly pointless to be honest, since it's only ever seen when reflected in the water. Really simple: a background colour, two scrolling cloud layers (so that we can gradually transition between cloud textures) and a stars layer.

    Download Sky Vertex Shader
    Download Sky Fragment Shader




Procedural Terrain Test


A simple procedural world generator - each block of 16 x 16 pixels is a world cell that would be generated as the player moves around. The pixel colour represents the biome or type of terrain, like grassland, forest, city, suburb etc.

I intend to use this in a survival-style zombie game (basically, see how many miles you can travel/how many zombies you can kill before you die).

In the cities (dark gray/brown, for commercial and industrial city respectively), each 4 x 4 block of pixels is a 'city block' (random number of buildings positioned on the corners and given a random height/width so that some meet in the middle or on an edge, meaning each block will have random alleyways between the buildings). The blue lines are city streets, and the red lines are highways.

In the suburbs, I'll probably use something similar to a maze generator (or more likely just a randomly grown tree) to generate the roads - the only challenge is getting this to work procedurally. I'll use a similar technique in the countryside, just with much sparser roads.

Try typing ?seed=some_random_string after the address to change the RNG seed (uses seedrandom.js by David Bau).




Rigid-Body Physics


This demo pulls together some of the other demos on this page and adds in collision response with angular velocity and user-definable mass. It is my first attempt at writing a simple 2d JS physics engine; each actor has a collision model (either Point, Circle, Rectangle or Polygon). If I ever do get around to re-starting Basement Universe, I'll probably use this as a starting point.

Just click on one of the buttons in the top right corner to create an object, then drag them around and see how they respond!

Convex Polygon Decomposition


This is a JS implementation of Mark Bayazit's decomposition algorithm for decomposing a concave polygon into several convex polygons.

Separating Axis Theorem Collision Detection


Collision detection using separating axis theorem. Each rectangle keeps a list of other rectangles that it is currently intersecting.

Swept-Circle Collision Detection


This demo checks if two circles will intersect depending on their velocities (it also checks collisions between a moving circle and a static circle).

Sterling Clearances Website


A small business website designed for a local removals company. The website was powered by a custom CMS.

Sheet Village Association Website


This website was powered by a custom-built CMS. I designed a simple plug-in architecture for the CMS to allow features like comments/ratings and the weather display.

Torpedo Training Website


A several-page static website designed for Torpedo Training Southwest.

http://www.torpedotraining.co.uk

Parallax Stars


A quick demonstration of the parallax stars background technique used on the Google Loon website.

Rich Text Editor


A very simple rich-text editor with text alignment, headings, bold/italic/underlined text, lists, links etc.

CSS3 Drop-down Menu


Just a quick test of some CSS3 features (animations, transitions etc..)

This only works in Chrome at the moment, but I'm sure it wouldn't be too hard to make it cross browser (well, without the animations and transitions in IE of course) and also backwards compatible - one day I'll get around to doing this!