Slide 1

Slide 1 text

Adobe AIR 3.5 Overview JAM852 Demian Borba @demianborba September 26-27, 2013

Slide 2

Slide 2 text

About me Ÿ  Graduated in Industrial Design (CEFET-PR) Ÿ  Graduated in Computer Science (UFAL) Ÿ  Crazy about Design, UX, Business and Technology Ÿ  Professor at University of California San Diego (UCSD) Ÿ  Working with Interactive Media for over 13 years Ÿ  Founder of Action Creations, interactive agency in California Ÿ  Developer Evangelist, 90% #upintheair Ÿ  Launch the Startup Jam program Ÿ  Launched the Tech Centers in Universities 2

Slide 3

Slide 3 text

X Ÿ  X 3

Slide 4

Slide 4 text

Tech Centers 4

Slide 5

Slide 5 text

Agenda Ÿ  Why Adobe AIR? Ÿ  Defining Performance Ÿ  Getting to know the Stage3D API Ÿ  Stage3D libraries, case study: Starling Framework Ÿ  Setting up your environment (Flash Builder or FDT) Ÿ  Creating/Testing your first AIR 3.5 mobile project for BlackBerry 10 Ÿ  Demo: Adobe Gaming SDK Ÿ  Bonus: the BlackBerry 10 Experience App Framework for AIR Ÿ  Bonus: creating BAR files from SWFs (GAP for AIR) Ÿ  What we are trying to solve Ÿ  Questions & Answers 5

Slide 6

Slide 6 text

Why Adobe AIR? 6 Source: Vision Mobile Developer Economics 2013 78% of developers interested in revenue, use two or more platforms concurrently

Slide 7

Slide 7 text

Source: Vision Mobile Developer Economics 2013 Main platforms for developers 7

Slide 8

Slide 8 text

What is it? 8

Slide 9

Slide 9 text

Defining Performance 9 Computer performance is characterized by the amount of useful work accomplished by a computer system compared to the time and resources used. Source: Wikipedia (http://en.wikipedia.org/wiki/Computer_performance)

Slide 10

Slide 10 text

Defining Performance 10 PERFORMANCE UX = Source: Michael Wolf, Director of Technology at Cynergy

Slide 11

Slide 11 text

Understand the guidelines 11 developer.blackberry.com/design/bb10

Slide 12

Slide 12 text

developer.blackberry.com/design/bb10 12

Slide 13

Slide 13 text

Built for BlackBerry http://developer.blackberry.com/builtforblackberry 13

Slide 14

Slide 14 text

Built for BlackBerry : Games 14 http://downloads.blackberry.com/upr/developers/downloads/BuiltForBlackBerry-GameDeveloperChecklist.pdf

Slide 15

Slide 15 text

BlackBerry 10.2 Ÿ  Adobe AIR 3.5 „  Stage3D „  StageVideo „  Computing performance improvements 15

Slide 16

Slide 16 text

Getting to know the Stage3D API Available in BlackBerry 10.2 16

Slide 17

Slide 17 text

The past Ÿ  3D engines available for Flash: „  PaperVision 3D „  Away3D etc Ÿ  There was demand for real-time 3D rendering in Flash Ÿ  Scenario: „  No 3D hardware acceleration „  Rendering using software mode (relied on the CPU) „  Software mode is slow (can’t render detailed 3D scenes) 17

Slide 18

Slide 18 text

After Flash Player 11 And now with BlackBerry 10.2: Ÿ  New opportunities for developers (games and apps) Ÿ  Developers can leverage 3D hardware acceleration Ÿ  No need to rely on the CPU for 3D rendering anymore Ÿ  3D rendering handled by a secondary processor, the GPU Ÿ  GPU (Graphics Processing Unit) „  Part of the video hardware of a computer „  Totally dedicated to rendering objects in 3D 18

Slide 19

Slide 19 text

With Stage3D you can Ÿ  Take full advantage of the user’s GPU directly from Flash Ÿ  Have lightning-fast rendering required for Complex 3D Models Ÿ  Have realistic 3D effects (not possible before) Ÿ  Have a responsive game play Ÿ  Reach more users (Flash is available on almost all computers) Ÿ  Abstract the need of special hardware or runtime libraries Ÿ  You can reach iOS, Android and BlackBerry 10 devices Ÿ  Create immersive 3D experiences (engagement) Ÿ  Can build extremely fluid 2D experiences 19

Slide 20

Slide 20 text

3D Hardware Acceleration Ÿ  The GPU is included in all modern computers Ÿ  The software (your app) just define the 3D scene Ÿ  It passes the 3D scene data to the GPU Ÿ  The GPU processes the data and renders the scene 20 CPU (responsible to define the scene) GPU (responsible to process and render the scene) Passes the definition to the GPU

Slide 21

Slide 21 text

What makes a 3D scene? Ÿ  A group of 3D geometries (meshes) Ÿ  Each geometry is a set of triangles Ÿ  Each triangle is a set of vertices Ÿ  Eventually some rendering information, such as texture or colors Ÿ  3D scenes can be rendered: „  Using SOFTWARE MODE (older, on the CPU) „  Using HARDWARE MODE (newer, on the GPU) 21

Slide 22

Slide 22 text

Software mode rendering Ÿ  Example with Flash: PaperVision3D Ÿ  The 3D engine: „  receives the 3D information „  receives the stream of vertices „  calculates the screen positions of the triangles „  prompts the Flash Player to natively render each triangle, one by one „  the process repeats in a series of “fill” draw operations Ÿ  Software mode rendering is: „  Slow (Flash Player renders scenes with a max of 4000 triangles) „  Not accurate (render by triangle, not per pixel) „  Triangles would render sometimes out of place 22

Slide 23

Slide 23 text

Hardware mode rendering Ÿ  Examples with Stage3D: Starling (2D), Flare3D Ÿ  The software simply define the geometries (works efficiently) Ÿ  Then passes it to the GPU to be rendered Ÿ  Then the GPU (specialized in 3D), renders the scene = final image Ÿ  The hardware mode rendering is: „  Much faster than software mode (can render more than 1M triangles) 250X „  Handled by the CPU, specialized in 3D rendering „  Receives vertices, renders triangles, that is it! 23

Slide 24

Slide 24 text

3D rendering pipeline Ÿ  Hardware-based 3D rendering is facilitated by a 3D rendering pipeline Ÿ  Pipeline = Rendering Process Ÿ  Older = Fixed Function Graphics Pipeline (Rigid) Ÿ  Newer = Programmable Graphics Pipeline (Flexible) 24

Slide 25

Slide 25 text

Fixed Function Pipeline Ÿ  Simply receive geometry data as input Ÿ  Process the data through the pipeline blocks Ÿ  Produce the final output rendered image 25

Slide 26

Slide 26 text

Fixed Function Pipeline Ÿ  To work with a fixed function pipeline, you feed the GPU with: „  geometry description (vertices and triangles) „  textures to apply to the geometries „  the position and orientation of the geometries in the 3D scene „  the position and orientation of the eye point (3D camera) „  lights (how many, what color, and what position) „  additional parameters needed to specify how the rendering will take place Ÿ  The projected and clipped data is then passed down the pipeline to the rasterizer stage, which performs the texture mapping. It also eventually applies fogging, alpha blending effects, and performs the depth buffering test necessary for rendering triangle pixels with the proper depth sorted order. 26

Slide 27

Slide 27 text

Fixed Function Pipeline Ÿ  It has worked well for many years, but it is rigid Ÿ  Bad for lightning (has to use standard shading models) Ÿ  Isn’t flexible enough for developers to do creative work Ÿ  Renderings look very similar to each other Ÿ  Then the programmable graphics pipeline was introduced 27

Slide 28

Slide 28 text

Programmable Pipeline 28

Slide 29

Slide 29 text

Programmable Pipeline Ÿ  2 new programmable blocks (Vertex Shader & Fragment Shader) Ÿ  You get to write code snippets (called Shaders) Ÿ  How vertices are transformed and modified = Vertex Shader Ÿ  How triangle pixels are rendered = Fragment Shader Ÿ  You can apply all kinds of lighting techniques Ÿ  Possible to add shadows Ÿ  Possible to add hardware accelerated bones systems Ÿ  Possible to add many cool effects 29

Slide 30

Slide 30 text

Stage3D Ÿ  Stage3D is completely based on the programmable function pipeline Ÿ  With power also comes responsibility: „  You are required to write your own Shaders „  You cannot simply just set a few parameters and render a project as before using the fixed function pipeline Ÿ  Coding can get very complex and time consuming Ÿ  Recommendation? „  Use libraries for Flash such as Away3D, Flare3D, Starling etc 30

Slide 31

Slide 31 text

Advantages of Stage3D Ÿ  When programming for Stage3D, Flash Player abstracts the hardware specific tasks necessary to make it work (ex: Context3D) Ÿ  Different from DirectX or OpenGL, where your application must target and be tuned/tested for several different pieces of hardware Ÿ  Stage3D runs on AIR 3.2 and higher (desktop and mobile) Ÿ  You don't really target specific hardware in order to take advantage of the specific power available in each platform Ÿ  Stage3D acts as a layer between your code and the actual hardware Ÿ  You can combine 3D hardware accelerated code with regular 2D Flash content 31

Slide 32

Slide 32 text

Restrictions of Stage3D Ÿ  Write one piece of code to run anywhere limits hardware specific features (abstraction has to take place) Ÿ  Example: „  Modern GPU hardware supports Shader Model 4.0 „  Stage3D supports Shader Model 2.0 Ÿ  You can face limitations not present on newer hardware Ÿ  As a result, some of the advanced effects using Shaders that you see in today’s AAA games might not be feasible with Stage3D. 32

Slide 33

Slide 33 text

How Stage3D works 33

Slide 34

Slide 34 text

Stage3D Ÿ  Rendered in the rectangular viewport of each specific Stage3D Ÿ  The regular 2D Flash content appears overlaid on top of it Ÿ  You get the rendering of your 3D scene, using hardware acceleration Ÿ  You get the 2D stuff (such as a game UI) on top Ÿ  You have a multitude of Stage3Ds available Ÿ  Each Stage3D has its own rectangular viewport Ÿ  The various Stage3D and StageVideo layers can partially (or even totally) overlap. 34

Slide 35

Slide 35 text

Accessing Stage3D with AS3 Ÿ  To access the Stage3D API using ActionScript code, you’ll declare one of the Stage3D stages Ÿ  The primary class of the Stage3D API is not Stage3D itself. It is a class called Context3D (it contains the surface on which you will render the 3D objects, and includes all the methods and properties needed to perform the rendering) 35 var stage3D:Stage3D = stage.stage3Ds[0];

Slide 36

Slide 36 text

Context3D Ÿ  Context3D is the main entity you'll work with when using Stage3D. Ÿ  The first thing you'll do with a Stage3D object is request a Context3D, like this: stage.stage3Ds[0].addEventListener( Event.CONTEXT3D_CREATE, initStage3D ); stage.stage3Ds[0].requestContext3D(); ... protected function initStage3D(e:Event):void { context3D = stage.stage3Ds[0].context3D; } 36

Slide 37

Slide 37 text

Defining geometry (Vertex) Ÿ  In Stage3D, the 3D scene that you render is comprised of a set of geometries (3D meshes). Each geometry is defined by a set of triangles. And each triangle is defined as a set of vertices. Ÿ  All vertices that describe a geometry are packed together in a structure called a Vertex Buffer Ÿ  It can then be uploaded in one batch to the GPU memory. Sample: 37

Slide 38

Slide 38 text

And it goes on 38 wraps the Vertex Buffer data into the Stage3D API creating an additional Index Buffer (square) use the IndexBuffer3D to upload your index buffer to the GPU

Slide 39

Slide 39 text

Samples 39 http://www.romatica.com/dev/samples/alternativa3d/mario_collada/index.html

Slide 40

Slide 40 text

Raw Stage3D 40 It’s very complex and time consuming!

Slide 41

Slide 41 text

Stage3D libraries Case Study: Starling Framework 41

Slide 42

Slide 42 text

Suggestion Ÿ  Use frameworks to help you with Stage3D, such as: 42

Slide 43

Slide 43 text

Raw Stage3D vs Framework 43 Ÿ  Task: Creating a simple texture in Stage3D

Slide 44

Slide 44 text

Stage3D implementation 44 // create the vertices var vertices:Vector. = Vector.([ -0.5,-0.5,0, 0, 0, // x, y, z, u, v -0.5, 0.5, 0, 0, 1, 0.5, 0.5, 0, 1, 1, 0.5, -0.5, 0, 1, 0]); // create the buffer to upload the vertices var vertexbuffer:VertexBuffer3D = context3D.createVertexBuffer(4, 5); // upload the vertices vertexbuffer.uploadFromVector(vertices, 0, 4); // create the buffer to upload the indices var indexbuffer:IndexBuffer3D = context3D.createIndexBuffer(6); // upload the indices indexbuffer.uploadFromVector (Vector.([0, 1, 2, 2, 3, 0]), 0, 6); // create the bitmap texture var bitmap:Bitmap = new TextureBitmap(); // create the texture bitmap to upload the bitmap var texture:Texture = context3D.createTexture(bitmap.bitmapData.width, bitmap.bitmapData.height, Context3DTextureFormat.BGRA, false); // upload the bitmap texture.uploadFromBitmapData(bitmap.bitmapData); // create the mini assembler var vertexShaderAssembler :AGALMiniAssembler = new AGALMiniAssembler(); // assemble the vertex shader vertexShaderAssembler.assemble( Context3DProgramType.VERTEX, "m44 op, va0, vc0\n" + // pos to clipspace "mov v0, va1" // copy uv );     var fragmentShaderAssembler :AGALMiniAssembler = new AGALMiniAssembler(); // assemble the fragment shader fragmentShaderAssembler.assemble( Context3DProgramType.FRAGMENT, "tex ft1, v0, fs0 <2d,linear, nomip>;\n" + "mov oc, ft1" ); // create the shader program var program:Program3D = context3D.createProgram(); // upload the vertex and fragment shaders program.upload( vertexShaderAssembler.agalcode, fragmentShaderAssembler.agalcode); // clear the buffer context3D.clear ( 1, 1, 1, 1 ); // set the vertex buffer context3D.setVertexBufferAt(0, vertexbuffer, 0, Context3DVertexBufferFormat.FLOAT_3); context3D.setVertexBufferAt(1, vertexbuffer, 3, Context3DVertexBufferFormat.FLOAT_2); // set the texture context3D.setTextureAt( 0, texture ); // set the shaders program context3D.setProgram( program ); // create a 3D matrix var m:Matrix3D = new Matrix3D(); // apply rotation to the matrix to rotate vertices along the Z axis m.appendRotation(getTimer()/50, Vector3D.Z_AXIS); // set the program constants (matrix here) context3D.setProgramConstantsFromMatrix(Context3DProgramType.VERTEX, 0, m, true); // draw the triangles context3D.drawTriangles(indexbuffer); // present the pixels to the screen context3D.present();  

Slide 45

Slide 45 text

Starling implementation // create a Texture object out of an embedded bitmap var _texture:Texture = Texture.fromBitmap ( new EmbeddedBitmap() ); // create an Image object our of the Texture var _image:Image = new Image(_texture); // set the properties _image.pivotX = 50; _image.pivotY = 50; _image.x = 300; _image.y = 150; _image.rotation = Math.PI/4; // display it addChild(_image);   45

Slide 46

Slide 46 text

Working with Starling Ÿ  The Starling framework implements common APIs found in Flash: „  Sprite, Image, Text, Button, MovieClip „  familiar event model „  support for particles effects „  open source (so anyone can add to it) 46 http://gamua.com/starling

Slide 47

Slide 47 text

Sample : Hungry Hero 47 FlashBuilder Hungry Hero

Slide 48

Slide 48 text

Setting up your environment Flash Builder or FDT 48

Slide 49

Slide 49 text

1. Visit Developer Site http://developer.blackberry.com/air 49

Slide 50

Slide 50 text

2. Download the SDK http://developer.blackberry.com/air/download 50

Slide 51

Slide 51 text

3. Using Flash Builder or FDT? Download and Install the PLUGIN http://developer.blackberry.com/air/documentation/install_bb10sdk_air_update_site.html 51

Slide 52

Slide 52 text

4. Download AIR SDK 3.5 Runtime 3.5 (Windows) http://download.macromedia.com/air/win/download/3.5/AdobeAIRInstaller.exe Runtime 3.5 (Mac) http://download.macromedia.com/air/mac/download/3.5/AdobeAIR.dmg SDK 3.5 (Windows) http://download.macromedia.com/air/win/download/3.5/AIRSDK_Compiler.zip SDK 3.5 (Mac) http://download.macromedia.com/air/mac/download/3.5/AIRSDK_Compiler.tbz2 Merge AIR SDK: http://fdt.powerflasher.com/docs/AIR_SDK_Merging 52

Slide 53

Slide 53 text

Creating/Testing your first AIR 3.5 mobile project for BlackBerry 10 53

Slide 54

Slide 54 text

Demo http://developer.blackberry.com/air/documentation/create_first_app.html package { import flash.display.Sprite; import flash.display.StageAlign; import flash.display.StageScaleMode; import qnx.fuse.ui.text.Label; [SWF(height="1280", width="768", frameRate="60", backgroundColor="#FFFFFF")] public class AIRHelloWorld extends Sprite { public function AIRHelloWorld() { // support autoOrients stage.align = StageAlign.TOP_LEFT; stage.scaleMode = StageScaleMode.NO_SCALE; //Initialize the UI initializeUI(); } private function initializeUI():void { // create a label var myLabel:Label = new Label(); // Define a label width myLabel.width = 200; // set the label to appear at the center of the // screen myLabel.x = (stage.stageWidth - myLabel.width) /2; myLabel.y = 54 FDT Hello World

Slide 55

Slide 55 text

Demo Adobe Gaming SDK 55

Slide 56

Slide 56 text

Demo: Adobe Gaming SDK 56 http://gaming.adobe.com/technologies/gamingsdk

Slide 57

Slide 57 text

Bonus: The BlackBerry 10 Experience App Framework for Adobe AIR 57

Slide 58

Slide 58 text

Download Samples https://github.com/blackberry/Samples-for-AIR/tree/master/appframework 58 List with context menu Tabbed Navigation Sample Navigation Drill Down Simple To Do app FDT

Slide 59

Slide 59 text

Bonus: Creating BAR files from SWFs (GAP for AIR) 59

Slide 60

Slide 60 text

The SWF + Required Files 60

Slide 61

Slide 61 text

Descriptor File 61

Slide 62

Slide 62 text

Screen Sizes 62

Slide 63

Slide 63 text

Vendor Portal 63

Slide 64

Slide 64 text

Demo 64 GAP for AIR

Slide 65

Slide 65 text

Download GAP for AIR 65 GAP for AIR http://dborba.com/download/gapforairmac.zip http://dborba.com/download/gapforairwin.zip How to use GAP for AIR: http://dborba.com

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

A P P ?

Slide 68

Slide 68 text

Your BlackBerry 10 app can 68 • Bluetooth 4.0 • Wifi • NFC • USB • HDMI • DLNA • Triggers SENSE UNDERSTAND ADAPT • BBM • Files • Screen • Video • Game GPS Accelerometer Altimeter Gyroscope Camera Screens Keyboard Cascades UI Framework My Location Geofence Places Map Automotive Hub Contacts Calendar Notifications UI Outputs based on Sensor Inputs and User Preferences CONNECT SHARE

Slide 69

Slide 69 text

D O I T

Slide 70

Slide 70 text

Suggestions Ÿ  Find a real world problem Ÿ  Never bring TECHNOLOGY before the PROBLEM Ÿ  Analyze the current solutions Ÿ  Validate your idea Ÿ  Build your MVP (Minimum Viable Product) Ÿ  Sense, understand and adapt 70

Slide 71

Slide 71 text

You can make it better 71

Slide 72

Slide 72 text

72 W H A T A R E Y O U W A I T I N G F O R ?

Slide 73

Slide 73 text

Thank you. JAM852 : Adobe AIR 3.5 Overview Demian Borba @demianborba September 26-27, 2013