Nothing fancy, but nice to know. See http://www.hjaelpmignu.dk/content/punching-holes-gradient-mesh for more info

I have started to dive into tiles, and how to make tile based games. Some of the most relevant info on that topic was found in an old book called “Flash MX 2004 game design demystified”. As the title implies, it is not quite current, but the theories behind tiles still works a long way.

Continuing on the seas of The Web, I stumbled onto Tonypa and his section about Tile Based Games (via Terry Paton - thanks). The problem with that info was, that it was just as old as my book reference. Therefor I decided to send him a mail, and ask for permission to update his tutorials to a more current ActionScript 3.0/Flash Builder/Starling version.

I will have to do a lot of learning, while porting this to AS3, and there may be introduced several errors and rewrites along the way, but I take that as a part of the proces. I will hopefully end up with a solid foundation of tutorial to use in my own game, and the continuing work on that project.

Feel free to comment, ask questions about unclear parts, and come with suggestions to improvements – I’m almost guaranteed not to get this right at the first shot

Take a look at Tile Based Games in the top menu.

This post is just a quick solution to test the performance of Starling. It build upon the previous one called Getting hooked up with Starling, and just adds a lot of the mice and make them react to the mouse.

The process here is simply:

1. Initialize Starling
2. Wait for the stage to be ready
3. Insert a whole lot of images
4. Make each image react to their position in relation to the mouse.
5. See, how it goes

Initializing starling and waiting for the stage, was explained in the other tutorial, so I will discuss the other topics here. This is an example of what you will be doing.

Insert more than one image

When dealing with images, it is generally a good idea to define a custom class for them. This way it is easier to manipulate and retain individual information in the individual images. In this example you should go ahead and add a custom class. You can use the Start project to follow along or even better, complete the previous tutorial and use those files

Right click on the default package and select New > ActionScript Class

Call the Class CustomImage and make the Image class (starling.display.Image). Declare two public variables called destX and destY as numbers, so the code should look like this:

package
{
  import starling.display.Image;
  import starling.textures.Texture;

  public class CustomImage extends Image
  {
 public var destX:Number;
 public var destY:Number;
    public function CustomImage(texture:Texture)
    {
      super(texture);
    }
  }
}

These variables are used to store the destination coordinates for each image. They are supposed to move to a random new location from time to time, and these variables are taking care of the values.

Open the StarlStage.as file and declare the following variables:

[Embed(source="assets/mouse.png")]
private var mouseBMP:Class;

private const NUM_MICE:uint = 500;
private var miceVector:Vector.<Image> = new Vector.<Image>(NUM_MICE, true);

private var mouseCoord:Point = new Point(); 
private var maxDist:Number;

First, you create a constant that holds the number of mice you want in the test. Change that to suit your need. Then a vector object is created. The first argument is the number of elements in the vector, and the second argument (set to true) is creating a fixed vector, so it isn’t allowed to change size during runtime. These arguments are optional, and only set for performance reasons.

After that a Point object is created to hold the position of the mouse, and a value to hold the maximum distance there can be between two points on the stage (a diagonal line).

Change the onAdded() method, so it looks like this:

private function onAdded(event:Event):void
  {
    q = new Quad(800, 600, 0x880000);
    addChild(q);

    maxDist = Math.sqrt((stage.stageWidth * stage.stageWidth) + (stage.stageHeight * stage.stageHeight));

    var texture:Texture = Texture.fromBitmap(new mouseBMP());

    for(var i:int = 0; i < NUM_MICE; i++)
    {
      var image:CustomImage = new CustomImage(texture);
      image.pivotX = image.width >> 1;
      image.pivotY = image.height >> 1;
      image.alpha = Math.random();
      image.destX = Math.random()*stage.stageWidth;
      image.destY = Math.random()*stage.stageHeight;
      image.x = Math.random()*stage.stageWidth;
      image.y = Math.random()*stage.stageHeight;
      image.rotation = deg2rad(Math.random()*360);

      addChild(image);
      miceVector[i] = image;
    }
}

The first two lines is the colored background, made from the Quad. Next line uses the Pythagorean Theorem to calculate the diagonal based on the width and height of the stage. The value is stored in maxDist for later use.

Then the texture is created, exactly like in the previous tutorial, and a loop is set up to generate the amount of mice, that is declared in NUM_MICE.

Fir you declare a variable called image as the type CustomImage, which is the class you made earlier. pivotX and pivotY is a nice set of properties that Starlings display objects have. They move the origin point inside the object to a new position. In Flash, you are normally moving the object in a negative direction in order to be able to rotate or scale around the middle of the object; With Starling you can just set the pivot point to be any coordinate in the image. The bit shift to the right (>>) is just a fancy way of divide by 2. I could have entered something like image.height/2 but I am told that the performance of this bit shift is a bit faster, so I-ll stick with that

The rest sets a lot of random numbers in the objects properties (alpha, x, y and rotation). It also sets the public variables inside the CustomImage class, with new random coordinates.

Finally the image is added to the stage, and places inside the vector, so it can be referenced later on.

Test the project to see a lot of mice with different position, rotation and transparency on a dark red background.

Getting the coordinates from the mouse

The Starling framework do not work with mouse events, but it has (like Flash) an event called TouchEvent, that takes care of most of your needs. Add a listener called onTouch() and update the constructor so it looks like this:

public function StarlStage()
{
  addEventListener(Event.ADDED_TO_STAGE, onAdded);
  addEventListener(TouchEvent.TOUCH, onTouch);
}

private function onTouch(event:TouchEvent):void
{
  var touch:Touch = event.getTouch(stage);
  mouseCoord = touch.getLocation(stage);
}

In the constructor you listen for the TouchEvent (remember to import the Starling version), and set it to call the onTouch method. A touch event can contain multiple touch, so there is a method called getTouch() and one called getTouches(). Here we just take one single touch from stage, and keep it in the object called called touch. These Touch objects holds all relevant information regarding the specific place it points to. Here you use the method getLocation to retrieve a Point objects, that is store in your own mouseCoord variable for later use.

Make the mice move

Not it’s time to move the mice. Start by registering a listener last in the onAdded() method, so the last line should look like this:

private function onAdded(event:Event):void
{
  ...
  //previous code here
  ...
  stage.addEventListener(Event.ENTER_FRAME, draw);
}

Again, remeber to import Starlings own Event class (starling.events.event), instead of the one you are used to in Flash. Create a method called draw, and enter the following:

private function draw(event:Event):void
{
  var distance:Number;
  var tmpImg:CustomImage;
  var ratio:Number;

  for (var i:int = 0; i < NUM_MICE; i++)
  {
    tmpImg = miceVector[i] as CustomImage;
    tmpImg.x -= (tmpImg.x - tmpImg.destX) * .01;
    tmpImg.y -= (tmpImg.y - tmpImg.destY) * .01;
    if(Math.abs(tmpImg.x - tmpImg.destX) < 1 && Math.abs(tmpImg.y - tmpImg.destY) < 1)
    {
      tmpImg.destX = Math.random()*stage.stageWidth;
      tmpImg.destY = Math.random()*stage.stageHeight;
    }

    distance = Point.distance(mouseCoord, new Point(tmpImg.x, tmpImg.y));

    ratio = distance/maxDist
    tmpImg.rotation += 0.2 * ratio;
    tmpImg.scaleX = tmpImg.scaleY = 1 - ratio;
  }
}

That’s a lot, so let’s take it in small chunks. First you create two variables, one to hold the distance between the mouse and the current image. The other is just a temporary instance of the image made outside the loop, so you don’t fill up the memory with hundreds of local instances. This way, you are using the same object over and over again.

Then a loop is set up, that iterates through your pool of images, contained in the vector called miceVector. Inside the loop you first transfer a reference to the current objects to tmpImg. From now on, you can avoid the time consuming process it is for Flash to look up an object in arrays and vectors – it is also a bit easier to read.

tmpImg.x -= (tmpImg.x - tmpImg.destX) * .01;
tmpImg.y -= (tmpImg.y - tmpImg.destY) * .01;

Then each image is moved a bit closer to it’s destination. This is done, by taking the distance between the two points (current and destination) and multiply it with a low number – in this case .01. If you enter a higher value, they will travel faster, but since it is redrawn 60 times per second (if it can), you are working with very low numbers here. In more complex solutions, I would introduce dedicated tween classes, but this should do it, for a quick test.

if(Math.abs(tmpImg.x - tmpImg.destX) < 1 && Math.abs(tmpImg.y - tmpImg.destY) < 1)
{
  tmpImg.destX = Math.random()*stage.stageWidth;
  tmpImg.destY = Math.random()*stage.stageHeight;
}

Then you test if the distance between current position and destination is below 1. If it is, a new destination point is set in the images destX and destY. This is done, because, you would never reach the exact same values when multiplying with .01.

distance = Point.distance(mouseCoord, new Point(tmpImg.x, tmpImg.y));

This one can be a bit tricky. It uses a stetic method in the Point class called distance, to get the distance between two point objects. it actually just does the same as the calculation of maxDist earlier on. Since tmpImage doesn’t have a Point as a property, you create one. I am not sure, that this is very performance effective, but I included it here, so you can see both methods in practice.

ratio = distance/maxDist
tmpImg.rotation += 0.5 * ratio;
tmpImg.scaleX = tmpImg.scaleY = 1 - ratio;

the last lines takes care of scaling and rotation of the objects. First a ratio between the distance variable and the maximum distance is found. This results in a value between 0 and 1. This value is the multiplied with 0.5 to get a number between 0 and 0.5 for the rotation. Remember, that rotation in Starling is in radians, so 0.5 is actually quite a lot

The it scales both x and y on the image based on the same ratio and the value 1 (which mean 100%). The ratio is subtracted from 1. This makes the images smaller the further away from the mouse it is.

Take it for a spin

Try running the application. Fiddle with the values, to achieve other effect. Try to adjust NUM_MICE, to test the performance. There is certainly room for improvements, but I am pretty impressed with the performance. My machine is taking 1000 objects without blinking – I can’t recall doing that earlier, while using square root, and having semi-transparent images rotating and moving on top of each other- Starling is fun

One of the more promising aspects of the new Flash Player and AIR runtime is the Stage3D object. The obvious and breathtaking improvements is seen in experiments like http://www.unrealengine.com/flash/ where you are moving around in a 3D landscape in realtime, with reflections, light and all the Unreal Engine can throw at you. Another great example is Unity, that exports to the Flash Player. Take a look at the video on http://blogs.unity3d.com/2011/09/01/unity-and-flash-a-sneak-peek/ to see how it raises the bar for what is possible in a browser.

My project with Mouse Wood calls for a simpler solution, though. Fortunately Stage3D is not only for 3D content. There are several initiatives like ND2D, M2D and Citrus Engine, that I find very interesting because of it’s buit-in level editor and side scrolling ability (and I am in desperate need of inside knowledge on how to make side scrolling games). My love falls on the Starling Framework. First of all, it looks simple and straight forward – and have a lot of similarities to the traditional display list approach. Secondly, I hear it mentioned quite a few places, performing some nice results on both desktop as well as mobile. I may look into the other as well, but this article dives into Starling.

Get the packages

Starling originates from the gaming framework called Sparrow, that targets iOS game development. Both frameworks resides at the site http://gamua.com/ and provides easy access to packages and tutorials. You get access to the framework by doing the following:

1. Go to http://gamua.com/starling/download/ and hit the Download Starling button (currently 1.0)
2. Unzip the package

Inside you will find a few folders and a read me-, change log- and license file.

There is a folder with some samples, and a folder to Flex Unit Tests. I will not discuss these files, but solely focus on the starling folder. Inside the Starling folder you will see a few folders. You are interested in the bin folder and the src folder – actually, you are only interested in the bin folder. Looking into the source folder, you will find all the ActionScript classes, that makes up the framework. The same files, are the one compiled into one handy swc-file (ShockWave Component, Small Web Component – or something like that. Nobody seems to know .. or care) located in the bin folder for you to keep.

Copy the starling.swc from the bin folder to where you keep you class-files. I have made a folder in my dropbox folder, so everytime I update a package on one of my machines, i automatically gets updated on the other machines.

Link to the framework

In my experiments I will primarily use Flash Builder for the development. So fire up Flash Builder and:

1. Create a new ActionScript project (File > New > ActionScript Project)
2. Call it StarlingTest (or similar) as the project name.
3. Click Next to go to the Build Paths.

4. In the dialog, click on the Add SWC button. Navigate to the startling.swc and add that to the list.
5. Click on finish, to create the project.

NB: If you are following along in Flash Professional, you can add the swc’s so they are always available in the programs preferences (under ActionScript settings) or per project (in it’s publish settings)

Making a stage3D object

With the project in place. You will now make a Stage3D object. The Stage3D object i placed in the Display List just like any other display object. In fact it is placed behind the stage. You can have many stage3D object on top of each other, but they all have to be behind the normal stage and it’s contained objects – so no stage3D floating around a traditional animation in Flash, only the other way around.

With StarlingTest.as open – enter the following code. The highlighted areas is where you should enter text, if you follow along:

package
{
  import flash.display.Sprite;
  import starling.core.Starling;

  [SWF(frameRate="60", width="800", height="600", backgroundColor="0xFFFFFF")]
  public class StarlingTest extends Sprite
  {
    private var starl:Starling;

    public function StarlingTest()
    {
      starl = new Starling(StarlStage, stage);
 starl.start();

    }
  }
}

First is the SWF-meta tag, that allows you to set specific parameters that is used at compile time. This one simply sets the frame rate to 60fps, width and hight and finally a white background.

Then you declare an object of the type Starling. This object is the main motor. It translates everything that goes into it into the native Stage3D framework underneath. Inside the constructor, it is initialized. The signature has a lot of parameters, but in general i believe you will use the first two in most cases. The first one, is the name of the Class that is supposed to be inserted on stage and the other one is just a reference to the stage object. This example references the StarlStage class that isn’t defined yet, so you will get an error – don’t worry. You will create it in a moment.

The Starling object itself has a few methods and properties, that can be used to control the behaviour of the object. The one you will use everytime is the start() method, that starts up the engines.

Create the Starling sprite class

Right click in the default package and choose New > ActionScript Class. In the dialog box enter “StarlStage” in the name field (the same name you refered to in the main class). In the input field called Superclass, begin typing the word “sprite” to see the code completion kick in. Select the option called Sprite – starling.display to make sure that the sprite inherits from the right superclass.

Showing a background with the Quad class

One of the more interesting classes I found in the Starling framework is the Quad. Maybe I just haven’t looked around, but I haven’t seen other objects, that made it so easy to manipulate rectangles, and their colors. The Quad is basically a rectangle that is able to present a uniform color or a gradient. Not a normal gradient, but a gradient that radiates from every vertex in the rectangle.

The individual vertex is stores in an array, going from top-left, over top-right and down to bottom-left and finally bottom-right

The signature of the class is:

Quad(width:Number, height:Number, color:uint = 0xffffff, premultipliedAlpha:Boolean = true)

You simply set width and height. If you leave all other parameters, you will get a white box. You can set the third and fourth parameter to change the color or the default alpha method, premultiplied alpha. (read more about it here)

With the StarlStage.as active enter the following code. The text in bold is the one you should add:

package
{
  import starling.display.Quad;
  import starling.display.Sprite;
  import starling.events.Event;
 
  public class StarlStage extends Sprite
  {
    <strong>private var q:Quad; </strong>
    public function StarlStage()
    {
     <strong> addEventListener(Event.ADDED_TO_STAGE, onAdded); </strong>    }
 
<strong> private function onAdded(e:Event):void { q = new Quad(800, 600, 0x880000); addChild(q); } </strong>  }
}

First it declares the Quad as the variable q. Then the class listens for the event that is triggered, when the object is added to the stage. It is a good habit to make sure the stage is available before adding content to it. In this case, you could do it all in the constructor, but you may end up in a situation later on, where you need to be sure that the stage is reachable – this way, you are on the safe side.

Finally in the onAdded() listener, you instatiate it with a width, a height and a dark red color. Because the similarity between traditional display objects and Starlings display objects, it’s just a matter of calling addChild() to place it in the display list.

Test it

Now, would be a great time to see if everything is working as expected. If you try to run the code, you will see that it shows an error on the screen that says: “This application is not correctly embedded (wrong wmode value)”

This is a default message, that Starling displays if you haven’t enabled the the players the right access to the GPU. To do that, open the file called StarlingTest-app.xml that is located in the root of your source folder. This file contains all relevant information about the project, and this is where you will find the node called RenderMode (around line 104). Uncomment that node and correct it to:

<renderMode>direct</renderMode>

This way you tell the application, that although you will render vectors through the software renderer they will blit through the GPU. It is also possible to enter “gpu” and make all the calculations in the GPU, but for the most part, I believe that direct gives the best performance … but you can fiddle with that.

Save all the documents and try again. You should see a dark, red colored window. If not, review your code, and look for errors. You might download and look at the accompanying files to look for things that might have gone wrong.

Placing an image

OK, with a Quad in place, it is time to step up a level – let’s introduce images. You can’t go around showing colored rectangles all day, at a point you have to bring in some detailed pixels. Update your code, so it looks like this:

package
{
  import flash.display.Bitmap;

  import starling.display.Image;
  import starling.display.Quad;
  import starling.display.Sprite;
  import starling.events.Event;
  import starling.textures.Texture;

  public class StarlStage extends Sprite
  {
    private var q:Quad;

 [Embed(source="assets/mouse.png")]
 private var mouseBMP:Class; 
    public function StarlStage()
    {
      addEventListener(Event.ADDED_TO_STAGE, onAdded);
    }

    private function onAdded(e:Event):void
    {
      q = new Quad(800, 600, 0x880000);
      addChild(q);
 var mouseBMP:Bitmap = new mouseBMP();
 var mouseTEX:Texture = Texture.fromBitmap(mouseBMP);
 var mouse:Image = new Image(mouseTEX);
 addChild(mouse);
    }
  }
}

That was a lot for a little result, you may think. Well, some of it is the way Flash Builder is used to embed images, and some of it is because of Starlings way to treat content inside images as textures – actually Image works like Flash’s own Bitmap class. In the references it is told like this:

An Image is a quad with a texture mapped onto it.

The Image class is the Starling equivalent of Flash’s Bitmap class. Instead of BitmapData, Starling uses textures to represent the pixels of an image. To display a texture, you have to map it onto a quad – and that’s what the Image class is for.

Let’s take the code in chunks

 [Embed(source="assets/mouse.png")]
 private var mouseBMP:Class;

This is the normal way to embed images in Flash Builder. By using the Embed meta tag you are making the image available from the beginning, instead of loading it in at runtime. You can read more about the embed meta tag at http://www.adobe.com/devnet/flash/articles/embed_metadata.html

You are capturing the path to the source and immediately assign it to a class object. This is because you have to assign the image info to an object in order to reference it later on in the code. The second part of the code is executed when the stage is ready, and looks like this:

var mouseTEX:Texture = Texture.fromBitmap(new mouseBMP());
var mouse:Image = new Image(mouseTEX);
addChild(mouse);

First you make a texture, to place on your image. You are using the static methods in the Texture class to tell, what will be the foundation for the texture. This example use Texture.fromBitmap() to indicate that a bitmap info is used for the texture. As argument, you just enter “new mouseBMP()” so a new instance of the image is passed on to the texture.

The next line declares Starlings Image object, that is similar to the Flash Bitmap class. Instead of passing bitmap data to a bitmap object, you are passing the texture data to an image object in Starling – similar proces, different names. Finally it is added to the stage with addChild()

Now what?

This is the absolute fundamentals of presenting images and Quads. In the next tutorial, I will add some movement, but use this tutorial as a reference to get things out on the stage in Starling – Other articles I do will take it for granted and refer to this one for explanation.

Feel free to comment and ask quations in the forum

This is just on nice to know basis, and there may be some aspects of this, that is not 100% right presented here, but I am sure that you get a fairly solid understanding of what premultiplied alpha blending is about.

When you have a color value, you normally take the color values and multiply with the alpha value afterwards. In premultiplied alpha, the reduction in color value is calculated and presented in the number.

This brings some serious performance improvements at the expense of a little precision. This method is also an effective way to introduce transparency in the color and minimize fringes around the edges. An example.

A value of (1, 0, 0, 0.5) would normally give 100% red at 50% transparency. In premultiplied alpha, it would be (0.5, 0 , 0, 0.5) – the alpha value is merged into the color value.

Most people understand the concept of premultiplied values, by how much they occupy a pixel, so you don’t make it transparent but fill out an area of a pixel. Let’s take a yellow and cyan color, and mix them.

Yellow is normally (1, 1, 0), so that would be (0.5, 0.5, 0, 0.5) in premultiplied. Because we now, that the calculation is made beforehand, we can assume this to be a fully yellow color occupying 50% of the pixel.

The cyan would be (0, 0.5, 0.5, 0.5) for at 50% pure cyan color. Placed on top it will look something like this.

Because you have a pre-multiplied value, you can use an equation like this:

val = frontval+((max-frontalpha)*backval);

to calculate the final value. With yellow as back color and cyan as from color, that turns out as:

R = 0+((1-0.5)*0.5)
G = 0.5+((1-0.5)*0.5)
B = 0.5+((1-0.5)*0)
A=0.5+((1-0.5)*0.5)

which results in a RGBA value of (0.25, 0.75, 0.50, 0,75). You will see the difference in the Red and Blue channel reflects, which of the colors that are placed on top of the other.

Here the result is illustrated by the RGB letters. Think of small letters as having half the weight as the capital letters. Because the cyan is in front of the yellow it’s channels are “eroding” information away from the underlying color. So the calculation is something like: red (1), green (1+2=3), blue (2) that reflects the ratios as the calculated result.

In addition to that, Flash is stepping up, when it comes to games. It have a dedicated site at http://gaming.adobe.com/ and is actively supporting efforts to bring Flash into the game sphere. I think it has advantages in its multi-platform approach, and unique possibilities of adding timeline animation and effects from Flash Professional and the scalability and modularity of Flash Builder.

My son made some initial drawings, and I am in the progress of changing them into illustrations, that can be used in the game. There will be alterations, re-drawings and enhancements along the way, but it is my intention that he does the designs, and I muscle the machine.

Mouse Wood

The plot, as far as I can decipher is something like this:

“The game is about a mouse (without ears) that runs through the woods. While running, it should avoid snails and other animal trying to get to it. Furthermore, there is apples dropping down from the trees that should be avoided. Around the woods, there is small chunks of cheese, lying around. Is the mouse eats enough of these cheeses, it can spit on the animals to make the smaller. When small enough, they can be eaten or jumped upon. Each level ends with the mouse is getting home to it’s mouse hole, or fighting a boss.”

… I can see something like that in my head – so that should be doable.

Why are you doing this

Because I haven’t made larger games before, there is a lot of learning here for me to do, also. Several new technologies/frameworks has arrived, and I thought I would just dive in, and see how far I can get with this experiment. I hope that this journey will bring some interesting blog posts about how to create a game. There isn’t planned any structure, and it is trial and error, but hopefully in the end, I will end up with a decent result.

When completed, I hope I can wrap it up in a set of tutorial, to help other getting their head around programming simple games with Flash.

Where do I start?

I have several aspects in top of my head, that I would settle with. First I will do some experiments with the Starling framework, to see if I can get the characters to show up, in a Stage3D environment. Then I would apply some physics with either Box2D or Nape (other other, that may come around). I may also integrate TweenLite into animation of titles etc. (aah, familiar grounds). I think that I will wrap it all up in a framework, like the one presented in the comprehensive book called “The Essential Guide To Flash Games: Building Interactive Entertainment with ActionScript 3.0” (sounds like a proper title for my purpose). It is a large framework, but I see it referenced quite a few places, like Lee Brimelows tutorial on Finite State Machine Part 1 and Part 2.

The levels also has to be drawn. I am actually on thin ice here. I have seen a few, but my son, wan’t something scrolling left and right. I think I will take that, as I progress – enough to stat with already. If you have any inspiration, links to tutorials, info on game creation or AS-classes, that should be considered – please leave a comment.

See, ya!

Well … until now, I guess. Adobe has made a tool called Adobe Shadow, that sync your browser (Google Chrome) with devices in the same network. Users of Mag+ know the magical feeling, when you update something in InDesign, and it updates instantly on the tablet. It is like it is all wired up, and the tablet just appears as a second (or third) monitor in your workflow. Now you can do it (for free) with Adobe Shadow.

To get it up and running just go to http://labs.adobe.com/technologies/shadow/ and follow the instructions. Some things to pay attention to, during installation, is:

1. There was a problem with the URL to the Chrome extension in the instructions. The right one is https://chrome.google.com/webstore/detail/ijoeapleklopieoejahbpdnhkjjgddem
2. If the extension doesn’t start, you may have forgotten to start the Shadow Application (http://labs.adobe.com/downloads/shadow.html)
3. It only works if the devices are on the same network. Some companies have several network for you to choose from. Maybe you have a separate secure network for your workstation, that doesn’t allow devices in. If you are facing problems, you could start a wireless hot spot on your device, and connect via that.

What Adobe Shadow tries to do, is to take some of the pain out of handling multiple style sheets targeted specific devices or resolutions. When making responsive designs, you often have to work on remote servers, in a desktop-upload-device-update manner. In the “nudging” phase, that is a bit tedious. When Adobe Shadow is set up correctly, it will redirect the information from the desktop browser to all connected devices instantly. It will evaluate the devices specifications and present the relevant style sheet. This way, you can have four devices laid out next to you, that responds whenever you preview your website in the Chrome Browser.

You ought to try it out. It is pretty impressive to see multiple devices, that updates almost instantly as you work in the desktop browser. You can event remotely access the device and alter the CSS or HTML shown. Take a look at http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow if you just want to see it in action … after that – if you design for multiple devices – you surely wanna try it yourself

/ockley

Title: HTML5 Canvas

Pages: 652

Writer: Steve Fulton & Jeff Fulton

Publisher: O’Reilly

Genre: JavaScript

ISBN:
ISBN-10: 1-4493-9390-X
ISBN: 978-1-4493-9390-8

Introduction

A lot of the hype around HTML5 and it’s so-called “Flash killer”-ability evolves around the canvas element – an element that makes it possible to draw on a designated area of the HTML-document and update or interact with it via JavaScript.

With the Flash Player abandoning the mobile browsers, this opens an immediate need for a technology, that satisfy the developers desire to create engaging content that goes beyond fading DOM-elements in or out of the page with jQuery – we are talking Physics, object collision and mouse interaction like we are used to on the Flash Platform. This is where the canvas element comes to the rescue, and this book tries to give you enough tools to work with the element.

Tone of voice

The book is precise and consistent in its tone of voice. It is not utterly humorously written, but is keeping a light and positive that makes most the more complex topics easier to swallow.

Content

It is topic based, and all the topics takes you through the main areas of the usage of the canvas element. It starts with simple topics and primitive examples on how to set up the canvas, and how to draw and render text on the elements.

When that is all set, it takes on Physics and animation. Inspired by elder and well written routines from books like “Flash MX 2004 Game Programming”, and “Flash Animation – making things move” (FriendsOfEd) they are converting the concepts, so the work in the JavaScript environment.

After a throughout discussion on the other two main areas, where HTML5 is said to lift the Flash burden – video and audio – it goes into creating a game, and discusses many topics surrounding game development: Timers, transformation of elements, Game State Machine etc.

Finally, there is a topic that shows how PhoneGap can be used to make programs, made with HTML and JavaScript, install and work as native Apps on the device. It also gives pointers for further exploration in WebGL (3D-environment) and working with ElectroServer.

Conclusion

For me, it is the first book on the HTML5 Canvas element I have ever read. As an experienced Flash Developer and well wandered in the world of JavaScript, I had no problem following the examples and extract the new knowledge presented in the book. However, this is not a book teaching you JavaScript. You may learn a lot of new JavaScript-stuff along the way, but there is little help when it comes to understanding of function, conditions and loops. Instead you are getting solid information  about the do’s and don’ts of Canvas-programming.

It is not a beginners book, it’s not a reference book, but for an intermediate programmer, you should have no problems at all. When it comes to the physics stuff and game logic, you may have to read it a few times to get your head around it.

If you are facing any problems, when it comes to topics covered in the book – things you don’t understand or wan’t a discussion about, feel free to ask questions in the JavaScript forum.

Kind Regards
Karsten Vestergaard (ockley)

If the have learned how to declare a variable in ActionScript, they sigh, when they have to do it in Java. If the are rotating and use trigonometry in Processing, it’s a drag to make the do the same in ActionScript. Sometimes you have to write more (or less), but in a lot of the situations, you just have to write it different to make it work.

I have started a book writing over at Help me now called Agnostic Programming. The title don’t refer to the “I don’t know if God exists”-thought, but rather the fact, that my knowledge about how to program, in many ways, don’t have to be tied up to a single language, but the ideas behind syntax and how to construct sentences can be used to model a sentence to a different dialect – for the most part, not even a different language, as it is the same keywords there is widely used. Sometimes a statement in one language is called something else, but in other cases, it’s just a matter of constructing the sentences.

I have started with languages that I use myself, as a starting point, and that is ActionScript, JavaScript, Processing and Java. While I know that they fundamentally pairs down to ECMA and Java, it is something I can relate to. I may introduce other languages, if someone will help transcribing to them. I might just take my own medicine and see, if I can dig it up myself. I’m actually already doing that with Java, which I’m not that familiar with.

This is an open write in progress, and in the beginning it’s probably most text. Later on the diagrams may show up. I do not make beautiful sentences in english, so this is also a way of practicing my english skills, so please comment on grammar and typos too – “my english is Willy bath!”

My intention is to gather enough relevant material to publish it in some form, and nail down some teaching concepts along the way. My students will then learn how to program in a way that makes them less independent of the platform they are programming on.

Ideas are highly appreciated.

I haven’t looked at performance yet, and there is possibly a lot of ways to optimize this code – this article can be a start for further fine tuning. The helper function looks like this:

function map(val:Number, inMin:Number, inMax:Number, outMin:Number, outMax:Number, decimals:uint=0):Number
{
var returnVal:Number;
 
// Sets the total range for both in and out
var inRange:Number = inMax - inMin;
var outRange:Number = outMax - outMin;
 
//calculates the ratio for the value in relation to the in range
var ratio:Number = (val - inMin)/inRange;
//makes sure that the value is within range
val = Math.max(inMin, val);
val = Math.min(inMax, val);
//Finds the same ratio in the out range and shift it into place
returnVal = (outRange * ratio) + outMin;
 
//rounding of the decimals
var factor:int = Math.pow(10,decimals);
returnVal = Math.round(returnVal*factor)/factor;
 
return returnVal;
}

The function takes the the following arguments:

• val: the number to be remapped
• inMin and inMax: The original range, in which the value is measures in relation to.
• outMin and outMax: The destination range, that the value will be re-mapped to
• decimals: sets the precision in decimals (optional)

var inRange:Number = inMax - inMin;
var outRange:Number = outMax - outMin;

val = Math.max(inMin, val);
val = Math.min(inMax, val);

var ratio:Number = (val - inMin)/inRange;

returnVal = (outRange * ratio) + outMin;

var factor:int = Math.pow(10,decimals);
returnVal = Math.round(returnVal*factor)/factor;

Optimization

An example

import flash.display.Sprite;
import flash.events.MouseEvent;
 
//make the small square and color it dark grey
var inArea:Sprite = new Sprite();
inArea.graphics.beginFill(0x333333);
inArea.graphics.drawRect(0,0,100, 100);
inArea.graphics.endFill();
addChild(inArea);
 
//make the large square and color it black
var outArea:Sprite = new Sprite();
outArea.graphics.beginFill(0x000000);
outArea.graphics.drawRect(0,0,400,400);
outArea.graphics.endFill();
outArea.graphics.lineStyle(1, 0xFFFFFF, 0.3);
addChild(outArea);
outArea.x = inArea.width;
 
//adds a listener for the small square, that listens for mouse movement
inArea.addEventListener(MouseEvent.MOUSE_MOVE, updateDrawing, false, 0, true);
function updateDrawing(event:MouseEvent):void
{
	//Map the local coordinates from the mouse movement to the size of the large square
	var targetX:int = map(event.localX, 0, event.target.width, 0, outArea.width);
	var targetY:int = map(event.localY, 0, event.target.height, 0, outArea.height);
 
	//Draws the line in the large square.
	outArea.graphics.lineTo(targetX, targetY);
}
 
//Helper function
function map(val:Number, inMin:Number, inMax:Number, outMin:Number, outMax:Number, decimals:uint=0):Number
{
	var returnVal:Number;
	// Sets the total range for both in and out
	var inRange:Number = inMax - inMin;
	var outRange:Number = outMax - outMin;
 
	//makes sure that the value is within range
	val = Math.max(inMin,val);
	val = Math.min(inMax,val);
 
	//calculates the ratio for the value in relation to the in range
	var ratio:Number = (val - inMin) / inRange;
 
	//Finds the same ratio in the out range and shift it into place
	returnVal = (outRange * ratio) + outMin;
 
	//rounding of the decimals
	var factor:int = Math.pow(10,decimals);
	returnVal = Math.round(returnVal*factor)/factor;
 
	return returnVal;
}