Introduction

To get started with Away3D TS you will need to install NodeJS, the TypeScript Compiler (which uses NodeJS), and a web server. While it is possible to use Away3D TS without Typescript, it provides a more familiar language for ActionScript developers and many advantages.

Installing TypeScript

NodeJS - http://nodejs.org/

The TypeScript compiler is built using TypeScript and runs on NodeJS. NodeJS is a JavaScript runtime used on the server side, and also provides a development infrastructure. Node comes with npm, which includes thousands of utilities and development libraries.

The first thing you will need to do to get up and running is install NodeJS. You can obtain the official distribution from here: http://nodejs.org/. You can also use a package manager like Homebrew which can install Node (and other things), from here: http://brew.sh .

TypeScript Compiler - http://www.typescriptlang.org/

TOnce NodeJS is installed, you will be ready to install the TypeScript compiler. On Windows, open the Command Prompt and run:

npm install -g typescript

OsX / Linux users, try the above command but you may need to sudo depending on your package manager and installation configuration:

sudo npm install -g typescript

WebServer

For HTML and JavaScript development you will need access to a local web server. This is good practise, and required due to security restrictions in the browser which limit direct access to the local filesystem and content (images, xml, json, binary files).

There are many options you can use to run a webserver: PHP, Python, MAMP, WAMP, IIS.

MAMP / WAMP

These servers are easy to use and have a nice GUI :

WAMP(OsX) - http://www.mamp.info/en/
MAMP (Windows) - http://www.wampserver.com/en/

Alternatively, as you will be using Node for Typescript anyway, you can use npm to install a Node based http server:

NodeJS http-server - https://github.com/nodeapps/http-server

Is ‘a simple zero-configuration command-line http server’. To install it run:

npm install http-server -g

to start the server run the following from a directory:

http-server

and visit http://localhost:8080 to view your server.

Development with Away3D TS - Getting Started

We created some examples to get you started, these are also on GitHub:
https://github.com/away3d/away3d-examples-ts

Typescript is an extension language that compiles to Javascript. To generate executable code, the following command is used:

tsc example.ts

This will generate an “example.js” file that can be loaded by the browser (or NodeJS). This will always be pure Javascript, with all compilation and type checking performed during compilation. Now that you understand the basic idea behind compiling Typescript code to Javascript, here is how to get one of the Away3D TS examples working:

1) Clone the Away3D examples Git repository, or download the examples using this link

git clone http://github.com/away3d/away3d-examples-ts

2) Navigate to the the Away3D example folder

cd away3d-examples-ts

3) Edit the src/TorusPrimitive.ts TypeScript file by adding the following to the render() function:

this._mesh.rotationX += 1;

4) Compile TorusPrimitive.ts to JavaScript

tsc src/TorusPrimitive.ts --sourcemap --out bin/js/TorusPrimitive.js

5) Start the HTTP server

http-server

http-server will give you a connection address, usually http://localhost:8080/. Open this with your browser, click on the bin directory, then TorusPrimitive.html. If you open up the debugging panel in your web browser, you should see the TypesSript source thanks to the use of source maps.

Try adding the following line in the initLights() function for an experiment:

this._light.ambientColor = 0xff0000;
this._light.ambient = 0.6;

Now compile (by repeating step 4) and reload your browser to see the Torus with a red ambient light! You can also directly edit the generated Javascript code, but the change will be lost the next time you compile (which can be useful for exploratory debugging).

TypeScript IDE’s

Eclipse - https://github.com/palantir/eclipse-typescript

WebStorm / PHPStorm - http://www.jetbrains.com/webstorm/

Flash Develop - http://www.flashdevelop.org/

Visual Studio - http://www.microsoft.com/visualstudio/eng/downloads#d-express-web

Sublime - http://www.sublimetext.com/