northern-guilds-portfolio
Northern Guilds was a browser-based pixel-art MMO, and I was the lead developer on the project.
You can play the early tech demo I created, here: https://billautomata.github.io/northern-guilds-tech-demo/
At various stages I was responsible for:
- Building a game engine with a custom render pipeline.
- Generating 2D character sprite sheets from animated 3D voxel models.
- Procedurally generating the environment from GIS data.
Game engine with custom render pipeline
Using Pixi.js I created a multi-pass 2D rendering pipeline that has support for real-time lighting, shadows, animated procedural environment textures (grass, water), and animated procedural visual effects (fog).
The tech demo linked above uses the game engine I created.
Above is the game map for the tech demo.
Above are in-engine screenshots demonstrating the real-time lighting, shadows, visual effects, and post processing the engine could perform. This is all custom shader work done by me.
debug-mode-engine-demo.mp4
The video above shows the framebuffers for each stage of the render pipeline, culminating in the compositor. Some layers are only active when there are emissive elements in the scene.
water-effect-example.mp4
The video above demonstrates the fullscreen shader effects used to blend grass and mud tiles, and animate the water.
huge_stairs.mp4
The video above demonstrates the environment displacement effect I developed. The engine reads a heightmap and displaces the entities based on the value. The background is a 2D image.
Above is a gif showing the relationship between the heightmap and the test environment.
2D character sprite sheets from animated 3D voxel models
The art style required 8 directional 2D sprite sheets for the characters. There were 10,000 configurations of character models and props at launch, so I developed a set of tools that rendered a large collection of voxel models to high quality sprite sheets that preserved the art style.
Above is a photo from a presentation I gave internally about the animation tool I was developing for the art team.
Above are the voxel models used to generate sprite sheets.
Above are all the 2D characters generated by the artists.
Above is the output of the process running live in the game. You can play an early tech demo with the characters here: https://billautomata.github.io/northern-guilds-tech-demo/#
sprite-sheets-sheet.mov
Above is a view of an intermediate character render with a weapon. These are mulitiple animations, and you can see all eight directions.
Above is an example of how I was able to correctly preserve important details while downscaling using a custom image processing algorithm.
Procedurally generate the environment from GIS data.
The world map was based on the Lofoten Islands in Norway. We wanted to feature certain areas accurately so I built a series of tools to process the 1 meter laser scan resolution data (32-bit tiff, 72GB) and create the pixel-art game environment.
Above is pulled from a slide given during an internal presentation about the environment generation process.
extrude-and-color.mp4
Above is a rendering of how the shader flowgraph is affected by elevation.
Above is the shader flowgraph that determines the biome based on the GIS data.
shading-reprojected-heightmaps.mp4
Above is a tool I built in Three.js to preview how the environment would look like when shaded.
Above is a screenshot of the true-color mode of the Three.js environment preview tool.
Above are high resolution renders of the environment generator zoomed out. This is created in Blender.
Above is a view of the Three.js preview tool zoomed out.
Above are test renders I made in order to match the art style from what came out of Blender. A lot of color and compositing work was necessary to get the rendering engines to look like the hand-made sprites.
Above are output of the intermediate steps necessary to generate the environment.
Thanks.