I’ve been working on my “real” HTML5 game.  By “real” I mean not text based.  Things moving around the screen, physics, tap/drag, etc.  On Friday I lost steam and had time to reflect on why over the weekend.

I do these little projects to explore new technologies.  An analogy is like learning to drive a motorcycle.  You can go to the CSM parking lot on Saturday morning and go in circles (take a class), or you can learn the basics then start riding (self directed learning).  Pick an arbitrary  destination then start moving.   This is what I’ve been doing for years.  I pick a target, but always knowing that the journey was the real goal.  Lacking a real definition of “done”, I’d stop the journey when I’d decided enough learning had been accomplished.

This is a common way to “keep up” with technology, but I’m missing something to be passionate about.  My wife once told me she was jealous because my job was my hobby.   I want to restore that passion via these projects (more on “physical” or “real world” engineering sucks compared to vs. “computer” engineering in a later post).

What I realized on Friday was that I was building a game without a design.  Literally.  I was putting things on the screen that looked interesting (to me), having them collide, playing sounds – but I lacked an actual plan for what the game would do.

I’m going to pause and design a real game before I continue.  As a parent, I have a reflex to mandate the game incorporate some form of learning.  Something that reinforces the multiplication tables for my boy or factoring for my girl.  However, this distracts from the goal of entertainment.   Am I a bad parent because I want to make a toy?   No.  We send them to school, work with them at home, read to them before bed.  We’re doing our job – everything doesn’t have to strive to push them closer to getting to college.   So my new goal for this project is changing from “explore technology and maybe produce something 1/2 finished” to “entertain my kids”.

So as part of the game, I decided the main character should be a narwhal.  Who doesn’t love a narwhal?  Certainly my kids do.  Not being an artist I wasn’t sure how to do this.  I Googled “narwhal”, found some images, and tried to replicate in Inkscape.  Since the character should be animated, I decided to just move the tail up and down (swimming).  Since I’d also be angling the sprite up and down as it progressed, I figured this would suffice for the impression of motion.

I created the narwhal, and drew the tail as a squished ellipse.  I then played with the path (Inkscape is a great tool!), so I could turn it from something basically straight into a fat boomerang.  I created 5 images (up, down, straight, 2 in between – yea flip horizontal!).  I played around until I was able to export it and get decent “8-bit” looking resolution from Gimp, then put it all into a sprite sheet with Imagemagick.  Since I don’t want to embed the animation library here, I’ve put an animated .gif version of the narwhal below (click to play the animation):

Only after I incorporated into the game and looked again did I realized I created an animated turd, skewered by a white crayon.  Since the rectangular bounding box is a pain with this shape (you either “collide” when you’re above the horn, or I exclude the horn), I think I’ll just start over.

(link to Part 4)

Final posting on Ryan’s Words (for now).  Am I done?  No.  Does it work?  Basically.  Do I have lots of bugs and enhancements I’d like to tackle?  Yes.

So why stop?  I accomplished what I set out to do.  I bonded with my kid, and learned some new(ish) technologies.  This is actually a major accomplishment for me and my “side projects”.   I’ve talked to a lot of my friends who have had similar experiences when making toys.  They start out with a simple goal (e.g. “make a ‘TODO’ list app just the way I want it”).   You select a language/environment (e.g. client-side JavaScript), then start looking for tools to help.  You soon trip over something new (e.g. “…the ‘MeBop’ MVVVVVWVVWM Framework makes rich Internet application development 10,000 times easier.  Code while you sleep…”).  Intrigued, you check out the site and find that “MeBop” can work with the “NetMonk3y” framework.  What’s “NetMonk3y”?  You Google that and find it is one of the leading Node.js de-neuralizers.  I didn’t even know I needed a de-neuralizer!  What other ones are on the market?  Should I use “NetMonk3y”?  A bunch of guys forked it 6 months ago and “webDonk3y” is getting a lot of good reviews on Stack Overflow.

Aaaaaaaand – you’ve lost 3 hours accomplishing nothing.  Then real life settles in and we have to do work, make water balloons with the kids, etc.   So I’m stopping Ryan’s Words because I finished what I set out to do.  Plus, I found some other neat toys I’d like to explore to create a real HTML5 game.  Stay tuned.

(Link to Part 3)

When it comes to apps in progress, children are like upper management (or is it the other way around?).  You could write the most impressive server application that crawls every photo sharing site, combs comments, and does facial recognition to match any new photo to existing ones.  You could then create a simple test page to upload a photo and return the name of the person in the photo.  Then you show it to your VP.  After you upload a photo of “Batman” and it returns “Christian Bale” her comment would be “…why is the button not centered?”

My kids are the same way.  When I showed them Ryan Words on the iPad, they didn’t “get it” because the app was currently cycling through a bunch of hard-coded words like “sdfsdf” and “dfgdfg”.   So I had to go get some real words, suitable for a kid audience.  This is harder than you may think.  I Googled for “charades words”.  I avoided clicking on the “adult” ones (really people?), but found most of the others were “printable” so slips of paper could be put into a hat (i.e. .pdf).   I finally found one site which had words in HTML so I could scrape the page.  I debated then creating a mysql database to hold these, serving up JSON for the app.  However, this seemed like a detour (and I know I’d spend 1/2 a day evaluating toolkits, looking at django JSON plugins, then writing the 10 lines of php in the end).  I compromised and put the XHR code into the app, but have a static .json file on the server.  I wrote a little bash script to take the raw lists and convert them into JSON arrays.  I won’t even bother posting the hack script, but I can say that looking at it I did create some amazing write-only code

cat $A_FILE | sed '/^[A-Z]$/ d' | sed '/^\s*$/ d' | sed '/\./ d' | sed '/(/ d' | sed "/'/ d" | sed -e 's/^[ \t]*//' | sed '/\"/ d' | doIt

I love scripting.  Pure hackery.

Off to the finish line for Ryan’s Words.

(Edit: Link to Part 5)

(Link to Part 2)

Things have been humming along.  The basic app is working.  I’ve gotten the timing working, then hit an interesting problem.  I wanted the background to progressively change colors until it is red (then things go “boom”).  I selected a few colors to progress through (ugly, btw.  We’ll add changing those to the bug list).  However, the text color doesn’t look good on the more intense colors.   I could have selected a set of complementary colors and hard-coded them, but I had designs on a future fancier way to let folks choose colors.   So to get complimentary colors, I found the handy xColor plugin to jQuery.  Worked great, and I was able to choose a (reasonably) complementary color at runtime.

The only real snag I hit was with sound.  With my stand-alone test working, I tried adding it to my app.  I first did this by wiring the sound into an event handler for a button.  All good.  Then I wired it into the “times up” timer callback.  Nothing.  I isolated making the sound into a function, then called it from the button.  Worked.  Called function from timer callback.  Nothing.  Stepping through debugger I can see the function called.   Auggg!

Turns out the browser has a very reasonable restriction.  Sound shouldn’t play unless the result of a user gesture.  Timers don’t count as a gesture.  I “solved” this issue by changing the game spec (hey – it’s my game).  I think I like the result better than original plan.  When the timer thread goes off, I set a flag that the time is up.  I check the flag every time there is a swipe/tap (which is a user gesture and can hence trigger sound).   If time is up, the person clicking gets the “boom” (and vibrate, on Android).  From a “fairness” perspective this is perhaps worse, but it is a better experience to somehow feel it was “you” who caused time to run out.

(Edit: Link to Part 4)

(Link to Part 1)

I decided to mimic the game “Catch Phrase”.   I did so because its not graphical, so I figure my business-centric software background should suffice.  I’ve also decided to try to use JQuery Mobile as the basis.  A basic Google search comparing mobile browser applications seems to indicate this is still one of the leaders (I’d played with it before).  Plus, I really like jQuery.

I spent a day re-familiarizing myself with JavaScript.  I really like the language, but there are too many ways (patterns) to accomplish the same task.  I’m still learning the trade-offs, but have settled on some object creation and module patterns.  I will add, though, that there should be a special place in hell for the person who used a C-like syntax for JavaScript, but screwed with the notion of scope.

With the dust blown off my JS, it was time to tackle the interesting things in the app.  I’d like people to be able to choose previous/next words via a swipe gesture.  As with anything potentially hard, I like to understand them first.  I was able to get a stand-alone app working to demonstrate the swipe gestures work.  I had to use “alert” vs. console.log because I cannot for the life of me get the Chrome debugger to work on Windows when my device is tethered.  Stackoverflow/Google were unable to help me after an hour, so I went old-school.  Since most of the time I’m developing on Linux, I’ll let this one go.

Next up, I wanted some noises when the time runs out.  An exploding bomb is always fun.  I found this site with free sounds, then started Googling about the HTML5 Audio element.  Another stand alone experiment out of the way onto the last exploratory piece – getting the device to vibrate while the bomb goes off.

Vibrate was the sketchiest of the HTML5 tags.  Reviews were mixed based on Google searches, but I gave it a go anyway.  This time, my standalone test yielded mixed results.  Chrome on the desktop did not advertise the “vibrate” function as expected.  Chrome on my Android did, and vibrate worked!  However, when I got home and tried the iPad it did advertise vibrate yet it did not shake.  Bummer.

(Edit: Link to Part 3)

My son was confused:

“What do you do, Daddy?”.

“I do computer stuff”.

“Then why can’t we create an app like we do woodworking?”

I was thinking about explaining to him the software development lifecycle, enterprise applications, etc.  I instead took an alternative approach and proposed we make water balloons.

But Ryan had a point.  Why can’t I try to make something entertaining?  Something Ryan would enjoy.

I’ve decided to create a little game.  I’m calling it “Ryan’s Words” because he likes seeing his name on the web (although I have to say the name isn’t exactly “catchy”).  Because I don’t want to deal with the Apple app store or Google Play, I’m going to try to make it target mobile yet be browser based (HTML5).

(Edit: Link to Part 2)