Steve Cochrane

Intergalactic Curling League Postmortem

steve@stevecochrane.com (Steve Cochrane) — Sun, 29 Apr 2012 15:20:00 -0700

This past weekend I participated in my first Ludum Dare, a competition in which the goal is to make a videogame from scratch in 48 hours. I am pleased to say that I have emerged with… this thing!

Here’s my Ludum Dare entry page with instructions (it’s not entirely obvious but you click the “Web” link to play), and the following is a bit more about my experiences making it.

When I got to work at 7pm on Friday I was bursting with energy, and later that night I could barely sleep. Maybe it was the caffeine, but I don’t think I’ve been that excited since I vacationed in Japan a few years ago. I had my heart set on making a curling game, because I had taken curling lessons a couple years ago and I thought it would translate pretty well to a simple, 8-bit game. So my original intention was to make ACTION SPORTS CURLING, more or less a curling sim like Baseball or Ice Hockey for the NES.

But, one of the rules for Ludum Dare is that all of the games must incorporate a single theme voted upon by the participants. At first I dreaded this rule because I thought it would be too restrictive, but it actually made the resulting concept a lot more interesting. Once the theme of “Tiny World” was announced, I quickly got the idea of setting the game in space and using tiny planets for the rocks, and Intergalactic Curling League was the result.

The extreme time restriction makes for a crash course in game prototyping. When you only have 48 hours to make a game, you need to have your priorities straight. So at the end of the first evening I had the basic gameplay and physics in place, and while it didn’t quite have all of the functionality, the basic elements of it were playable within a few hours. Going into the weekend I wasn’t sure that I’d be compatible with the Ludum Dare format because I usually take an eternity to finish anything (VIDEOGAME was made over a period of six months, The Mountaineers is pushing nine) but I needed to do something like this and I think it’s going to totally change how I work.

One of the things that I can try to improve next time is to play more to the medium’s strengths. I feel like the NES sports games are more fun than modern sports games because they don’t attempt an entirely realistic simulation of the sport. It was probably less a matter of intent and more a result of the limitations of the hardware, but as videogames, they were more fun back then.

The element of horizontal control was one case in my game where I was able to do that. In real-life curling you can apply spin to the rock as you’re throwing it, but I thought it would be fun to provide more control and allow the player to move the rock horizontally even after it’s thrown. That worked pretty well, but I could have gone further in that direction. For example, when you throw a rock, the longer you hold the space bar, the less powerful the throw. I did this because that’s how it works in real life: as you’re throwing the rock you can hold on to it for longer to slow it down. But, it’s a convention in videogames to make something more powerful as a button is held down, so my game handles power in a way that is contrary to pretty much any other game and I should have recognized that. Other additions such as a power meter to provide more visual feedback would’ve been nice to have too.

I’m a little embarrassed about the music because I wasn’t able to spend much time on it and I know it could be better. But I do seem to have developed a “technique” I’ve used a few times now where I will type out a melody or baseline in MML and get the number of notes in a measure wrong, so that the bassline starts its second measure before the drums do, for example, and it produces unexpected and interesting results. The basslines for both the title screen and the in-game music use this “technique” in addition to some slapdash samples of drums from GarageBand, converted to the NES-native sample format.

Ludum Dare was an amazing experience and I’d highly recommend it to anyone who makes games. Their community is fantastic too; I don’t think I’ve gotten this much feedback on my work since the group critiques in my design classes at college. I feel like I’ve leveled up as a designer, I’m proud to have made one of the 1,400+ games that resulted, and I’m already looking forward to the next one in August!

Logo Design for an 8-bit Game

steve@stevecochrane.com (Steve Cochrane) — Sun, 26 Feb 2012 17:41:00 -0800

Designing a logo for an 8-bit NES-style game is a fun challenge with some pretty extreme constraints, like a 256x240 canvas and a 56-color palette. I recently made one for the title screen of my next game The Mountaineers, and I thought I’d share a process that worked well for me. This might be a little self-indulgent but I do really enjoy it when others share their process like this, so here goes…

1) Find a font to start with

When I’m looking for type inspiration I usually browse Typekit, because unlike most font sites, you don’t have to wade through pages and pages of free fonts that are usually too stylized and only useful in certain situations. Typekit’s selection is all gold.

Rather than the fantasy or sci-fi feel of most NES game logos, I wanted to go for something like what you might see for an adventure movie. Also, ‘mountaineers’ is a very long word, and with the native resolution of the NES being a mere 256 pixels wide, I would need a condensed font. With those two constraints I looked through Typekit’s selection of condensed fonts and found one that I liked: Apertura Condensed.

Since this is going to be rendered at a very small size in blocky pixels, it’s best to choose a font with simple letterforms since there won’t be much room for detail.

2) Disable anti-aliasing

This can be done by setting anti-aliasing to “none” in Photoshop or with -webkit-font-smoothing: none in CSS. It’s almost never a good idea, but for pixel fonts it’s great.

3) Resize the type

I’ve been using a grid with 16px units for in-game objects, so I sized it down so that there would be 16px margins on the left and right. I got really lucky with this as the letters ended up being around 24px or 16px tall, which will be explained in a minute…

4) Clean it up

At first some errant pixels needed to be removed, and then ensuring symmetry in places like the counters of the lowercase O’s and E’s helped. As for the rest, I learned a lot from this Konami logo seen in some latter-day NES games:

Making smooth lines in 8-bit is all about line consistency, and most of the lines here are angled in 3px increments. There’s only one place where the line isn’t clean, on the underside of the M, which is why it might look a little weird there.

The logo is 24px tall, which is a deliberate choice because it’s a multiple of just about everything. It’s a multiple of 2 and 3 as seen above, and they could have used 4px or 6px lines if they wanted to.

My logo is similar: the capital M is also 24px tall, with 2px, 4px and 6px angles. There’s a consistent 4px angle to the vertical lines for all letters, and with a height of 16px for the lowercase letters, 4px evenly divides for both uppercase and lowercase. Once I had that down it was just a matter of trying to preserve the letterforms while also retaining the grid. After a long while I had this:

5) Add a drop shadow

This one’s easy: duplicate the layer, recolor it, and then move it down and to the right by one pixel. Repeat as necessary.

6) Add the “The”

This should have been a quick one, but of course I ended up looking at old Disney film posters on Wikipedia for a good half-hour to see how they typically treated “The” in their logos. That fun little diversion taught me that “The” is usually to the right of the capital letter, sitting below its cap height. Otherwise it’s too distant from the rest of the logo.

7) Put some mountains in there

Or whatever, as long as there’s enough contrast between the letters and the image behind it. The end.

"Humans on the web are by and large represented by text, occasionally images or videos. But the..."

steve@stevecochrane.com (Steve Cochrane) — Wed, 15 Feb 2012 20:33:20 -0800

“Humans on the web are by and large represented by text, occasionally images or videos. But the fact remains that there aren’t actually any people on the web, only very inadequate representations of them. People are much more extensive, enigmatic and nuanced than a profile page can ever suggest.”

- J. D. Bentley

Copying

steve@stevecochrane.com (Steve Cochrane) — Sun, 12 Feb 2012 21:54:38 -0800

The recent story of Curebit getting caught copying a design from 37signals was an entertaining example of, well, what not to do, as a designer or as a CEO. But it also got me thinking a little more about website copying in general.

Many would argue that, although it’s not illegal, it’s unethical, and I completely agree. But even when ethics are put aside, copying the entirety of another business’s website is doing yourself a disservice. What works for another company doesn’t necessarily work for yours, and another company’s entire website is almost certainly not a good fit for you. They’re not you, and you have unique business needs and a unique company culture that deserves special treatment when designing a website.

Serious designers enjoy doing the hard work necessary to come up with a design that best suits an individual company’s needs. I think that’s another one of the reasons why so many designers get upset after incidents like these: it’s disappointing when people don’t care enough to do the job properly.

TIGJam 4

steve@stevecochrane.com (Steve Cochrane) — Thu, 27 Oct 2011 20:40:00 -0700

This past weekend I was at TIGJam 4, an indie game jam at Hacker Dojo, and I loved every minute of it. Basically it’s an annual gathering of indie game makers, both hobbyists and professionals, who get together in the same space to work on their games and to otherwise party. This was not only my first TIGJam, but my first hackathon / jam as well, and while I’m not an expert on these I thought I’d share a bit about what made it so special to me.

1) An almost complete lack of structure.
TIGJam was a four-day event, and you could write the entire schedule on a Post-It note. There was no format, no competitions, no enforced teams, no restrictions on the tools you could use, nothing. As the TIGJam website says, “just do something rad!” which is a really smart approach. The lack of structure leaves room for people to self-organize and to help shape an ideal event for themselves.

Also, when a prize is offered for winning a competition, I think that’s absolutely the wrong motivation. Personally, the process of design itself is where the joy comes from, and the satisfaction of making something that I’m proud of is the motivation, not something external like money. A competition ruins that, and it also creates animosity when everyone should instead be working together and helping each other.

2) The best community you can find.
I hesitated to buy a ticket for a whole month because I saw the list of attendees and thought that I didn’t deserve to go. It was a relatively small event and it had a surprising number of talented people whose work I admire. But I’m really glad that I went because while I didn’t know a single person when I got there, everyone was extremely welcoming and encouraging, and by the time it was over I had befriended a bunch of brilliant and hilarious people.

Another aspect of the community is that everyone, even the event organizers, were working on games. There were no recruiters, sponsors, or anyone shilling their products, just people humbly making things, so any given person in the room is probably working on something interesting and they will have plenty to talk about.

I was also extremely productive and made great progress on my next game! Most of this was done during TIGJam, and It’s still a very early prototype with missing art, no sound, etc., but since I demoed it at the end of the jam and got a pretty positive response, I might as well share, so here’s a brief screencast of Mountaineering.

Since this blog has lain dormant for months now (blame 500 Startups and the encroaching threat of...

steve@stevecochrane.com (Steve Cochrane) — Mon, 25 Jul 2011 22:02:32 -0700

Since this blog has lain dormant for months now (blame 500 Startups and the encroaching threat of demo day) I should probably mention that I’ve been writing alongside my co-workers at the VidCaster blog. My latest, “Great Moments in Online Video History,” was a joy to write. If we post anything at all, it’s because we’ve set ourselves a weekly deadline. Peer pressure = results.

"I’d rather use a service that has a strong, single-minded vision, even if some of the..."

steve@stevecochrane.com (Steve Cochrane) — Mon, 25 Jul 2011 22:02:29 -0700

“

I’d rather use a service that has a strong, single-minded vision, even if some of the decisions aren’t exactly how I’d want them, than a washed-out, milquetoast service created by committee, designed to meet market demand, that tries to make everybody happy.

Another way to put it: if someone out there doesn’t hate your product, it’s probably not worth using.

”

- Andy Baio

"Also: remember, author intent isn’t worth shit. All that matters is how you interpret it. If..."

steve@stevecochrane.com (Steve Cochrane) — Mon, 30 May 2011 16:43:45 -0700

“Also: remember, author intent isn’t worth shit. All that matters is how you interpret it. If something doesn’t work, then it doesn’t work, and intent doesn’t ever excuse that. Period. Don’t ever accept any argument that claims otherwise.”

- Christine Love

The Mystery of the Missing Wiimote JavaScript API

steve@stevecochrane.com (Steve Cochrane) — Sat, 23 Apr 2011 16:56:00 -0700

In the early stages of development, it was possible to play VIDEOGAME in the Wii’s Internet Channel with Wiimote controls, but it’s not anymore. Here’s the story.

After seeing that the Akihabara framework has Wiimote support I searched to see how they did it, and saw mentions of an article on Opera’s site called The Wii Remote API. The URL still resolves, but if you try to view the page all you see is “Access denied.” Chris Ruppell has an archived version of the article and its examples are still up on Opera’s site.

In a post on Opera’s Developer Forums, Chris Mills of Opera said that the article was posted too soon, and it was requested that they remove it. But the article was never restored, and a FAQ on Nintendo’s site about the JavaScript API was taken down as well.

The sad ending to all of this intrigue is that this is all mostly pointless anyway. The Wii’s browser isn’t hardware-accelerated, so performance for even the simplest JavaScript games is far from ideal. I tried Bouncing Beholder, a game notable for running on code that weighs in at less than 1KB, to see how it ran on the Wii browser and even that one runs at less than half speed.

It’s pretty cool that it worked at all, and the Wii’s browser is certainly better than the PS3’s, but this was a bit of a downer after the excitement of the initial discovery. When I was wrapping up development on my game I noticed that it no longer worked on the Wii, and I didn’t bother to fix it.

"Somewhere in recent history the quote from the 1600s about a “jack of all trades” was shortened from..."

steve@stevecochrane.com (Steve Cochrane) — Tue, 19 Apr 2011 20:13:37 -0700

“Somewhere in recent history the quote from the 1600s about a “jack of all trades” was shortened from its original form. “Jack of all trades, master of none, though oftentimes better than master of one.” For designers getting started in the digital industry I personally believe that one of the best things they can do for their career is to pick up as many skills as possible. Learn all aspects of how to design, build, and communicate your ideas with clients and others. This will open up opportunities as you progress in your career and give you the flexibility to evolve as your role or the industry changes.”

- Jonathan Moore

VIDEOGAME

steve@stevecochrane.com (Steve Cochrane) — Thu, 14 Apr 2011 00:03:00 -0700

At last, here is my first videogame, made with HTML5 and Javascript. It’s called VIDEOGAME.

It’s no secret that I love videogames. They’ve been a passion of mine for nearly as long as I’ve been alive. I’ve always wanted to make one, but it seemed like I would have to learn C, Java, Flash, or any of a number of complex tools that just aren’t for me.

So I got really excited when I found out about the new canvas element in HTML5. It’s a 2D animation platform driven by JavaScript, a language that I happened to be familiar with already. With canvas it seemed like I suddenly had all the necessary skills to make a videogame, so I gave it a try and had a blast doing it.

The objective for this project was simple: make a videogame. Note that it wasn’t to make a good videogame, just to make a videogame, period. If people happen to enjoy it, that’s a bonus. So for the best chance at succeeding I chose to apply as many constraints as possible and take it back to the very beginning of popular videogames, with a clone of Space Invaders. Blocky white sprites, a barren black background, and a simple gameplay concept repeated indefinitely. If you’ve played Space Invaders before, you’ll mostly know what to do here. There may also be a devastating laser beam that transforms aliens into fruit.

Along with canvas there is cache manifest support for playing the game offline, local storage support for storing the high score for future play sessions, music and sound effects using the new HTML5 audio element, and touch controls for mobile devices. I even had it working in the Wii Internet Channel with Wiimote controls at one point, but it turned out to be more trouble than it was worth. I’ll write more about that later.

Mobile performance: Canvas (and audio) performance on mobile devices is pretty terrible at this point. If you want to make a game for mobile devices I would advise you to stay away from canvas because it might just break your heart. It will be viable someday, and the iPad 2 actually runs the game pretty well (at half resolution) but in general the canvas is too much of a performance bottleneck. It’s tempting to rewrite the game without canvas because it would probably work fine on all iOS devices, which would be pretty ironic considering that canvas was the whole reason I was compelled to do this thing in the first place.

The music: I once again used YMCK’s Magical 8bit Plug in GarageBand for that NES sound but simplified it even further and restricted myself to just two channels instead of the usual four. The in-game loop is pretty clearly inspired by the simple bass loops of Donkey Kong, also from this era.

Sound really matters in videogames, and it’s surprising to me how many HTML5 games are out there that don’t even have it. Sound is unfortunately disabled for the mobile versions due to mobile OS inadequacies, and it hurts.

The mini-site: This was so much fun. At first I was going to just mirror the look of the game and have the same black background, use the same pixel font as in the game, etc. But since the mini-site is basically the packaging for the game, I instead decided to mimic videogame packaging from the same era. So, obviously the box art for Space Invaders is an inspiration, as well as the exquisite box art for Gradius on the NES, one of my all-time favorites. The text for these boxes, along with the cover artwork, so often evoked an epic, comically overwrought setting that did not come across in the actual gameplay at all.

Additional acknowledgements and thanks: Douglas Crockford’s videos on YUI Theater were valuable for learning to write better Javascript when I was starting out, Mark Pilgrim’s excellent book Dive Into HTML5 taught me just about all of what I needed to know about HTML5, Bill Mill’s walkthrough on how to make a Breakout clone is fantastic for building your first game with canvas, Dominic Szablewski’s Biolab Disaster and Neven Mrgan’s Pie Guy are nice little Javascript games that inspired me, and Yasuke Kamiyamane made the awesome and free Arma Five pixel font used in-game.

"The hope of good design lies in those designers who believe in what they do and will only do what..."

steve@stevecochrane.com (Steve Cochrane) — Mon, 01 Nov 2010 22:15:24 -0700

“The hope of good design lies in those designers who believe in what they do and will only do what they believe…Contrary to hearsay, it is possible to make a living that way.”

- Alexander Girard

Work is more fun than fun. — Noel Coward (via Shaun...

steve@stevecochrane.com (Steve Cochrane) — Tue, 01 Jun 2010 22:52:00 -0700

Work is more fun than fun.

— Noel Coward

(via Shaun Inman)

The moment I saw this trash can at Target, three years ago, I knew that this was the trash can for...

steve@stevecochrane.com (Steve Cochrane) — Wed, 26 May 2010 22:43:49 -0700

The moment I saw this trash can at Target, three years ago, I knew that this was the trash can for me. It was my destiny.

Not until today did I realize why I felt such a mysterious and immediate connection.

Apple would never do this, because they’re much too classy, but perhaps there’s a market for an Official Mac OS X Trash Can™.

I’ve finally redesigned my portfolio. For the best experience, view it on a Mac with a WebKit...

steve@stevecochrane.com (Steve Cochrane) — Fri, 14 May 2010 17:55:39 -0700

I’ve finally redesigned my portfolio.

For the best experience, view it on a Mac with a WebKit browser (Safari or Chrome). For a terrible experience, view it with Windows XP. It turns out cutting-edge web font technology doesn’t look great in a nine-year-old operating system, and hopefully I can still find a way to fix that.

The list of recent web standards developments that made this a joy to make include: Typekit (fonts used are Proxima Nova and Museo Slab), RGBA, WebKit animation, CSS gradients, and HTML5.

I really had fun with this one, and thanks to all of these new CSS tricks I only had to open Photoshop to prepare the images. It has never been a better time to be a web designer.

Introductions Are in Order

steve@stevecochrane.com (Steve Cochrane) — Sun, 11 Apr 2010 15:43:00 -0700

RSS feeds are one of the web’s greatest advancements, ever, and it’s continually shocking to me that hardly anyone uses them.

Seriously, you guys. Feeds are great. They completely changed how I experience the web, how I live. In the time before feeds, I would individually visit all of my favorite sites in hopes that something new would be up, and the most frequent outcome was disappointment. Poor, poor younger self. Why aren’t feeds more popular?

There is the inconceivable possibility that feeds might not be for everyone. But I think another part of the issue here is that hardly anyone makes an effort to explain how feeds work. No one is individually at fault for this, but as a result, the only people who know the glory of feeds are the inquisitive types who seek out an explanation.

For example, if you navigate to a feed with Google Chrome, you’ll see something like the following screen.

Eek! No, no, no. I understand that Chrome doesn’t have native feed support like the other browsers, and that’s completely understandable. But this is the worst thing you could do here, short of showing a blank screen or crashing the browser. Code should never be exposed to the user unless they explicitly ask for it. After being suddenly confronted with this eerie robot-speak a few times, I wouldn’t blame people if they swore off feeds altogether.

It’s especially curious because this is Google’s browser, and they also happen to have what is easily the most popular feed client, Google Reader (not to mention the fact that Google Reader’s home page does a great job explaining how things work). This is clearly a lost opportunity to get more people started with Reader. Here’s a quick mockup of an idea I had.

Nurture those users.

Note: I don’t mean to exclusively pick on Google here, because Safari and Firefox both have native support for feeds and neither of them make an effort to explain anything either. Chrome’s implementation is just what sparked this particular rant. Internet Explorer 8 is the only one that offers any sort of introduction, so, kudos to them.

"You need to go be around artists. And you need to do art every day."

steve@stevecochrane.com (Steve Cochrane) — Sun, 04 Apr 2010 22:33:27 -0700

“You need to go be around artists. And you need to do art every day.”

- Kiko Villaseñor

The Ritual

steve@stevecochrane.com (Steve Cochrane) — Sun, 14 Feb 2010 11:07:33 -0800

It’s vital to establish some rituals—automatic but decisive patterns of behavior—at the beginning of the creative process, when you are most at peril of turning back, chickening out, giving up, or going the wrong way.

— Twyla Tharp, “The Creative Habit”

When it’s time to work, I grab my coffee cup, venture out of my apartment, and walk across the street to Peet’s for a small cup of black coffee. When I return to my desk with my favorite beverage in hand, I’m ready to begin.

I’ve hacked my brain, essentially. I love coffee, but I never drink it when I’m not working on something. As a result, my brain associates work with delicious coffee, and I look forward to work.

From WordPress to Tumblr

steve@stevecochrane.com (Steve Cochrane) — Sat, 23 Jan 2010 17:00:00 -0800

I’ve moved my blog from a hosted WordPress installation to Tumblr. For my modest needs, Tumblr is better in every way.

I’ve already moved in and started off with a piece on my recent move to freelance and a couple quotes. My RSS feed, if you’re subscribed to it, conveniently remains at the same address. You should start getting the new Tumblr posts with no action required. (I knew there had to be a good reason for using Feedburner.)

Rather than expound on writing tools or my reasons for switching, I’ll keep this brief: I want to write. I don’t want to administer writing software.

Freelancer

steve@stevecochrane.com (Steve Cochrane) — Fri, 22 Jan 2010 20:45:00 -0800

Last month I left behind a well-paying job with some great people to potentially fritter away my life savings and move back in with my parents. I became a full-time freelancer.

I’d considered it for a long time, and it took me a while to get past the fear, uncertainty, and doubt. I didn’t know any freelancers, so I didn’t have anyone to talk to about it. I didn’t know if I’d be able to find enough work to pay the bills. I didn’t know how I would set up a business for myself, and I sure wasn’t looking forward to doing my taxes. I imagine most people never get beyond this point.

I noticed that just about all the people in my field who I respect and who make great things are independent, or were at some point. And it was just something that came up in my thoughts more and more. Certain things that I would hear or read would resonate with me in a way that they usually wouldn’t. One was a really touching interview with Jonathan Coulton that I previously quoted. And another was “Freelance to Agency,” a SxSW presentation where Jeffrey Zeldman, Kristina Halvorson, Whitney Hess, and Roger Black discussed when to go freelance. Here’s a quote from Roger Black:

If you were going to do this anyway, then it’s really good to do it on your own, because a boss is only going to get in your way. […] If you start with a small website that you can completely control, then you have the beginning of a list of links that you can give people and put on your blog, and say “this is what I’m doing.”

This is the thing. This really opened my eyes, along with the rest of the presentation, which is all gold. Thank you, Roger. And it’s completely true: my work on the VidSF website, where I have complete control of the front end, is easily the piece of work I’m most proud of.

The last bit of encouragement that I needed came from spending some time at PariSoMa, a coworking space in the SoMa district of San Francisco. If you’re not familiar with coworking, it’s when independent contractors get out of their lonely home offices or coffee shops and work together in a shared office with other independents. You get out of the apartment, you get the camaraderie that you would have in a more traditional office job, and you get to meet a lot of smart, like-minded people.

For anyone considering freelance, I highly recommend finding a nearby coworking space like PariSoMa, and instead of working on a personal project at your apartment or a coffee shop, just drop by and work there for an afternoon. It takes a lot of the mystery out of freelancing, and I’ve met a few of my current clients there.

Knock on wood and famous last words and all, but I’m not worried about finding work. Everyone who sells something needs a website, and the ones who already have a website want to make it better. Web designers and developers are like accountants and lawyers now; everyone needs us.

Freelancing is as scary as it is exciting. But all of the best things in life are like that.