Combat systems and Dungeonism

Pie Chart Combat If you’ve played my Dungeon Escape prototype, you may have encountered a skeleton. If you did, you may have attacked him. If you attacked him, you surely were witness to what I affectionately call my Pie Chart Combat System. I was much pleased when I invented it. It solved a problem I gave myself, which was to make a random combat system that used attack and defense skills and wasn’t picky about what those skill values were. That is, no maximums and minimums. The Pie Chart system takes an attacker’s attack skill, adds it to a defender’s defend skill, picks a number in that range, and then makes the attack successful if the result is less than the attack skill. In other words, the two skills become pies on a wheel of fortune, and then you spin the wheel. It’s simple. That’s why I liked it. It even allows for more than two outcomes if you add in another skill.

The Pie Chart Combat System is one of the fundamental things I carried over from Dungeon Escape to Dungeonism. It was a crucial piece of value I was going to preserve in the new, simpler game, while most things around it changed. In some ways, it was the central aspect of Dungeonism.

Diagram of possible attacks That is, until I got rid of it, which I had to do because it was getting in the way of some other mechanics I had added in. Because one of my goals for Dungeonism was to make the player use the space a little more in his strategies, I came up with a new blocking system. Attacks would always get blocked when the defender was facing the attacker. Right away, this encourages you to always step around your victim before you hit them, which you’re not always close enough to do. (The defender also automatically turns to block if he rested that turn.) This sets up an interesting trade-off that gets too muddied when you’re also hoping not to get tripped up by pure chance. And along with some fatigue-based mechanics, it makes combat interesting enough that any benefit from the ambiguity of a random system is redundant. Sorry, pie chart.

Tagged , , | Leave a comment

cocos2d

I was probably four hours into coding Dungeonism before I discovered the 2D game engine cocos2d. It’s good that it didn’t take me longer because those four hours were essentially wasted. I was already intimidated enough by the strange syntax of Objective-C and the prospect of having to manage memory myself, like a sucker. There was no power left in my brain to grapple with the basic iOS frameworks.

cocos2d was originally written for Python, but it’s been ported to Objective-C, and it’s become a very popular way to make iOS games. It provides an intuitive way to create sprites, move them around, and recognize touches. It also makes it simple to create menus and to switch between scenes. In no time, I recreated everything I’d done from scratch (not much) and was ready to import some the images I had from the Dungeon Escape prototype. Gladly, I left behind grappling with graphics and user input, and I was able to really work on the game. Fantastic.

And Dungeonism doesn’t even use the physics engines Box2d (used by Angry Birds) or Chipmunk, which are integrated into cocos2d for iPhone. It’s no wonder there are so many games that use cocos2d.

Tagged , , , | Leave a comment

Introducing Dungeonism

Screenshot of Dungeonism

Dungeonism

Blog went dark for a while. Hmmm… I guess I was concentrating too hard on my new project Dungeonism. It’s a dungeon crawling game for iPhone. I’ve been coding it since January, and I estimate it’s 50% done, but that might be optimistic. The gameplay is certainly 50% done, but after that, I have a lot of audio-visual polish to add. Right now, it’s a silent game with simple geometric artwork — which captures the classic gaming spirit the final game will have, but more refined.

Dungeonism began life last year as this semi-absurd concept: a 2-dimensional, turn-based take on the Elder Scrolls games. I guess it grew from my desire to continue to play Oblivion while I was in meetings at work. There should be an engrossing fantasy game that demands the same amount of your attention as Bejeweled. To this end, I spent a few months building an HTML/JavaScript prototype of a dungeon game, which you can mess around with if you want. Let’s call this iteration Dungeon Escape. You can play what I made here: http://lab.softwerewolf.com/dungeon/de.html

As you can see, Dungeon Escape has a more detailed (if crudely so) look to it, and that’s because it emphasized world exploration. It was going to take place in a vast world with settings and characters and stories and lots and lots of content that would’ve take many many hours of work to create.

The emphasis in Dungeonism is pure gameplay. You do unlock new dungeons in it. And you do develop your character. But the dungeons are created procedurally each time you play them. And you develop your character so you can play harder dungeons, traveling deeper into them, and encountering new monsters.

It’s a more casual approach, and it brings it closer to the original idea for creating a low-attention, still-immersive experience.

Tagged , , , , | 1 Comment

Adobe Edge experiment: Eddie the Brick

Adobe has seen the future — or at least a potential future — and they have prepared accordingly. If Flash meets an untimely end, Adobe Edge will rise to take its place. Even if Flash sticks around, Adobe Edge is a cool little tool that lets you add HTML/CSS/JS animation to a page in a design-friendly interface, dragging and dropping, timelining and keyframing.

I decided to give Edge a spin, and I made this unfunny Eddie the Brick cartoon with it.

Screenshot of Adobe Edge

The current release is Preview 1, and it’s pretty rough. While working with it I ran into several bugs and missing features. When I first saved my project, it reset all my settings. I was stumped for a bit because I turned off the auto-keyframe function and didn’t realize there was also a function that was hiding all my static objects (because they hadn’t been automatically given keyframes). My project involved bits of text appearing and disappearing, and I couldn’t find a way to have objects only appear at certain times. I used opacity keyframes instead. Images can’t be scaled in the interface. Also, the full animation can’t be looped. None of these are big deals, and I’m sure Adobe will address them as development continues.

One thing that might be an issue occurred when I added a whole bunch of keyframes. Eddie is jittering for the whole animation, so I created a repeating pattern of him slightly, rapidly moving about. The last few pastes I did of the pattern made the program hang for several minutes. It probably also makes up the bulk of the 240k JavaScript file Edge created for the project.

All in all, it’s a cool start, and I look forward to a much-polished version of this becoming a standard part of my workflow.

Tagged , , , , , , | Leave a comment

Scrapy helps me scrape

Between a recent Edward Tufte talk in Denver and the Kindle release of Flowing Data’s new book, my distraction of choice lately has been data visualization. In particular, I’ve been on the hunt for data about my city. I had an idea for a chart displaying a map of houses in Denver color-coded by year built. Now, this is simple and publicly available data. But it’s also not that easy to collect in bulk. The city of Denver has an online database of property records, but you have to search by address. You can’t just download a big table. Also, I don’t want my map to get cut off at the city limits, especially when what people think of as Denver extends far beyond these limits. Which means I’d have to figure out how to extract Denver’s data, and then do the same for every city in the metro area — assuming they even put their data online. This would be a serious pain.

Besides, someone has already gone through the pain for me: real estate websites. I won’t say exactly which site I went to because I’m pretty sure harvesting their data would be considered a terms of use violation. But let’s just say there’s a site out there (and there are several, actually) that serves up all kinds of basic, publicly available data about homes, and they make it easy to browse the entire Denver Metro Area from a single starting page. It couldn’t be more perfect for spidering and data-scraping.

This was my first time building a spider or scraping, but it didn’t take much searching around to find Scrapy, a Python framework for doing just this. It’s a little complicated to start, but they have a good tutorial, as well as a live command line environment that lets you test out code.

In the end, it worked beautifully. If you want the data I scraped, it’s here: Denver Metro Property Data

Now if I can just figure out how to call Google’s GPS-finding service more than 15,000 times a day…

Tagged , , , | Leave a comment

Splitter: A split-testing plugin for WordPress

I built a new little WordPress plugin called Splitter, and I’m using it to run A/B tests on Truth (plus lies). Its purpose is to show different users slightly different page layouts and report back to Google Analytics who was looking at what. It works by randomly setting a cookie for new visitors and then using JavaScript to show/hide elements based on that cookie. It reports back to Google Analytics by setting a custom variable with the cookie’s value.

Here is the source for the plugin, which is made up of three files — two JavaScript, one PHP. The PHP file splitter.php defines the plugin, some settings, and inserts JavaScript based on those settings into the header of the page. The JavaScript file splitter.js does the work of actually setting the cookie, modifying the page, and setting the Google Analytics custom variable.

As for trigger_yoast.js — unfortunately, I ended up coding Splitter to work specifically with Yoast’s Google Analytics plugin. This was a tricky issue for me to figure out because the custom variable has to be set after the Google Analytics scripts are included but before the pageview event is fired. With a Google Analytics plugin, Splitter’s JavaScript can’t run until after the plugin is initialized, but then the plugin has to wait for Splitter to set the variable until it can finish what it’s doing. Yoast’s plugin lets us do that by providing the “Where should the tracking code be placed” and “Custom Code” settings. If the first is set to “Insert manually”, then it’s up to me to trigger the pageview event, so I added a footer action in splitter.php to do that. Then I set the “Custom Code” to call the function in splitter.js — gaVariable() — that sets the custom variable.

I used this to explore whether a couple of the widgets I’ve got in the sidebar of Truth (plus lies) were worth their real estate. The first was the tag cloud. I decided that the goal of my tag cloud was to encourage visitors to explore the most common topics on my blog, so if it was successful, the tag cloud would be driving down the bounce rate.

In my Splitter settings, I created state A, which showed the tag cloud widget, and state B, where it was hidden. The element is defined by a CSS selector. I defined my cookie name as ‘tagcloud’ and my two states as ‘yes’ and ‘no’. With this information, I created two custom segments in Google Analytics that matched for the custom variable name and values, which are the same as in the cookie. Then I applied my segments and checked out the Bounce Rate report for the home page of my blog. (The home page is the only page that had the tag cloud.) Here were my results:

Google Analytics Report

The total bounce rates were: 60.53% total, 68.18% with the tag cloud, and 53.33% with no tag cloud. So, a definite win for removing the tag cloud, right? Not necessarily. Here’s where I’m a total beginner at A/B testing. These results were for just 65 total pageviews — 40 with the tag cloud and 24 without. (I don’t know where the 65th one went.) This leads me into the biggest A/B testing trap, statistical significance. Crazy things can happen by chance, so it’s important to be rigorous about making sure your test results actually say something useful about your design.

The home page of Truth (plus lies) doesn’t get too many hits. Most of the traffic goes to single post pages, so I decided to end my split test without a strong conclusion. I did go ahead and remove the tag cloud though. Not only did my aborted test show no advantage, but some click tracking I was doing at the same time showed that no one ever clicked the tag cloud.

Before doing my second test, I improved Splitter by automatically turning my A/B tests into A/B/A tests. That is, when you create to states to test, the plugin will create a third “control” state that is a copy of the A state. The control state is tracked separately, so in Google Analytics, you’ve got three segments to look at. But now you know that two of these segments should be producing pretty much the same results and that any difference between them is pure chance. Which is helpful when you’re trying to decide if a difference between states A and B is significant.

Armed with this new feature, I set up a test that either shows or hides the “About Me” widget in Truth (plus lies)‘s sidebar. Actually, the test’s still going, and it’s been going for over a month. Here are the current results in Google Analytics:

Google Analytics Report

Still ambiguous! There’s a slight advantage for the “With” states. But for bounce rate, the difference between “With About Box” and “With About Box (Control)” is bigger than the difference between the control state and “No About Box”. A little clearer are the numbers for “Pages/Visit” and “Avg. Time on Site”. Both show “With” and “Control” close together and doing better than “No About Box”.

But only slightly. More than anything, my tests show me that the presence of both these widgets doesn’t make much difference to the users.

Tagged , , | Leave a comment

More on server-side image resizing

This is a follow-up about my modest plugin to use Timthumb to grab dynamically resized images for WordPress.

When we last checked in, my plugin called “ImgSize” was triggered whenever a thumbnail image was requested, and it provided a Timthumb-resized version. Shortly after this, I added the functionality to the plugin to do the same thing for any image that showed up in a post as well. Almost immediately, Google Analytics registered a large drop in traffic to my blog. Google Image Search was no longer indexing my images because their urls were now all to *.php files. I removed the new feature, and the traffic gradually came back.

I returned to the plugin and fixed the indexing problem by adding an .htaccess file to the plugin folder. This file turns on some URL-rewriting, which allows us to place the PHP script call behind an image-like url. Now instead of having an image tag asking for a source like this –

http://truthpluslies.com/wp-content/plugins/imgsize/timthumb/timthumb.php?src=http://truthpluslies.com/wp-content/uploads/hepburn-skateboarding.jpg&w=260

– The tag can request this much friendlier URL –

http://truthpluslies.com/wp-content/plugins/imgsize/resize/260/wp-content/uploads/hepburn-skateboarding.jpg

– And the lovely .htaccess file changes it into the correct request.

I’ve been running this modification on my site for a few weeks and can report no effect on my web traffic or search engine ranking. If you want to try it for yourself, here’s the source: ImgSize

Tagged , , , | Leave a comment

Columns with the Same Height

If the people always want one thing, it’s columns that are the same height. Am I right, people?

It’s one of those annoying things that are really easy with table-based layout, but weirdly tricky when using proper CSS methods. In my time, I’ve made plenty of faux columns (columns that aren’t even but are in front of a background image that looks like two even columns) and I’ve used JavaScript to fix the column heights when the page loads.

Unfortunately, this week I found I needed two equal-height columns that each generated their own CSS box-shadow and that would respond to dynamic content that was constantly changing the height columns should be. On the first count, faux columns were out, and the second count would mean adding extra triggers to keep the JavaScript firing every time the column height changed, which was just too annoying.

Thankfully, I found yet another solution to this problem here: “Equal Height Columns using CSS” by Ed Eliot

First, you add a ridiculously amount of bottom padding to both of your columns, causing their backgrounds to extend past where the bottom should be. Next, you add an equal negative bottom margin, which tells the rest of the page to ignore all that padding. Finally, you surround the two columns with a container and tell that container to hide overflow, which will cut down the backgrounds to just below the bottom of the content of the tallest column. Voila.

Thanks, Ed.

Tagged , , | Leave a comment

Server-side Image Resizing

Over at my blog for random images and news Truth (plus lies), I made a change not so long ago after realizing what’s probably true for most blogs these days — that the home page is not the front page. In other words, most visitors don’t come to a site through the home page. Far more often, they come to the site directly to one post, making that page their entryway. Single post pages are the real front pages of contemporary blogs, so they should be designed to do that job as well as presenting their specific content.

With this in mind, all my single post pages on Truth (plus lies) show the 5 most recent posts in their side bars. Better yet, posts that have featured images will show a smaller version of that image. Which is fantastic visually, but presented me with a little technical challenge. All those featured images were actually being loaded by the browser at full size and being resized on the client’s side, adding a lot of bloat and load time to my pages. I could’ve gone through and made sure the featured images were stored at their thumbnail size, but I wanted a more flexible solution. If I went through resaving all my images at sizes dictated by my current design, then what happens in the future when I change that design? Do I want to resize them all again?

This actually poses a deeper question for me: should I be saving all my content images at sizes dictated by my current design? Wouldn’t it be better to store the highest resolution image so I’ll have it ready in case I ever redesign to display larger images in my posts? What are my options?

It turns out there is a very good option, which is storing — and referencing — the high-res image file but resize it on the server side rather than the client side. There are two good scripts out there ready to do this job for you in a smart way. In fact, one is callled the Smart Image Resizer, and the other is Timthumb. Either would have probably done the job for me, but I went with Timthumb because it seems to have a few more people dedicated to updating it.

Both scripts do the same thing. They take an image url as an argument, along with parameters about what size you’d like that image at, and they return you a perfectly-sized version. They also keep a cache of images they’ve processed, so if you request the same image at the same size over and over, they don’t have to reprocess.

Here’s a picture of Katharine Hepburn skateboarding. The url of the image is http://truthpluslies.com/wp-content/uploads/hepburn-skateboarding.jpg

Now here’s a resized version generated by Timthumb. It’s done with a call like http://truthpluslies.com/wp-content/plugins/imgsize/timthumb/timthumb.php?src=http://truthpluslies.com/wp-content/uploads/hepburn-skateboarding.jpg&w=260

It ends up being ridiculously simple. To add it to my blog, I decided to make a little custom plugin, but I could’ve easily done it in my theme’s functions file as well. One advantage to the plugin is that it gave me a place to put my Timthumb folder. For now, all the plugin does is look for a width attribute whenever a request for a post thumbnail is made. Then it generates the image based on that width. In the future, I’ll probably add to this so that it works on post images as well, but that’s trickier because I don’t have a universal width for images in posts.

Here’s the entire code for my plugin:

add_filter( 'post_thumbnail_html', 'resize_thumbnail');

function resize_thumbnail( $html ) {
$src = $html;
$src = preg_replace('/^.*src\=[\'\"]/', '', $src);
$src = preg_replace('/[\'\"].*$/', '', $src);

$width = $html;
$width = preg_replace('/^.*width\=[\"\']/', '', $width);
$width = preg_replace('/[\'\"].*$/', '', $width);
if (preg_match('/^[1234567890]+$/', $width)) {
$width_string = "&w=".$width;
} else {
$width_string = "";
}

$html = preg_replace('/\s*width\=[\'\"][^\'\"]*[\'\"]/', '', $html);
$html = preg_replace('/\s*height\=[\'\"][^\'\"]*[\'\"]/', '', $html);

$add_string = " src=\"".WP_PLUGIN_URL."/imgsize/timthumb/timthumb.php?src=".$src.$width_string."\"";

$html = preg_replace('/ src\=[\'\"][^\'\"]*[\'\"]/', $add_string, $html);
return $html;
}

Tagged , , , , , | 1 Comment

Quotas – a bulk to-do tracker

I use Remember the Milk to maintain my to-do list. In the past year, I’ve added a lot of repeating tasks to it. These are items like “clean for an hour” and “work on music (10 minutes)”, and they’re intended to build up as I blow them off so that I know how much laziness I have to make up for. Then what usually happens is that I take care of a bunch in a spurt of productivity.

The issue arises that my to-do list gets overrun by these multiple items, and it becomes tough to see past a long list of “clean for an hour” duplicates to notice some of the actual individual items like, say, “cancel cable”. Suddenly the list isn’t useful for anything other than a rough meter of long I’ve slacked on these repeating items.

Which brings us to Quotas, an idea for an application that keeps track of bulk to-do items. Instead of displaying a line for every individual instance of these repeating items, Quotas instead shows you a meter that builds up as time goes by and gets knocked back down when you actually do stuff.

And each meter doesn’t have to apply to a single item. One of my most important repeating tasks is “Do Something Awesome”, which is how I ensure that I stay active with my personal creative projects. I check off instances of “Do Something Awesome” when I post a substantial blog item (like this one) or when I post a song or an original drawing to one of my blogs. I also check one off when I post three minor blog items. Minor items are usually found images or links to interesting articles where I don’t editorialize much.

When I define “Do Something Awesome” as a quota in Quotas, I define how often its value increases — so let’s say it increases by 1 point every day. Then I’d define some actions that would make it decrease. Like a 200 word blog post, which would count for 1 point, so if I did this action every day, I’d stay caught up. Or how about reblogging a found image. I’d make that count for 1/3, and I’d also set a daily limit to this action of 3. So if I reblogged 3 images per day, I’d keep up. But if I fell behind, I wouldn’t be able to catch up solely by reblogging images, forcing me to do some of the other actions I’ve defined. This pretty much summarizes my self-imposed rules that I’m currently using with Remember the Milk.

Let’s look at some sketched wireframes.

Quotas Wireframes

I should point out that this interface is intended for an iPhone. Here we see the home screen, which would have a bar chart at the top, showing the current levels of all the quotas. These bars would expand in width if there aren’t enough of them to fill the space, but if there are too many, you could slide them horizontally to see what you might be missing. Below the bar chart is a grid of all the actions you’ve defined, scrolling downward if need be. When you want to report that you’ve completed something, you just tap on whatever you’ve done. (There’ll probably be some quick confirmation dialog — or maybe just an easy undo message.) To add a new quota or a new action, just scroll that section to the end, and an “Add” button will appear.

We can also see the quota screen and the action screen. These both list the actions and quotas they’re associated with, allowing you to edit those associations. On the quota screen, you can also complete an action that’s associated with that quota. The little “edit” triangle at the top right will reveal some delete buttons as well as making other fields editable.

Finally, I put the schedule screen on there. I’m not sure exactly what this will look like, but there will need to be a semi-sophisticated interface to define things like “once a month, on the first day of the month” or “every third monday and tuesday”.

Leave a comment