Super Mario & HTML5 Canvas
At the age of 10 my friend Daniel got a Nintendo. I spent numerous hours playing Super Mario in front of his TV. It was then I decided to become a programmer. My dad bought a Vic 20 and I wrote my first lines of code on that old computer. Press play on tape to load, record to save.
In my early teens I dreamed of building a video game people would play and say wow! However armed with a yellow-screen 80186 and Turbo Pascal there was so much one could do. My dad didn’t want to buy us a Commodore 64, the hottest PC game platform available then. So games I wrote were difficult to share with friends. Ran at different speeds on different computers (I didn’t yet know how to setup a timed game loop). All this to say games I wrote were more personal projects and remained only on my computer. I don’t have those anymore.
First, I tried pure HTML and CSS3 animations. Savon le dragon was conceived with my 6-year-old daughter (she drew some of the graphics on paper). The game runs smoothly on PC, but stutters on iPhone or iPad. The DOM is really not the right tool for the job.
My second experiment was programming Mario using canvas and Backbone. There are dozens of HTML5 game engines out there. However I wanted to experiment using everyday tools that I use. Namely Backbone and Underscore. Besides, game loop and sprites are pretty simple and fun concepts to program.
My third experiment was to push a little more, and write level 1-1 of Super Mario Bros (try it out. If you’re on a PC, use the arrow keys, z and x. But best to run on an iPad full-screen by adding it to the home screen.) Currently it has the scrolling tiled background, and a few characters. I’m working on finishing missing parts. There is also a level editor (my kids spent hours building their own levels and playing them).
Some interesting HTML5 features I used that are worth mentioning:
- canvas: It all starts with the canvas.
- applicationCache: Take your game offline, have the browser cache it. Yes, it really works well. I can now play my web-based Super Mario on my iPad in the Montreal Metro. If you play the game, and one day notice the download icon top-right, it means a new version is available. Tap that button to download it. Much easier that the App Store:)
Some advice if you venture to write an HTML5 canvas game:
- Garbage collection: You don’t have control over this and can’t avoid it. The browser will momentarily stop processing your game to reclaim memory. It will happen and affect your frame rate. Ahsley Gullen wrote a great post on strategies to reduce the garbage you produce. Luckily, uou can keep it under control. Just be careful that the code which is executed 60 times a second does not allocate arrays and objects just for fun.
- forEach: Do not use the native
forEachiterator. Instead, stick to simple
forloops. With Backbone, don’t use the collection
eachfunction. Instead, write a
foron the models array directly.
- Secondary canvas for background: Do not redraw everything every iteration. In my case I only need to redraw the tiled background when it is scrolled. Therefore, use a secondary canvas to draw it, and use
drawImageto transfer it over the primary canvas.
CSVJSON - Online Conversion Tools
As a developer, format conversion is something I sometimes have to do. I often look online for solutions and tools finding they only cover partly my needs.
CSVJSON is a do-it-myself and more permanent solution.
Currently it comes with 3 tools:
- CSV to JSON: As the name says.
The best feature of CSVJSON? You can save your session for later, and share it with a co-worker.
I hope it can be useful to you. Happy conversions!
My Mother-in-Law Loves Her iPad
My mother-in-law got an iPad for Christmas this year. In the 10 years I’ve known here, this is by far the BEST GIFT EVER. It is the one she enjoys the most, the one she won’t be able to live without ever again. For her, the iPad is the greatest invention since eye contact lens (she hates wearing glasses). It has become an intrinsic part of her life.
Her day starts off with reading La Presse + on her iPad. Its been over a year now that the well respected Montréal paper isn’t delivered to her doorsteps any more. The iPad is the only way to read it. A much better way too since there are videos which she actually watches. Heck, I think she’ll stop watching the daily news on TV soon.
After are emails. No need to log in to Hotmail any more (thank God). The iOS mail client is just perfect and much more efficient.
And there is FaceTime with her daughters and her sisters. Happens so often she sometimes calls me at work by accident. First few times were funny. She was way to close to the screen and talking loudly. But she’s mastered FaceTime now. She might get rid of that long distance plan after all.
She uses her iPad for watching TV too. You should have seen the stars in her eyes when she discovered TOU.TV:
daughter: You can watch your shows on your iPad. With TOU.TV you have shows from Radio Canada and others.
mother-in-law: Can I watch shows I missed?
daughter: Yes, of course. And when you want.
mother-in-law: That means I will never miss a show again. And I can watch them whenever I want. OMG!
I think her TV will become obsolete soon. Funny because she had access to that on her computer before, but the iPad made it accessible.
Photos is the other great thing she likes about the iPad. At first, she didn’t know how to import pictures from her camera. Fortunately her daughter was there to help her:
daughter: Open the Photos app.
mother-in-law: Ok. Now what?
daughter: Click on the Import button.
mother-in-law: Where is it?
daughter: Look at the bottom. There’s only 3 things you can do.
mother-in-law: Oh, it must be Import?
daughter: Yes, that’s it.
mother-in-law: Much easier than on my computer.
And that confirmed my thought that her computer is now a relic she will seldom use. Like a typewriter when the PC came out. And what to say about the fact that the computer cost four times more than the iPad.
My mother-in-law isn’t the only one in that has embraced the iPad. Same thing with my mother and her four sisters. Don’t take away their iPads - you’ll get a beating!
For them, texting with iMessage has replaced email. They don’t need Twitter or Facebook. I sometimes get included in their threads of jokes and pictures. Does make for some I-didn’t-need-to-know-that moments. iMessage however, is by far the best way to plan a family gathering. iOS does it well too - not deleting messages, and grouping them into threads.
iPad for Baby Boomers
Talking with friends and colleagues, this phenomenon is not isolated - it seems to be a general trend. Around us baby boomers ARE buying iPads and ARE really using them a lot.
But why the iPad and not other tablets? Android tablets are less expensive, come in different sizes, and from different vendors. Lots of choices out there.
iPad Adoption Rate
As a developer and a techie, here is my theory why other tablets did not surpass the iPad:
- iPad came first.
- iPad is easy to use.
- Lots of people have an iPad.
- iPad has FaceTime - so you can talk with others that have iPads - for free.
- iPad has the App Store - all mobile apps premier on the iPad - not on Android.
- GOTO 1
In my mind the outcome is pretty clear. Just as long as step 2 doesn’t break, iPad adoption will continue like an infinite loop.
Telerik Tooltip not working on IE10
SCRIPT5007: Unable to get property ‘documentElement’ of undefined or null reference Telerik.Web.UI.WebResource.axd, line 151 character 2
Since that control is used for dialogs in more than a dozen places, this is a showstopper. Telerik invites us to upgrade. But since we are eventually going to replace this legacy code (and never use Telerik again), we did not want to pay for an upgrade.
Caching HTML input values in local storage
Working on csvjson.com, I wanted the application to remember last options someone used. I wanted this to be client side as well. Cookies or local storage were potential candidates. Since most of the users of csvjson.com use modern browsers, I chose local storage.
My own version builds on his. I added some options for the local storage key, as well as a list of HTML elements to persist. Can be found here on GitHub: