Making and Animating Graphics - Beginning HTML5 Games with CreateJS - page 22

Along with utilizing this tiny API, Drawscript uses the decodePath API also included in Graphics . This
dramatically shortens and encodes the code needed for drawing paths. The following example shows the code
generated by the anchor shape in Illustrator:
p("AGaVuIR+AAIAAx+Ix+AAIAAR+").p().f("rgba(35,64,232,254)").p("AYYS6YAABkhaBQhkAAIsMAAYhkAAhQhQ
AAhkIAAsWYAAhkBQhQBkAAIMMAAYBkAABaBQAABkIAAMW").cp().ef().f("rgba(255,255,255,254)").p("AOsLuIiM
AAIAAhQICMAAIAAAAIAAgoYg8gUgyg8AAhGYAAhaBGhGBQAAYBaAABGBGAABaYAABGgyA8hGAUIAAAoIAAAAICWAAIAABQIi
WAAIAAAAIAAG4YAAAADmgUBki0Ig8goIC0hkIAKDSIg8geYAAAAhQDwloAAYloAAhQkOAAAAIg8AeIAei+ICgBQIg8AoYAAA
ABaDSDwAUIAAm4IAAAA").cp().ef().f("rgba(35,64,232,254)").p("AQuHgYAAAogoAogyAAYgoAAgogoAAgoYAAgy
AogeAoAAYAyAAAoAeAAAy").cp().ef();
The generated code begins a series of chained methods, which are intended to be called from a Graphics object.
You then pass that along to a Shape object and add it to the stage as you would with any other graphics example that
you've learned so far. Figure 2-6 shows the image after its been exported.
var g = new createjs.Graphics();
g.p("AGaVuIR+AAIAAx+Ix+AAIAAR+").cp().f..........ef();
var s = new createjs.Shape(g);
stage.addChild(s);
Figure 2-6. Anchor shape drawn in Illustrator and exported via Drawscript
The result is a vector shape, completely drawn with code. Because of this, you can scale and manipulate this
shape in many ways without pixelating it. Although this approach can be useful in some situations, the overuse of
vector shapes can be extremely taxing for your processor. Bitmap graphics, which will be fully explored in Chapter 5,
are the preferred format for complex graphics in most gaming environments. Be sure to weigh your options when
deciding on the graphics format for your game or application.
Animating Shapes
You've now successfully drawn and added shapes to the stage, but shapes that just sit there are no fun. This is a games
book, after all. As with the Bitmap example in the previous chapter, you can use the same tweening methods to a
shape because it too is a display object. Let's tween a square by rotating it 360 degrees (see Listing 2-3). The rotating
shape is shown in Figure 2-7 .