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!
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.
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.
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.
Wow. Great Work!
I’d really appreciate an in-depth article on developing for HTML/JS/CSS toolset from flash developer point of view.
Seems like browser performance is acceptable.
PS: your game doesn’t work in Opera 11 – it stops on loading screen. Though all Easel demos work fine.
Awesome job Grant + team! Really well done and it plays much nicer than I would have expected. Props for the easel.js, I’m sure that will come in handy! Now to work on my score…
The game is so addictive.
I am glad u shared Easel, cant wait to try it !!!
Impressive work guys !!!
Clicking ‘start game’ locks up my browser tab on OS X/Chrome.
There is so much awesomeness in this. HTML5 is sweet. Great Job !
Grant, nice job! Nice to see that building crossbrowser applications in HTML5 isn’t that hard as I thought.
@nikita: I got an browser upgrade screen, but when I masked as Firefox it worked properly. So no need to block Opera 11 from the application I think..
Looks nice in Firefox 3.6.13 on MacOS 10.6.5.
Regarding Opera:
We’re working to support Opera. The game largely works in it, but it has an entirely unique set of incompatibilities which have a severe impact on gameplay and balance.
In the meantime, we decided it would be better to block the browser than provide a skewed or unbalanced gameplay experience, though our messaging could certainly be better for Opera (it’s certainly not an old browser, it just has its own set of bugs we need to address).
Hopefully we have an update to add Opera 11 support early next week.
“..In the meantime, we decided it would be better to block the browser than provide a skewed or unbalanced gameplay experience, though our messaging could certainly be better for Opera (it’s certainly not an old browser, it just has its own set of bugs we need to address)..”
why bother developing the game in html5 then??
Good to see you venture into the HTML5 waters.. Thanks for sharing Easel – it looks like a great Canvas library. I love that you implemented gotoAndPlay() 🙂 But I’m curious… why did you choose to use Canvas rather than SVG?
Why every time i try to go to http://www.pirateslovedaisies.com/, my browser, each by the way is IE9, tell me that “Your browser appears to be unsupported!”.
Can somebody help me, please
Unfortunately i think you failed with the “best of breed” aim. This doesn’t bring anything new or exciting to the tower defence genre apart from being written in Canvas.
> why bother developing the game in html5 then??
HTML5 hasn’t been fully implemented nor standardized across browsers yet. By building the game using strictly standards we know that it will work fine once the rest of the browsers catch up. Right now it works best in Internet Explorer 9 primarily due to it’s unique implementation of hardware-accelerated graphics. Hopefully the rest of the browsers will implement hardware acceleration as well.
> Unfortunately i think you failed with the “best of breed” aim. This doesn’t bring anything new or exciting to the tower defence genre apart from being written in Canvas
I think you need to consider this context. Our goal was to build one of the best HTML5 games on the Web. I think Grant and team accomplished that goal brilliantly. As far as uniqueness within the genre, I think they did a great job of adding gameplay features that were unique, such as the creeps grabbing the daisies and carrying them back to the ocean. I don’t know if this is the first time that concept has been implemented but I’m personally a big TD fan and I’ve never seen it. Regardless, the story here is that this is HTML5 – and a first attempt. Imagine how much more we’ll be able to do in the future.
Mike Downey, Microsoft
miked -at- microsoft.com
Can you be more specific on the drop shadow issue? Was is the use of semi-transparent artwork? oe setting a pixel alpha of anything under 255? Or was it canvas text rendered with a drop shadow that was choking?
Even in IE9, disabling the additional effects doubles the performance for me. I thought I had hit fast-forward when I unchecked it.
Would you considering submitting it to the Chrome Web Store? You could get away with just submitting a manifest file and icon, and it would improve discoverability quite a bit. If you wanted to “fit in” a bit more you could even make it a packaged app, which means all the necessary files are included with the manifest, making offline play a snap.
I know I personally would rather have Pirates Love Daisies as a big icon in my new tab page rather than a bookmark.
Just some food for thought.
Good job, Grant! Really good and original HTML work. Seriously talking, only saw two or three using HTML5 but not losing quality.
I agree with Nikita Petrov, would be nice a in-depth article on migrating from AS3 to JS.
I’ve been playing around with JS, and found some design pattern problems. I just don’t know yet very well how to bind the DOM with the JS controller layer.
Great work, anyway.
Thanks,
CaioToOn!
what is the file size of the game in total? it seemed to take a while to load the landing page.
>As far as uniqueness within the genre, I think they did a great job of
>adding gameplay features that were unique, such as the creeps grabbing
>the daisies and carrying them back to the ocean.
Well that’s a feature that 50% of TD has, half of Warcraft III custom TDs, 7 years ago. What’s unique in this?
>I think you need to consider this context. Our goal was to build one
>of the best HTML5 games on the Web.
Well Mike, you can also use shopping cart as a racing car. And you prooved you can, but again what is the point? Prooving HTML is Flash? That is just STUPID. HTML/JS is not flash / multimedia language and it never will be. If you want HTML that is flash… just drop the half baked HTML5 spec and use flash for everything. Yeah, that would be stupid!
Look at this example. A couple of animating BITMAPS? The torrents don’t even point where they’re firing! It sucks even on IE9. Developers saying that doing a SIMPLE SHADOW isn’t possible? Commodore 64 could do this 30 years ago, with a decent frame rate using 64 KILOBYTES of RAM!
You don’t even have simple animations for anything (buttons, loading screen, etc), the game looks like half-baked website from 90’s. The game crashed twice when i was trying to run this, and the whole thing is not even CLOSE to flash games from 10 years ago.
Go check “gemcraft chapter 0”, or any recent flash TD. You’re DECADES behind.
Instead of doing something that HTML can excell in… you’re making … a GAME? That’s like coding text-website in flash. Sorry guys, not good enough. This thing is just a “news”, like 3D animation on 8 bit computers, but not production quality and nobody will care to play this.
0 innovation, 0 gameplay, 0 effects. Like someone else said 0 excitement. You fail to be on-par with flash TD games from 10 years AGO! IE9 and hardware acceleration for THIS?! Get real, Dune on 16 bit Amiga 20 years ago! No comparison!
I’m reading the blog. Flash content tells that the author knows what he’s doing. 2% CPU for nice, smooth flash clouds at the top. That’s cool.
Now you add some shitty-looking fog in HTML5 and the game is choking? Well what is the point of doing this HTML5-games-tools? To bring web gaming industry 20 years behind? Sorry im a practical person and the whole thing is ridiculous.
Well maybe some microsoft representative will tell me 🙂 They seem to have some smart people in the company, of course they sometimes fail and it’s not a fault of the DEVS… for as bad multimedia tool as HTML5 is the game’s exceptional anyway (it works like crap, crashes browsers and it’s “wooden” but you can’t really get any better taking into account what you have to work with).
I don’t know how much farther “html is good for everything” bullshit will go? Microsoft… maybe an Operating System, written in HTML? 🙂 Ok i was just kidding, please don’t do that to us 🙂
The game very well showcase the potential of HTML5 JS. I noticed that CPU utilization keep on rising (even reaches 100% when played continuously for 10 mins)for FF3.6
Great game,
Perfect showcase for my webbdesign students 🙂
I just saw this game on http://html5games.com/ . It’s amazing what you and your team have achieved. You’ve totally inspired me. Thanks for Easel – I can’t wait to use it.
Good work. I’m a Flex developer and do a bit of flash game coding in my spare time. You proved Canvas has a lot of potential and with solid libraries like the displayList one and I guess, better IDEs, it is probably even enjoyable to develop in JS. Now cross fingers for all browsers to play the game.
Only, the game crashes in sudden death mode when using internet explorer 9, platform preview (or beta). The main window freezes and stops refreshing, while mouse clicks still register. The screen gets darker when pausing, but doesn’t clear when resuming. Works in chrome and firefox, only bugs in IE.
Don’t let a backwards troll like sl get you down!
HTML is the future for every kind of app, even web games. The fact you did this while the HTML5 spec is still being worked on is highly impressive and encouraging. Hoping you’ll come back to HTML5 for another game soon!
This is quite simply AMAZING. Haters will hate, especially those stubborn flash devs that refuse to learn something new…. it will be their loss in the end. Great job, HTML5 is the future, can’t wait to see more.
Well Andrex, you’re a troll, actually. Your post is just a stupid comment, without any FACTS.
What is backward in writing a nice game in Flash? Only the RESULT is what counts… and you can’t sell that kind of crappy game… NO-ONE will pay for this!
Well microsoft, maybe once so they can spread their FUD and propaganda that “it can be done” (no matter how badly it works).
So here’s the truth without additional FUD. HTML was designed for textual data and can be used for some kind of APPs (eg. fiscal / management /etc)… but not for eg. CAD and not for multimedia. Canvas could be used to make some simple graphs and that’s objectionable as well, because support and features are so bad. Flash was designed for multimedia but works very bad for text-based things, like websites. That’s all.
You can be a HTML5 narrow-minded fanboy and tell that HTML5 is “good for everything”. Cool, but guess what. With that approach the only one using things you’ll make is going to be … you, yourself. Because anyone SANE will use proper technology for achieving given objective and will come up with much better results.
No matter is HTML, Flash or C++. There is no one-suits-all technology. You can do a website in C++ to prove your point… but that won’t get you any REAL LIFE job. You’ll just LOOK SILLY, and the company manager will kick you out before you start to move in.
It’s really SAD to look at all those HTML “games”… so much talent wasted. But nice that microsoft paid for it… but it’s a very tiny market. Microsoft now prooven their point, so they won’t pay for same thing twice and casual players? Won’t play it… the game is like something from 80’s maybe 90’s…
Well if you just have sold your 8 bit console with black&white monitor the thing will impress you. The rest of us is in the 21’st century now!
For me hope something. I hope the author will get another HTML5 project and that will make him a lot of money. Or write some nice game in an appropriate technology (C++/Flash/Delphi) that is actually PLAYABLE! Maybe not even innovative but to par with genre trends. This thing we have here… just first days of TD games running on Warcraft 3 engine… 10 years AGO. They were 10 times better. What a shame!
Ah, one last word. I’m actually a gamer and i think you’re not. Just a bunch of kids that masturbate every time they see “HTML5” sticked to something.
Saying this TD is good is just a DISRESPECT to all the authors that made their TD’s for GAMERS, out of PASSION and they CARED what they’re giving to users. This way RESPECT is earned.
Well about this daises thing, it was written for microsoft, for money and the most important thing was HTML. Nothing more than that. It’s worth NOTHING. Beside the money of course. Well is some showcase, but games are not about showing that you can use HTML or Visual basic… we know you can. But everything you’ll produce will be CRAP.
Gemcraft
Element TD
Ryoko
Blizzard TD
Sikibi’s
Zoator
To name a FEW. If you want to FAP, cool go on. If you want to play REAL td made for gamers, with nice graphics and multiplayer… go get yourself a copy of Warcraft 3 for $10 and see what are you missing.
Stop playing propaganda, it isn’t really about how good the technology is… but who owns it! And Microsoft / Apple would be really happy to be a part of consortium that owns 100% of web “open”… “standards”. For your consideration!
Great game! But, why did you make it in html/javascript?
I look SO cool WHEN I capitalize EVERY other WORD!
Um…yeah, canvas is, in some ways, decades behind. That’s because Canvas has only been around for the last year or two, where Flash has been around in some form or other for almost 15 years now. But why should so much of the internet be locked in a proprietary format owned by one company?
Pushing forward native browser-based rendering technologies ushers in a new era where browser makers can begin to compete on turfs like “who has the fastest rendering engine”. Right now, Adobe is basically a monopoly (Silverlight? psh) and doesn’t really have any incentive to innovate its Flash product. What about the fact that it’s been around for 15 years and is only recently getting hardware acceleration? Wouldn’t one expect that 5 or 10 years ago?
Anyway, point being, we’ll finally see some competition surrounding web rendering technologies, which will mean incompatibilities at first as people race to implement features, but in the long run it’s a clear win for consumers.
All I have to say is what an amazing job you guys have done, this is one of the best internet experiences I had. This project was truly inspirational. Also thanks for Microsoft for making this happen too 🙂
Totally agreed with Max. Right now, Flash is still way better but it’s only for the best that Canvas/HTML will become better and better.
If Adobe continue to innovate and Flash gets simple multi-threading and that cool native 3D feature next year then it’s going to stay the leader for a lot of things.
Still not too convinced for Flash to shine in the mobile world though.
Just out of curiosity, would you be willing to divulge the number of people that worked on this and the rough estimate of time involved?
I must say it is very impressive for HTML5.
Si is right, no corporate (accept one as stupid as Microsoft) is going to touch HTML5 to make games, because it takes too long and it clearly isn’t the best tool for the job.
Microsoft suddenly think HTML5 is cool? Why don’t any of their current line of browsers support it? Oh and Mike @ Microsoft, might want to play some Tower defence games before getting involved in a project like this. I’ll tell you how: Go to Google, (Hell you may even use Bing), type in Tower defence games and play a few, and a large proportion will have the collecting daisies or something similar feature.
Any chance you can share the AudioManager code? I’m working on an entry for Mozilla’s GameOn 2010 competition and the one sticking point is audio.
Thanks!
Love the game! I had some latency issues when I played it on Chrome, but it’s fairly easy to pick up and addictive 🙂
Thanks also for all the useful information you shared. Would you mind sharing how much time you spent on the design and concept? Did you choose colors etc or was that all handled by Pulp Studio?
Also, you mentioned having to look at JS/HTML5 again. Were there specific resources you found especially helpful?
Thanks!
Bonnie
really great game
but…
the performance is only good for HTML
really didnt think that HTML could do that
it creased me twice in chrome in windows XP
and the CPU was around 50%
It crashes for me in Chrome 8.0.552.224, on Windows 7. Just thought you’d like to know.
PLD — is unplayable, very slow. Regular HTML5 CPU burner!
You need to make it so people can post their scores from firefox. I was only able to do it in google chrome.
Stats:
Windows 7 x64
Firefox 3.6.13
I tested your game, and one of the many things I noticed is that you really need to change the variable names to meaningless location identifiers. Online Games are easy to hack; yet, by leaving the variable names intact it was just too easy. I know that you have set a limit on the server for the max score a user can receive during gameplay per level, and I also know that if the user exceeds it, it causes the user to be banned; however, this is just not enough.
The user name I chose was I_really_cheated, which will disappear in a week, but for now it remains number 1
I know some methods that make it downright difficult and in some cases impossible to cheat; yet, there is a tradeoff with my methods, as security will come at the cost of few added clock cycles, and a little added development time.
It seems you made changes of the difficulty of the game. Now the epic mode it’s a bit more difficult. The hidden Hideaway epic mode it’s really really difficult to finish. I think you should check the difficulty of the levels because now it’s impossible.
I love the game! So polished and fun as well! I meant to just check it out a while back and ended up playing for way too long… I have been moving to JS only and ended up making my first game in a couple weeks -http://www.mutantzombiemonsters.com/
Just wondering if you tried Aptana for your coding? I made the switch from senior AS3 to mobile HTML5 last year and have found Aptana to be excellent. Nowhere close to FDT of course, but still solid and familiar if you come from FDT.
Will be keeping an eye on Easel and TweenJS!
Really good work as far as HTML5 goes.
But for any serious web game dev, doing this in Flash is obviously a far better idea. HTML5 isn’t even remotely come close to Flash when it comes to game development. I mean, development tools even had to be made in order to make this game (which were even created with Flash i might add). People still have issues with browsers getting this game to work, perfromance is way worse than Flash, and obviously it dont look anywhere near as good at the best Flash games (still has great artwork illustration though). Theres no way game devs will start using HTML5 for web games, it’s vastly inferior for this.
Having said that i dont think you’re trying to say otherwise. This seems to be more of a “it can atleast be done in HTML5” type thing.
Has anyone managed to finished the epic mode in hidden hideaway? It seems impossible.
Epic Mode for hidden hideaway is literally impossible. I’ve been playing too many hours, trying different strategies: no way.
you should fix that bug 😉
I just DID IT ! kept my daisies away from creeps ! in Epic Mode for hidden hideaway: just next to the sea, put 2 rows of 4 cannons (lenny) each, then put 2 billies nearby to slow everyone down while passing near the cannons. Then to protect from seagulls, put lots of Scarletts near the daisies and next to the sea. Do not use any swords (Inigos). That worked for me (ranked more than 1,100,000 ponts)
Everytime I go to the site it says my web browser isnt supported.
The site http://www.pirateslovedaisies.com/ doesn’t work.
What has happened with it?
Thanks in advance.
The game’s great but about once a week it seems to lose all my datra and I have to start over. Aaaargghhhh!
This game is simply unplayable under Android 4 with Firefox 26.0 on my Samsung Galaxy S3 4G, it doesn’t even start. Graphics performance is not reasonable, this game is far from being smooth on a computer able to run Quake 3 (CPU AMD Sempron 2600+, graphics card ATI Radeon 9250 Pro), I get less than 2 frames per second. It’s a shame that a quite simple 2D game requires a very recent machine to work smoothly. Java2D or LibGDX + JOGL would drive this game a lot faster than HTML5.