Responsive Design With Path of Exile Exchange (

Recently I’ve been playing a game called Path of Exile which I can only describe as Diablo 3 the way it should have been made, on steroids. The game itself offers customization on a truly different level, fun end-game content, and a great community. Made by an indie development team in New Zealand that just keeps cranking out game-changing updates, this is one game you’ve gotta try. </plug>

Now, one aspect of the game that is unlike any I’ve seen is its currency system. For one, it’s actually stable, but the real fun is that it’s based around a bartering system comprised of items that can advantageously be used in different ways. Think about how there’s 5 nickels to 1 quarter, but now imagine that a nickel gives you food and a quarter gives you gas. As you might imagine, that 5:1 ratio might start changing, and that’s exactly the case of the currency system in Path of Exile.

Continue reading »

Indie Developers, The OUYA Has Arrived!

The OUYA has arrived! After hearing how easy it has been for other devs to get their game up on the big screen, I’m very excited to give it a go.

Continue reading »

Retopolized Terrain and Mobile Ready Cartoon Trees

It’s been nearly two months since the last post, and in that time I’ve been doing a lot of important work on Townsend. In a nutshell, I’ve fleshed out the rest of the terrain’s ground, come up with a workflow for retopolizing it, and figured out how to make the cartoon assets mobile-ready. Ready for a ton of pictures? Let’s dive in!

Play this post’s Demo Build!

Continue reading »

YouTube’s New Design: It’s Not Centered

YouTube’s newest redesign of Dec 2012 brings a ton of changes in both function and layout in big ways–and naturally most of its users are up in arms about it. Most people chalk up grumblings after similar redesigns to growing pains, but sometimes there is more to these complaints.

This is probably one of those times.

Users have many legitimate gripes with the new design such as the width of the new side bar forcing most pieces of content to elide, or the changes to how subscription content is displayed. However, in my opinion the most senseless change is the switch from a centered page design to a left-aligned layout.

YouTube, what were you thinking?

Continue reading »

Townsend’s Inventory GUI is Finished

After over a month of on-and-off coding, the first GUI widget is finished–the inventory widget. From a player’s point of view, there’s nothing really that innovative to it; it’s purely functional. However, from a developer’s point of view, dang that thing took a long time to make.

Continue reading »

A Message From Facebook: It Looks Like You Were Going Too Fast And Misusing This Feature, So Your IP Address Has Been Blocked

In classic facebook fashion, it seems that a new mechanism was uncovered in the last few hours at the time of this writing that wasn’t quite fully baked. It appears to be some sort of traffic monitoring system to help stop bots from spamming the system, but the end result so far is a TON of users getting an unhelpful error on the top of their page, reading

“It looks like users on your current IP address were going too fast and misusing this feature, so this IP been blocked from it for up to two days”

Sweet Facebook, glad to hear from you too. Not only do I have no idea what you’re talking about, I also don’t have any idea what to do. Yet another example of a seemingly innocuous error message from a developer’s point of view that is actually very unhelpful–and worse, disturbing–when reading it as a user.

Now if you’re hitting this page from Google and just wondering what to do, I won’t bore you; here’s the simple solution:

  1. Hit Start
  2. Type “cmd” and hit enter. A command prompt will open.
  3. Type in    ipconfig /release    and hit enter
  4. Type in    ipconfig /renew      and hit enter
  5. Enjoy your Facebook


Solution aside, let’s look at how we could have made this error message better. First, note the opening informal language: ‘it looks like’. I actually see this as a good thing in that it makes the interaction more casual and less like a brush with authority–good. Moving on, we get to ‘your current IP address’, and here’s the first bit that could really confuse users. What constitutes an IP address? I would conservatively bet that ~30% of facebook’s users have no idea what an IP address is, and even then the remaining 70% probably wouldn’t know if the IP address being referred to is literally their own computer’s IP or if it’s their access-point/router’s IP (which nearly EVERYONE is behind nowadays). Some guidance on this bit would really help anyone troubleshooting the problem without Google.

Continuing, we get to ‘misusing this feature’. What feature was I using, exactly? Heck, a user logs in and is immediately using 5-10 features depending on how you cut it. And then we get to the consequences for your naughty ways: you could be blocked from it (the said feature?) for up to two days. What a great way to send your users into panic mode! Such a great error message.

Now, given the mistakes, let’s take a shot at how this should read:

“It looks like users on your computer’s current IP address were potentially misusing the <insert feature here> by making too many requests. If you have any issues with the <said feature> in the future, please see this page for support.”

We basically just give the users the complete picture, remove any blame from their part, and avoid the consequences all together by giving them a solution should they come into effect.

Now, for fun I visited a Facebook Community Forum page with nearly a hundred comments from users all within about an hour of my viewing. Obviously there was a lot of complaining going on, but the comments getting the most votes by users were those jokingly criticizing the new ‘speed limit’, bashing the grammar of  the message, or even calling it out as a threat (which is completely justified in my opinion).

As you can see, it looks like this could get some negative PR should this error show up in a large number of users’ newsfeeds–and it could all simply be avoided by some good UX.

Integrating NGUI With FingerGestures

3-14-2013: Wow, this has become one of the most frequented page on my website. In hindsight, its title may be a little misleading for developers looking to use NGUI with FingerGestures, as I don’t go into any code or anything. Leave a comment if you’d like to hear more about something in the post–or even not in the post; I’d be glad to write something up if it will help! :-)

This week I was focusing on getting the UI hooked in and operational, and it looks like there’s going to be a couple weeks left of it yet. The specific operation I was working on this week was swiping down on the inventory list to hide it, and swiping back up from the bottom of the screen to show it again. I’m still not entirely happy with the user experience (UX) and affordances of this interaction given that there’s nothing to tell users to ‘swipe up to show the inventory’, but I do want to remove as much UI as possible in order to let the user focus on the gameplay. Kind of a Windows 8 UX problem with their new smart corners and the heavily gesture oriented interface now that I think of it. Regardless, that’s another post for another day–this interaction is for practice and utility stand-in purposes :-)

Continue reading »

NGUI Implementation and More

This weekend I was able to put in a lot of time into Townsend. In a nutshell, I spent a lot of time on the UI system and being able to pick things up from the ground (ie: harvesting). Apart from learning how to use NGUI, this involved making an inventory system, figuring out how to make icons of ingame objects, and hooking up the touch input code to everything.

This is the same demo as yesterday’s post. New demo in the next upcoming post :-)

Continue reading »

New Assets, New Rig, and a New Job

It’s been quite a while since I’ve written anything on my blog, but that doesn’t mean I haven’t been working on Townsend! In the two months(?!) that I’ve been quiet, I started working full time at my job, and I can’t help but think how lucky I am to be doing exactly what I like, working with absolutely great people, and have better financial stability coming out of college than I had realistically thought possible. Of course, what this means for Townsend is that, while I’ll have less time to put into developing, I’ll be learning more about the Java environment (which is nearly identical to C#) and I’ll have a far greater ability to buy assets. In fact, during the last two months I already began investing in more quality assets from people who are, quite frankly, far better at making them than I am :-p. So far, the list includes…

Cartoon Nature Pack

These plants have an awesome cartooney feel! I already have some trees that I am fairly happy with, but at the very least the rocks, plants, and billboards will fit perfectly. I’ll investigate swapping out my current trees with the ones from this pack in another post as I would have to adjust the colors, and probably re-work my grass texture to get a better comparison.

Continue reading »

Not-So-Faux Columns

Creating a multi-column layout is often the first of many unsolveable puzzles that a novice web developer runs headlong into. It should be an easy thing to do, right? After all, two-column layouts are a standard in print, and you see them everywhere online. Alas, it’s not easy at all… in fact, it’s nearly impossible to make this layout without faking it. Nearly.

The Problem

In css, controlling height is often a big issue. For instance, making a Sticky Footer is another extremely common frustration dealing with height that should be far easier than it is. Interestingly, we often don’t have any issues controlling widths. So, why? The issue lies in the fact that, by default, html elements don’t expand to fit the height of a container, while they do with width*.

So, let’s say you want to have a website with two columns; one column for navigation, the other for content. In most cases, the content column is going to be longer than the navigation column, and it’s going to stretch the website container along with it. Unfortunately this will leave the navigation column all by its lonesome. If the navigation column has no background (or border!), there’s no problem–but if it does, your website is going to look a little lacking.

*Ok, not every element expands to fill width. The main point here is that no element, nor attribute, expands to fill height.

The Solution So Far

To solve this, the standard implementation that web developers have been using is called Faux Columns. The gist of the fake is pretty simple: use a repeatable background on the container to style the column that isn’t filling to the bottom. Because the container will expand to where the height-challenged column will not, this works.

But it’s a fake! And when there’s a fake, there’s a problem. For starters, the styling isn’t actually being applied to what it should be, and that rubs me the wrong way (flags about this being harder to understand, harder to maintain, and harder to change fly up in my head). A more tangible issue is that of borders, for you cannot apply a border to the short column and thus you are limited to border on the long one. Furthermore, the complexity of the stunt becomes unmanageable with 3+ columns in my opinion, as it requires the styling of two columns to be dependent on the container–or, of course, more markup.

The Better Solution

The better solution lies in understanding what I see as the two layers of css design and what attributes tweak them. The first layer is the Rendering layer, which is the layer that determines what the browser will render. Attributes such as background, padding, border, color, opacity, and most others deal with it. The second layer is the Layout layer, which is the layer that tells the browser where the elements are and how to react, and is mostly seen as the page flow. Attributes such as position, margin, float, and display tweak it. The problem with Faux Columns is that it tricks the rendering layer, but doesn’t trick the layout layer. But we will–in a pretty basic way, too:

To trick the rendering layer, we’ll use padding. To trick the layout layer, we’ll use margin.

Wait, what? Use two basic layout attributes to fix a complicated problem?! Yea, it seems fitting, doesn’t it? Here’s the code and a jsFiddle:


<div class="container">
	<div class="left">
		Left Text. Left Text. Left Text.
	<div class="right">
		Right Text. Right Text. Right Text. Right Text.

The CSS:

.container {
	position: relative;
	overflow: hidden;
.left, .right {
	float: left;
	padding-bottom: 9999px;
	margin-bottom: -9999px;
	width: 200px;
	background: white;
.right {
	background: skyblue;

Result (editable):

Left Text. Left Text. Left Text.
Right Text. Right Text. Right Text. Right Text.

You may be thinking that a solution using basic attributes and a pretty straight-forward DOM would have been thought up sooner, and you’d be right. My original search for something better than Faux Columns didn’t yield anything and no one in the office knew of anything better despite the many years of experience I was pooling from, so I spent a few hours coming up with this. Of course, once I knew specifically what to look and scan for, I found my solution already written up. One True Layout has already solved the issue with the same technique, and of course CSS-Tricks’ Chris Coyier includes that solution in his toolbox towards the bottom of the article on the issue.


The most glaring problem is that we’ve just set a static height on something that isn’t static. While you could extend the padding and margin to extremely high numbers, I would think there would be some performance ramifications. This alone makes me say that this solution isn’t anywhere near perfect, and is in fact a little ‘meh’. Other, more specific problems have been found by One True Layout such as printing in IE, Select+Scroll in extremely old gecko browsers, and linking to anchors. My uses of the technique aren’t complicated by these issues, so I haven’t tested if my solution is also plagued by these problems. If you’d like to test, please tell me what you find :-)

So, overall the solution is a little dodgy, almost like a bait and switch actually. But it is so much more real than the Faux Columns technique, and it isn’t trying to pull a fast one on you.