Projects

Web presence refresh for Runic Games

After significant lobbying, in early 2017 I embarked upon a quest to modernize the look and feel of our various websites at Runic. Each of the various sites had been created independently over time as they were needed, and so they were rarely redesigned. As a result, our web presence did not possess a brand-unified appearance. I took the view that our website was basically a digital version of our game box, and so as a company that was primary selling games digitally, I set out to correct this oversight by creating site prototypes and UX flowcharts in Sketch.

The result was that I delivered redesigns of our company website, along with our main three game pages. Plus the merch store and company support sites were updated, which I cover below. To this day, the product sites for Torchlight and Torchlight 2 are practically unchanged from my original design.

For this project I provided design direction for the engineer who did the implementation in a static site generator called Middleman. I also worked closely with our Ops Lead and COO to ensure that the design met our company's practical and strategic needs.

As a Star Trek fan, I took immense personal pride in the fact that you could use the Arc Games navigation bar built-in to my design to get to the Cryptic MMO.

Artbook – Basically it was Facebook for the Runic art team

An internal social-collaborative platform for reviewing and sharing images and video content and grouping it into various collections. It was created to serve the needs of the artists at Runic Games during the development of Hob. Artbook was a single-page web application written in PHP/Laravel with a significant amount of client-side JavaScript.

It offered features like email notifications for likes and comments, and a JSON API so that uploads could be piped into a kiosk to display all the content to the studio. It would also transcode image, video, and audio uploads to standard formats so that they could be viewed in any browser without requiring any plugins, which was a fairly big deal in the mid-2010s. All comments, titles, descriptions and whatnot were indexed and globally searchable such that when a user wanted to find something we would query the database asynchronously and reload in the application without reloading the page.

I obtained permission to open source this project during Runic's shutdown. Although I haven't yet done any kind of public release, there may yet still be a future for Artbook someday. 😉

Merch Store – A Shopify frontend w/ order fulfillment by Penny Arcade

Runic Games' merch store needed a facelift, and so as part of a general refresh of our web properties that I spearheaded towards the end of my time there, I redesigned it using Shopify's Liquid templating language to give it a more modern feel.

Hob – Release Date Teaser

I created this graphic in Sketch and Motion and it was shared to social media and our Steam product page for Hob. It combined a video capture from our game along with an overlay to show the date and indicate the relevant vendors. Vendor logos needed to be treated with care, with usage conforming to very specific branding guidelines.

Torchlight 2 IndieBox Promo

This was an insert I designed with Runic concept artist Nick Southam, who provided the lovely logo treatment. It was included inside a rare physical Torchlight 2 collector's edition release that was published by IndieBox, a now-defunct subscription service.

On one side, it provided you with a unique discount code for 20% off of Hob when purchasing through GOG.com, and on the other you could enter code INDIEBOX on our merch store to get a discount from us.

Hob release party at the Raygun Lounge

As we approached our release date for Hob, I was tasked with providing a flyer that we could hand out at our booth at PAX West. I was often tasked this type of design work for conventions and social media, and so this was the design I created. As I recall, I tried to keep in the back of my mind the label of a nice fancy bottle of vodka with really fine typography.

Runic Games Support

I was originally hired at Runic on contract to handle a backlog of support emails that had been gathering dust in the wake of the release of Torchlight. Over time, that role morphed into community manager with a healthy side of ops and graphic design.

During the 2017 refresh of our websites, I made sure to include our email support system, which was powered by Deskpro, a transition I had started a bit earlier from another email system called Request Tracker. I created the vast majority of the knowledgebase articles (many of which still exist on the Arc Games support website today) as well as did most of the autoresponse and ticket routing rules. I even hired and managed a team of support agents. It was quite the time!

Diagnostics – An auxiliary support tool

Written first in Objective-C and then rewritten in Swift, this application was created so that we could gather technical details from Mac customers during the course of troubleshooting support issues for our games. Since I was the resident Mac nerd, my intent was to reduce the pagefuls of instructions we would often have to send, and in particular reduce the amount of email chatter back and forth that was my personal responsibility to deal with.

Once the user clicked Run from the application, it would generate the selected files and then, once completed, would place a resultant zip file onto the user's desktop, who could then send it back to us as an email attachment. This was worlds simpler than doing it all one by one.

Hob Coloring Book

This was another collab with Nick. He created the pages and I did the layout in Illustrator. We had to create both a downloadable single-sided version of the book as well as a physical pre-printed double-sided one that we could hand out to people at PAX West, which is more complicated than you might think. It was pretty cool to see a big stack of those arrive at the Runic office!

Download (PDF):

YouTube Channel Design

Someone had to think about the design of the thumbnails for all our video uploads, a task that typically fell to me. I tried to make sure we had a cohesive look to our channel once I took ownership of its brand management.

Runic/Hob Wearables

I designed some clothing. For our company holiday party, I created a dev team hoodie. It was generally well-received, although I found the material to be a bit finicky. Were I to do it again, I'd probably want to get some kind of soft composite material instead.

The hat was a SWAG item we gave away at PAX West. They were quite popular and drove a lot of traffic to our booth. They of course provided the added benefit of actively advertising the game for anyone wearing them at the show.

Additionally, I raided the concept art folder (probably from uploads on Artbook), and made a bunch of t-shirt prototypes that were intended for future sale on the Merch Store. Had we continued to exist a bit longer, I probably would have had some made. My favorite is the company "Click" logo one. It's supposed to be as if our company logo were an icon on a desktop computer.

Hero Cosplay Guide

We received a lot of interest from folks who wanted to do cosplay, so this was a collab with Matt Lefferts, our Lead Animator. He provided me with a lot of the technical information needed about how to construct the various components of the costume for the hero of Hob. My job was to layout everything logically and then put out a call on social media for people to cosplay. We had some great turnout at PAX.

Download (PDF):

Patrick Blank's Portfolio

At some point along the way, our Lead Level Designer at Runic asked me to build him a website. It was a single-page web app with entirely client-side page rendering. All of the content was stored in a JSON file and loaded through a templating system. It's still up now at www.blanksdesigns.com.

Go Protest Now! – A tiling protest sign creator

I created this app because I kept seeing folks at protests with tiny signs printed out on home printers. It kind of hit me that if you don't know how to use Adobe Illustrator or don't know how to coax Microsoft Word into doing something like this, it would be rather difficult to do. Besides, software to make protest signs ought to be free anyways, or we are potentially limiting people's right to protest in the digital age.

Demo:

Chrome Spheres (Redux)

I recorded a YouTube video about a DOS demo called Chrome Spheres from many years ago back in the 286 days. You can go there for the whole backstory. Lately, I've been learning how to set up pipelines for HLSL to various targets, including WebGL. So I recreated it and this is the result.

Demo:

I made a Tetris clone

I could never release this because of my contract at work, but I recently made a Tetris clone. Core game logic is written in C++ while the layout is done in SwiftUI. I tried adding some new shapes to it, but I can see now that the ones they shipped with were very carefully considered!

Gameumentary: The Story of Runic Games, Torchlight & Hob

The folks from Gameumentary came by and did a video about Runic during the production of Hob. It's a fun watch, and if you look carefully you'll spot yours truly for about a minute or so opining about community management.

I get a bit homesick watching this: Treasure the time you spend with people, for you may never be able to go home again.

Here Begins A New Life

Music is a deeply meaningful part of my life. My interest mainly lies in post-bop jazz of the 1960s, but my interests have broadened over time. I wrote this composition in 2023.

Listen:

Home weather dashboard

One of my backburner projects has been partly fulfilled recently as I took an interest in ham radio and got my license. That was to have a simple weather base station (an Oregon Scientific THGR122NX) outside of the house that takes local readings (temperature & humidity). It sends its data via RF to an Oregon Scientific BAR208HGA clock in my house. I intercept that signal and decode it.

I got the signal decoding working and did the python scripting to gather the data automatically and add it to a Grafana dashboard. I am using rtl_433 running on my Raspberry Pi, which was pretty straightforward, but I had some trouble figuring out the correct flags to appropriately adjust the levels and noise floor. Spent a lot of time just trying to figure out how to decode garbled raw pulse data. Fortunately that wasn’t ultimately necessary.

Shout out to that Raspberry Pi 3. I ask a lot of it. In addition to doing RF listening, it runs a Homebridge instance for my house, and runs weather data gathering scripts that I wrote up in python, it serves the Grafana instance. It backs itself up to my Synology on a fairly regular basis. And now it’s running an RTL-SDR to capture live weather data over RF.

GlanceView

This was originally printed in Unveiled #58, the Camelot Unchained newsletter.

For diagnostic purposes, we collect tons of operational data about the state of our servers. We have plenty of dashboards around the office to tell us all about specific aspects in very fine detail. But one thing we didn’t have readily available was a simple at-a-glance view of the state of all our various systems. There used to be one around, but it was a bit opaque in terms of its presentation of information.

Personally, I like to be able to see exactly what’s going on from a high level, especially since I’m often managing a number of servers simultaneously during testing. So for my purposes, I addressed this lack of visibility late last year by creating a simple terminal-based status dashboard that became invaluable to me. It would tell me which zones were up and what maps they were on, show various channel metadata info, and even the status of connections between certain servers. Very useful!

As time went on and others saw this tool over my shoulders, I was tasked with creating a new app based upon it, but with a much more visual and interactive look to it. I call it GlanceView and it’s based on the same idea.

The app is written in Python and the setup is fairly simple: One thread gathers info from various data sources which it collates into a single JSON stream, then we emit that data via an API running on another thread to any connected clients, whether they are web-based or in the terminal. Over time, I look forward to adding more features to GlanceView and making it even more useful to the team!

ConfigManager

At Unchained Entertainment, the games we create rely on a fully-integrated MMO stack, so it's important that the server configs can be pushed onto a network-accessible location and accessed with great speed and observed in real-time for changes.

Written in C#, this tool was created to sync disparate game cluster (shard) configs between a git repo and the ZooKeeper or etcd remote datastores that the servers use. It supports upload, download, and clean modes, supports filterpath specificity, as well as node validation, and diff checking with support for external tools. Multiple deployment environments may be added/configured dynamically via a JSON file.

IMFPlayer for macOS

One of my favorite computer games growing up was Commander Keen 4. The music was awesome, the levels were super fun, and I wanted to go fly away in the Bean-with-Bacon Megarocket. I was obsessed with the story. This is probably the game that made me want to work in the industry. Later on, I went searching for various fan projects and fan-built tools and I ran across IMFPlayer, which wasn't setup to run on macOS. I got it working and more recently stripped out SDL from it.

This project is a clean Swift reimplementation of the classic id_sd-style IMF playback pipeline, using AVAudioEngine for audio output and the well-tested DOSBox dbopl core for OPL2 synthesis. It intentionally avoids SDL and timer-based loops in favor of a sample-accurate, pull-based audio design.

It's a CLI app that runs on macOS; however, I have a version that also runs the C++ dbopl core in WebAssembly. I'll place a demo of that right here soon.

GitHub: IMFPlayer

Block-based web editor (Codename: "Duke Nukem")

Check out the video below for a walkthrough, but the gist is that I've always wanted Xcode for the web. And I feel that with WebAssembly the way that it is today, the time is ripe for new tools, particularly those that work on the iPad. My intent is for the app to run mainly on iPad and macOS, but I'm also interested in other platforms eventually.

I think the first milestone is to create a super simplified basic portfolio creation tool with a lot of nice templates before I try to tackle the entirety of web engineering use cases!

Star Trek – LCARS graphics

I created these LCARS graphics as part of some 3D fan projects I was working on a while back, building various bridges from the Star Trek movies and shows. It was fun to make them, and learn some of the ins and outs of Adobe Illustrator. I'm sure it helped me while at Runic.

They are fairly faithful (though sometimes simplified) recreations of okudagrams as seen in the show and movies. Mike Okuda has always been a hero of mine.

TOS Movie Era:

TNG Era:

Chronowerx OS

For this one, decided to recreate a screenshot I'd seen from the two-part Star Trek: Voyager episode called Future's End. In the episode, our crew has traveled back to late 20th century Earth and a tech billionaire megalomaniac is trying to steal technology from the future, which will contaminate the timeline. It's a story that is definitely on brand for today.

I take no credit for the three LCARS images seen here in the OS windows. I believe those were just ones I pulled randomly. I tossed this together haphazardly one evening, using Apple emoji for the pictograms.

The Polychord Hour

I was invited to host a radio program on KSER 90.7 FM Everett, WA about jazz. I produced one episode before deciding that it wasn't for me. Among other assets, I created some concepts for the show logo. Following are some concepts for show art, plus the final version:

While I can't post the whole show due to copyright of the songs, I was able to cut together an audio file of all the breaks.

Listen:

Cartracker Concept

This is a concept for an app that I feel like would be rather useful for someone who is trying to buy an electric car. There are so many different technologies for charging and whatnot. It would be nice to have a single apples to apples comparison of what exactly is what. There is an app called Mactracker, which serves the same purpose in the Apple universe, and has been around forever and that's what inspired this idea.

Concepts for this website

I dithered quite a bit before actually putting this website together for real. I don't know why, but I can always work on other people's projects with far more urgency than my own. Some of the early attempts were trending towards a very fiddly and kitchsy result that I'd be less inclined to want to maintain. I'm holding back from posting about a half dozen earlier concepts.

Eventually I decided simple was better, so I focused on trying out different font and color pairings before selecting the one that is the direct ancestor to the current design, which I found to be easily implemented and highly maintainable.