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 Torchight 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 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.

When Runic closed, I got permission to open source this project, and although I haven't done that yet, 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!




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 Unvieled #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.




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: