TypeScript

This week Microsoft released its shiny new JavaScript pre-processor - TypeScript. It represents a superset of JavaScript that is designed for large-scale application development. It utilizes concepts that most developers are comfortable with in their non JavaScript languages. Things like Classes, Modules, and Type checking.

These are all things that many people complain that JavaScript does not have built in.  With TypeScript, JavaScript does not magically gain these things. TypeScript makes these things accessible to a developer through its pre processing. Developers and JavaScript do not need TypeScript, and it is not a requirement to build large scale applications. It won't magically make crappy programming better, but it may help catch a gotcha for someone every now and again, just as JSHint would. I for one think that it will take off rather well, especially in the ASP.Net community. I also will probably try it out in a project or two or three. I like that it looks and feels like JavaScript, which is a syntax that I am comfortable with.  That is one reason why I have not adopted CoffeeScript, it just looks so foreign to me. I suppose if I were a full time Ruby on Rails developer, CoffeeScript would feel right, but I'm not, so it doesn't.

I'm going to end this by just showing the difference between TypeScript and JavaScript. It is subtle and that is appealing to me. See the comparisons below:
typescript javascript

Liberated Pixel Cup

July marked the beginning of the coding portion of the Liberated Pixel Cup which is an amazing two-part competition that involves amazing artists creating open game assets during part one (June) which developers then take to create a game based on those assets (July). I first heard about the Liberated Pixel Cup a few weeks into the second part of the competition. After a day or two of contemplating if I could get a game off the ground in time, decided to make an HTML5 game. Other than my orientation demo Catch and the node.js interpretation of the card game Wizard, I had not made (or at least published) what I would consider a graphics based, animated, HTML5 game. I decided to take this opportunity to dive in head first.
Over the last few years, I have seen quite a few HTML5 game engines come around and have taken note of many, experimented with some. The big name in the HTML5 engine space right now seems to be ImpactJS which I have yet to use, but of the ones with which I have experimented,cocos2dx-html and melonJS, I chose melonJS. I decided that to get an RPG style game with the assests provided in the competition playable in the limited development time that I had, melonJS fit that need perfectly. So now I can kill two birds with one stone, get an HTML5 game built and get more familiar with one of the HTML5 engines I have been eyeing for some time.
So I spent my evenings and weekends for the last couple weeks doing quite a bit of hacking. First I had to familiarize myself with making some tilemaps for the different world areas within the game that I wanted to create, figure out how that tied in with the melonJS framework that I was trying to learn, and create a simple story in the game which could be completed before interest is lost. Creating the tilemaps was easy, and the way in which melonJS incorporates them into the game is slick and effective. A couple things which weren’t clear from the melonJS documentation were 1) dynamically adding projectiles or arbitrary objects (such as the magic in my game) to the screen, and 2) how to get the level transitions to behave how I wanted. The first was pretty simple in the end, all I needed to do was check if my player had the magic, check direction, create & align, add it and make sure it displays on the scene:

Loading ....

The other major hurdle I faced was the scenes when jumping from one map to another would sometimes immediately jump to a completely different map. This seemed like a bug and was so inconsistent I nearly scrapped the whole project, but as it turns out, a few of my enemies were walking their boundaries to the point where the level transitions began, triggering a random map change as if it were the main player. So that was a quick fix (once I figured it out). I do hope to add some more fun to it as time goes on, and welcome any contributors to expanding it to whatever it becomes. So go ahead and Fork it.
I cannot thank the other contributors to the competition enough, they are a cheery bunch on IRC who have donated time and talent to a really cool open game competition.
So now you know a bit of the backstory that led up to Pixel Quest, my HTML5 entry in the 2012 Liberated Pixel Cup.

Wizard

Months ago I set out to create a nodejs based app for one of our office favorite games - Wizard (the ultimate game of trump). I started the project by myself, but after I got it to the point where I thought it could really become something I enlisted the help of a friend to help contribute to really speed up the development. Things went well and we reached the point  somewhere around SXSW 2012 where it became playable and testable, though admittedly it is still in a fairly unstable state. We had privately hosted it on Bitbucket and collaborated through there, but I decided today that we are going to unleash it as a public repo on Github.  So there it is. You can create your own instance of it and test and contribute (pull requests, issues, etc) as much as you like.  If you just want to see it in action, you can view the latest stable build that I have hosted with nodejitsu currently at http://wiz.jit.su.

Remote Debugging Tools

Recently I have been working on some mobile content for a couple of my personal projects. And since working on the front-end of these projects involves spending some quality time with developer tools, I have also been spending some quality time utilizing a few different remote debugging tools. In the last few years the remote debugging tool category of software has grown rapidly which makes deciding on the best tool, somewhat similar to finding your favorite dev tools setup in your browser of choice. Just as some folks prefer debugging their front-end with Firebug, Opera Dragonfly, or Chrome Developer Tools (WebKit Inspector), there is now a similarly robust selection for remote debugging for mobile devices.

Built by Remy Sharp, JsConsole.com is perhaps the simplest and most accessible tool for remote debugging. Simply include the remote.js file in your html,

<script src="http://jsconsole.com/remote.js?IDENTIFIER"></script>

navigate to jsconsole.com, “:listen”, and you now have access to your remote device. Works splendedly, but doesn’t have all the bells and wistles that come along with the advancing browser dev tools. I use this tool a ton for remote debugging work, especially since it works across browsers on my mobile device. Another tool that I have utilized and is quite popular due to its association with PhoneGap, is Weinre or WebKit Inspector Remote. With this you simply run a server locally that will allow you to debug remotely utilizing a set of the WebKit Inspector toolset (Google Chrome, Safari) - provided you supply a target.js script in your source. Again this is not a full set of the tools which are normally available to a Chrome Dev Tools, Firebug, Dragonfly user, but is quite adequate and useful on multiple target browsers. I rarely utilize Weinre, but many developers find it a critical part of their workflow.

Opera Dragonfly has a great remote debugging experience baked into their tools. One simply tells Opera Desktop to initiate a remote listening session, then Opera Mobile “opera:debug”, and you can inspect your remote page in Dragonfly. Honestly, I have limited experience here, because I rarely utilize Dragonfly, even though the tools are quite robust.

So what is my go to remote debugging tool today? Chrome. I am most comfortable with the Chrome Dev Tools in all my other debugging for a number of reasons including the continuous insertion of handy new features. So once I upgraded my phone to Android 4 (Ice Cream Sandwich) - which is required to utilize Chrome For Android - I have been happily utilizing the full suite of Developer Tools in Chrome to inspect my mobile app on my Android device. Again, the best solution for me because I can utilize the same toolset for desktop or mobile debugging. Its pretty simple to setup, just get your Android device set up for usb debugging in both the Android settings and Chrome settings, then (via the Android SDK) setup a debug bridge that will forward your console to a port of your choosing allowing you to open localhost:9222 which shows all your tabs open on your phone, ready for inspection. Start listening on that port using a script like this in your terminal:

adb forward tcp:9222 localabstract:chrome_devtools_remote

Rather than go through my terminal command history to find the command and possibly change the port, I aliased the command in my .bashrc file so anytime I hook up my phone I can type cremote 9222 in the terminal and inspect away

function cremote() {
    adb forward tcp:$@ localabstract:chrome_devtools_remote
}

From there its on to your browser to find and inspect away to your hearts content. This remote debugging space is growing quickly, the upcoming version of many toolset have this capability built in directly, things like jsBin (v3), jsfiddle, Firefox dev tools, Adobe Shadow, Trigger.io’s remote inspector, and many others I’m sure are all available, or will be available to utilize as a remote debugger. So the developer wins in the end with a host of choices to choose from so they can find that which fits their needs and workflow.

DeviceOrientation Events

The Mozilla Dev Derby is a pretty cool thing. Developers from around the world can openly add any demo to the site, and if their demo lines up with the prescribed derby for the month, they are automatically entered to win a prize (t-shirt, cool bag, android device). I decided I would enter again for the January 2012 derby based on Orientation. I made two demos.

catch

The first one called “Catch” which you are attempting to catch a randomly generated ball in the shortest amount of time possible. I have personally found it incredibly addicting to get the perfect game, or at least my best attempt at it and I even wrote the source code. What I learned in developing this app was a couple of things. One, there isn’t a ton of documentation on the web about the DeviceOrientationEvent. Two, its pretty straightforward to detect the orientation and utilize it to move an object. Here is the basic of my app:

 /*orientation stuffs*/
var initOrientation = function() {
    var count = 0, gam = 0, bet = 0;
    if (window.DeviceOrientationEvent) {
        window.addEventListener("deviceorientation", function(e) {
            //gamma = left to right
            //beta = front back
            //alpha = compass dir
            count = count + 1;
            gam += e.gamma;
            bet += e.beta;

            if (count === 0 || count % 10 === 0) {
                orientationYo(gam, bet);
                gam = 0;
                bet = 0;
            }
        }, false);
    }
};

//handle orientation
var orientationYo = function(ltr, ftb) {
    coor.x = coor.x + ltr;
    coor.y = coor.y + ftb;
    if (!gameState.victory && gameState.playing) {
        tgt.move(coor);   
    }
};

so that handles the detection of the orientation event, next I simply added the move call to my target (tgt) which looks like this:

var tgt = {
    isDrawing: false,
    collided: false,
    start: function(coordinates) {
        this.drawIt(coordinates);
        this.isDrawing = true;
    },
    drawIt: function (coordinates) {
        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
        ctx.fillStyle = b2_color;
        ctx.beginPath();
        ctx.arc(coordinates.x, coordinates.y, 25, 0, Math.PI * 2, true);
        ctx.fill();
    },
    move: function(coordinates) {
        if (this.isDrawing) {
          this.checkBounds(coordinates);
          this.drawIt(coordinates);
        }
    },
    finish: function(coordinates) {
        this.isDrawing = false;
        ctx.lineTo(coordinates.x, coordinates.y);
        ctx.stroke();
        ctx.closePath();                
    },
    checkBounds: function(coordinates) {
         if (coordinates.y > bound.y2) {
            coordinates.y = bound.y2;
          } else if (coordinates.y < bound.y1) {
            coordinates.y = bound.y1;
          } else if (coordinates.x > bound.x2) {
            coordinates.x = bound.x2;
          } else if (coordinates.x < bound.x1) {
            coordinates.x = bound.x1;
          }
    }
};

collision detection is handled by my randomly placed bouncing ball, which detects when the target ball moves into its path:

checkObjectCollisions: function() {
    var imgData = ctx.getImageData(this.position.x + this.velocity.x1, this.position.y + this.velocity.x2, r, r),
        pix = imgData.data;
    for (i = 0, n = pix.length; i < n; i += 4) {
        if (pix[i] !== 0) {
            this.collided = true;
            if (Math.abs(this.velocity.x1) > Math.abs(this.velocity.x2)){
                this.velocity.x1 = -this.velocity.x1 * drag;
            } else {
                this.velocity.x2 = -this.velocity.x2 * drag;
            }
            break;
        } else {
            this.collided = false;
        }
    }
}

I am pretty happy with the game, its clean and works nicely. You can check it out here

compass

The other is a simple web compass where I utilize the DeviceOrientationEvent to get the cardinal direction your phone or device is facing. There are two cool (in my opinion) things that happened here. One is that to me it seems the device orientation event as defined states that the DeviceOrientationEvent.alpha ranges from 0 to 360 which to me is a 361 degree circle. The second is that I was able to utilize the offline caching capabilities of the modern web to make the compass available to a device event when not connected to the internet. This is done in minimal lines of code. The HTML and JavaScript are as follows:

<!-- This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this file,
You can obtain one at http://mozilla.org/MPL/2.0/.  -->

<!DOCTYPE html>
<html manifest="compass.appcache">
<head>
<meta charset=utf-8 />
<title>Cardinal Direction Compass</title>
<style>
  .pointer {
    height: 0;
    width: 0;
    border-left: 3em solid transparent;
    border-right: 3em solid transparent;
    border-bottom: 12em solid black;
    margin: -10px 0 0 -40px;
    top: 40%;
    left: 50%;
    position: absolute;
  }
  .n {
    top: 20%;
    left:50%;
    position:absolute;
    font:8em Helvetica;
    margin: 0 0 0 -40px;
  }
  </style>
  <script src="js/jquery.js"></script>
</head>
<body>
  <div class="n">N<br><br><br><br>S</div>
  <div class="pointer"></div>
<script>
        $(document).ready(function() {

          var rotate = function (deg) {  
              $(".n").css({ "-moz-transform": "rotate(0deg)"});
              $(".n").css({ "-moz-transform": "rotate(" + deg + "deg)"});

              $(".n").css({ "-o-transform": "rotate(0deg)"});
              $(".n").css({ "-o-transform": "rotate(" + deg + "deg)"});

              $(".n").css({ "-ms-transform": "rotate(0deg)"});
              $(".n").css({ "-ms-transform": "rotate(" + deg + "deg)"});

              $(".n").css({ "-webkit-transform": "rotate(0deg)"});
              $(".n").css({ "-webkit-transform": "rotate(" + deg + "deg)"});

              $(".n").css({ "transform": "rotate(0deg)"});
              $(".n").css({ "transform": "rotate(" + deg + "deg)"});
          };
          if (window.DeviceOrientationEvent) {
            window.addEventListener("deviceorientation", function (e) {
              rotate(360 - e.alpha);
            }, false);
          }

        });
        </script>
  </body>
</html>

The final point I’d like to make is that due to what I thought was minimal documentation, I participated in a Mozilla Doc Sprint last weekend to update the Documentation surrounding the DeviceOrientationEvent. Doing my part in the web development community was both rewarding and a learning experience. I encourage anyone to try it out as well.