Pirates Love Daisies HTML5 Game Launches!

I’m extremely excited to announce the launch of one of our recent projects: Pirates Love Daisies!

Microsoft approached us a few months ago and asked to work with us to build a best of breed tower defense game in Javascript and HTML5. I was a bit hesitant at first – it’s been quite awhile since I worked with JS and HTML in any great depth, and most of my memories were of fighting browser incompatibilities and cursing the lack of decent developer tools. However, we did some quick code spikes to get a feel for what was possible and decided that this was a great opportunity to gain some applied experience with a new technology while working on a fun project.

Concept

We teamed up with local illustration group Pulp Studios and started brainstorming ideas for the theme of the game. Fairly early on we latched on to the idea of pirates (I mean really, who doesn’t like pirates!), but we needed something for them to defend. We considered going with the typical tower defense model, and simply have the user prevent creeps (enemies) from getting from point A to point B, but I’ve never liked that narrative. What exactly is at point B that’s so important?

We decided that the creeps were out to steal something valuable from the pirates, but we weren’t sure what that should be. Gold was an obvious choice, but it was boring, and it made more sense as the currency for purchasing units and upgrades. Then it hit us… Daisies!

Pirates Love Daisies, Art by Pulp Studios

Why daisies? Because Pirates Love Daisies, of course. The fact that daisies are visually iconic, seemed to be appropriately fun and quirky, and would work well aesthetically may have factored in as well.

With the illustrators working on sketches, we got down to writing code.

Coding

We started out by building core game logic, and a simple library to manage canvas state. We profiled performance, then revisited some of our initial ideas to work with the limitations we found.

Overall, we found working with JS to be a lot easier than we expected. Picking up the language was a breeze, and we were able to apply the processes and approaches we’ve developed from years of working on interactive content with Flash. For me, working with Javascript again actually had a certain pleasant nostalgia to it, as it recalled the days working with ActionScript 1. There is a certain amount of fun and freedom afforded by a dynamic scripting language, though the lack of strict typing, compiler time errors, and language-level support for inheritance (ie. no super keyword) were frustrating but manageable.

We also ran into some browser incompatibilities, though far fewer than we initially feared. The worst of them revolved around audio. It seems that every browser has its own set of irritating quirks related to dynamic audio that we had to stumble our way through. We wound up building an audio manager to resolve these issues that we may clean up and share in the future.

All round, things went fairly smoothly from a coding perspective. We ran into some challenges and had to make some compromises, but we surmounted all the major obstacles and learned a ton.

Pirates Love Daisies

Performance

Overall, I was really impressed by the performance we were able to obtain. Code execution speeds are fairly similar to AS3 (which is impressive if you consider all the extra type data the AS3 JIT has to work with), and graphics performance is, for the most part, reasonable.

IE9 was the big stand out on graphics performance – its GPU-enabled engine is smoking fast, especially with large bitmaps. Interestingly, we found that iOS had terrible performance (when it worked at all) – something like 4-5x slower than Android on comparable hardware.

One other thing we found that’s worth noting is that drop shadows are ridiculously slow in canvas. A few small drop shadows rendered to canvas could drop our framerate in half.

HTML5 Features

HTML5 is actually a collection of standards at different levels of completion, so while it’s easy to refer to this as an HTML5 game, it really just leverages a few of the new features that are included under that umbrella.

Specifically, we used canvas for drawing the game board (terrain, units, creeps, effects, etc), local storage to save local scores, the audio element for all of the sound, and embedded fonts throughout.

Tools and Libraries

One of the challenges we encountered was the lack of good tools. For JS development, we tried a few different options but ultimately settled on Dreamweaver – it’s not a fantastic JS code editor, but it’s decent, cross-platform, and everyone in the office already had it.

The game art was created in Illustrator, then animated in Flash Pro. We built a custom AIR tool for exporting SWF animations to a sprite sheet (a grid of animation frames) which helped out tremendously. We also built a super simple AIR app that preps our JS files, runs level 1 of the google compiler on them, and then runs the result through the YUI compressor. We’re hoping to release both of these apps in the new year, once we have a chance to clean them up.

For testing and debugging, we used the debug tools in every major browser. Roughly half our developers were on Macs using Safari and Chrome, and the other half were using Windows with IE9 and Firefox. This let us spot cross browser issues early on. We also found different problems were more easily solved with different browser’s dev/debug tools.

In our code, we leveraged JQuery, JSON, and a new library we developed called Easel. The Easel library provides a hierarchical display list, similar to the one in AS3, that makes it much easier to work with the canvas element. We released the alpha version of Easel today at EaselJS.com under the MIT license. It should make it much easier for both Flash and JS developers to get started using canvas.

Gameplay

When building a game it’s essential that you don’t underestimate the huge amount of time required to balance gameplay. Our level designer built spreadsheets, graphs, and formula to help model the characteristics of the units, creeps, and maps, but it took hundreds of plays through the game (a sacrifice, to be sure) to get the balance right.

We tried hard to make the game very approachable, with a short tutorial, and easy start, but also layer lots of strategy into it for the more experienced gamer. Our scoring system involves lots of trade-offs. As an example, you get points for defeating creeps and ending waves faster, but you also get points each wave for hoarding gold. You have to decide how to balance these two opposed reward systems.

It was only when, having opened PLD to test some specific feature, I caught myself in my third game trying to beat another developer’s high score (and getting yelled at by my wonderfully patient wife) that I really started to feel like everything was coming together. If you can completely lose track of time while playing your own game, after being immersed in planning, designing, and coding it for a couple months, I think that’s probably a good sign… though it can have a negative impact on office productivity.

PLD-game

Overall

Microsoft was a fantastic client. After suggesting the tower defense genre, they trusted us with all the technical and creative details to make the project a success, while offering great feedback throughout. They put a lot of faith in a company that’s really not known for Javascript or game development, and I’d like to believe it was well placed.

I never thought I’d say this, but Internet Explorer 9 actually looks to be a great browser. It has impressive performance, and seems to be very standards compliant. I would definitely recommend checking it out, you might be surprised.

Everyone involved with the project had a huge amount of fun building it out. We had a great time brainstorming ideas, coming up with ways to tweak gameplay, and spending (way too much) time play testing. We’d love to hear what you think of the game in the comments below.

Easel JS Simplifies Working with Canvas in HTML5

The new Canvas element in HTML5 is powerful, but it can be difficult to work with. It has no internal concept of display objects, so you are required to manage updates manually. The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with Canvas much simpler.

We built Easel based on what we learned while building Pirates Love Daisies, then retrofitted the game to use it. Development on the project would have been a lot simpler if we had Easel from the start.

Easel is being released for free under the MIT license, which means you can use it for almost any purpose (including commercial projects). We appreciate credit where possible, but it is not a requirement.

Examples, API documentation, and the latest version of the library can always be found at EaselJS.com.

Easel is currently in early alpha. We will be making significant improvements to the library, samples, and documentation over the coming weeks. Please be aware that this may necessitate changes to the existing API. We will also be moving it to Google code or GitHub and opening it to contributors once we feel like it’s in a decent beta state.

The API is loosely based on Flash’s display list, and should be easy to pick up for both JS and AS3 developers. In our preliminary testing, Easel appears to be fully compatible with iOS, Android, and all major browsers that support the canvas element.

We welcome feedback on the library in the comments below, at least until we get something more permanent in place.

Upcoming Events in 2011

2011 is looking to be a busy year already! I’m honored to be speaking at the following events in the first half of the year:

FITC Amsterdam, March 8-9 (link)
Always a crazy-fun event, with awesome people and a fantastic vibe! And hey, it’s Amsterdam.

Geeky By Nature, NYC, March 31-April 1 (link)
Hosted by the same amazing folk who put on FlashOnTheBeach, this conference is guaranteed to be a good one, as long as it can get some momentum (New Yorkers, spread the word!).

Flash Camp Brasil, Maceió, April 8-9 (link)
I heard great things about the event this year, and am really excited to check it out in 2011. It’ll be my first time to Brazil, and the host city Maceió looks absolutely beautiful. I’m looking forward to hanging out with some old friends in the area, and getting to meet with the local community.

Microsoft MIX, Las Vegas, April 12-14 (link)
I’m not sure yet if I’ll be speaking at MIX, but I plan to be there regardless. I’m looking forward to hanging out with Microsoft folk, seeing what they are working on with Silverlight/WP7/HTML5, and geeking out in Vegas.

FITC Toronto, May 2-4 (link)
This is the tenth year of FITC Toronto. It’ll be ninth time I’ve spoken there, and the twentieth (yikes!!!) FITC event I’ve spoken at. I’m not sure if I think that’s cool, or if it just makes me feel like an old, grizzled veteran (not as old as Keith Peters though). You know Shawn is going to pull out all the stops for the big one-oh – I’m betting on a truly scrumpulicious event (running out of positive adjectives here).

It’s a time of wide sweeping change in the industry. There’s tons of cool work being done, and lots of new things to learn. This is really a great year to hit up a conference or two to make sure you’re keeping in touch with the tech, and the community. Hope to see you there!

New site and blog design.

After nearly six years of letting it stagnate, we finally got around to redesigning our site and blog. It’s something I’ve wanted to do for a while (read: 5 years), but it always winds up at the end of the list after client work and all the other things we build internally.

I love redesigning our site, because it’s one of the few times I get to return to my (rusty) designer roots. I’ve probably done it 4-5 times over the past few years, but I never get around to actually cutting the design up and implementing it. After sitting on the most recent design for nearly a year, I caved in, and hired a friend of mine to cut it up, move everything to WordPress, and get it ready for deployment. He did a great job, and to be honest, I’d much rather be coding than cutting up comps.

The new home page is super simple. I wanted something that was going to provide the essential info, be easy to keep up to date, and remain extensible so we can improve it in the future. The blog has moved from MoveableType to WordPress, and we’ve dropped all of the Flash based navigation – it was kind of cool back in the days before AJAX, but it was time to dump it. In fact, the only Flash left on the page is the clouds at the top, and the grass at the bottom. This isn’t reflective of any move away from Flash, it just makes sense on a content driven site like this one.

As simple as the clouds and grass are, they were a bit of challenge to build. I really wanted some subtle motion on the screen, but I wasn’t willing to sacrifice more than about 10% of the user’s CPU (assuming a MBP 2.5ghz) for it.

This was easy for the clouds, I just render some long strips of stiched perlin noise with a gradient pre-composited when the SWF inits, and move them at different speeds over top of each other with a screen blend, looping them when they reach the end. Total CPU cost is about 2-3%.

The grass was a much bigger issue, since my previous experiments drawing about half as much vector grass used 60% of my CPU. Reducing the render quality, and using a low framerate helped, but it was still hitting nearly 40% CPU. I ultimately settled on rendering a small, sparse patch of vector grass to a BitmapData object. This image is then displayed in multiple Bitmap objects spread across the full area at different y positions. This massively reduced the cost to render the dynamically drawn vectors, and dropped CPU use to just over 6-7%.

Sometimes, even that 10% is too much. On pages with intense experimental pieces, I wanted to be able to completely shut off the header and footer. To accomplish this, I wrote a little AS3 library that registers a SWF with a companion JS library. I can then make a JS call in my page that instructs these SWFs to pause or unpause. You can toggle this setting by clicking this link.

Unlike the old site, which remained static after it was deployed, we’re planning to evolve and tweak this site as we have free time.

I’m sure we’ll be working out kinks for the next little while, so my apologies for any inconvenience. If you encounter any problems, please let us know in the comments below.

Finding Time to Play… and Using it Effectively

I’m a big proponent of play as a means to grow and succeed. In my career I’ve spent endless hours building things that interested me with no thought of recompense or acknowledgement, simply to broaden my knowledge on a particular subject, or chase a particularly intriguing idea. Play provides you with a fun method for exploring your medium without risk or judgement. It also allows you to build the things you wish people would pay you to build, and market the results to help steer your career.

In my conference talks, I frequently encourage others to experiment with interactive media. At first, I would often be asked “where do you find the time?” In answer to this, I started talking about an approach I call “Passionate Procrastination”, which simply involves using time you might otherwise spend procrastinating to build interesting experiments. We all have those moments in our day when we need to step back from the task at hand and let our brains mull things over. I proposed that rather than read Digg, watch videos, or surf Facebook, that time could be used to work on something else that you are passionate about.

When pressed further, I started talking about how little time was actually required. Twenty minutes every day gives you three full work weeks per year to apply to experimental projects. Considering the average American watches more than twenty minutes per day of advertising, this time shouldn’t be that difficult to find.

This seemed to convince most people (or they simply stopped asking) until today when I was yanked unceremoniously into a dotBrighton meeting via Skype and posed a question from an attendee regarding my recent talk at FOTB (I think his name was Paul, but I was a bit distracted, my apologies if I got it wrong). He cited my twenty minute figure, and asked how I was able to accomplish anything in that little time, given that it typically takes a good five or ten minutes to really ramp up on a new task.

I thought it was a great question, and that it warranted a more coherent answer than whatever I mumbled over Skype at the time. For me, there’s three parts to how I use this time effectively:

Firstly, that twenty minutes is an average that I only use as a demonstration of how little daily commitment it requires to accumulate a fair amount of play time. I would guess that most of my experimentation sessions last between 30 and 90 minutes, but I definitely don’t do it every day.

Secondly, it’s important to have a goal ready for when you decide to take a play break. I maintain a list of ideas in a text file on my computer, and glance over it regularly to keep the concepts fresh. I try to think through the implementation of these ideas during AFK (away from keyboard) times, like when I’m showering, or lying in bed trying to sleep (these are my two most productive idea times). This way, when I have some time to play, I’m ready to jump right into writing code and testing if my ideas work.

I also try to disassemble my implementations into small, easily-achievable sprints and accomplish one or two of them during a single break. This helps define and limit your time, as well as giving you a sense of accomplishment which can help propel you when you return to your usual work.

Thirdly, most of my play time is while procrastinating on other work. This means I already have my tools open and ready to go. In fact, I’ll often have a real project and an experimental project open at the same time, and swap over to play when I get momentarily stumped on real work (or just need a quick break). You mileage on this may vary depending on your work circumstances and your boss.

Play offers so many benefits, and it really helps keep working with technology from becoming mundane. Finding time to do it is likely easier than you think, even if it means missing the next Old Spice ad. I’m on a horse!

Creating Great Developers: Planning

It’s worth reading through the first four parts of this series if you haven’t already: “Introduction“, “Hiring“, “Orientation“, and “Training“.

Once we’ve finished subjecting our new hires to a week (maybe two in future) of classroom training, we turn them loose on an internal project. The core goals of this exercise are:

  • Familiarize new hires with our process and all the steps that go into a project.

  • Apply concepts learned during formal training, and continue their technical growth.

  • Begin developing their competency in critical secondary skills including estimation, time & project management, project planning, user experience (UX), leveraging existing resources, effective communication, QA and issue resolution.

  • Develop skills with tools including development tools, SVN, and Basecamp.

  • Start them thinking about value and business considerations for projects.

  • Force them to respond to feedback and changes in an agile, responsible manner.

The trainees are informed about this project on their first day at work, and reminded of it throughout their first week so that they can brainstorm ideas in advance. They are also encouraged to run their ideas past people to get feedback. Over the course of the second week they then develop a full project plan, which is maintained and organized in Basecamp.

At the start of this phase (usually the first day of their second week) the trainees are asked to solidify their concept(s) for their internal project, and prepare whatever materials they deem necessary to present it.

The only requirements for the project is that it fit in a 2-4 week timeline, and that it provide value to the company. This value can come in a number of forms; it could be useful, have market potential, have promotional value, contribute to the knowledge of the company, or it could just advance their training in a significant way.

At the end of the first day of this phase, they present their concept(s) to the senior staff, and are presented with feedback as to its viability, value, and implementation. They then revise their concept based on that feedback.

Next, the trainee develops wireframes, defines user flows, and identifies any data requirements for the project. Again, this is presented to available senior staff and revised based on feedback. In particular, we focus on the appropriateness of the user experience, and the completeness of the wireframes, flows, and data requirements to ensure the trainee has a good understanding of the full scope of their project.

The trainee then moves into doing some high-level architecture. They prepare a CRC outline (classes, responsibilities and collaborators), and an I/O spec (input / output for a web or local service). Once again, this is presented and revised.

With the architecture approved, they write up a project plan that includes a timeline, with milestones and micro-deadlines (ie. goals for each day or two).

Once all of this is complete (generally on the Friday of that week), they present their complete project plan (wireframes, architecture, I/O, timelines, etc) to the entire team for feedback and criticism. This lets them receive and filter a range of input, as well as letting them see the more experienced members of the team disagree and debate different ideas.

With their plan complete, they are ready to move on to production, which is the focus of the next article.

Creating Great Developers: Training.

If you haven’t already done so, you might want to check out the first three articles in this series: “Introduction“, “Hiring“, and “Orientation“.

Once we have a new hire brought up to speed on our tools and processes, we begin a week of intense, classroom-style training.

Currently, this training spans over four days (ie. Tuesday-Friday of their first week), and is taught by a mix of me and my most senior staff.

For the most part, we use slide decks (which you can find here) that I’ve presented in the past as a framework for the training, elaborating extensively and providing concrete examples throughout.

We try to leave the new hires some time in the afternoon of each day to explore some of the concepts taught. Each successive morning, we leave some time for a quick review of the previous day’s content, and to address any questions that have arisen.

On the first day of training, we run through “Things Every ActionScript Developer Should Know”, breaking out into “Resource Management” at the appropriate time. This introduces code standards, some philosophy, programmatic motion, object oriented programming, design patterns, resource management, and some related project management and UX concepts.

The second and third days are based around my “ActionScript 3 Workshop” slides, and focus on a technical overview of ActionScript, Flash and the AVM2 ecosystem. The third day ends with an overview of UI frameworks, including Flex.

While we work with a number of interactive technologies (such as Silverlight, HTML5, iOS, and Android), Flash remains our core business and is our reference technology. It’s easy to teach someone another technology if they have a strong grounding in one already.

Their last day of classroom training includes a run through optimization strategies and core user experience concepts using “Quick As a Flash” and “Creating Effective RIA Interfaces” as the outlines (the latter is old, but remains largely relevant).

Based on feedback from our first “grads”, we’ve been debating spreading out this rather intense four days of training over an additional week, and giving the trainees day-long projects to solidify their knowledge in between classroom sessions.

We end the new hires’ first week with a review of the next phase, solo project development, and encourage them to brainstorm over the weekend.

The next article in this series, “Planning”, can be found here.

Creating Great Developers: Orientation

If you haven’t read the first two parts of this series, “Introduction” and “Hiring“, I’d suggest starting there.

The first day for a new hire is a busy day of orientation. The goal is to get them set up and comfortable with all of our systems, policies, and processes.

First, they get reintroduced to the whole team and educated on everyone’s roles. They learn who to talk to for specific issues, and who will be guiding them through their training.

They start with the administrative side of things. They sit down with our office manager to sign their employment contract (which they receive in advance so we can answer any questions), fill out forms, talk about payroll, benefits, employment policies (lateness, time off, overtime, external work), and general office polices. We put a lot of emphasis on the core clauses of their employment contract surrounding NDA and IP considerations.

Next, they get set up on all of our systems, and receive training on each. This includes:

  • Our network, dev PCs, and connected devices.

  • Software, what’s available, how to request serial numbers, etc.

  • Our email system, webmail, and signatures.

  • Instant messaging.

  • Basecamp, project tracking, and writeboards.

  • Subversion, checking out / in, branching, creating projects, etc.

  • Tracking time, and why it’s so important.

Next we walk them through all of our processes. We outline the full training program they will be going through, including informing them of the internal project they will be building (part 5 of this series). We give them a high-level introduction to our process for delivering projects and doing quality assurance. QA receives a lot of emphasis – what are the processes for testing, identifying bugs, resolving issues, and communicating status back to the project manager. We also talk a bit about our policies for using open source libraries in client projects (ie. usually only MIT licensed or equivalent and only with prior client permission).

Finally we remind them of their NDA, and introduce them to all of the current projects we’re working on. This can be a quick overview, or a more in-depth dive into each project depending on the time available.

Before the end of the day, they are asked to enter all of their time into our time tracking system, and are expected to keep this up to date going forward.

The next article in this series, “Training“, is up.