awayjs - open source workflow for webgl

25
@robnet AWAYJS OPEN SOURCE WORKFLOW FOR WEBGL AWAYJS OPEN SOURCE WORKFLOW FOR WEBGL

Upload: rob-bateman

Post on 02-Jul-2015

449 views

Category:

Software


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

Page 1: AwayJS - Open Source Workflow for WebGL

@robnet

AWAYJS OPEN SOURCE WORKFLOW FOR WEBGL

!

AWAYJS OPEN SOURCE WORKFLOW FOR WEBGL

!

Page 2: AwayJS - Open Source Workflow for WebGL

@awayfoundation awayfoundation.org

@awaystudios awaystudios.com

INTRODUCTIONS

Page 3: AwayJS - Open Source Workflow for WebGL

INTRODUCTIONS

@away3d away3d.com

Page 4: AwayJS - Open Source Workflow for WebGL

INTRODUCTIONS

@away3d away3d.com

@awayjs github.com/awayjs

Page 5: AwayJS - Open Source Workflow for WebGL

INTRODUCTIONS

free open source

community driven !

Page 6: AwayJS - Open Source Workflow for WebGL

INTRODUCTIONS

away3d.com/showcase

Page 7: AwayJS - Open Source Workflow for WebGL
Page 8: AwayJS - Open Source Workflow for WebGL

TYPESCRIPT

typescript.away3d.com

Page 9: AwayJS - Open Source Workflow for WebGL

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);!

! ! }!

! }!

}

Page 10: AwayJS - Open Source Workflow for WebGL

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 = {}));!

Page 11: AwayJS - Open Source Workflow for WebGL

jetbrains.com/webstorm

CODE

Page 12: AwayJS - Open Source Workflow for WebGL

CODE

nodejs.org

Page 13: AwayJS - Open Source Workflow for WebGL

CODE

npmjs.org browserify.org

Page 14: AwayJS - Open Source Workflow for WebGL

!

DEMO github.com/rob-bateman/

Mozilla_London_2014 !

DEMO

Page 15: AwayJS - Open Source Workflow for WebGL

DESIGN

@awaytools awaytools.com

Page 16: AwayJS - Open Source Workflow for WebGL

DESIGN

github.com/awaytools

Page 17: AwayJS - Open Source Workflow for WebGL

DESIGN

Page 18: AwayJS - Open Source Workflow for WebGL

DESIGN

awaytools.com/awaybuilder/live-tool

Page 19: AwayJS - Open Source Workflow for WebGL

Compatibility

Page 20: AwayJS - Open Source Workflow for WebGL

FLASH FALLBACK

Page 21: AwayJS - Open Source Workflow for WebGL

2D?

Page 22: AwayJS - Open Source Workflow for WebGL

VECTOR GRAPHICS

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

Page 23: AwayJS - Open Source Workflow for WebGL

VECTOR GRAPHICS

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

Page 24: AwayJS - Open Source Workflow for WebGL

VECTOR GRAPHICS

Page 25: AwayJS - Open Source Workflow for WebGL

Thank you

[email protected]

!

DEMO github.com/rob-bateman/

Mozilla_London_2014 !

DEMO