Renaun Erickson

Code Three.js in ActionScript with Randori Compiler

Renaun Erickson — Fri, 17 May 2013 17:47:09 +0000

Live Demo

Live Demo of three.js html/js generated by ActionScript 3 using the Randori compiler – http://renaun.com/html5/as3threejs/

What is Randori?

Randori is a project with various parts and can be found at http://randoriframework.com/. For my example I am using a subset of the Randori project’s capabilities, which is fine as the Randori project is put together in such a way that it allows for this. You can find the various Randori repos here: https://github.com/RandoriAS

Repos:

randori-sdk: This repo contains all the Randori framework bits you need for both the ActionScript 3 and JavaScript side.
randori-compiler: This repo contains the ActionScript 3 to JavaScript compiler source files. Precompiled version is located here
randori-framework & randori-guice-framework: These repos contains the source files for the Randori framework.
randori-libraries: This repo contains source files for ActionScript 3 classes that stubbed out JavaScript libraries. For example to get three.js code hinting in ActionScript there are stubbed out ActionScript 3 classes that map to three.js classes.
randori-plugin-intellij: This repo contains an IntelliJ plugin for creating Randori framework based apps and an integrated compiler.
randori-demos-bundle: This repo contains demo Randori applications.
randori-tools: This repo contains the Randori Toolset for ActionScript. These tools help to generate the JavaScript interop libraries.

The ActionScript three.js example in this post makes use of the randori-compiler, randori-libraries, and randori-sdk repos.

Setup Randori for Compiling ActionScript

Here are the steps I used to set up my development space:

Create a folder called RandoriRepos somewhere on your hard drive, and keep track of this folder path for later use.
Download https://github.com/RandoriAS/randori-compiler/raw/develop/deployed/randori-compiler-latest.zip to the RandoriRepos folder. Unzip the folder, you should see the RandoriRepos/randori-compiler-latest/ folder now.
Use a git client to clone the randori-libraries repo into the RandoriRepos folder. Or on the command line navigate to the RandoriRepos folder and execute:
```
git clone git://github.com/RandoriAS/randori-libraries.git
```
Use a git client to clone the randori-sdk repo into the RandoriRepos folder. Or on the command line navigate to the RandoriRepos folder and execute:
```
git clone git://github.com/RandoriAS/randori-sdk.git
```

The compiler is located at RandoriRepos/randori-compiler-latest/randori.jar. Next we’ll compile a simple ActionScript 3 class into JavaScript with the compiler.

Compiling ActionScript to JavaScript with the Randori Compiler

The sample files that I used to create the three.js example in ActionScript 3 are located at https://github.com/renaun/RandoriExamples.

Use a git client to clone the RandoriExamples repo into the parent folder of the RandoriRepos folder. Or on the command line navigate to the RandoriRepos’ parent folder and execute:

git clone https://github.com/renaun/RandoriExamples.git

We want RandoriRepos and RandoriExamples folders to have the same parent folder.

Open a command line and navigate to the RandoriExamples/SimpleClass folder.

Compile the HelloWorld.as file using the provided randori.sh script or with the following command modified with your path values:

java -jar /path/to/RandoriRepos/randori-compiler-latest/randori.jar randori.compiler.clients.Randori \
-library-path /path/to/RandoriRepos/randori-sdk/randori-framework/bin/swc/builtin.swc \
-source-path ./ \
-js-classes-as-files=true \
-output ./randori-output

You should see a HelloWorld.js file in the RandoriExamples/SimpleClass/randori-output/ folder. The contents should look like this:

/** Compiled by the Randori compiler v0.2.4.2 on Thu May 16 15:47:28 PDT 2013 */

HelloWorld = function() {

};

HelloWorld.prototype.toString = function() {
return "Hello Randori!";
};

HelloWorld.className = "HelloWorld";

HelloWorld.getClassDependencies = function(t) {
var p;
return [];
};

HelloWorld.injectionPoints = function(t) {
return [];
};

To see the HelloWorld.js class in action take a look at RandoriExamples/SimpleClass/index.html.

Well compiling a simple class is not that impressive. Lets get to the real example and show how to use ActionScript 3 and the Randori compiler to create a three.js demo

NOTE: The Randori compiler will not magically convert any of the Flash Player APIs in ActionScript. Whatever you are coding in ActionScript 3 has to be available on the JavaScript side. Meaning we are writing ActionScript 3 code that will map to three.js APIs.

Creating the three.js demo in ActionScript 3

The first thing we need is the ability to reference some basic HTML DOM APIs and the three.js library in ActionScript 3. This is done with stub classes in the randori-libraries repo. But to use them with the Randori compiler we need to create a SWC version of the libraries we want to use. The SWC also allows for code hinting in your IDE, for example in Adobe Flash Builder.

Here are the steps to setup the ActionScript Library Project in Adobe Flash Builder for the randori-libraries:

In Adobe Flash Builder click on File -> New -> ActionScript Library Project
Give it a project name of: randori-libraries
Set the Folder location to: /path/to/RandoriRepos/randori-libraries
Click Finish
Open the randori-libraries project properties by right clicking on the project -> Properties
Open ActionScript Library Build Path -> Library Path and remove the AIR SDK path library
In Library Path click on “Add SWC…”, enter the following path for builtin.swc and click Ok:
```
${PARENT-1-PROJECT_LOC}/randori-sdk/randori-framework/bin/swc/builtin.swc
```
Open up ActionScript Library Build Path -> Source Path and click on Add Folder, type in the following path and click OK:
```
HTMLCoreLib/src
```
Repeat the above step for:
```
ThreeJs/src 
```

NOTE: The randori-sdk repo does contain compiled SWC versions for some of the randori-libraries. If you look at https://github.com/RandoriAS/randori-sdk/tree/master/randori-framework/bin/swc you can see it contains: HTMLCoreLib.swc, JQuery.swc, builtin.swc, randori-framework.swc, randori-guice-framework.swc.

Now that we have the libraries for our stub classes we'll use this in the Randori compiler's -library-path arguments.

You might be able to import the ActionScriptThreeJS Adobe Flash Builder project as is; the project is located in the RandoriExamples folder. The steps below can be skipped if the import works; these steps show how to create a new ActionScript project in Adobe Flash Builder and use the Randori stub libraries.

In Adobe Flash Builder click File -> New -> ActionScript Project
Give it a project name of: ActionScriptThreeJS
Set the Folder location to: /path/to/RandoriExamples/ActionScriptThreeJS
Click Finish
Open the ActionScriptThreeJS project properties by right clicking on the project -> Properties
Open ActionScript Build Path -> Library Path and remove the AIR SDK path library
In Library Path click on "Add Project...", select the "randori-libraries" project and click OK
Open ActionScript Compiler and uncheck the "Generate HTML wrapper file" checkbox
Open the src/ActionScriptThreeJS.as and you should see code hinting for Three class as well as others.

Here is the code for ActionScriptThreeJS.as:

/***
* Author: Renaun Erickson (renaun.com - @renaun - github.com/renaun)
*
* Attribution: Leonard Souza - https://github.com/leonardsouza/RandoriAS-ThreeJS
*/
package
{
import com.mrdoob.stats.Stats;
import com.mrdoob.three.Three;
import com.mrdoob.three.cameras.PerspectiveCamera;
import com.mrdoob.three.extras.geometries.CubeGeometry;
import com.mrdoob.three.extras.geometries.PlaneGeometry;
import com.mrdoob.three.loaders.ImageUtils;
import com.mrdoob.three.materials.MeshBasicMaterial;
import com.mrdoob.three.math.Matrix4;
import com.mrdoob.three.math.Plane;
import com.mrdoob.three.objects.Mesh;
import com.mrdoob.three.renderers.WebGLRenderer;
import com.mrdoob.three.scenes.Scene;
import com.mrdoob.three.textures.Texture;

import randori.webkit.dom.DomEvent;
import randori.webkit.dom.Element;
import randori.webkit.dom.MouseEvent;
import randori.webkit.dom.TouchEvent;
import randori.webkit.html.HTMLDivElement;
import randori.webkit.html.HTMLElement;
import randori.webkit.page.Window;

import utils.RequestAnimationFrame;

public class ActionScriptThreeJS
{
protected var container:Element;
protected var stats:Stats;

protected var camera:PerspectiveCamera;
protected var scene:Scene;
protected var renderer:WebGLRenderer;

protected var cube:Mesh;
protected var plane:Plane;

protected var targetRotation:Number = 0;
protected var targetRotationOnMouseDown:Number = 0;

protected var mouseX:Number = 0;
protected var mouseXOnMouseDown:Number = 0;
protected var windowHalfX:Number = window.innerWidth / 2;
protected var windowHalfY:Number = window.innerHeight / 2;

[Inject]
public var animation:RequestAnimationFrame;

public function main():void
{
container = new HTMLDivElement();
window.document.body.appendChild(container);

var info:HTMLElement = new HTMLDivElement();
info.style.position ="absolute;"
info.style.top ="10px";
info.style.width ="100%";
info.style.textAlign ="center";
info.innerHTML ="Drag to spin the cube";
container.appendChild(info);

camera = new PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.y = 150;
camera.position.z = 600;

scene = new Scene();

// FLOOR
var floorTexture:Texture = ImageUtils.loadTexture("images/checkerboard.jpg");
floorTexture.wrapS = floorTexture.wrapT = Three.RepeatWrapping;
floorTexture.repeat.set(5, 5);
var floorMaterial:MeshBasicMaterial = new MeshBasicMaterial({ map: floorTexture, side: Three.DoubleSide });
var floorGeometry:PlaneGeometry = new PlaneGeometry(1200, 1200, 20, 20);
var floor:Mesh = new Mesh(floorGeometry, floorMaterial);
floor.position.y = -0.5;
floor.rotation.x = Math.PI / 2;
floor.position.z = -10;
scene.add(floor);

// Cube
var geometry:CubeGeometry = new CubeGeometry(200, 200, 200);
for (var i:int = 0; i < geometry.faces.length; i ++)
geometry.faces[i].color.setHex(Math.random() * 0xffffff);
var material:MeshBasicMaterial = new MeshBasicMaterial({ vertexColors: Three.FaceColors });
cube = new Mesh(geometry, material);
cube.position.y = 150;
scene.add(cube);

// Plane
var geometry2:PlaneGeometry = new PlaneGeometry(200, 200);
geometry2.applyMatrix(new Matrix4().makeRotationX(- Math.PI / 2 ));
material = new MeshBasicMaterial({ color: 0xe0e0e0 });
plane = new Mesh(geometry2, material) as Plane;
scene.add(plane);

renderer = new WebGLRenderer( {antialias:true} );
renderer.setSize(window.innerWidth, window.innerHeight);

container.appendChild(renderer.domElement);

stats = new Stats();
stats.domElement.style.position ="absolute";
stats.domElement.style.top ="0px";
container.appendChild(stats.domElement);

window.document.addEventListener("mousedown", onDocumentMouseDown, false);
window.document.addEventListener("touchstart", onDocumentTouchStart, false);
window.document.addEventListener("touchmove", onDocumentTouchMove, false);

window.addEventListener("resize", onWindowResize, false);

startRender();
}

private function onDocumentMouseDown(event:MouseEvent):void
{
event.preventDefault();

window.console.log("down");
window.document.addEventListener("mousemove", onDocumentMouseMove, false);
window.document.addEventListener("mouseup", onDocumentMouseUp, false);
window.document.addEventListener("mouseout", onDocumentMouseOut, false);

mouseXOnMouseDown = event.clientX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}

private function onDocumentTouchStart(event:TouchEvent):void
{
if (event.touches.length === 1) {

event.preventDefault();

mouseXOnMouseDown = event.touches[0].pageX - windowHalfX;
targetRotationOnMouseDown = targetRotation;
}
}

private function onDocumentTouchMove(event:TouchEvent):void
{
if (event.touches.length === 1) {

event.preventDefault();

mouseX = event.touches[0].pageX - windowHalfX;
targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05;
window.console.log("touchMove");
}
}

private function onDocumentMouseMove(event:MouseEvent):void
{
mouseX = event.clientX - windowHalfX;
targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown ) * 0.02;
}

private function onDocumentMouseUp(event:MouseEvent):void
{
window.console.log("up");
window.document.removeEventListener("mousemove", onDocumentMouseMove, false);
window.document.removeEventListener("mouseup", onDocumentMouseUp, false);
window.document.removeEventListener("mouseout", onDocumentMouseOut, false);
}

private function onDocumentMouseOut(event:MouseEvent):void
{
window.console.log("out");
window.document.removeEventListener("mousemove", onDocumentMouseMove, false);
window.document.removeEventListener("mouseup", onDocumentMouseUp, false);
window.document.removeEventListener("mouseout", onDocumentMouseOut, false);
}

private function onWindowResize(event:DomEvent):void
{
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);
}

private function startRender():void
{
animation.request(startRender);

render();
stats.update();
}

private function render():void
{
plane.rotation.y = cube.rotation.y += (targetRotation - cube.rotation.y) * 0.05;
renderer.render(scene, camera);
}
}
}

The class contains a main() method that is called by the GuiceInjectorBootstrap class once the class has been instantiated. We'll talk about the bootstrap class in a bit. In the main() method you can see three.js like classes. For example the "//Floor" code was copied straight out of a JavaScript example with minor changes to make it reference class names directly without the JavaScript THREE. prefix (ie: ImageUtils instead of THREE.ImageUtils) and strong typing declarations.

The ActionScript class in the randori-libraries/ThreeJS folder are not guaranteed to be complete and are based on r57 of three.js. But it is enough to show you how to mock up a 3rd party JS library and use it in ActionScript 3 with randori-compiler. It was easy to add missing stuff too, I added the ImageUtils class in a jiffy and had it working with r58 of three.js easily.

Well enough talk we need to compile the ActionScript into JavaScript and see it run. Lets take a look at the compile arguments for this project. There is a shell script that shows the compiler arguments, if you are on a Mac you can easily run it in terminal. Here is the full command; this needs to be run in the command line from the RandoriExamples/ActionScriptThreeJS/src/ folder:

java -jar /path/to/RandoriRepos/randori-compiler-latest/randori.jar randori.compiler.clients.Randori \
-sdk-path=/path/to/RandoriRepos/randori-sdk/ \
-library-path /path/to/RandoriRepos/randori-libraries/bin/randori-libraries.swc \
-source-path ./ \
-js-classes-as-files=true \
-output ../js-randori

The -sdk-path will tell the compiler where the randori-sdk is and will copy over the required randori js files. The -sdk-path also will link in the swc files from the randori-sdk location, which means we don't have to use the -library-path argument to add builtin.swc, HTMLCoreLib.swc, or the randori-guice-framework.swc (Used by the GuiceInjectorBootstrap.as class). The -library-path references the needed SWC's to compile the ActionScript files. The rest should be straightforward, but here is a link to the documentation for the randori compiler arguments.

The code generated by the Randori compiler is found in RandoriExamples/ActionScriptThreeJS/js-randori. It includes the following files:

GuiceInjectorBootstrap.js
ActionScriptThreeJS.js
randori-framework-min.js
randori-framework.js
randori-guice-framework-min.js
randori-guice-framework.js
utils/RequestAnimationFrame.js

The current Randori compiler doesn't create a wrapper HTML file but I have put in a request for it to create a basic one. Either way we still have to hook up the three.js library and other application assets. These files are located in the RandoriExamples/ActionScriptThreeJS folder as the following:

index.html - The three.js example index html file.
images/checkerboard.jpg - Asset file used in the three.js demo.
js/ - contains the three.js and stats.js libraries that are included in the index.html

Here is what the index.html file looks like:

<html>
<head>
<title>ActionScript to ThreeJS Example</title>
<script src="js/three.min.js"></script>
<script src="js/stats.min.js"></script>
<script src="js-randori/randori-guice-framework.js"></script>
<script src="js-randori/GuiceInjectorBootstrap.js"></script>
</head>
<body>
<script>
onload = function() {
var bootstrap = new GuiceInjectorBootstrap( "ActionScriptThreeJS", "js-randori/" );
bootstrap.launch();
}
</script>
</body>
</html>

So here is where some of the Randori magic happens. The Randori compiler outputs code that the randori-guice-framework.js can do stuff with. What kind of stuff? Well, like dependency injection and lazy loading compiled JavaScript classes when they are needed. The GuiceInjectorBootstrap.as file contains Randori guice classes to handle the loading and injection. All we have to do is pass in the main class file and output folder where the generated JavaScript is located. In this example this is done by the var bootstrap = new GuiceInjectorBootstrap( "ActionScriptThreeJS", "js-randori/" ); code. It loads the js-randori/ActionScriptThreeJS.js file. When it finds that ActionScriptThreeJS is looking for utils/RequestAnimationFrame.js from the [Inject] metadata used in the ActionScriptThreeJS.as file it will go load that class file too. To demonstrate this, run the index.html in the browser and check the network calls in Chrome Developer Tools. It should look something like this:

You can see as it loads three.js, stats.js, randori-guice-framework.js and GuiceInjectorBootstrap.js they are parallel calls. Then it loads the class files, first the ActionScriptThreeJS.js file (which is not included in the index.html script tags). The Randori guice framework then notices that ActionScriptThreeJS injects the utils.RequestAnimationFrame classes and goes and fetches that JavaScript class file. So no worrying about what classes are required to run your code just give it the main class and let Randori guice does the rest.

This is actually where the full Randori framework is pretty cool. The full Randori stack is geared for large applications making use of MVC patterns and dependency injection for some great features. A great place to learn more about the Randori framework for large application development is the getting started section here.

Randori is a fairly new project but it was really fun to play with and something I'll be exploring more.

Links Used in the Post

RandoriAS Project Github - https://github.com/RandoriAS
My ActionScript 3 Three.js Example Code - https://github.com/renaun/RandoriExamples
My ActionScript 3 Three.js Live Demo - http://renaun.com/html5/as3threejs/

A thank you goes out to Leonard Souza for providing the ThreeJS+Randori example - https://github.com/leonardsouza/RandoriAS-ThreeJS

The post Code Three.js in ActionScript with Randori Compiler appeared first on Renaun Erickson.

How Far is the Reach of WebGL on the Desktop

Renaun Erickson — Mon, 15 Apr 2013 16:05:55 +0000

WebGL

WebGL is definitely making some great in-roads into desktop browsers. There are a lot of other HTML5 features that round out WebGL for games, for example check out some AAA web demos here. In talking to people there seems to be some confusion about what is the real reach vs all the hype. Of course WebGL keeps changing fast, one of the reasons for all the hype, but I wanted to talk about the current technical landscape of WebGL.

Background

WebGL is not a W3C specification, it is driven by the Khronos Group. Here is a blurb from their site:

WebGL is a cross-platform, royalty-free web standard for a low-level 3D graphics API based on OpenGL ES 2.0, exposed through the HTML5 Canvas element as Document Object Model interfaces. Developers familiar with OpenGL ES 2.0 will recognize WebGL as a Shader-based API using GLSL, with constructs that are semantically similar to those of the underlying OpenGL ES 2.0 API. It stays very close to the OpenGL ES 2.0 specification, with some concessions made for what developers expect out of memory-managed languages such as JavaScript.
WebGL brings plugin-free 3D to the web, implemented right into the browser. Major browser vendors Apple (Safari), Google (Chrome), Mozilla (Firefox), and Opera (Opera) are members of the WebGL Working Group.

If you have noticed there is one major browser vendor missing from the list, Microsoft (Internet Explorer). That might change (rumors) in the future with IE11. But this doesn’t address IE browsers before version 11.

Ok, so in the real world what browsers have WebGL? The latest Chrome and Firefox enable it by default. Safari and Opera require steps to enable WebGL. IE does not support WebGL in its current form.

Don’t forget GPUs

Even if all the browser vendors supported WebGL fully out of the box there are other factors that affect reach. The biggest one being graphic drivers. A good comprehensive list of driver support can be found on the khronos WebGL wiki page. For various stability and security reasons WebGL implementations use blacklists and whitelists to determine what GPU drivers are allowed to be used. For example Chrome uses a certain set of drivers on Windows that are newer than 2009, but Firefox currently only does drivers newer than 2010. WebGL driver support will change over time; the Stage3D API implements driver support back to 2006 (Intel GMA 2005 drivers with constrained mode). There are other considerations as well. The older chipsets have the potential for the GPU hardware itself to not support the entire WebGL specification. This is especially true for the newer WebGL specs, like the WebGL OpenGL ES 3.0 specification that will drive WebGL in the future.

What does this mean in the real world? It’s hard to give definitive numbers since WebGL is changing in the browser and graphic drivers areas. I can give highly subjective numbers based on companies that have implemented Stage3D APIs with live web content that can give you a rough idea. With Stage3D the browser reach factor is not there, as it was implemented across all browsers on Mac, Windows, and Linux support. That means just taking into consideration the GPU driver reach factor the dev is left with the following tidbits. For Stage3D content that was limited to drivers released after 2009 saw about 60%-70% of the users able to play the content. Going back to later than 2008 the reach jumped up to 70%-85%. Going back to later than 2006 and support certain Intel GMA chipset with a constrained mode allowed content developers to reach 90%+ (usually 94%-96% is best possible regardless of technology) of their users.

Or here is a thread for a specific test inside a legacy app to see Stage3D’s reach.

There is a site that is a rough indication of where WebGL is right now called http://webglstats.com/. The webglstats.com site also breaks down specific API availability that relates to WebGL or content commonly used with WebGL.

This is where WebGL is headed. In this process of moving forward it is good to learn who can really be reached with the newer tech and why they can or can’t be reached. There are a slew of error messages when drivers don’t work but that needs some work too.When content doesn’t work, it is good to know if the root cause is lack of support, a blacklisted driver, no GPU, or some other specific error rather than simply knowing the WebGL API call failed.

On a very technical note, this is a great article that talks about portable code from a GPU hardware issue perspective.

What about Mobile?

WebGL on mobile is making inroads with Chrome and Firefox on Android. The nice thing about the mobile industry is the devices are all new or hardware changes faster. And that means there are newer GPUs and drivers on these devices. There will be less of a graphics driver reach issue for mobile, but there is always the possibility of bad driver support or OS lack of API interfaces. Then it is a matter of getting more OS/browser support to drive the mobile reach.

Comments and Future Changes

Please share your thoughts about graphic driver reach and other factors that prevent end users from being able to use WebGL. There will definitely be changes in the areas above as time progresses.

The post How Far is the Reach of WebGL on the Desktop appeared first on Renaun Erickson.

Using Flash CS6 and Starling for 8 Way Character Animation

Renaun Erickson — Thu, 04 Apr 2013 14:33:07 +0000

Creative Cloud Workflow:

In this video I am demonstrating one way of creating an 8 way character animation. Moving a character up, down, left, right, and along all the diagonals is a common task in creating games. In this workflow an 80x80px character is animated over 8 x 8 frames. I created a spritesheet using the “Generate SpriteSheet” feature in Flash Professional. The feature in Flash Professional to generate spritesheets allows for various framework atlas formats. One of these formats is Starling.

Here is the Starling code that reads in the texture and atlas data:

package
{
import flash.geom.Point;

import starling.core.Starling;
import starling.display.MovieClip;
import starling.display.Sprite;
import starling.events.Event;
import starling.events.Touch;
import starling.events.TouchEvent;
import starling.events.TouchPhase;
import starling.text.TextField;
import starling.textures.Texture;
import starling.textures.TextureAtlas;

public class Game extends Sprite
{
// Embed the Atlas XML
[Embed(source="../../8way.xml", mimeType="application/octet-stream")]
public static const AtlasXml:Class;

// Embed the Atlas Texture:
[Embed(source="../../8way.png")]
public static const AtlasTexture:Class;

public function Game()
{
// create atlas
var texture:Texture = Texture.fromBitmap(new AtlasTexture());
var xml:XML = XML(new AtlasXml());
var atlas:TextureAtlas = new TextureAtlas(texture, xml);

// display a sub-texture
//var textures:Vector. = atlas.getTextures("DirN");
var directions:Array = ["DirE", "DirSE", "DirS", "DirSW", "DirW", "DirNW", "DirN", "DirNE"];
var i:int = 0;
var mc:MovieClip;
for each (var name:String in directions)
{
mc = new MovieClip(atlas.getTextures(name+"00"), 16 );
mc.loop = true;
mc.stop();
mc.visible = false;
directionAnimations.push(mc);
addChild(mc);
Starling.juggler.add(mc);
}
currentMC = mc;
mc.visible = true;

//addChild(text);

addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
}

public var text:TextField = new TextField(360, 80, "hello");
public var currentMC:MovieClip;
public var currentDirection:int = 0;
public var directionAnimations:Array = [];
private var isDown:Boolean = false;

private function addedToStageHandler(event:Event):void
{
var mc:MovieClip;
for (var i:int = 0; i < directionAnimations.length; i++)
{
mc = directionAnimations[i];
mc.x = (stage.stageWidth - mc.width)/2;
mc.y = (stage.stageHeight - mc.height)/2;
}

stage.addEventListener(TouchEvent.TOUCH, touchHandler);
}

private function touchHandler(event:TouchEvent):void
{
var touch:Touch = event.getTouch(stage, TouchPhase.MOVED);
var touch2:Touch = event.getTouch(stage, TouchPhase.ENDED);
if (touch2)
currentMC.stop();
if (touch)
{
var localPos:Point = touch.getLocation(stage);
var sX:Number = localPos.x;
var sY:Number = localPos.y;

var dirIndex:int = 0;
var angle:Number = Math.atan2((sX - currentMC.x + currentMC.width/2) , (sY - currentMC.y + currentMC.height/2));

//text.text = "Angle: " + angle;
if (angle > 0.0 && angle < 0.6)
dirIndex = 3; // looking down
else if (angle > -0.6 && angle < 0.0)
dirIndex = 4; // bottom left
else if (angle > -1.4 && angle < -0.6)
dirIndex = 5; // left
else if (angle > -3.0 && angle < -1.4)
dirIndex = 6; // top left
//else if ((angle < -2.8 && angle > -3.2) || (angle < 3.2 && angle > 2.8))
else if ((angle < 3 && angle > 2.2) )
dirIndex = 7; // up
else if (angle < 2.2 && angle > 1.4)
dirIndex = 8; // right top
else if (angle < 1.4 && angle > 0.9)
dirIndex = 1; // right
else if (angle < 0.9 && angle > 0.6)
dirIndex = 2; // right bottom

if (dirIndex != currentDirection)
{
//currentMC.stop();
currentMC.visible = false;
currentMC = directionAnimations[dirIndex-1];
currentMC.visible = true;
currentMC.play();
}
}
}
}
}

Adobe Creative Cloud Products Used:

Flash Professional
Game Developer Tools

Source Files:

Source Flash Professional source file and ActionScript 3 files

Video:

The post Using Flash CS6 and Starling for 8 Way Character Animation appeared first on Renaun Erickson.

AAA 3D Web Game Demos (Flash, Unity, WebGL, NaCL)

Renaun Erickson — Wed, 03 Apr 2013 15:37:38 +0000

In my recent GDC presentation titled, Are AAA 3D Games for the Web Possible?, I showed a few demos. I am posting a few of the demo links here as people asked for the links. This list is not meant to be an exhaustive list of AAA 3D content on the web. The presentation covers what it takes to create 3D web games between Flash, Unity, WebGL, and Google Native Client as a techinical comparison. The slides for the presentation can be found at http://www.slideshare.net/renaun/are-aaa-3d-games-for-the-web-possible.

Flash Demos:
Kings Road by Rumble Games – Uses modified Away3D framework.
Sky Warriors – Only video for now, using Away3D
Chrono Blade – In beta, uses Unity to Flash exporter
Dungeon Defenders 2 by Trendy Entertainment – It is in closed beta, but I showed it with Trendy’s premission the day of the talk. Using Epic Unreal Engine to Flash exporter.

WebGL Demos:
BananaBread by Mozilla – Using Emscripten
Cube 2 – Using Emscripten
HexGL – Racing demo game
Crypt WebGL Demo – Not a game but decent demo

Unity Demos:
Camper – Texture quality for Unity player
Angry Bots
Many other unity demos can be found at their showcase and partner pages.

Google Native Client (Chrome Store Only):
Bastion by Warner Games
Mini Ninjas

Again this list is not meant to be an exhaustive list. There are many demos not mentioned here and many yet to come in the fast changing landscape of 3D games on the web. Having said that if you have or know of any cool AAA 3D games on the desktop web place share them in the comments below.

The post AAA 3D Web Game Demos (Flash, Unity, WebGL, NaCL) appeared first on Renaun Erickson.

Using Creative Cloud and CSS Translate3D to Create an 8 Way Character Animation

Renaun Erickson — Mon, 25 Mar 2013 18:49:34 +0000

Creative Cloud Workflow:

In this video I am demonstrating one way of creating an 8 way character animation. Moving a character up, down, left, right, and along all the diagonals is a common task in creating games. In this workflow an 80x80px character is animated over 8 x 8 frames. This resulted in a 640x640px png file that I modified in Photoshop. Using a new feature in Photoshop from the Creative Cloud edition called smart filters I modified my previously generated green blob spritesheet. The changes gave it a nice effect seen below:

The video (at the end of the post) explains how I used the smart filter feature in Photoshop from the Creative Cloud.

For rendering the 8 way character animation I wanted to try out the DOM HTML5 way–no canvas or WebGL. I learned this technique from Andy Trice, who also built a demo game with the same approach called PhoneGap legends. It works nicely but there are GPU memory considerations you have to be aware of. Depending on your content this approach could work for your game.

The idea is to use CSS spritesheets to load the different animation frames from one image. Then force hardware acceleration by using the CSS translate3d property to move the images around (in this case we are not moving but it forces the image on to the gpu). Here is what the CSS looks like for the spritesheet:

#hero{
width: 80px;
height: 80px;
overflow: hidden;
position: absolute;
top:0px;
left:0px;
}
.hero_0_0{ background: url('images/8way.png'); background-position:0px 0px;}
.hero_0_1{ background: url('images/8way.png'); background-position:0px 80px;}
.hero_0_2{ background: url('images/8way.png'); background-position:0px 160px;}
.hero_0_3{ background: url('images/8way.png'); background-position:0px 240px;}
.hero_0_4{ background: url('images/8way.png'); background-position:0px 320px;}
.hero_0_5{ background: url('images/8way.png'); background-position:0px 400px;}
.hero_0_6{ background: url('images/8way.png'); background-position:0px 480px;}
.hero_0_7{ background: url('images/8way.png'); background-position:0px 560px;}
.hero_1_0{ background: url('images/8way.png'); background-position:80px 0px;}
.hero_1_1{ background: url('images/8way.png'); background-position:80px 80px;}
.hero_1_2{ background: url('images/8way.png'); background-position:80px 160px;}
.hero_1_3{ background: url('images/8way.png'); background-position:80px 240px;}
.hero_1_4{ background: url('images/8way.png'); background-position:80px 320px;}
.hero_1_5{ background: url('images/8way.png'); background-position:80px 400px;}
.hero_1_6{ background: url('images/8way.png'); background-position:80px 480px;}
.hero_1_7{ background: url('images/8way.png'); background-position:80px 560px;}
.hero_2_0{ background: url('images/8way.png'); background-position:160px 0px;}
.hero_2_1{ background: url('images/8way.png'); background-position:160px 80px;}
.hero_2_2{ background: url('images/8way.png'); background-position:160px 160px;}
.hero_2_3{ background: url('images/8way.png'); background-position:160px 240px;}
.hero_2_4{ background: url('images/8way.png'); background-position:160px 320px;}
.hero_2_5{ background: url('images/8way.png'); background-position:160px 400px;}
.hero_2_6{ background: url('images/8way.png'); background-position:160px 480px;}
.hero_2_7{ background: url('images/8way.png'); background-position:160px 560px;}
.hero_3_0{ background: url('images/8way.png'); background-position:240px 0px;}
.hero_3_1{ background: url('images/8way.png'); background-position:240px 80px;}
.hero_3_2{ background: url('images/8way.png'); background-position:240px 160px;}
.hero_3_3{ background: url('images/8way.png'); background-position:240px 240px;}
.hero_3_4{ background: url('images/8way.png'); background-position:240px 320px;}
.hero_3_5{ background: url('images/8way.png'); background-position:240px 400px;}
.hero_3_6{ background: url('images/8way.png'); background-position:240px 480px;}
.hero_3_7{ background: url('images/8way.png'); background-position:240px 560px;}
.hero_4_0{ background: url('images/8way.png'); background-position:320px 0px;}
.hero_4_1{ background: url('images/8way.png'); background-position:320px 80px;}
.hero_4_2{ background: url('images/8way.png'); background-position:320px 160px;}
.hero_4_3{ background: url('images/8way.png'); background-position:320px 240px;}
.hero_4_4{ background: url('images/8way.png'); background-position:320px 320px;}
.hero_4_5{ background: url('images/8way.png'); background-position:320px 400px;}
.hero_4_6{ background: url('images/8way.png'); background-position:320px 480px;}
.hero_4_7{ background: url('images/8way.png'); background-position:320px 560px;}
.hero_5_0{ background: url('images/8way.png'); background-position:400px 0px;}
.hero_5_1{ background: url('images/8way.png'); background-position:400px 80px;}
.hero_5_2{ background: url('images/8way.png'); background-position:400px 160px;}
.hero_5_3{ background: url('images/8way.png'); background-position:400px 240px;}
.hero_5_4{ background: url('images/8way.png'); background-position:400px 320px;}
.hero_5_5{ background: url('images/8way.png'); background-position:400px 400px;}
.hero_5_6{ background: url('images/8way.png'); background-position:400px 480px;}
.hero_5_7{ background: url('images/8way.png'); background-position:400px 560px;}
.hero_6_0{ background: url('images/8way.png'); background-position:480px 0px;}
.hero_6_1{ background: url('images/8way.png'); background-position:480px 80px;}
.hero_6_2{ background: url('images/8way.png'); background-position:480px 160px;}
.hero_6_3{ background: url('images/8way.png'); background-position:480px 240px;}
.hero_6_4{ background: url('images/8way.png'); background-position:480px 320px;}
.hero_6_5{ background: url('images/8way.png'); background-position:480px 400px;}
.hero_6_6{ background: url('images/8way.png'); background-position:480px 480px;}
.hero_6_7{ background: url('images/8way.png'); background-position:480px 560px;}
.hero_7_0{ background: url('images/8way.png'); background-position:560px 0px;}
.hero_7_1{ background: url('images/8way.png'); background-position:560px 80px;}
.hero_7_2{ background: url('images/8way.png'); background-position:560px 160px;}
.hero_7_3{ background: url('images/8way.png'); background-position:560px 240px;}
.hero_7_4{ background: url('images/8way.png'); background-position:560px 320px;}
.hero_7_5{ background: url('images/8way.png'); background-position:560px 400px;}
.hero_7_6{ background: url('images/8way.png'); background-position:560px 480px;}
.hero_7_7{ background: url('images/8way.png'); background-position:560px 560px;}

And the snippet of JavaScript (using JQuery) to animate and force hardware acceleration with translate3d:

function animate() {
var animationAgeInMs = new Date().getTime();
var animationFrame = (Math.floor(animationAgeInMs / msPerFrame) % walkCycleFrameCount);
if (isMouseDown) // do animation
{
hero.el.style["-webkit-transform"]="translate3d("+ hero.x +'px,'+ hero.y +"px,0px) ";// scale("+hero.scale+")";
hero.$el.removeClass().addClass("hero_" + animationFrame +"_"+ hero.direction);
}

requestAnimFrame( animate );
}

Adobe Creative Cloud Products Used:

Photoshop from the Adobe Creative Cloud

Other Technology:

CSS translate3d and CSS spritesheet, thanks to Andy Trice

Demo:

Live Demo

Source Files:

Source Photoshop source file and CSS Translate3D/Spritesheet HTML/JS files

Video:

The post Using Creative Cloud and CSS Translate3D to Create an 8 Way Character Animation appeared first on Renaun Erickson.