Peeriodicals

About a year and a half ago, shortly after releasing Mint 2, I had a stats-inspired epiphany: What if, instead of mentally processing hundreds of headlines your feed reader did that heavy—we’re talking pre-coffee—lifting and just told you what everyone was collectively talking about? And what if it weighted those “hot” topics and aggregated the ensuing discussions in your feeds together?

You could check in once a day—once a week even—and not miss a beat. You could follow new feeds with abandon, the more you fed it, the more effective it would get. Like a personalized, passive Digg catering to your unique interests.

That’s Fever in a nutshell. For more details check out feedafever.com and don’t miss the screencast (those 5 minutes consumed 48 excruciating hours of my life).

The Village

It’s true what they say, it takes a village to raise a child and Fever wouldn’t exist in its current form without the timely input of a handful of generous and insightful beta testers. We built this city.

The Switch

First things first, move or copy your sign-up form and all support files into the new temporary directory. I use /ingsoon/ which uses the TLD to spell out “Coming Soon.” Make sure to update any non-relative paths that may have changed including paths to stylesheets, images and JavaScript.

Next add the following to an .htaccess file in /ingsoon/ and any other directory that you want to remain accessible to others (eg. your Mint installation):

<IfModule mod_rewrite.c>
    RewriteEngine   off
</IfModule>

Then add the following to your root .htaccess file, changing the IP address to your own (don’t forget to escape the dots with a backslash):

<IfModule mod_rewrite.c>
    RewriteEngine   on

    # Coming Soon redirect
    RewriteCond     %{REMOTE_ADDR}      !^(192\.168\.1\.101)$
    RewriteRule     .* /ingsoon/ [R,L]
</IfModule>

Lastly, update your Campaign Monitor settings to reflect the new path. Go to “Manage Subscribers,” then click on the list associated with your sign-up form. In the sidebar under “Capturing and Processing” you need to update the path in both “Customize subscribe process” and “Unsubscribe settings.”

Now get back to work, you’re so close!

Fast-forward three years. Cufón is sIFR’s heir apparent. But in my quick tests Cufón wasn’t up to the challenge of generating a font.js from any of my pixel fonts. Even if it had, the result would probably have been marred by a pixel’s worst enemy, anti-aliasing.

So yesterday I cracked open a couple of Cufón-generated font.js files and the un-minified cufon.js to figure out how the pieces fit together. I was able to successfully reverse engineer the format and modify my original PXR generator to output Cufón-compatible font.js files.

You can play around with the generator on Pixel Portraits. I haven’t added any sort of error checking and the current outline tracing algorithm is remedial at best; it can only see characters one row at a time. That means it’s especially inefficient on larger pixel typefaces (anything greater than 18px tall). But it’s good enough for me.

With Pxfón I might even be able to carry over the pixel aesthetic from my new splash page to the entire site. That would be sure to confound the average Googler.

I chose an 8-bit aesthetic for Horror Vacui (iTunes App Store link) for a couple reasons. Nostalgia was one. It’s no secret that I’m a bigger fan of consoles past their prime than I am of the current generation. Another significant motivation was inexperience with the game development process. The self-imposed graphic and audio limitations allowed me to focus on figuring out all the invisible things that make a game tick while hiding any gaps in the fit-and-finish. And since the first games I really enjoyed playing were on the NES it seemed logical to open with an 8-bit game of my own.

The Cards You’re Dealt

Once I nailed down the game play using my rudimentary paper prototype, I did some quick sketches to work out the basics of the card design. The only thing that really changed from these sketches was the addition of a colored border that indicates the Temperature of a card which is the same regardless of the element/player the card represents.

The original Wii sprites actually had a lot more detail at first. Water cards had bubbles and Earth cards had pebbles with larger rocks embedded beneath the surface. These details looked great when you examined each card individually but on even a half-full board the extra detail proved too visually noisy and made it difficult to scan the Vacuum quickly.

I sketched out the logo hastily, playing with the art-world definition of horror vacui (a fear of whitespace) and the established card design. The incorporation of the two normal elements helped break up what would have otherwise been flat, irregular type.

The game’s Default.png pays homage to the Pacman kill screen. I knew going in that this intentionally glitchy screen was going to cause confusion (and it already has) but the smile-in-the-mind it gives players who are in the know makes it worth it.

For both the Wii and iPhone versions I created all the art at half-size and then resized to 200% with Nearest Neighbor resampling during export. I did the same for the pixel iPhone and App Store badge for the mini-site. All the graphics were mindful of the 4 colors-per-sprite limitations of the medium I was imitating (with the exception of the logo which combines the palettes of two sprites plus a highlight to make it pop).

Hearing Aid

All the music and sound effects were composed on the Korg DS-10. The main theme started as a demonstration of the Nintendo DS software for my aunt Suzanne this past holiday season. Because of its origins I dubbed it “Gameboy Named Suz.” The start chime is actually an ascending melodic run playing at 220bpm. The flipping sound is straight noise. The other sound effects are just the result of experimenting with various percussive sounds and fiddling with knobs.

Audio was imported by patching the headphone jack of the DS to the microphone jack on my MacBook Pro. I used Audio Recorder to capture the audio and save it as an AIF. I used Audacity to trim, in some cases amplify and then export the individual sound files.

Keeping with game music tradition I’ve created a Horror Vacui Original Sound Version soundtrack EP:

1. Gameboy Named Suz
2. Grover

Play with yourself

One of the most interesting parts of developing the game was creating the CPU opponent AI. It required really thinking about and formalizing my own play strategy and figuring out a way for the CPU to pick the best available option.

One of the fun side effects of developing this AI is that once I worked out the kinks I was able to pit the CPU against itself. This proved handy when it came time to eliminate memory leaks and suggested the player-free demo that starts if you stay on the title screen for more than 15 seconds.

The CPU AI is not as robust as it could be but should keep a novice on their toes for a couple plays. The real magic is playing against a human opponent. There’s nothing like having a friend draw an Ice Age or Inferno card on their last and (what would otherwise have been) winning turn and then taking the game from them.

Conception

The idea for this game started as incoherent, late-night scribbles about water and earth and their opposing natures at different temperatures; somewhat inspired by the element spell/enemy pairs in Final Fantasy games. I had a vague notion that it should be a two player abstract strategy board game (conceptually, if not physically).

As good a place as any to start but the idea was still very abstract. Games need goals and rules. So I decided players should take turns (obvious) placing pieces representing their element on a 4x4 grid (arbitrary) that when filled the player with the most pieces on the board wins (traditional).

Goals are easy. When combined with the initial concept, the goal suggested a name for the game, Horror Vacui, from the antiquated theory that “Nature abhors a vacuum.” So the board became known as The Vacuum. The rules of how the two players’ pieces interact took a bit longer to suss out.

Opposites Detract

For a while I toyed with ideas about the different physical states of the element (in addition different temperatures). Both have vapor, liquid and solid states. Water with mist, water and ice. Earth with dust, lava and earth. But this extra level of detail only confused how the two elements should interact (eg. water’s liquid state is at normal temperature while lava is molten earth—never mind having to map dust to cold).

After eliminating that tangent I decided that on each player’s turn they would select a card from a deck that would randomly determine whether their next piece played would be normal temperature, hot or cold. When placed, its temperature would affect any adjacent pieces—of both players. Matching extremes would eliminate the adjacent piece and opposing would normalize the temperature of adjacent pieces.

I also created two wild cards labeled “Cold Wind” and “Heat Wave.” These would move across the board in a predefined pattern (a straight line for Cold Wind, a sawtooth wave for Heat Wave) with a location determined by the player (who would not set a piece for that turn).

Rules are made to be broken

With the rules ironed out I started to build a prototype with jQuery but quickly decided against going straight into code. I remembered reading about paper prototyping for games (probably on Danc’s Lost Garden or SCAD professor’s Brenda Brathwaite’s blog) so I gave that a go (despite the hand cramp it was fun not staring at a screen for the hour it took to color and cut the pieces). Only to find that the rules (and goal) I laid out didn’t work so well.

For one, draws were extremely frequent since it was a two player game on a board with an even number of cells with occupant majority determining which player wins. Apparently goals aren’t so easy after all. Also, it was too easy for the two players to cancel out each other’s previous move without moving the game forward. This resulted in many interminable games. Finally, explaining the Heat Wave wild card to a second player (as opposed to a computer which would just draw a preview of the moves effect) proved difficult.

The Draw problem could have been solved two ways. I could increase the size of the board giving it an odd number of cells or institute a fallback rule that gives the win to the player with the most normal temperature pieces (which are more stable in terms of gameplay). The second option didn’t eliminate the problem but suggests and encourages a good way to approach the game. In order to play effectively it’s best to balance “attacking” your opponent’s pieces with normalizing the temperature of your own—making them less susceptible to “attack.” I’m actually glad I made a mistake in arbitrarily choosing a grid size—it gave me useful insight into how the game actually works.

The Wild Card problem was the easiest to resolve. Wild cards should affect all of the pieces on the board. They were renamed to “Ice Age” and “Fire Storm” to reflect their new all-encompassing nature. Matching extremes are eliminated, normal temperatures switch to the extreme and opposing extremes revert to normal temperature. The results can be absolutely devastating to one or both players and creates an incentive to normalize your pieces.

Are we there yet?

Resolving the Interminable Game problem proved to be a bit harder. Because temperature is determined randomly there is always a chance that plugging the last hole in the board will open the board back up—sometimes requiring a player to eliminate one or more of their own pieces. I considered limiting the number of pieces played but that conflicts with the goal and the concept of the game.

Over the course of a couple of hours play-testing the paper prototype I refined some of the interaction rules and added some new ones to minimize the occurrence of interminable games. First, when an extreme has an impact on an adjacent piece, the incoming piece is restored to normal temperature. This provides positive feedback for playing offensively or defensively depending on the situation. It also reduces the number of “fragile” extreme pieces on the board at any given time making it less likely for a newly added piece to be picked off on the next turn since a normal piece requires two “attacks” before it is eliminated while an extreme piece needs only one.

A new Sacrifice Rule was added that allows a player to sacrifice a freshly drawn extreme element to normalize an opposing extreme piece already on the board. This allows players to avoid weakening their own pieces or strengthening an opponents piece simply to play a given piece. It also adds another level of strategy when combined with the final revision to the goal.

The new goal (on a 5x5 board) is to fill the board with the most normalized pieces. In the event of a tie the player with the most pieces on the board overall wins.

Continue?

With those revisions made I had a playable and more importantly enjoyable game design. The entire concept and prototyping process took about two days. The next day was spent designing the old school 8-bit graphics. By the end of the following day I had a playable Wii version of my paper prototype. It lacked music and sound effects, animation, title/game over screens and a CPU opponent but with two Wiimotes in hand I could watch the game unfold onscreen in real-time based on the rules and goals I had established.

See also, Eye of the Abhorrer, notes on the visual and audio design of Horror Vacui. Thank you for reading but our princess is in another article!

You can use regular expressions to match urls. Then depending on the url, inject site-specific (or not) CSS and JavaScript. But not just CSS/JavaScript designed to block ads. It’s essentially a cross-browser GreaseMonkey. If you use WebDAV or MobileMe you can publish the rules you create and share them with other GlimmerBlocker users.

Unfortunately, I have access to neither but the rules are easy enough to share even without. Here’s two to get you started.

The first adds a fixed position Mint icon to the bottom right corner of the browser window if Mint is installed on the current site. (Handy for seeing if you’ve missed any pages on your site.) Open up the GlimmerBlocker System Preference pane and click on the Filters tab. Add a new filter named “Mint.” Then add a new rule to “Mint.” Under the Rule tab change the Action to “Whitelist/modify content.” Change Host to “all hosts” and add a description to Comments. Mine reads, “Adds icon to sites that have a Mint.” Then click on the Transform tab. and paste the contents of minted.txt into the text field making sure “Only for content-type” is set to “html.” I’ve been using the Transform tab rather than the dedicated CSS or JavaScript tabs because they don’t seem to play nice with partial documents like Ajax requests. Save and you’re done.

The second is probably more interesting for the non-Mint junkies. It adds two new options to the navigation column on Twitter. It adds a link to your profile page on Favrd and a search form for search.twitter.com—prepopulated to search out indirect @replies. Follow the same steps as above to create a Twitter Filter and rule. Set the Host to “java regexp” and its value to (www\\.)?twitter\\.com. This time paste the contents of twitter-ego.txt into this rule’s Transform tab. Save and you’re done.

At this point both rules should be working in Safari. To enable them in Firefox, open up its Preferences and select the Advanced tab. Click on the Network tab. Then click on the “Settings…” button under Connection. Choose “Manual proxy configuration.” HTTP Proxy should be localhost and by default GlimmerBlocker runs on Port 8228. Click Okay and Firefox is now using GlimmerBlocker as well.

Mint didn’t appear fully formed from the ether. Way before it was an application it was an idea. It became an experiment. Then a simple script. Then a slightly more elegant script. And so on. Mint is the result of literally years of iteration and experimentation. But before even the idea there were years of experimenting with the technology that would make it possible.

So I’ve decided to start small, mapping that organic process onto the new problem of making a game. I’ll be releasing something for the homebrew channel/browser and writing more about the process later this week. It will be the weeklong effort of a novice but it’s a start.

Update: I’ve posted the Wii game, Horror Vacui, and some photos/screenshots. Then I ported the game to the iPhone/iPod touch and Apple released it (link opens in iTunes).

8-bit Café

Suggested by James Bowskill this ‘80’s gaming-themed café was cool enough to revisit during my November-long trip to Tokyo. On the return visit my pal (and host) Jon discovered a wonderful little drink called the Dr. Mario. I’m a little fuzzy on the ingredients but this Dr. Pepper-based cocktail is served in a beaker with a vial of multi-colored jelly pills on the side. As great as it was I’m sure there were plenty of other gems hidden in the Japanese-only menu.

Mega Man 9

Mega Man “Jump! Jump!”ed the shark on the 32-bit Saturn/Playstation more than ten years ago with Mega Man 8. Fortunately Capcom decided to go back to the franchise’s roots with Mega Man 9 for the current-gen systems—quartering the bits in the process. It looks, sounds and plays like Mega Man 4-8 never happened. The pixels are the size of fingernails. The music chirps along. Pattern identification, memorization and reflexes are absolutely required. In other words, it’s a perfect way to burn the midnight holiday oil.

Nestopia

Richard Bannister is the prodigious, undisputed king of emulation on the Mac. While I’ve been using Nestopia (and about half his other emulators with Emulation Enhancer) for years, this past year Nestopia saw a lot of use—especially after Mega Man 9 started an insatiable desire to play unforgiving platformers.

Metroid: Zero Mission

While not exactly 8-bit and not released this year, Metroid: Zero Mission for the Gameboy Advance found it’s way into Slot-2 of my DS Lite quite a bit this year and introduced me to the speed-running scene. Imagine the original Metroid streamlined and refined by the team responsible for Super Metroid. Super, indeed.

Information Chase

Bit Shifter released Information Chase in 2006 on 8bitpeoples. I downloaded it with a bunch of other releases but never got around to really listening to it until this year when it was brought to my attention by the chiptune documentary Reformat the Planet—which takes its name from one of the tracks on this beautiful, 8-bit EP.

8-bit Jesus

In the same vein (and spirit of the season) Doctor Octoroc gave us 8-bit Jesus. Eighteen holiday favorites individually recrafted in the musical style of familiar NES games. I will definitely be breaking this out next year when the rote, unsolicited holiday music begins its annual assault. Like in October.

Korg DS-10

Or maybe I’ll cook up my own 8-bit tunes with the Korg DS-10. Two melodic channels, four percussive, and up to eight DSes linked over WiFi. In a word: rad. Or you could just let these original square waveforms do the talking:

• Bouncy (mp3)
• Ravey (mp3)

Super Potato

Wandering through Akihabara unguided it’d be easy to miss Super Potato. So I took notes. Two floors filled with used retro consoles, games, OST CDs, guides and accessories, it’s a miracle I made it back from Tokyo with a yen to my name. I did pick up a Super Famicom, two controllers, Final Fantasy IV, Final Fantasy VI, Star Ocean and Super Street Fighter II—all for under a hundred bucks. I had a boxy Super Nintendo growing up so I was always envious of the ergonomic design of the Super Famicom/European Super Nintendo.

Now I have one of my very own to enjoy in the New Year.

It only took me ten years and a change of instrument to get beyond the beautifully dense production and uncover the song’s simple but sturdy bones.

I made this recording in one take with my MacBook Pro’s built-in mic using the basic Audio Recorder (which I usually use for “sketching” song ideas). I dropped the resulting recording onto Garage Band to trim, reduce ambient noise, and tidy up a flubbed guitar note in the last measure. I didn’t have a copy of Jacob’s Ladder handy, so I “sampled” myself using a second track in Garage Band.

Tab

And here’s the tab for my arrangement (more for Future Shaun than any other reason):

Verse                     Chorus         Post-chorus       Bridge             

   Em  E/D#m  Am  Bm         A  Amaj7       E  C#m  A                          
e --------------------    e ----------   e ------------    e ------------------
b ---8---7------1---3-    b ----5-----   b ----9-------    b ------------------
G ---9---8------2---4-    G -6--6-----   G ----9----6--    G ------------------
D ---9---8------2---4-    D -7--6-----   D ---------7--    D ------------------
A ---7---7----0---2---    A -7--------   A -7-------7--    A ---------4--------
E -0---0--------------    E -5--5-----   E ----9----5--    E -2-2-5-2---5-2-5--

Track artwork includes a cc’d photo by Tim Duckett.

Enjoy!

There’s been some recent Flickring about mixing Mint with Fluid. Sam reminded me that I still haven’t posted the giant Mint Fluid icon I made to complement the Fever Fluid icon created for the beta testers. Consider it done.

Three years out Mint has established itself as a mature analytics platform. On average ten new people fall in love with Mint every day. Twenty-five percent of all Mint users like it so much they buy additional licenses for themselves, their friends and their clients. And they’re still writing rave reviews about it—both thorough and concise.

As a mature platform, Mint and its users definitely require less hand-holding. Support only consumes about an hour a day, with a bit more on Mondays. Mint only required four maintenance updates this past year with more regular updates and feature additions reserved for the various official Pepper. The past year also saw the introduction of two new official Pepper and a sub-app:

• Visits Diff displays how each of the timeframes displayed by the Visits pane performed over the previous period.
• Directories groups pages and hits by directory.
• Leaves provides device-appropriate views for multiple Mint installations.

Third-party Pepper developers contributed another twelve Pepper and 64 updates to their various offerings.

Off-screen, Mint appeared in a bare-all piece written by Elliot Jay Stocks for .Net magazine and on the chests of about sixty SXSW 2008 attendees, friends and family.

With Mint finally reaching an age where it can entertain itself, there’s more time to work on a new project or two—both of which have generated ideas that will be making their way back into Mint.

More design calisthenics resulting from another restless night. Getcher 1680x1050 here!

The comic site itself highlights another web problem—loads of ‘next’ links, something Omniweb solves with a magical press of the enter key, and I’d love to see implemented in other browsers.

Keen. Until those other browsers implement such a feature I’ve thrown together two simple JavaScript bookmarklets that when invoked (say via the command + [1-9] key command in Safari) go to the url specified by any detected next or previous links.

Prev and Next

I have them mapped to command + 3 and command + 4 respectively in Safari.

The other night while falling asleep my brain was mulling over the different aspects of application development. While I feel quite capable in the individual disciplines, I think the hardest part for me is the process of tying all those aspects together into a cohesive whole.

The next morning I started off the day with some design calisthenics. This series of desktop wallpapers are the result. The archive includes black-on-white and white-on-black versions at 1680x1050.

Download the Widon’t 2.1.1 Wordpress plugin, unzip and upload si-widont.php to /wp-content/plugins/. Activate the plugin from within Wordpress and optionally click on the “Widon’t Options” menu link to input additional tags you want widon’ted.

The States

My sign-up pages usually have three states:

1. The sign-up form
2. The status message for subscribers
3. The unsubscribe message for the dearly departed

All three states are served from the same page. Which state is displayed depends on an optional query string and the presence of a cookie.

The Workhorse

I’ve been using Campaign Monitor ever since Mint’s user base outgrew PHP’s native mail() function. It’s a great service, reliable, easy to use and reasonably priced.

Campaign Monitor provides a simple HTML form that you can copy/paste into your code and allows you to specify urls for custom subscribe and unsubscribe confirmation pages—which conveniently covers all three states. There’s even a Campaign Monitor Subscribers Pepper (created by Mark J. Reeves), which is handy if you’re Minted.

When you grab your form HTML from Campaign Monitor, set your subscribe confirmation page to the url of your sign-up page plus ?subscribed and your unsubscribe confirmation page to the url plus ?unsubscribe (no d).

The Glue

Copy the sample PHP file below, fill with your own wit and beauty (taking care not to disturb the cookie setting and PHP conditionals) and get back to work on that not-so-secret-anymore project we’re all dying to learn more about.

<?php

if (isset($_GET['subscribed']))
{
    setcookie('subscribed', 1, time() +  60 * 60 * 24 * 365);
}
else if (isset($_GET['unsubscribe']))
{
    setcookie('subscribed', '', time() -  60 * 60 * 24 * 365);
}

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title><!-- TITLE --></title>
<!-- STYLESHEETS, JAVASCRIPT, MINT! -->
</head>
<body>

<!-- HEADER, ETC. -->

<?php if (isset($_GET['unsubscribe'])): ?>

    <!-- UNSUBSCRIBE MESSAGE HERE -->

<?php elseif (isset($_GET['subscribed']) || isset($_COOKIE['subscribed'])):?>

    <!-- STATUS MESSAGE FOR SUBSCRIBERS -->

<?php else:?>

    <!-- SIGN-UP FORM COPY/PASTED FROM CAMPAIGN MONITOR -->

<?php endif;?>

<!-- FOOTER, ETC. -->

</body>
</html>