Developing 2D Games with Stage3D
Jun 15, 2015
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/