Developing 2D Games with

Stage3D

WHO AM I?

Mike JonesGaming Evangelist

blog.flashgen.com@FlashGen

GAMING EVANGELISM TEAM

Enrique Duvos@eduvos

Mike Jones@FlashGen

Tom Krcha@tomkrcha

Lee Brimelow@leebrimelow

OVERVIEW OF STAGE3D

Stage3D is a set of low-level, GPU-accelerated 3D APIs for the Flash Player.

• Cross platform secure access to the GPU

• Based on OpenGL ES 2 capabilities

• Can be used for 3D

• And 2D (of course)

• Relies on DirectX 9, OpenGL 1.3 and OpenGL ES 2

FLASH PLAYER INTEGRATION

DEVELOPING 2D GAMES

What are your options?

• Work with Stage3D directly

• Use a 3D framework

• Or a 2D framework

DEVELOPING 2D GAMES

A better approach is to look at a dedicated 2D framework, as they are focused and optimized for 2D game development

• Current frameworks include:

• nd2d• ReMX• Red2D• Starling

GETTING STARTED WITH STARLING

WORKING WITH STARLING

The Starling framework implements common APIs found within Flash:

• Sprite, Image, Text, Button, MovieClip

• familiar event model

• support for particles effects

• open source (so anyone can add to it)

CREATING A SIMPLE TEXTURE

STAGE3D IMPLEMENTATION

// create the verticesvar vertices:Vector.<Number> = Vector.<Number>([-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 verticesvar vertexbuffer:VertexBuffer3D = context3D.createVertexBuffer(4, 5);// upload the verticesvertexbuffer.uploadFromVector(vertices, 0, 4);// create the buffer to upload the indicesvar indexbuffer:IndexBuffer3D = context3D.createIndexBuffer(6);// upload the indicesindexbuffer.uploadFromVector (Vector.<uint>([0, 1, 2, 2, 3, 0]), 0, 6);// create the bitmap texturevar bitmap:Bitmap = new TextureBitmap();// create the texture bitmap to upload the bitmapvar texture:Texture = context3D.createTexture(bitmap.bitmapData.width,bitmap.bitmapData.height, Context3DTextureFormat.BGRA, false);// upload the bitmaptexture.uploadFromBitmapData(bitmap.bitmapData);// create the mini assemblervar vertexShaderAssembler :AGALMiniAssembler = new AGALMiniAssembler();// assemble the vertex shadervertexShaderAssembler.assemble( Context3DProgramType.VERTEX,"m44 op, va0, vc0\n" + // pos to clipspace"mov v0, va1" // copy uv);

STAGE3D IMPLEMENTATION

var fragmentShaderAssembler :AGALMiniAssembler = new AGALMiniAssembler();// assemble the fragment shaderfragmentShaderAssembler.assemble( Context3DProgramType.FRAGMENT,"tex ft1, v0, fs0 <2d,linear, nomip>;\n" +"mov oc, ft1");// create the shader programvar program:Program3D = context3D.createProgram();// upload the vertex and fragment shadersprogram.upload( vertexShaderAssembler.agalcode, fragmentShaderAssembler.agalcode);// clear the buffercontext3D.clear ( 1, 1, 1, 1 );// set the vertex buffercontext3D.setVertexBufferAt(0, vertexbuffer, 0, Context3DVertexBufferFormat.FLOAT_3);context3D.setVertexBufferAt(1, vertexbuffer, 3, Context3DVertexBufferFormat.FLOAT_2);// set the texturecontext3D.setTextureAt( 0, texture );// set the shaders programcontext3D.setProgram( program );// create a 3D matrixvar m:Matrix3D = new Matrix3D();// apply rotation to the matrix to rotate vertices along the Z axism.appendRotation(getTimer()/50, Vector3D.Z_AXIS);// set the program constants (matrix here)context3D.setProgramConstantsFromMatrix(Context3DProgramType.VERTEX, 0, m, true);// draw the trianglescontext3D.drawTriangles(indexbuffer);// present the pixels to the screencontext3D.present();

STARLING IMPLEMENTATION

// create a Texture object out of an embedded bitmapvar _texture:Texture = Texture.fromBitmap ( new EmbeddedBitmap() );

// create an Image object our of the Texturevar _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 itaddChild(_image);

ANIMATING SPRITES

ANIMATING SPRITES

DEMO TIME

ADDITIONAL RESOURCES

Starling Frameworkhttp://starling-framework.org

Particle Designer (Starling Web App)http://onebyonedesign.com/flash/particleeditor/

Texture Packer (WIN + OS X)http://www.texturepacker.com/

Particle Designer (OS X Only)http://particledesigner.71squared.com/

Glyph Designer (OS X Only)http://glyphdesigner.71squared.com/

Mike JonesGaming Evangelistblog.flashgen.com@FlashGenmike.jones@adobe.com

THANK YOU

http://gaming.adobe.com