Adobe AIR + Starling + rasterizing vector graphics

Some time has passed since I started making games for iOS and Android on Adobe AIR. Today I want to share a way to create games for different screen resolutions - I successfully apply this approach in my projects.



As you know, there are several ways to prepare game graphics for different screen resolutions:

Use multiple packs with graphics.

The most popular approach to the formation of game graphics. Allows for each permission to work out their own schedule. For example, on small screens, the elaboration and detailing of various elements is reduced to a minimum, and some details are completely omitted. But, such a set weighs quite a lot, and not at all resolutions, after texture scaling, it looks good. After the appearance of retina displays with brutal screen resolutions, the developers had to add one more to the already existing three texture packs.

')

Draw pixel art

Allows you to use in the game pack of atlases with small textures for only one resolution of the screen, which can be mated to any size. The square is square. At least on sd, at least on xxxhd pixel art will look like pixel art. Plus pixel art is relatively easy to draw.

Vector graphics

Allows you to use in the game one pack of atlases for the current screen resolution, weighs almost nothing, stretches to any resolution without loss of quality, looks very good and is quite simply drawn. This is what I wanted.



But not everything is so simple. The fact is that all vector graphics are processed on the CPU, which means the game with such graphics on the phone is doomed to brake, and you don’t run away much (there are few objects on the screen and they should be simple without too much detail). Although the first version of my game City 2048 was just that, and surprisingly worked quite well for me, gave out 25-40 fps. When launching the test version of the game, I expected the phone to freeze right in my hands and melt from this, but no. I can also say that another one of my games, Dots Tails, is still working using vector graphics, for good reason.



To increase performance, it is necessary to draw all the game graphics on the GPU, for this we will use Stage3D and Starling. It turns out that of the individual vector elements, you need to make raster sprititshite right size in the process of the application. We will talk about how to implement this.



Before use, vector graphics must be stretched to the desired size, decomposed into an atlas and baked. For these purposes, I used a slightly modified class from Emiliano Angelini "Dynamic Texture Atlas and Bitmap Font Generator" , leaving him only to create a simple texture atlas without animations.



The principle of operation is as follows:



1. Draw art for playing in Adobe Flash Pro (or any other vector editor and transfer to Flash Pro)







2. Create a sprite that will contain graphic elements, make it available for AS. It is from him that we will make sprites.







3. We stuff the graphics we need into this sprite. I tried to place the elements so that they fit in size 512x512. This is necessary, since at the scale the size of the atlas should not be more than 4k. For the design of the layout, I always use the size of 600x800, so the drawn and assembled elements look good and do not crawl over the size of 2k. The same graphic elements should be arranged by subject, for example, in my games, the GUI layer lies above the game graphics, so I make two separate atlas with GUI and with game elements + if in a game there are several visually different levels, then it’s better to scatter these elements on different atlases. This will help reduce the number of drawlins.







4. We do not forget to assign a name to each element in the atlas.







5. Export .swc with resources and connect it to the project.







6. Getting to the software part. To begin with, we calculate the skele, on which we will pull resources:

//    ,   iPad2 var _stageWidth:Number = 768; var _stageHeight:Number = 1024; //  - var defaultScreenWidth:Number = 600; var defaultScreenHeight:Number = 800; //     ,     .     _scaleX = _stageWidth / defaultScreenWidth; _scaleY = _stageHeight / defaultScreenHeight; _minScale = Math.min(_scaleX, _scaleY); 

7. Add the TextureManager.as class to the project and write atlas names from SWC in it





A little more about what happens in the createAtlas method:



7.1. Each element in the atlas from SWC is a scale, save the coordinates for PivotPoint, draw in Bitmap and add to the canvas container.



7.2. We arrange the elements in the canvas container one after another, so that they fit into the desired size of the atlas



" 7.3. Canvas container draw in BitmapData and .XML gene



» 7.4. From the received BitmapData and .XML create a high-ranking TextureAtlas



7.5. The resulting atlas is added to the container textureAtlases



8. At the start of the game we create atlases for starling

 TextureManager.createAtlases(); 

9. Add the sprite we need to the scene

 var tileView:starling.display.Sprite = TextureManager.getSprite("rotateView"); this.addChild(tileView); 

What we get in the end? Beautiful graphics, which weighs almost nothing, stretches to an arbitrarily large screen size without loss of quality. At the same time the game works at a stable 60fps. Well, for me personally, another plus is that in a vector it is enough just to draw, even though I am not an artist, but I can do something in a vector.







I use rasterization of vector graphics in my games City 2048, Quadtris and Placid Place. Which can be found in the Apple App Store and Google Play, if you are interested to see this approach in action. Unfortunately, direct links to applications can not be left.



That's all. Thanks for attention.