Embed Size (px)
DESCRIPTION
This deck covers the basic setup of Stage3D and how you can leverage it for 2D game development (specifically using the Starling framework).
Citation preview
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/
