I’ll be upfront regarding this: my biggest weakness on this two-year journey will be coding. It has always been my weakness and presents my biggest hurdle, so here goes with the basics from the first lesson.
To give a general understanding that code needs structure and to be written in a particular order, the assignment was to generate a scene in Adobe Animate using nothing but code. This uses basic procedural generation rather than using art assets.
Here is the finished product:
Here is an example of the code which I’ll talk through in a moment:
Earlier I mentioned writing your code in a certain order. In this instance, it’s simply which graphics get drawn on top of which. So for this scene we have to start with the graphic representing the sky, since everything else in the scene will be drawn on top of that. Clouds go on top of the sky, trees drawn on top of the ground, etc.
graphics.drawRect(0, 0, 550, 400)
This is the code for the sky and it breaks down like this:
- graphics.beginFill(0x0066CC) – Begins a graphic which will be filled using the hexidecimal colour value of 0066CC.
- graphics.drawRect(0, 0, 550, 400) – Not going to lie, took me a while to fully figure this out. The first part is easy enough: graphics.drawRect begins to draw a graphic which has been designated as a rectangle. The first two values in the bracket (0, 0) sets where the graphic will begin being drawn on the canvas. The values relate to pixels on the canvas (WxH). In this case it begins top left. The two remaining numbers (550, 400) are the size in pixels of the graphic you wish to draw. The canvas size was 550×400, so this graphic will take up the full size of the canvas to create a sky.
Drawing the circles takes a similar approach:
- graphics.beginFill(0xFFFF00) – Same as before.
- graphics.drawCircle(475, 75, 75) – First two values work the same and designate where on the canvas the graphic will be drawn. The third value is now the radius of the circle in pixels.
Using this same code with multiple changes you can build the entire scene as shown above, constantly laying graphics over existing graphics.
Also the code contains comments denoted by //text, which allowed me to add comments within the code so I could keep track of what each section referred to. It gets ignored when the code gets compiled.