Welcome to my game development blog!

View the archives or scroll down for the latest posts.

WebGL Page Backgrounds!

I’ve always been inspired by Shadertoy, so I thought I’d use that idea to make a few interactive backgrounds for my website. The concept is simple: render two triangles and create awesome images in the fragment shader. While Shadertoy has many inputs to query and buffers to draw to, I limited myself to the image resolution, mouse position, and time since the program started. Since I had no persistence or multiple passes, I went with some simple and fun effects.

If you look at the top of the page, there are several icons that you can click on to change the background. The first background is a vertical gradient that changes colors over time. You can move the mouse up and down to affect the interpolation between two gradients. I chose this to be the landing background, so nothing moves or is too distracting if you just want to browse the website. The second background is a metaball grid where you can move a separate metaball within the grid. I chose this because metaballs seem like a good precursor to learning raymarching, which is something I’ve been looking into lately. The final background is a fractal image where you can pan around with the mouse. Fractal patterns have always interested me, and there’s ton’s of examples on Shadertoy to reference.

Continue Reading →

Creating a Static Spline Editor in Unity

Before the production of Edge of Home and Space Dreams ramped up, I was tasked with creating some tools that could be used during the development process. I knew that we were going to be developing for the Google Cardboard and there were several designs on the table. One of the biggest limitations we had was the lack of meaningful player input. Basically, all the player can do is look around and press a button. To make things worse, the button didn’t work (or didn’t exist) on many of the available Cardboard headsets on the market.

The lack of input the player had meant that we had to come up with a method of moving the player. Many of the designs featured player movement, whether it was between different rooms or rotating around an object. This led me to believe that creating an editor tool for player movement would be a good idea. After some research, I decided that a spline-based movement tool would be the most flexible option.

Continue Reading →

Stitching Procedural Terrain Chunks

When generating large or infinite terrain, it is impractical to render it all using one giant mesh. Most terrain systems use what’s called “chunking”: splitting the terrain up into chunks to split the generation over multiple threads or frames. If the player moves in a far enough in a certain direction, new terrain chunks will be spawned in front of the player and the furthest chunks will be deleted.

While writing my infinite terrain system, I ran into an annoying issue. I had everything else working as I wanted: the height of the mesh was being generated for each chunk, the chunks would move in front of the player and recalculate as the player moved. However, on the edge of each chunk, I noticed seams. I went back and confirmed that the height of the mesh was correct, so it had to be something else. It turned out to be the normals at the edges were being calculated differently per mesh!

Continue Reading →

Using Depth for Textureless 3D

For my project Dreamscape, I was looking to build an abstract, dream-like aesthetic. I decided to go with an unlit textureless 3D approach - I’d been starting my experiments with gradients and wanted to transition that into a game environment.

But I had a problem - without any lighting, objects in the environment tended to blend together, especially the walls of the dream world. It was nearly impossible to navigate. How was I going to maintain my vision without compromising the actual gameplay?

I came to realize that all lighting does is make some areas brighter (closer to white) and some areas darker (closer to black). So if I could do that in a weird and abstract way, I could keep my aesthetic while having a readable environment. While I considered ambient occlusion, fake lighting, and other options, I decided to go with a depth-based approach. What follows is my implementation in Unity, along with a demo to see the effect for yourself.

Continue Reading →

Jekyll Plugin: Index Generator

Before I knew about this file called .htaccess, I was trying to figure out a way to stop people from visiting my asset directory pages. If you don’t know what I mean, have you ever seen a page that looks like this?

Many servers, by default, allow a user to browse the files of whatever directory they specify, unless there is an index.html file in that directory. If the index file exists, that will be shown instead. My original idea was to make a build script that would automatically generate and place these index files in places where no index files existed. I got it working, too! However, shortly after I finished the script, I learned that I could add this line to my .htaccess file and get the exact same effect:

Options -Indexes.

Crazy, right? Well, if you don’t have access to a .htaccess file on your website, and you use Jekyll (or you just want to see how it works), here’s the source.

Continue Reading →

How to Create a Dynamic .favicon Procedurally

You probably know of the .favicon as the little icon in the left corner of your tabs. These icons are often overlooked, but what if I told you that you can play games or watch videos on them? When I learned that icons could be dynamic, I knew I had to give it a try. This tutorial is going to cover making a dynamic .favicon using pure JavaScript. To see the end result of what we’re going to make, look at the .favicon for this website! The icon slowly fades and changes color over time.

Here’s a short preview of what we’re going to get in to. First, we create a HTML5 canvas and use that to create a gradient image using some predefined colors. After that’s done, we create another image using the same template and some tweaked behavior. Next, we implement fading between the two images. At this point the icon is essentially done. For polish, we add feathered edges with customizable sharpness and size.

Continue Reading →

My Inspirations

As I sit in front of my editor, I’m faced with the daunting task of drafting the first post of my blog. I’m having a bit of a writer’s block. I’ve learned so much from other great blogs, websites, and communities out there in the wild, without which I would be far worse of a developer. My goal for the site (in addition to being a host for my portfolio) is to give back to the game development community by sharing my projects and thoughts. Hopefully someone can benefit from what I post as much as I have from others.

But first, I feel an obligation to give credit to those who have inspired me in my journey so far. There’s certainly no way for this list to be comprehensive, and it will fall victim to being relevant to what I’m currently working on, but I don’t think the credit itself is my point with this list. My intent is to demonstrate how much providing simple content online can mean to a random person all the way across the world. It’s as simple as posting about your project, or something that interests you, or just taking a few screenshots. So without further ado…

Continue Reading →