Ahmed Nuaman

builder of internets ~ developer of dreams ~ tamer of Dachshunds

• How to create a JavaScript class constructor

  Thursday, January 5th, 2012

  Now if you’ve been reading my blog posts I’m sure you’ll be familiar with my rants regarding JavaScript’s lack of class-based coding. I explained in this blog post how you can write ‘classes’ in JavaScript but I omitted how to make use of the constructor.

  A constructor is useful because you’re able to do this:

  new MyClass( 'foo' );

  And this’ll start things going. Normally in a class based language we make use of constructors by sticking them at the top of the class, however in JavaScript we need to tell the class to fire that function as it’s called, like so:

  var MyClass = function(v)
  {
      function constructor()
      {
          document.write(v);
      }
         
      constructor();
  };
  
  new MyClass( 'foo' );

  This will print ‘foo’ (or whatever the hell you pass into the class). So essentially there we’ve created a constructor. What about with callback functions like jQuery’s ‘ready()‘? Well what we’d need to do is instead of firing the constructor function when the class is created we return the function ready for jQuery or your respective JavaScript library of choice function to call its callback:

  var MyClass = function(v)
  {
      function constructor()
      {
          document.write(v);
      }
         
      return constructor;
  };
  
  $( document ).ready( new MyClass( 'foo' ) );

  And rejoice!

  Tags: class ~ constructor ~ JavaScript
  Posted in JavaScript

  ---

• Half-a-day canvas slide puzzle game

  Wednesday, January 4th, 2012

  I started this little game around lunch time and after a few issues with the EaselJS, it’s all working now. It doesn’t know when you’re done yet, that’s for tomorrow:

  Tags: canvas ~ easeljs ~ game ~ JavaScript ~ puzzle
  Posted in HTML ~ JavaScript

  ---

• Dealing with EaselJS’s SpriteSheet fail

  Wednesday, January 4th, 2012

  Maybe it’s just me but I had an issue earlier today where the SpriteSheet class of EaselJS wasn’t returning the correct frames. After a lot of Googling, starting a thread on Stackoverflow and reading the source code of the library I decided to do a workaround: all I needed to do was to simply take an image and divide it into tiles.

  So what I had before was:

  function handleImageLoaded(e)
  {
      var c   = new Container();
      var d   = { };
      var l   = rx * ry;
      var lx  = 0;
      var ly  = 0;
      var m   = Math.floor( l / 2 );
      var f;
      var s;
      var t;
     
      master  = new Bitmap( e.target );
     
      master.alpha    = .1;
     
      c.addChild( master );
     
      d.images    = [ e.target ];
      d.frames    = { width: lw, height: lh, count: l };
     
      s   = new SpriteSheet( d );
     
      tiles   = [ ];
     
      for ( var i = 0; i < l; i++ )
      {
          t   = new Bitmap( s.getFrame( i ).image );
         
          tiles.push( t );
      }
  }

  According to the EaselJS docs this would then split up the sprite into frames that I can then access. After looking through the code and doing lots of debugging I couldn’t work out what was going wrong. So then I looked at using the SpriteSheetUtils static class by simply replacing the following:

  new Bitmap( s.getFrame( i ).image );

  With…

  new Bitmap( SpriteSheetUtils.extractFrame( s, i ) );

  This just returned the first frame, lame. So I thought screw this and just do it myself. I created a function that simply takes an array containing the ‘x, y, width and height’ of the clip and the image it should clip, here it is:

  function generateTile(p, i)
  {
      var cs  = document.createElement( 'canvas' );
      var c   = cs.getContext( '2d' );
     
      cs.height   = p[ 3 ];
      cs.width    = p[ 2 ];
     
      c.drawImage( i, p[ 0 ], p[ 1 ], p[ 2 ], p[ 3 ], 0, 0, p[ 2 ], p[ 3 ] );
     
      return new Bitmap( cs );
  }

  All that happens is that I create a temporary canvas element and using the ‘drawImage‘ function I draw part of our image onto it. EaselJS then allows me to pass into it the canvas element and then I can use it as an layered object thanks to this awesome library.

  Tags: canvas ~ clip ~ drawimage ~ easeljs ~ image ~ JavaScript
  Posted in JavaScript

  ---

• How JavaScript deals with classes with public and private functions

  Wednesday, January 4th, 2012

  So we all know that JavaScript isn’t really class based but how do we get around the issue of private functions? Firstly we should ask ourselves why the heck we need a private function? Well the answer is simple really: it’s a simple way to stop people from messing up our applications. Take, for example:

  function doFoo()
  {
      //...
  }
  
  function onceFooIsDone()
  {
      //...
  }
  
  doFoo();

  Let’s imagine that the function ‘doFoo()’ shows some elements and requires the user to click on them or fill out a form before the user can continue. Let’s then assume that when the user continues that the ‘onceFooIsDone()’ function is fired. There’s nothing stopping the user whipping out their browser’s console and firing the ‘onceFooIsDone()’ function thus bypassing anything that ‘doFoo()’ is supposed to do. Bummer.

  So, we get around this by having private functions, functions that can only be executed in the context of a constructor. For example, I’m working on a game that uses EaselJS and this is how I’m starting it:

  function Game(img, rx, ry)
  {
      var canvas  = document.getElementById( 'c' );
      var stage   = new Stage( canvas );
     
      this.ready  = function()
      {
          if ( Touch.isSupported() )
          {
              Touch.enable( s );
          }
         
          loadImage();
      }
     
      function loadImage()
      {
          console.log(img);
      }
  }
  
  var game    = new Game( '500x500.png', 5, 5 );
  
  game.ready();

  You’ll see that I define a variable ‘game’ with a new class of ‘Game()’. Within game you see I declare ‘canvas’ and ‘stage’, these are private. If I wanted them to be public, I’d attach them to the constructor using the magic ‘this’. And that brings me on to the ready function ‘this.ready’, this is publicly accessible but ‘loadImage()’ (just like the variables) isn’t because it’s not attached to the constructor and exists within its context.

  Arguably this isn’t class based programming but it’s the best it’s gonna be for a while now.

  Tags: class ~ JavaScript ~ private ~ public
  Posted in JavaScript

  ---

• How every ActionScript base class should start

  Tuesday, January 3rd, 2012

  Regardless of what you think of Flash (you know who you are) ActionScript 3 is by far the most powerful front end language and it teaches the developer something important: class based development. Let’s be honest here, JavaScript is a huge hack of a language and considering it was one of the first languages I ever wrote, I will always prefer ActionScript 3 (but not necessarily Flash) over JavaScript.

  Anyway, if you’re still writing ActionScript 3 then you most certainly have a base class and this base class should always (in my opinion) start like this:

  package
  {
      import flash.display.Sprite;
      import flash.events.Event;
     
      [SWF( backgroundColor=0xffffff, frameRate=30, height=600, width=800 )]
     
      public class App extends Sprite
      {
          public function App()
          {
              loaderInfo.addEventListener( Event.INIT, handleInit, false, 0, true );
          }
         
          private function handleInit(e:Event):void
          {
              loaderInfo.removeEventListener( Event.INIT, handleInit );
          }
      }
  }

  I’ve come across a lot of code in my time and a lot of problems stem from badly initialisation of the application before it’s embedded or even ready to have stuff drawn. By listening to the ‘loaderInfo‘ INIT event, you know your app’s ready. That is all.

  Tags: Actionscript 3 ~ as3 ~ class ~ tip
  Posted in Actionscript 3

  ---