Windows store app: Using createjs in a windows store app

As I’ve tried to use createjs before in a Windows 8 app but found the lack of documentation irritating and skipped it, I thought I’d give it a second try and write down a short tutorial on how to use it here.

To start off, go to http://code.createjs.com/ and download the All Libraries latest version to get all the libraries included:

Download the full library, who cares about size :)
Download the full library, who cares about size 🙂

Then create a new empty JavaScript project in Visual Studio 2012 (Express) like in the following picture:

Javascript, blank project
Javascript, blank project

You should now see your standard empty javascript project. In the solution explorer, go to the “js”-folder and add the latest version of jQuery (at least version 2 for Windows Store App development) and your createjs file. Also, create a new script where we’ll put our code. I called mine base.js. You should see something like this:

Our basic project structure
Our basic project structure

Open the default.html file and drag your jQuery file, createjs file and your base.js file into the head section and you should have a file that looks like this:

	<!DOCTYPE html>
	<html>
	<head>
		<meta charset="utf-8" />
		<title>CreateJsExample</title>

		<!-- WinJS references -->
		<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
		<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
		<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
		<script src="js/jQuery-2.0.3.js"></script>
		<script src="js/CreateJs_130514.js"></script>
		<script src="js/base.js"></script>

		<!-- CreateJsExample references -->
		<link href="/css/default.css" rel="stylesheet" />
		<script src="/js/default.js"></script>
	</head>
	<body>
		<canvas id="gameArea" width="800" height="600"></canvas>
	</body>
	</html>

Then open your base.js file and enter the following code:

/// <reference path="createjs/CreateJs_130514.js" />

var stage;
var square;

function start()
{
	stage = new createjs.Stage("gameArea");

	square = new createjs.Shape();
	square.graphics.beginFill("White");
	square.graphics.drawRect(0, 0, 50, 50);
	square.x = 100;
	square.y = 100;
	square.addEventListener("click", squareClick);

	stage.addChild(square);
	stage.update();
}

function squareClick()
{
	square.x += 5;
	square.y += 5;
	stage.update();
}

$(document).ready(function ()
{
	start();
});

Now, notice that I’ve made a reference to the createjs file at the first line so that I’ll get intellisense support. You can do this by dragging the file you want references to into your javascript file. Notice: the intellisense won’t work until after you added the file AND rebooted VS.

If you try the above program you will see a fairly pointless app that creates a white square which you can click on and it will move. But it shows you the basics of createjs usage.

The terrible app we've made
The terrible app we’ve made

If you want more you can read the next article on EeaslJs: http://maffelu.net/windows-store-app-create-a-basic-grid-game-using-easeljs/

One thought on “Windows store app: Using createjs in a windows store app

Leave a Reply