• Shortcuts : 'n' next unread feed - 'p' previous unread feed • Styles : 1 2

» Publishers, Monetize your RSS feeds with FeedShow:  More infos  (Show/Hide Ads)

Date: Wednesday, 26 Mar 2014 20:21

In this post we’ll see how we can create physics-enabled environments mixed with character animation for gaming using babylon.js and WebGL.


Kick around some boxes and beach balls in the demo

In previous posts, I showed how we can use babylon.js to create 3D Maps using Bing and share 3D Scans from Kinect. But the heart of babylon.js is all about games, and here we’ll talk about aspects of interactive, physics-based 3D games using the framework.

Skeletal Animation

Skeletal animation is used to animate meshes based on bones – such as the walking character animation shown here. Babylon.js supports skeletal animation, and will accept animations exported from Blender. When creating the animation for this demo, I needed separate animations for walking, kicking, jumping and standing. What I chose to do was just append all of these separate animations into a single group of 90 frames, which you can see in the image here.


To control this animation in babylon.js, we can pass in the start frame and end frame we wish to play back:


scene.beginAnimation(_skeletonRegularGuy, 31, 60, true, 1.0);


One important note when exporting animations from Blender: we need to bake the location, rotation and scaling for the animation before export! To do this, select your mesh in Object Mode and then press Ctrl+A and choose Location. Repeat this for Rotation (and Scale if you have any key frames affecting scale).



Keyboard Input

In this demo, I used a simple means of tracking which keys were down, first by adding standard event handlers:

        // key input

        window.addEventListener("keydown", this.handleKeyDown, false);
        window.addEventListener("keyup", this.handleKeyUp, false);

… and then tracking the states of each key in a simple attribute:

this.handleKeyDown = function (evt) {

keyStates[evt.keyCode] = true;


To make things a bit easier to track, we can add an enumeration that equates key codes to directions for our character:

var enumDirectionKeys = {

    keyNone: 0,

    keyUp: 87,

    keyLeft: 65,

    keyRight: 68,

    keyDown: 83,

    keyJump: 32


Virtual (Touch) Joysticks

If you happen to try the demo on a touch-enabled device, you can use the left side of the screen to control a virtual joystick for movement, and the tapping anywhere on the right side of the screen makes the character kick. This is made possible by using the virtual joystick class from the GameFX library, which is included as babylon.virtualJoystick.js in the babylon source.

We can create an instance of the joystick with:

   joystick = new BABYLON.GameFX.VirtualJoystick(true);

… and then read the delta position of the joystick like so:

   var delta = (joystick.deltaJoystickVector);


For sound support, I used create.js. It’s pretty straight forward to use the sound library portion of create – first you initialize and add a manifest:

        // sound fx

        var audioPath = "sounds/";

        var manifest = [
            { id: "kick", src: "kick.mp3" },
            { id: "wood", src: "wood.mp3" },
            { id: "ball", src: "ball.mp3" },

 createjs.Sound.registerManifest(manifest, audioPath);

… after which you can play any file by its id:


Adding Physics

Babylon.js uses Cannon.js to support 3D Physics, and it makes it very easy to do so through imposters. For example, to add physics to our “beach balls,” we can use the SphereImposter in a call to setPhysicsState like so:

ball.setPhysicsState({ impostor: BABYLON.PhysicsEngine.SphereImpostor, mass: 0.05, friction: 0.5, restitution: 0.9 });

However, there are some advanced scenarios where a simple imposter will not do – for example, in the picture to the right you see our “dude” physics in the demo. Since we want our dude character to walk around and move/kick the physics objects around him, we need to have a more advanced imposter. In this case, we can join a “wheel sphere” to  a “body box” and then apply impulse to the wheel to move the box around. Additionally, the “kick region” is used to detect collisions with other physics objects when the character performs his kick move.


To accomplish the character physics, three physics imposters are used.


Getting Help and Support

If you choose to use babylon.js for your next project, here are some resources that can get you started.

Babylon.js forums on HTML5 Game Devs – this is an awesome community of like-minded game devs using javascript frameworks such as babylon.

Babylon.js samples and source – if there is one thing babylon provides, it’s a lot of cool samples. Poking around through this code is invaluable in learning the ropes.

Babylon.js Wiki – full of some good tutorials to get started.


Author: "andy@andybeaulieu.com"
Comments Send by mail Print  Save  Delicious 
Date: Saturday, 15 Feb 2014 14:24

After shopping around for a new ultrabook, I finally settled on the Lenovo Yoga Pro 2. It features a 3200x1800 screen, 8 GB RAM and a 256 GB SSD, all weighing in at just over 3 lbs. The Yoga design allows the screen to rotate 360 degrees so that you get a (albeit hefty) tablet mode as well.

I have to admit, I have had a bad “honeymoon period” with the Yoga because of a few annoying quirks that almost had me packing the device up for return. But after a bit of adjustment, I think I am happy now with the device and will use it as my primary dev machine (I also picked up a Pluggable USB 3 Docking Station to connect two monitors and peripherals to the Yoga)

So, I thought I would share my solutions to some common annoyances that other developers will have with the Yoga…

Trackpad – Back to Basics

I have heard a lot of complaints about the trackpad on the Yoga 2, and I have to agree that its gesture support just gets in the way. I would become really frustrated inside Visual Studio when trying to drag items around or use right-click context menus – whenever I tried to right-click, the mouse would move just a little bit off target before the click registered.

So here is what I did to make the trackpad a more “basic” experience, removing the gestures…

-          Hit the Windows Key

-          Type “Control Panel”

-          In the Search box, enter “mouse”

-          Select “Change mouse settings”

-          Go to the Device Settings tab

-          Click the Settings Button

-          Now you will see the Synaptics Control Panel. Be sure to visit all three tabs here and uncheck all of the annoying gestures to your needs…


Function Keys

The top row of keys on the Yoga have both “function” keys and “utility” keys (for example, media controls, airplane mode, etc.) The default for these keys is to invoke utility keys when pressed, and as a developer you most definitely want the Function keys to be the default.

Here is how to change the default to Function Keys…

-          Shut down your Yoga 2.

-          On the right-side of the Yoga, right next to the power button is a small circular button with a little “refresh arrow” right next to it. You need to depress this tiny button with a small screwdriver or any pointed tool.

-          This will get you into the BIOS. Navigate to Configuration, and then HotKey Mode and select "Disabled":


Auto-Adjust Screen Brightness

The Yoga 2 has a light sensor which automatically brightens or dims the screen depending on lighting conditions it is in. The problem is, you will sometimes be in a light condition where the screen will flicker rapidly because it can’t settle on a brightness!

You can, however disable the auto brightness…

-          On the task bar, click the little battery icon at the right-most part of the task bar.

-          Select “more power options”

-          Select “change plan settings”

-          Select “change advanced power settings”

-          Expand Display / Enable adaptive brightness, and turn them off:

The Display

We’ve been taught that more pixels are better, but now I am not so sure! The Yoga 2 comes with a 3200 x 1800 display, which has a very high pixel density. Don’t get me wrong, the display is gorgeous. But I have found several desktop applications that were not designed properly to scale to this PPI. For example, the SSMS tool for SQL Server has lots of scaling issues, and it’s “Locate Backup File” dialog shows up like this:

(I found that resizing the dialog above fixes the paint issues, but it is a bit disconcerting!)

A few other issues with the high PPI:

-          Splash screens come up teeny-tiny

-          Screen Shots are HUGE. If you’re used to taking screenshots or video, be prepared for huge files.

-          The Command Prompt... This is how big it gets!?

The only fix I have found for these issues is to kick down the Yoga’s resolution when needed – for example, if you’re doing some Camtasia recording, it might be a good idea to lower the res before doing so.


In Summary

If you’re a developer and considering the Yoga 2 Pro, I would recommend checking out the numerous reviews from Engadget, CNET, and others. And while you will likely hit the same quirks as I did above, you should be able to make these tweaks to improve your experience.

Author: "andy@andybeaulieu.com"
Comments Send by mail Print  Save  Delicious 
Date: Saturday, 11 Jan 2014 16:23

In this post, I’ll show how to optimize and display color 3D scans in any WebGL-enabled browser using BabylonJS. I’ll be using Kinect for Windows for my 3D Scan, but you should be able to use these steps using other 3D Scanners as well.

Click the images below to see a couple of sample 3D scans – a monkey and a fruitbowl.


The idea of using the Kinect for creating 3D Scans has been around for a while, and there are commercial packages such as ReconstructMe and Skanect which provide an easy interface for 3D Scanning. However, these packages have limitations and costs associated with them.

As a free alternative, we can use Kinect Fusion and Blender to create and optimize our 3D Scans. Then, we can share our 3D Scans in any WebGL-enabled browser using BabylonJS – a JavaScript library for 3D display and animation.

Step 1: Get the Tools

In this post, we’ll be using a few free tools and libraries:

Kinect for Windows SDK (and Developer Toolkit)
Download the latest SDK and Developer Toolkit to enable scanning using Kinect Fusion.

We’ll use Blender, a free 3D Design tool, to optimize our mesh scans and prepare them for Web sharing

This free JavaScript library makes it easy to create 3D scenes and games using WebGL.

BabylonJS / Blender Export Plug-in
This plugin for Blender allows you to export a Blender 3D Scene to Babylon format. Download the plug-in and read the install instructions from the link to make it available in Blender.

Step 2: 3D Scan using Kinect Fusion

First load the “Developer Toolkit Browser” which was installed with your Kinect Developer Toolkit. Scroll down and run the Kinect Fusion Explorer – D2D sample.

For Mesh Format, select PLY and check the “Capture Color” checkbox:

You will also likely need to tweak the Reconstruction Volume and Voxel Resolution settings. For my close-up scans, I found the following settings to be the best, but you will want to try different settings for your particular scene.

Capture your 3D Scan by either rotating the object in the Kinect’s view, or walking around the object to gather all of the geometry. In this case, I am using a cute little stuffed monkey:

Once you capture all angles, click the “Create Mesh” button to save a .PLY format file (which includes color information) to disk.

Step 3: Optimize the Mesh using Blender

At this point, we have a large amount of data in a very large file, so in order to display it in a browser using BabylonJS, we will need to optimize it. We also need to clean up the model and smooth it a bit, as the 3D Scan adds unwanted artifacts. To do so, we will use Blender. If you are not familiar with Blender, you may be a bit overwhelmed at first – but stick with it, it’s a valuable and fun tool! This post will not include all of the little details on basics of using Blender.

1)      CREDITS go to CrowTreeStudios for the vertex color baking process! For a video walkthrough of these steps, see their video here.

2)      Open Blender and delete the default cube by pressing “X”

3)      Select File/Import/Stanford (PLY)

a)      Browse to the PLY file that you exported in Step 2 above.

b)      This might take a little while, the scans are large!

4)      When the model loads, it will not be oriented correctly, so rotate and center it appropriately. You should have something like below, with the model centered in the viewport:

5)      Make a copy of the object, by first selecting it and then select Object / Duplicate Objects. In the next steps, we will optimize this copy (by reducing vertex count) and then create a texture map for it using the original mesh’s vertex color information (this is called “Vertex Baking”).

a)      Important: Make sure that both the original mesh and the copied mesh are in the exact same Position. This is necessary for proper vertex baking! They should appear in a perfect overlapped position at this point. If you need to tweak, just go to the Object properties panel and set the Location X,Y, and Z.

6)      Next, we will optimize and cleanup the mesh, so that it appears smoother and is not so huge on disk and in memory.

a)      Hide the original mesh so you can concentrate on the duplicate mesh.

b)      Select the duplicate mesh (Blender will add a “.001” to the mesh name)

c)       Activate the Modifies panel and select Add Modifier.

d)      Select ReMesh and adjust the Octree Depth up to 6 and the Mode to Smooth. Observe the shape of your modified mesh and you may need to increase or decrease the Octree depth for the proper smoothing and cleanup. When you are happy, click apply. This reduces the vertex count and smooths the scan data out a bit.

7)      Your copy should now look much smoother, and any hanging artifacts should be removed:

a)      Show the original mesh again by making it visible.

8)      Add a material to original, scanned mesh.

a)      select the original mesh

b)      add a new material

c)       under shading, select "Shadeless”

d)      under options, check "Vertex Color Paint"


9)      Back under the main Blender View, under "Viewport Shading" (the small sphere icon), select "Texture" (this shows the vertex color data)

10)   Now, we can see the scanned in vertex color data from the original mesh. In the next steps, we will create a Texture map from this color data (a process known as Vertex Baking).

11)   No we’ll add a material to the optimized (copied) mesh

a)      select the copied mesh

b)      add a new material

c)       under shading, select "Shadeless"

12)   Next we need to unwrap the mesh, as a setup for creating a texture map image.

a)      Split the Blender View into two views

b)      in the left view, select UV/Image Editor

c)       in the right view, go to Edit mode on the copied mesh

d)      select all vertices

e)      hit "U" for unwrap and then select "Smart UV Project"

13)   Now we’ll create an image to store the texture map.

a)      in the left-side Image editor, create a New Image

b)      Give the image a name and uncheck Alpha, then click OK.

14)   For proper vertex color baking, we need to change the default color management in Blender.

a)      Select the Scene Panel in Blender

b)      Under Color Management, set Display Device to None.

15)   No we can Bake our Color Vertex Data to a Texture Map.

a)      go to Render Panel (the Camera icon)

b)      Select the (original) hi-res mesh

c)       Hold Shift down and Shift+Click the Copied (Optimized Mesh). In your scene treeview, you should see the original mesh circled in orange with black text, and the copied mesh in white like so:

16)   Scroll down to the Bake Menu

a)      check "Selected to active"

b)      uncheck “Clear”

c)       Click the Bake button

17)   In the left-hand view, you should see you vertex colors bake into a texture map:

18)   Save your texture map to a local file.

a)      Select Image/Save as Image from the Image Editor menu…

19)   Now we’ll apply this texture map image to the optimized mesh.

a)      select the (copied) optimized mesh

b)      add a new texture

c)       set type = image or movie

d)      open the map image file

e)      go to mapping and select Coordinates: UV

f)       select Map: UVMap

20)   Now that we have both a Texture Map and an Optimized Mesh, we can delete the original (scanned data) mesh from the project.

a)      Select the original mesh and delete it by selecting Object/Delete.

21)   Export the Scene to Babylon format.

a)      Select File/Export/Babylon JS (if you do not see this option, then go back to the Step 1: Downloads step and read the plugin section)

b)      The export should create two files: a *.babylon and a *.png (texture map) file.

Step 4: Load and Display with BabylonJS

Now that we have a *.babylon scene file and a *.png texture map, we can easily load and display our 3D Scan using BabylonJS.

1)  Make sure your web server has the Babylon Mime Types enabled. In IIS, you would add the following to the system.webServer section (under configuration):


<mimeMap fileExtension=".fx" mimeType="application/shader" />

<mimeMap fileExtension=".babylon" mimeType="application/babylon" />


2)      We’ll need to include two scripts from the Babylon download (place these in the scripts subfolder) : hand.js and Babylon.js

3)      Create a new HTML file, and add the following code to create the Babylon scene from the exported Blender scene file (comments are inline).




<title>Simple Babylon Demotitle>

<link href="index.css" rel="stylesheet" />


<script src="scripts/hand.js">script>

<script src="scripts/babylon.js">script>


window.onload = (function () {

var canvas = document.getElementById("canvas");


// Check that browser supports WebGL

if (!BABYLON.Engine.isSupported()) {

document.getElementById("notSupported").className = "";

document.getElementById("opacityMask").className = "";

} else {


// create Babylon Engine

var engine = new BABYLON.Engine(canvas, true);


// create the Scene

var scene = new BABYLON.Scene(engine);


// add a light

var light = new BABYLON.HemisphericLight("Hemi0", new BABYLON.Vector3(0, 1, 0), scene);


// Add a camera that allows rotating view around a point

var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, new BABYLON.Vector3.Zero(), scene);


// load the scene (exported from blender)

BABYLON.SceneLoader.ImportMesh("", "images/models/", "monkey.babylon", scene, function (newMeshes, particleSystems) {

// optional - position and size the mesh

var monkey = newMeshes[0];

monkey.scaling.x = 70;

monkey.scaling.y = 70;

monkey.scaling.z = 70;

monkey.position.z = -48;

monkey.position.y = 20;

monkey.position.x = 0;


// optional - add in a material and platform

var platform = newMeshes[1];

platform.material = new BABYLON.StandardMaterial("texture1", scene);





// register a render loop to render scene

engine.runRenderLoop(function () {




// Resize

window.addEventListener("resize", function () {









<div id="opacityMask" class="hidden">div>

<canvas id="canvas">canvas>

<div id="notSupported" class="hidden">Your browser does not support WebGLdiv>




Once again, you can see samples of this process a here and a here. As you can see, it is a bit of work to optimize a mesh for display using WebGL, but by mastering these steps we have ultimate control over the size and detail of our meshes. And using WebGL and BabylonJS, we have a cross-platform solution which works in IE11, Firefox, Chrome, and even some mobile browsers.

Author: "andy@andybeaulieu.com"
Comments Send by mail Print  Save  Delicious 
Date: Friday, 06 Dec 2013 18:31

In this post, we will look at how we can use BabylonJS and WebGL  to create a 3D height map and route path using data from Bing Maps REST Services.

TRY THE DEMO [IE11, Chrome, or FF required] |  DOWNLOAD THE SOURCE

NOTE: Before you read any further, please note that at the time of this writing, there is rumored to be a native Bing Maps 3D WebGL control, and the release is likely imminent! Still, this sample will be very useful if you are interested in terrain mapping and other aspects of using BabylonJS!


Now that IE11 supports WebGL along with Chrome, Firefox, and a host of other browsers, I am betting that we will see a resurgence of interest in this 3D browser tech. BabylonJS is an easy to use 3D library written in JavaScript that leverages the power of WebGL to create cross-platform 3D experiences. If we couple that with the Bing Maps API, which allows querying of satellite imagery, driving directions, and elevation data, we can fairly easily build a realistic 3D scene of any area on earth!

Bing Maps Tile System

When you visit Bing Maps (or google maps for that matter), the view you get is actually composed of a series of square "tiles" - each being 256x256 pixels wide. As you pan the map around, new tiles are loaded into the view so that it is filled.

The details on this tile system are available on this MSDN page, but in short, each 256x256 tile has a "Quad Key" which is a numeric representation based on Zoom Level and Location.


At the bottom of the msdn article mentioned, pay special notice to the sample code. These functions let us get tiles for any point (latitude, longitude) on the map. To get a tile image's Quad Key for a particular Latitude and Longitude, we first convert the Lat/Long to a Pixel Offset in the world map, then convert the Pixel Offset to a Tile Offset and then finally convert the Tile Offset to a Quad Key.

NOTE: All of the code in the msdn article is given in C#, but the download project has a JavaScript conversion of these utility functions.

Querying Elevations using Bing

Back in January, Bing Maps added an Elevations API which allows for querying of elevation data for a bounding box on the map. This msdn article gives the details on the REST API for this data.

For our purposes, we will query a set of equally spaced positions on each tile to get the elevation for those points. We can then later set the elevation (Y-axis) values of those points to create a 3D effect.

Bounding box grid showing order of elevations

Note that, to query Elevations and Directions from the Bing Maps API, you will need a developer key, which you can get here. Note that Bing has pretty generous licensing for mobile apps and some websites.

Once you get your key, you will need to modify ProxyController.cs in the sample code to use your key, on this line:

string _bingMapsKey = " *** ENTER YOUR BING MAPS API KEY HERE *** ";

Displaying the Tiles and Elevation in 3D

Now that we have the Image Tiles and the Elevation data from Bing Maps, we can display these in BabylonJS. In 3D Space, we have X,Y, and Z axes to display our 2D tiles plus elevation data on. Below is how we'll do it: 

As you can see in the image above, the 2D tiles will stretch in the X (latitude) and Z (longitude) axes, and the Y-axis will be used to show the elevation.

The key to creating the tile's elevation (height map) is the following function. It takes a list of elevations and applies them to the Y-axis (height) value of a tile. 

BINGWEBGL.Engine.prototype.createGroundFromElevationData = function (name, elevations, width, height, subdivisions, minHeight, maxHeight, scene, updatable) {

        var ground;

        ground = this._scene.getMeshByName(name);
        if (ground == null)
            ground = new BABYLON.Mesh(name, this._scene);

        ground._isReady = false;

        var indices = [];
        var positions = [];
        var normals = [];
        var uvs = [];
        var row, col;

        // Getting height map data
        var heightMapWidth, heightMapHeight;
        if (elevations != null) {
            heightMapWidth = elevations.length / 2
            heightMapHeight = elevations.length / 2;

        // Vertices
        var elevationIndex = 0;
        for (row = 0; row <= subdivisions; row++) {
            for (col = 0; col <= subdivisions; col++) {
                var position = new BABYLON.Vector3((col * width) / subdivisions - (width / 2.0), 0, ((subdivisions - row) * height) / subdivisions - (height / 2.0));

                // Compute height
                if (elevations != null) {
                    var heightMapX = (((position.x + width / 2) / width) * (heightMapWidth - 1)) | 0;
                    var heightMapY = ((1.0 - (position.z + height / 2) / height) * (heightMapHeight - 1)) | 0;

                    position.y = (elevations[elevationIndex] - this._meanElevation);  // Math.random() * 20;

                // Add  vertex
                positions.push(position.x, position.y, position.z);
                normals.push(0, 0, 0);
                uvs.push(col / subdivisions, 1.0 - row / subdivisions);

        // Indices
        for (row = 0; row < subdivisions; row++) {
            for (col = 0; col < subdivisions; col++) {
                indices.push(col + 1 + (row + 1) * (subdivisions + 1));
                indices.push(col + 1 + row * (subdivisions + 1));
                indices.push(col + row * (subdivisions + 1));

                indices.push(col + (row + 1) * (subdivisions + 1));
                indices.push(col + 1 + (row + 1) * (subdivisions + 1));
                indices.push(col + row * (subdivisions + 1));

        // Normals
        BABYLON.Mesh.ComputeNormal(positions, normals, indices);

        // Transfer
        ground.setVerticesData(positions, BABYLON.VertexBuffer.PositionKind, updatable);
        ground.setVerticesData(normals, BABYLON.VertexBuffer.NormalKind, updatable);
        ground.setVerticesData(uvs, BABYLON.VertexBuffer.UVKind, updatable);


        ground._isReady = true;

        return ground;



This is just a short post to give an overview of the concepts used for the Babylon/Bing WebGL demo. If you are interested in more details, I suggest you check out the source code and post any questions in the comments area below!


Author: "andy@andybeaulieu.com"
Comments Send by mail Print  Save  Delicious 
Date: Friday, 20 Sep 2013 14:41

Blend for Visual Studio 2013 adds some great new features for development of JavaScript-based Windows 8 apps. In this blog post, we'll look at two of those features: CSS Animations and Behaviors.

NOTE: A video walkthrough is available to accompany this post.

CSS Animations allow developers to animate the values of CSS properties using keyframes. These animations can be difficult to write because it is hard to visualize an animation just by writing out CSS in a text editor.

Let's use Blend to create an animation using transforms. The animation will have a "2.5D effect" - because it uses simple transforms on 2D objects to create a 3D-like effect.

  1. Open Blend for Visual Studio 2013 and create a new HTML (Windows Store) app, using the Blank App template:

  2. Let's add in an image to animate. From the Projects Panel, expand the images subfolder and drag the image "logo.scale-100.png" to the artboard.

  3. With the img element selected, go to the CSS Properties Panel and ensure that "inline style" is selected. Then expand the Animation category. (note: normally it is a best practice to create a class for the animation instead of using an inline style, but there are issues with this in the Blend 2013 RC Build - these issues will be fixed by RTM).

  4. In the Animation Pane, click the "+" button to add in a new animation. Enter the following values:

    duration: 1s
    iteration-count: infinite
    play-state: running

  5. Next, we can record the actual animation key frames. Click the "Edit Animation" button in the Animation Pane. At the bottom of the Blend workspace, you will see a timeline, and at the top of the artboard you will see a message "Animation recording is on."

    Note that any changes you make to the CSS properties for the selected object will record a key frame in the animation. If at any time you want to stop keyframe recording, just click the red "record" button to the left of this message.
  6. In the Animation Pane, advance the yellow marker to the 1 second mark.
  7. In the CSS Properties Panel, expand the Transform Category and add a new Skew Transform using the dropdown selection:

  8.  Set the Skew x to 90deg and the y to 45deg.
  9. Add a second transform, this time select a Translate Transform using the dropdown selection.

    Set the Translate x property to 500px and the y property to 300px.
  10. In the Animation pane, click the "play" button to preview the animation. You can also "scrub" the animation by moving the timeline.
  11. To stop recording the animation, click the "Animation recording is on" button at the top of the artboard.
  12. Run the app by hitting F5, and witness the css animation!

Adding Behaviors

Now that we have an animation, let's add some interactivity to it so that the user clicks the image to start the animation. We can do this without writing any code using Behaviors.

  1. First, let's change our animation so that it is in the Paused state. With the image selected, go to the CSS Properties Panel and expand the Animation category. Set the play-state property of the animation to "paused."

  2. Set the iteration-count property to "1" so that the animation only executes once.
  3. Go to the Assets Panel and select the Behaviors category. Then select the SetStyleAction.

  4. Drag the SetStyleAction onto the element on the artboard.
  5. In the CSS Properties Panel, expand the Behaviors Category and you will see a new EventTriggerBehavior and SetStyleAction have been added. Select the EventTriggerBehavior and Note that the default event is "click" - so this action will be executed when the user clicks it.

  6. Select the SetStyleAction and set the styleProperty to "animation-play-state" and the styleValue to "running"

  7. Run the app by pressing F5. Then click the img to execute the SetStyleAction and run the animation.


In this post, we saw how to get started with two new compelling features of Blend for Visual Studio 2013 - CSS Animations and Behaviors. One limitation of using Blend for HTML/CSS design is that the tool is geared solely towards Windows Store apps. Hopefully someday we will see Blend support other project types such as ASP.NET Web projects, and adhere to more open JavaScript frameworks, because these are great features for web development!


Author: "andy@andybeaulieu.com"
Comments Send by mail Print  Save  Delicious 
Date: Friday, 21 Jun 2013 15:45

Today I was updating a release of a Windows 8 app and hit the following expired certificate error:

The certificate specified has expired. For more information about renewing certificates, see http://go.microsoft.com/fwlink/?LinkID=241478.

The documentation link for this error wasn't very helpful, and my first attempt at correcting the problem gave me the following error as well:

The Publisher attribute of the Identity element in the app manifest must have the value of the Publisher ID value from your developer account: CN=XXXX-XXX-XXXXX-XXXXX.

So, I thought I'd walk through what I had to do to correct this.

  • First open your package.appxmanifest file and go to the Packaging tab.
  • Copy your Publisher Id to the Clipboard (don't take the CN= part, just take the ID)

  • Now click the "Choose Certificate" button
  • Click the "Configure Certificate" dropdown and choose "Create Test Certificate"

  • In the Publisher Common Name field, paste your Publisher Id that you copied to the clipboard above, then Click OK.
  • You should now be able to build/deploy your app.


Author: "andy@andybeaulieu.com"
Comments Send by mail Print  Save  Delicious 
Date: Friday, 15 Feb 2013 14:11

Last week, my app "Physamajig" was a featured app for Windows 8. This means that it had a dedicated tile on the main Store hub which looked like this:

The app had real estate on the Games category like this for 5 days, from 2/8 through 2/12, and I received an email from Microsoft about a week before giving me a heads up that my app was going to be featured at that time. As you can imagine, having a featured app is a huge impact to the number of downloads and visibility of your app.

Looking at how this impacted Physamajig can provide a glimpse into what the most popular apps might be taking in for Windows 8 Monetization.

Impact on Downloads

The graph below shows Physamajig downloads in blue. The top 5 games are shown in the orange color. Notice the huge spike to 5000+ downloads per day during the featured promotion: 

Impact on In-App Purchases

The next graph shows in-app purchases, which remain very modest for Physamajig. I may need to toy with the model I currently have, where a single in-app purchase unlocks all sample mini-games and removes Ads. Or it may just be that my customer base (likely 9 to 13 year olds) doesn't have the money to purchase! :)  

Impact on Ad Monetization

Physamajig shows Ads until a user "unlocks" the full version through an in-App purchase. Pubcenter is used as the ad service. Let's first look at the "good news" which is the number of impressions per day. From the graph below you can see that the app spiked to 80,000+ impressions per day.

Now let's look at the bad news, which is revenue. Pubcenter continues to return an anemic CPM which is impacting developer revenue on both Windows 8 and Windows Phone platforms.

Normally you would hope for an eCPM of about $1 (or $1.00 per 1,000 ad impressions). But instead I am seeing between 20 and 50 cents per 1,000 impressions which makes for much less revenue. Imagine multiplying the revenue values below by 2 or 3 and things would certainly look more appealing, yes?   

Monetization Summary

Here is the summary of what I've seen for monetization in the first 3.5 months...

“Physamajig” Summary first 3.5 months

Total Downloads since publish


In-App purchases


Ad monetization (pubcenter)

$1,641.87     (4,552,202 impressions @ 0.36 eCPM)

Total for 3.5 months


Should you Develop Windows 8 Apps?

If you are lucky enough to have a top app in the Windows 8 Store, and have it stay at the top, is there sufficient opportunity for monetization? I guess that depends on the individual developer but personally I am having a lot of fun hobby time and the monetization is a nice bonus.

There have been some comparable stories to mine, and also some incredible ones regarding Windows 8 app success which you should check out.

One thing is sure, Microsoft needs Windows 8 apps! And they are providing some nice incentives to get people started with Windows 8 app development. Here is a collection of incentives that they are providing to get you started:

Generation App - Your Road to Windows 8

Sign up now and you'll receive the tools, help, and support you need to get your Windows 8 and Windows Phone 8 apps developed


Generation App - Ultimate Experience

Free Windows Store Registration and a copy of HALO 4 for your first app and a chance to win and XBOX w/Kinect.

Get funding for your next great Windows Phone app idea.

Tech Affiliate Sweepstakes

Create an app and enter a monthly drawing for $1000, $500, or $250.

Author: "andy@andybeaulieu.com"
Comments Send by mail Print  Save  Delicious 
Date: Friday, 16 Nov 2012 19:03

It's been three weeks since Windows 8 GA, and I've had several fellow developers ask about my luck on the Windows Store. So here is some usage and monetization data for "Physamajig" - an app which I developed in my spare time using the Physics Helper XAML and Farseer Physics Engine projects.

Physamajig has two types of monetization:

  • PubCenter ads which show on the main hub and play screen
  • In-App purchases (which unlock additional games and remove ads).

3 Week Summary for “Physamajig”

Total Downloads since publish


Total Downloads since GA (10/26)


In-App purchases

$25.32       (21 in-app purchases)

Ad monetization (pubcenter)

$419.24     (482,912 impressions @ 0.87 eCPM)

Total for 3 weeks


Daily Ad Revenue (pubcenter)

So I suppose there are several ways to look at this data. Obviously the amounts are modest and undoubtedly there are better opportunities in competing platforms and app stores. But this is just the first three weeks after GA, and with the holiday season coming up you can bet there will be lots of people moving onto Windows 8 devices very quickly - so perhaps there is nowhere to go but up. On the other hand, competition in the store is quickly ramping up with names like Rovio and Halfbrick joining in, so the chances of your app getting buried in the store will increase.

Some More Detail

Some of the reports provided by the Windows 8 Store are quite interesting. Take for example the App Downloads chart below. Look at the nice spike on 10/26 at GA. It's no surprise that the top 5 apps - which are featured apps with dedicated tiles - get a much larger number of downloads than my app!

However, if we look at the App Usage per Day report, we can see that my app does keep user's attention longer than the average. By the way, if you are wondering why every 3 days in this report has the same data value, it is because this data is aggregated every 3 days only. So the repeating value you see is the average for those 3 days.


One thing I hope that the Windows Store makes better use of is an editorial process that highlights apps from all over the spectrum, not just the bigger game studios. In the early days of the Store they had "Apps that Cure Boredom" for example - which highlighted a few apps that weren't necessarily chart-toppers, but might interest certain people. So why not add category tiles for "Games with Creativity" or "Quirky Games" - and have editors swap different games in and out of these?

These are the very early days of the Windows Store, and I am sure there will be some great success stories for developers in this new platform. I hope this gives you an idea of where monetization is at now, and I look forward to seeing all of your cool apps on the Store!

Author: "andy@andybeaulieu.com"
Comments Send by mail Print  Save  Delicious 
Date: Thursday, 25 Oct 2012 18:00

My app "Physamajig" was one of the first apps available on the Windows 8 Store, and now has over 150,000 downloads. Physamajig is written using XAML/C# and uses the Physics Helper XAML and Farseer Physics Engine projects.

I was recently lucky enough to win an AppCampus award to port Physamajig to Windows Phone 7! The AppCampus program was formed by Microsoft and Nokia to "drive innovation and business opportunities" and "create a new generation of self-sustaining mobile startups." If you have a great mobile app idea, you can still apply for an AppCampus award by filling out a short application.

Here is a video demo of the port of Physamajig running on the Nokia Lumia 900:

To the Cloud!

Physamajig has a back-end web service which allows users to share their physics games. As part of the groundwork for the port to Windows Phone,  I wanted to make sure my back-end data service could handle any increase in traffic from users. Originally, I was using a shared hosting plan from a popular provider - but where I wanted to go was Windows Azure!

I was quite surprised at how easy it was to port to Azure. Granted, my database schema for Physamajig is quite simple - but I have to say, I think I spent only about 6 hours getting the data and service moved over to Azure. Here are the highlights of the process I took:

  • First, I used SQL Server Management Studio to connect to my two databases: my legacy shared db, and the Azure SQL db.
  • The I used the Generate Scripts Wizard to migrate the data from the legacy db to Azure SQL.  These steps are outlined for you here. Note that you can use the "Fully Qualified DNS Name" of your Azure SQL database from the management portal under Database.
  • I then used the VS Templates for Azure to create a Windows Azure Cloud Service and WCF Service Web Role. Since I had a pre-existing service, I just brought the code over into the WCF Web Role.
  • Physamajig has thumbnail images that allow users to quickly shuffle through the available online creations. These thumbnails are generated by a moderator when they approve creations for online use. For these thumbnails, I used Azure Storage in a public folder. This involved using the CloudStorageAccount class to add a CloudBlobContainer consisting of CloudBlob (files) for each thumbnail.

I hope you enjoyed this little peek into what's happening with Physamajig, and please look for the app in the Windows Phone marketplace soon!


Author: "andy@andybeaulieu.com"
Comments Send by mail Print  Save  Delicious 
Date: Sunday, 26 Aug 2012 19:37

Today I released version 1.1 of Physics Helper XAML, which allows you to easily create 2D Physics Games and Simulations for the following platforms:

  • Windows 8
  • Windows Phone 7
  • Silverlight 5

XAML has great support for 2D graphics including hardware acceleration, making it an excellent candidate for 2D physics based games. And because of XAML's extensive form controls and powerful project templates, it makes it super easy to create your games menus and input UI. Also, it is possible to target the three platforms using a single set of XAML assets for graphics and logic.

I personally used the Physics Helper XAML project as the core for my first (and award winning) Windows 8 game, Physamajig. To get started yourself, I recommend:

  • download the source code and check out the sample projects which target all three platforms.

  • read the Getting Started docs (currently these docs mention pre-release version of the tools but they will be updated soon)

  • use the forums to ask questions

Here is a video showing the Physics Helper XAML demos running on Windows 8 (Samsung Series 7 Slate), Windows Phone 7 (Nokia Lumia 900), and Silverlight 5 (Sony Vaio Laptop).

Author: "andy@andybeaulieu.com"
Comments Send by mail Print  Save  Delicious 
Date: Thursday, 16 Aug 2012 22:53

The Windows 8 App Certification Requirements are a necessary evil meant to protect users, but they can cause developers a few headaches. One of the requirements in particular has plagued me with failed certifications:

4.1 Your app must comply with the following privacy-related requirements:

4.1.1 Your app must have a privacy statement if it collects personal information

4.1.2 Your app must obtain opt-in or equivalent consent to share personal information


If your app uses any kind of web service, it will likely need to meet this requirement or fail certification. Here are some pointers to help meet the 4.1 requirement:

  • Create a web page that states your app's privacy policy and what personal information it collects. Here is an example privacy policy which I use for one of my apps that does not collect personal info.

  • If your app does NOT collect personal information, state that clearly in the privacy policy (maybe your app just calls a web service and the user is anonymous). 

  • If your app DOES collect personal information, you have a bit more work to do. You should get some legal wording here from a lawyer or appropriate entity for your privacy policy. You will also need a settings mechanism to enable/disable opt-in by the user. I personally haven't had to follow this path yet so I don't have many details on this one.

  • When you submit your app for certification, and you fill out the description section of your app, be sure to enter the URL to the privacy policy you created above:

  • You will need to provide a link to the privacy policy in your Settings Panel as well. Here is an example method (XAML/C#) that adds in an entry into the Settings Panel with the text "Privacy Policy" - this is a clickable control that brings up IE with a web page containing the policy:

public static void AddSettingsCommands(SettingsPaneCommandsRequestedEventArgs args)




    SettingsCommand privacyPref = new SettingsCommand("privacyPref", "Privacy Policy", (uiCommand) =>


        Windows.System.Launcher.LaunchUriAsync(new Uri("http://www.myserver.com/myPrivacyPolicy.aspx"));





You would use this method from each of your pages in your app by setting up event handlers (I use the OnNavigatedTo event, and be sure to clean up your event handlers)

protected override void OnNavigatedTo(NavigationEventArgs e)


    SettingsPane.GetForCurrentView().CommandsRequested += GroupedItemsPage_CommandsRequested;


void GroupedItemsPage_CommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)




That's should help you get your connected apps through this certification requirement... good luck!


Author: "andy@andybeaulieu.com"
Comments Send by mail Print  Save  Delicious 
Date: Monday, 13 Aug 2012 10:47

App Reviews can impact a user's decision to download or buy your app, and provide valuable feedback for enhancements and issues for v.next. It's important to make it apparent and easy for users to add a review for your app so you are sure to gather as many of these reports as possible.

Let's explore three ways that a user can get to the review page for your app:

  1. Through the Windows Store
    This one is pretty obvious, but if a user visits the Reviews link on the page for your app in the Windows Store, they can choose "Write a Review," which brings them to the "Write a Review" page. 

  2. Through the Settings Pane
    This one is provided automatically for every app on the Windows Store - but note that you will not see this link while you are developing/debugging you app! It will only be visible after your app has passed certification and has been installed from the store.

    If a user swipes from the right side of the screen, and chooses the Settings Charm, they will see a Rate and Review link:

  3. Through a Link you Provide
    While the built-in Settings Pane support for Rate and Review is great, there are times when you want the Rate and Review option to be a bit more apparent to the user. Maybe after so many days of using the app, you would like to try and coax the user to write a review through a link you provide.

    To create this link you'll first need the Package family name for your app. Open the Package.appxmanifest file and go to the Packaging tab. Copy out the Package family name:

    Now you can create a button or other control in your app which launches to the following URI:

    Windows.System.Launcher.LaunchUriAsync(new Uri("ms-windows-store:REVIEW?PFN=MY_PACKAGE_FAMILY_NAME"));

    (Just replace MY_PACKAGE_FAMILY_NAME with your app's PFN). 

Author: "andy@andybeaulieu.com"
Comments Send by mail Print  Save  Delicious 
Date: Wednesday, 13 Jun 2012 07:45

We've heard about how the Windows 8 Store will be the "largest developer opportunity, ever," given the sheer number of Windows 7 licenses and the expected number of people upgrading and purchasing Windows 8 tablets. I wanted to share some of my metrics so far with the Windows Store...

Physamajig for Windows 8 has reached a bit of a milestone with over 100,000 downloads on the Store! It took a little over 3 months to reach this milestone... but note that this is just the preview versions of Windows 8!

Here are a few more metrics from Physamajig, showing download peaks, market, and age group...

Windows 8 Store vs Windows Phone 7 Marketplace

Compare Physamajig to one of my more popular Windows Phone 7 apps, Boss Launch 2, which took over a year in the WP7 App Store to reach 100,000 downloads (it currently is at 115k+ downloads). But this was a year in release of Windows Phone 7 - whereas Windows 8 is in preview.

Submitting your App

As of now, the Windows 8 Store is still closed for general submission, but if you create a great app or game, you can apply for a Windows Store token by following the steps outlined in this blog post.


Author: "andy@andybeaulieu.com"
Comments Send by mail Print  Save  Delicious 
Date: Thursday, 03 May 2012 17:26

The next update of Physamajig will allow users to create their own "Mini-Games" - without writing code! This new version will be released after the June 2012 Windows 8 Release Preview. Like the current release of Physamajig, you just draw out elements on the screen to create physics objects - but in the new version, you can add Behaviors to your objects to add much more interactivity.

So what kind of games will Physamjig allow you to create without using code? This video shows a few examples:

My inspiration for the no-code approach came from Behaviors and Triggers inside Expression Blend, which I used for previous versions of the Physics Helper Library. Inside Expression Blend, you just drag/drop Behaviors onto elements to add runtime logic to them. It was a great way to encapsulate complex logic and allow designers to add interactivity to their creations without needing to write code.

Since Behaviors and Triggers are not (yet) present in WinRT Metro, I had to create my own custom implementation of them. A Trigger is generally an event, such as the user making a gesture on the screen, a collision, or an object being destroyed. A Behavior is what happens in response to the trigger, such as applying force to an object, playing a sound, or destroying an object. In Physamajig, the designer for adding Behaviors looks like this:

If this designer looks familiar to you, it might be because you've seen the cool Project Mayhem from Microsoft Research which was another source of inspiration for me. Project Mayhem calls them "Events" and "Reactions," but really these are the same as Triggers and Behaviors. In Mayhem, the designer looks like this:

So is there really such a thing as the "no code scenario?" Will it ever be possible to put together complex, custom solutions using a simple UI to snap together various logic? I am not a believer yet, but I am convinced that adding Behaviors/Triggers (aka Reactions/Events) in a solution can greatly increase productivity and customization in many solutions.

Let me know what you think, and I'll leave you with one last teaser video, this one with extra cheesiness!

Author: "andy@andybeaulieu.com"
Comments Send by mail Print  Save  Delicious 
Date: Wednesday, 29 Feb 2012 21:02

Physamajig was selected as one of the Winning entries of the Windows 8 First Apps Contest! Microsoft unveiled the 8 Winners today in Barcelona while unveiling the Consumer Preview of Windows 8.

[read the Windows Store blog post]

[see the video about the contest winners]

[the contest site also has a nice summary]

If you've downloaded the Consumer Preview, you can find Physamajig in the Store under the Entertainment Category:

I'll be continuing to add some goodies to Physamajig, and here is a little sneak peek of something in the next version: Textures! I really like how these textures make your creations seem more toy-like!

Author: "andy@andybeaulieu.com"
Comments Send by mail Print  Save  Delicious 
Date: Friday, 06 Jan 2012 18:24

UPDATE 1/16/11: Physamajig has been selected as a finalist in the Windows 8 First Apps Contest!

I am not one to shy away from programming contests. So with the announcement of the Windows 8 First Apps Contest, I wanted to try and do something fun and at the same time refine my Physics Helper XAML project.

What I came up with is "Physamajig" - a Metro style app that allows you to interactively create physics simulations in Windows 8!

Physamajig is similar to a WP7 app I created called "Paint to Life" - but it takes things much further by including many new tools, joints, physics properties, file options, and more! And I have to say that the Windows 8 Metro version of this app looks much more slick than the WP7 version.

The app comes with several sample creations pre-installed, and one of the next features I am working on is a web service so that users can share their creations online.

There are definitely some gotchas with working with the Developer Preview bits for Windows 8, but for such an early release it is quite productive really. I found the Community Forums quite helpful when I hit issues, if nothing else to know that I was not alone :) 

If you're building any apps for the Windows 8 Contest, I'd be happy to know more about them - please share!


Author: "andy@andybeaulieu.com"
Comments Send by mail Print  Save  Delicious 
Date: Thursday, 03 Nov 2011 13:19


With the release of Windows 8 Developer Preview, one seemingly simple goal I had was to port my 2D physics apps that run on Windows Phone 7 and Silverlight to Windows 8. Since many of my games use vector graphics, they could scale up or down cleanly depending on the device they were deployed to.

Today I am a bit closer to my goal with an updated version of the Physics Helper XAML project - which now supports both Windows 8 Metro and Windows Phone 7 development, using a single set of XAML design files and logic.


Multi-targeting WP7 + Windows 8 Metro

You would think this would be a simple thing to do, right? I mean these platforms are both properties of a single company, and you use Visual Studio to create apps for both of them. And when WP7 was released, it was a cinch to port Silverlight Web applications to the phone - in some cases you didn't even need to recompile your assemblies!

Well, with Windows 8 Metro, it's unfortunately not so simple. Microsoft is a huge company and it is apparently impossible for all divisions to agree on a single development framework that allows creation of client solutions across all of their properties. So we have fragmentation and breaking changes with Windows 8 Metro. Lots of them.

But with a little work, it is certainly possible to support both Windows 8 and Windows Phone 7 apps with a single set of design files and code. Here is a list of some of the issues I ran into while trying to multi-target these two platforms with a single code base:

  • xmlns changes
    To reference an external library in XAML, we need to use the xmlns attribute. WP7 and Win8/Metro handle this differently right now (hopefully this is remedied in the future!)

    WP7 and Silverlight look like this:

    While Win8/Metro looks like this:

    This was a problem in my apps because I wanted to maintain one set of resources for both platforms. My solution was to create a utility named CleanUsingXmlns which can be added to the prebuild step of your projects to change. Note that CleanUsingXmlns was thrown together very quickly and is not the most elegant solution, but it gets the job done.

    To use CleanUsingXmlns, go to the Build Events tab and add a call to the utility in the format:

CleanUsingXmlns [addusing|removeusing] [folder] [namespace1,namespace2]

... where [addusing] will add in the using clause for Metro, and [removeusing] will add in the clr-namespace syntax for WP7 and Silverlight. [folder] is the directory containing XAML files you wish to add and [namespaceX] is a list of namespaces you wish to be involved in the replacement.

As an example, the Metro demo projects contain the following in their prebuild steps to add the "using" clause into XAML files:

$(ProjectDir)..\..\CleanUsingXmlns\bin\Debug\CleanUsingXmlns addusing $(ProjectDir) Demo.Advanced,Spritehand

  • Namespace Changes
    Somtimes you wonder if the architects over at Microsoft are just trying to push your buttons, you know what I mean? Take for example the shuffling of all of the Silverlight namespaces we know and love. This forces us to write code like the following when we try to multi-target:

    using System.Threading.Tasks;
    using Windows.Foundation;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Input;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Media.Animation;
    using Windows.UI.Xaml.Shapes;
using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Ink;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Media.Imaging;

... but with Win8/Metro, this is just the beginning. There are lots of little breaking changes all over the place which mostly seem to be there to bang your head on the keyboard and force you to litter compiler directives all over your code.

Which brings me to my final note:

  • HINT: Target Lowest Profile!
    If you find yourself like me, trying to create a project that targets both Win8/Metro and Windows Phone/Silverlight, one important strategy is to target the lowest common profile. In this case, that lowest profile is Metro. By doing this, you have a much lower chance of introducing unsupported API's into your code.

    This table, from the BUILD conference, gives a good overview of the size of three .NET profiles:


While it isn't as easy as you might expect, it is certainly possible to create apps with a single set of design and code files that multi-target WP7 and Win8/Metro. Remember that this is a pre-beta release of Windows 8, and perhaps this story will improve in the beta.

If you're interested in creating your own 2D physics apps for WP7 and Win8/Metro, check out the Physics Helper XAML project on codeplex.

Author: "andy@andybeaulieu.com"
Comments Send by mail Print  Save  Delicious 
Date: Saturday, 24 Sep 2011 13:40

Today I released an initial Alpha version of Physics Helper XAML - which allows you to easily create 2D physics based games and simulations for Windows 8 Metro Apps using C# or VB. It is a port of my previous Physics Helper project and uses the Farseer Physics Engine


As you'll see, Physics Helper XAML is a rewrite of the Physics Helper project for the following reasons:

  • When I initially started porting the Physics Helper to Metro, I assumed I would be able to fix any compatibility issues by using compiler directives as I have done in the past with WPF, Silverlight, and WP7. But as I quickly found out, there are so many little differences that the code quickly became cluttered. Additionally, there are changes on the XAML side which are not easily danced around because there are no compiler directives for XAML at this time.
  • Behaviors were used extensively in the original Physics Helper, but are not yet available for Metro app development. In fact, there is no version of Blend available yet for Metro apps - so who knows for sure if Behaviors will make the cut for Blend 5?
  • This gave me a great opportunity to clean up and simplify the code! The Physics Helper has been around since Silverlight 2 and has gathered some baggage through the addition of Behaviors, changes to Silverlight, and the addition of other platforms. So this was a great chance to... er.. "re-imagine" the code.

Getting Started

I encourage you to read the Documentation for details on using the new Physics Helper XAML classes. I think you'll find them very simple to use and quite performant.

What's Next

My personal goals are to port some of my Windows Phone 7 Silverlight Games to Metro using this new version of the Physics Helper. A secondary goal I have is to back port Physics Helper XAML to Windows Phone 7 and Silverlight, with the hopes of having a single code base again to support these other platforms. Again, because of all of the changes in Metro and WinRT, I am not positive this will have a great outcome - but it is definitely a goal I will strive for!

In the meantime, I hope you have some fun with this new set of controls!!

Author: "andy@andybeaulieu.com"
Comments Send by mail Print  Save  Delicious 
Date: Thursday, 15 Sep 2011 11:34

At the Build Conference this week, Microsoft handed out 5000 pre-configured Samsung tablets which included Windows 8 Developer Preview plus the development tools for building Metro style apps. They also made available an ISO containing the same bits.

I suppose in a pinch you could develop apps on an underpowered tablet, but does anyone really want to write code on a tiny screen with an underpowered CPU?

No worries though. We can still use a more powerful dev machine to run Visual Studio 11 and then use Remote Debugging to deploy and debug on the tablet. Here is a pic of my current environment I set up -

To the left is an ExoPC slate running Windows 8, sitting on some handy tablet stands, with bluetooth keyboard and mouse. On the right is one of my dev machines which has been booted to a VHD image of Windows 8.

We can use Remote Debugging inside VS11 by select Project Properties and entering the name of the slate machine on the network:

Here are some helpful hints to get an environment like this set up:

  1. If you were not lucky enough to go to Build and get one of the Samsung tablets, think about buying a Windows 7 slate. This blog post lists a bunch that have been tested in Microsoft's labs with Windows 8. I would look for something with a min display res of 1366x768, 2GB ram and at least a 32GB SSD.

  2. To install Windows 8 on your slate, you can create a bootable USB flash drive and copy the Windows 8 Dev Preview to it. I outlined the steps for the ExoPC slate here, but other slates will be similar and you can search around for blog posts where people have set up their slate for Windows 8.

  3. To install Windows 8 on my development machine, I created a bootable VHD by following this great guide here by Mister Goodcat. As far as I know, this is the only way to get the intial release of Visual Studio 11 and Blend 5 for Metro app development.

  4. On the Windows 8 slate, there is an included Remote Debugging Monitor - you'll find this under the Metro UI icons next to VS and Blend. Fire that up, because it will tell you if remote debugging is working.

  5. Make sure you can Ping your slate on the network from your dev machine. Then on the dev machine, set up the project properties for debugging by entering the slate's network name (see screenshot above).

  6. That's it - you should now have a bit more powerful dev environment for playing with the Windows 8 dev tools.


Author: "andy@andybeaulieu.com"
Comments Send by mail Print  Save  Delicious 
Date: Wednesday, 14 Sep 2011 11:53

Late last year I was given an ExoPC Slate as a development device in order to port some of my Silverlight physics games. I did a little unboxing and hands-on with the device back then, and it was quite easy to port my Silverlight games to their app store. Note that the ExoPC has an Intel Atom 1.66 GHz processor, which makes it a bit short on battery life (less than 4 hours). However, it does support 64-bit Windows and has the minimum 1366x768 resolution to support the new "snap" feature.

So given yesterday's release of the Windows 8 Developer Preview, I wanted to see how the new multi-touch based version of Windows would work on the ExoPC.

Steps to Install

These steps are for installing Windows 8 on the ExoPC slate, but you could likely use these steps for other Windows 7 slates as well.

  1. Download the Windows 8 Developer Preview with Developer Tools for 64-bit (x64). The ExoPC has at least a 32 GB SSD drive, so you can go for the larger ISO (4.8 GB). You'll have about 14 GB of disk space left after the install.
  2. Find an 8 GB or bigger USB Flash Drive. A 4 GB won't be big enough if you are choosing to install the larger ISO with the developer tools.
  3. Following  the basic steps outlined here, make the USB Drive bootable and copy the contents of the Windows 8 ISO to the USB drive. When you get to Step 7 (using BOOTSECT), you will need to run BOOTSECT from a 64-bit install of Windows 7, since we downloaded the 64-bit version of Windows 8.
  4. Now that you have a bootable USB drive with Windows 8, we can go to the ExoPC slate and plug it in. Reboot the slate and enter the BIOS by tapping on the "Setup" button on the boot screen:

  5. Inside the BIOS, we need to set the boot device to the USB key. Go to the "Save and Exit" menu and select the USB key under Boot Override. Then Save and Exit.

  6. That's it! You should now see the Windows 8 Setup screen, and you can progress through as usual to setup Windows.


Windows 8 touch performance on the ExoPC feels great compared to how it was under Windows 7. The on-screen keyboard and web browsing are fantastic when compared to the old Windows 7 install on the salte. The start-up time from cold boot is about 15 seconds (much better than it was under Windows 7). My next task is to port some of my Silverlight apps to this new platform, so I'll post some of my experiences on that in the future.

Author: "andy@andybeaulieu.com"
Comments Send by mail Print  Save  Delicious 
Next page
» You can also retrieve older items : Read
» © All content and copyrights belong to their respective authors.«
» © FeedShow - Online RSS Feeds Reader