AwayJS - Open Source Workflow for WebGL

Post on 02-Jul-2015

446 views 1 download

description

AwayJS is a new modular engine for interactive graphics & games that targets WebGL across mobile & desktop platforms. We'll demonstrate how you can easily get started with AwayJS and use a collection of accompanying tools to setup a flexible design workflow from existing 2D &3D graphics packages, all through free, open source resources from The Away Foundation.

transcript

@robnet

AWAYJS OPEN SOURCE WORKFLOW FOR WEBGL

!

AWAYJS OPEN SOURCE WORKFLOW FOR WEBGL

!

@awayfoundation awayfoundation.org

@awaystudios awaystudios.com

INTRODUCTIONS

INTRODUCTIONS

@away3d away3d.com

INTRODUCTIONS

@away3d away3d.com

@awayjs github.com/awayjs

INTRODUCTIONS

free open source

community driven !

INTRODUCTIONS

away3d.com/showcase

TYPESCRIPT

typescript.away3d.com

TYPESCRIPT

ACTIONSCRIPT package example!

{!

! public class Test!

! {!

! ! private var i:Number = 1;!

! ! !

! ! public function Test()!

! ! {!

! ! ! trace(i);!

! ! }!

! }!

}!

TYPESCRIPT module example!

{!

! export class Test!

! {!

! ! private i:number = 1;!

! ! !

! ! constructor()!

! ! {!

! ! ! console.log(this.i);!

! ! }!

! }!

}

TYPESCRIPT

ACTIONSCRIPT package example

public class Test

private var i:Number = 1;

public function Test()

trace(i);

TYPESCRIPT module example!

{!

! export class Test!

! {!

! ! private i:number = 1;!

! ! !

! ! constructor()!

! ! {!

! ! ! console.log(this.i);!

! ! }!

! }!

}

JAVASCRIPT var example;!

(function (example) {!

! var Test = (function () {!

! ! function Test() {!

! ! ! this.i = 1;!

!! ! ! console.log(this.i);!

! ! }!

! ! return Test;!

! })();!

! example.Test = Test;!

})(example || (example = {}));!

jetbrains.com/webstorm

CODE

CODE

nodejs.org

CODE

npmjs.org browserify.org

!

DEMO github.com/rob-bateman/

Mozilla_London_2014 !

DEMO

DESIGN

@awaytools awaytools.com

DESIGN

github.com/awaytools

DESIGN

DESIGN

awaytools.com/awaybuilder/live-tool

Compatibility

FLASH FALLBACK

2D?

VECTOR GRAPHICS

mdk.org.pl/2007/10/27/curvy-blues

VECTOR GRAPHICS

mdk.org.pl/2007/10/27/curvy-blues

VECTOR GRAPHICS

Thank you

www.theawayfoundation.orgrob.bateman@theawayfoundation.org

!

DEMO github.com/rob-bateman/

Mozilla_London_2014 !

DEMO