Saturday, February 24, 2018

Games are
not movies. Movies are linear with no interaction. Games may have a linear
story, though often that is not the case, but they have interaction.
Interaction means that the application will behave differently based on what
the user is doing. The best example of this would be the user clicking on a
button. The Animate movie has no idea when the user is going to click on the
button. Likewise, if there is more than one button, the animate app is going to
need to know what to do based on what button is pressed. To deal with this, we
need a scripting language.

A scripting
language is just a programming language that is was created specifically for
handling domain specific activities. In other words, scripting languages tend
to be specialized. Often, a simple scripting language grows over time and you
will end up with what could be a full-blown programming language if only it
didn’t require the application it was attached to. This is pretty much the case
with JavaScript.

JavaScript
is loosely based on the Java language, which itself is based on the C++
language which is an object-oriented version of the C language. In other words,
understanding JavaScript will make it easier to learn real programming
languages like Java or C++. One of the (many) downside to JavaScript is that it
is slow because it was designed as an interpreted language. Explaining the
difference between compiled, virtual machine, and interpreted languages is a
bit beyond this book but essentially computers only know their specific machine
language (which depends on the processor being used). Compiled languages, such
as C++, convert their source code into machine language. Virtual machine
languages, such as Java, compile into an intermittent machine language which
then gets converted into the machine language of whichever machine is running
the code. Interpreted languages convert the script into machine language as it
is being run.

The
scripting language itself is not enough for Animate, it also has a library of
functions that are used to actually do the work. Originally Flash used a
JavaScript variant called ActionScript which was JavaScript but with proper
types and classes. The scripting language had a library of classes for
manipulating movie clips and other aspects of the animation. When HTML5 started
appearing, several Flash-like libraries started appearing for JavaScript. One
of the more popular ones was Create.js. Adobe decided to migrate to Create.js
instead of writing their own JavaScript library so when you are using an HTML5
canvas in Animate, you are creating a Create.js JavaScript application.

Create.js
is actually a collection of four different libraries. These libraries can be
used individually, but tend to be grouped together. As Animate generates a lot
of the code for you, the bulk of the code that will need to be written is game
logic code with direct manipulation of the Create.js very rare and often only
to adjust already existing objects.

Easel.js is
the heart of Create.js. This is the stage that the animation occurs on. The
library tracks sprites and movie clips and is able to take the scene graph that
results from the position of these objects and is able to draw a frame on the
HTML5 Canvas. The HTML5 canvas is a special API for drawing things in
JavaScript but is only for 2D images. There is an extension to this canvas
called WebGL which lets the canvas take advantage of accelerated 3D graphics. An
experimental version of Stage.js using WebGL is available and is distinguished
from Stage.js by being named Stage.gl. I may cover StageGL in a future book.

Tween.js
handles the animation aspects of the program. As explained earlier, tweening is
simply changing an aspect of an object over time so it is possible to use
Tween.js for non-animation related aspects of a program.

Sound.js
handles the sounds that a program makes. JavaScript sound handling is a mess so
having a simple API for getting sounds to play is nice. The downside to this
API is that the sounds need to be loaded before they can be played. This is the
reason the final API in the Create.js suite exists.

Preload.js
is an asset preloader. This simply means that you give it a list of assets that
you want your program to use and it will load them in. The preloader generates
events to let your program know when it has loaded assets so you can even create
a fancy loading screen if you wish.

We will
cover the Create.js API as we need to, with my follow-up book going into much
greater detail. As games require interaction to be playable and interaction
requires some code to handle it, we are going to have to at least learn the
basics of JavaScript. Still, in many cases you can get away with a minimal
amount of simple JavaScript if the game is not too involved and by the end of
this book you will have a good grasp of what games will require the most code
and can pick your projects accordingly.

Saturday, February 17, 2018

Animate
uses a layer based keyframe animation system. For people who are not familiar
with the creation of animation, this sounds complicated. It is a very quick and
effective way of creating animation as the animator is just setting up
guidelines for the computer to generate the majority of the frames.

A keyframe
is essentially a frame of the movie. Within the frame you place objects where
you want them to be. Every time you want to change the contents of the frame
you create a new keyframe. This by itself is not that powerful. Where the
power comes from is with tweening. Tweening is a method where you let the
computer animate the object for you. The word tweening is a concatenation of
the term “inbetweening” which is where the lead animator would draw the key
frames and junior animators would draw all the frames between the keyframes.
Animate has two types of tweening. Motion Tweening and shape tweening.

Motion tweening
moves an object from the location it is on the starting keyframe to the
location it is when it is on the ending frame. You can also apply rotation to
the object that is moving. While technically not motion, you can also adjust
any color adjustments (such as the alpha level) and the adjustment will
smoothly transition between the frames. As objects in nature don’t move at
steady rates, you can use leading to have the object start the motion at a
faster rate and slow down as it approaches the end keyframe or have it start
slow and speed up as it reaches the keyframe. The image below illustrates the
difference between the three types of tweening.

For even
more advanced animation effects, you can have guides. Guides let you specify
the path that a moving object will follow. You can have the object follow the
path while maintaining the same orientation or you can have the object orient
itself to the path. My April Fool series of games has a title sequence where
each letter has a winding path to it’s ultimate location. The screenshot below
illustrates the different paths that the letters follow to reach their final
location.

Shape
tweening is a bit complicated. Shape tweening is when you have one shape and it
transforms itself into the second shape. This is easy to do, but hard to do
well. You simply need two shapes, a starting shape on the start keyframe, and
an ending shape on its ending keyframe. To make sure the shape morphs the way
you want, you add key points to the shapes. These points help Animate determine
where the lines and points that make up the shape should line up after the end
of the tween. Here is an example of a square turning into a star with the red shapes being the onion skin outlines of the frames between the square and the star.

An Animate
movie consists of one or more layers. Layers go from back to front with closer
layers overlapping further layers. Every layer is independent of the other
layers. In other words, you can have keyframes in one layer but not any of the
other layers. Animate lets you define as many layers as you need and lets you
group the layers into folders. It is advisable to keep each animated object on
its own layer as not doing so will result in animate creating a separate tween
object in the library which often leads to problems.

The
animation system is the primary reason why you would choose to create a game in
Animate instead of creating it from scratch using the free Create.js libraries.
While everything listed above can be done manually in Create.js, having a tool
that generates all the source code for you is nice. If your game is a very
heavy animation-oriented project, then using Animate makes sense.

Using animate to create the animations for a
game project but then doing that project manually using Create.js or some other
library (or even another language) can also be a consideration. In a team
environment, this approach can be very cost effective as you would only need
creative cloud for your art team while the development team can have other
development tools.

Saturday, February 10, 2018

Animate
revolves around symbols. Symbols are a very efficient way of building movies,
as a symbol only needs to be loaded once. After it has been loaded, you can
create as many copies - known as instances - as you want to. More importantly,
every instance of a symbol can have properties independently applied to it. You
can adjust the size, orientation, and skew. You can also apply tinting, control
the brightness, adjust the alpha (transparency) level. There are three basic
types of symbols that Animate uses. The Graphic symbol, the Movie symbol and
the Button symbol.

Graphic
symbols are just a drawing converted into a symbol. The drawing can be as
simple or complex as you desire, and can even contain other symbols as part of
it. These tend to be vector based, but it is possible to use bitmaps for
graphics. Flash used a very compact binary format for vector images making them
take significantly less space than bitmaps in many cases. Animates’ HTML5
exporting converts these vectors into Create.js shapes which take up
significantly more space, especially if you are not letting Animate compress
the images.

A movie
symbol is essentially a movie within the main movie. You have as much control
over an Animate movie symbol as you do over the resulting movie. You are not
limited to having a single level of movie clip as movie symbols can contain
other movies as part of them, which can contain movie symbols within them which
can contain movie symbols within them and so on. While this recursive nature of
movie clips adds a lot of flexibility to creating animations, movie clip
objects are fairly heavy in memory and processing requirements so having too
many nested movie clips can slow things down substantially.

A Button is
simply a special symbol that has special actions associated with it whenever
the mouse is over it or the mouse has been clicked while over it. To be more
precise, a button has 4 frames associated with it. The up frame is simply the
normal appearance of the button. The over frame is how the button looks when the
mouse is over it. The down frame is what the button looks like when the mouse
is over it and the mouse button has been pressed. Finally, the hit frame
defines the over/hit areas.

The hit
frame may seem confusing to people new to Animate. This frame is not actually
seen by the viewer, but is instead used by Animate. How it works is any area in
the hit frame that is solid will react to the mouse being over it while an area
that is not solid will be ignored. While touch users will not get the mouse
over effect, the hit area is used for determining if a touch results in a down
event.

Some of you
may be wondering why you would want or need such a thing? Couldn't you just use
the existing button image? The answer to that is you could, but then the button
would only work if the user had his or her mouse positioned in a solid part of
the image. In some cases, such as with our Play the Game button, we want the
button to react if the mouse is within a block or an area that covers more than
the frames cover. Conversely, you may not want a rectangular region or even the
entire button to be clickable. The hit mask gives you total control over where
the button can be clicked.

As an
example, here is a button that I use for switching a sound from enabled to
disabled. The top right image is the normal image and is what the user will see
normally. The top-middle image is what will be shown to mouse users who move
the mouse pointer over the image. The top-right image is what is shown when the
button is clicked or touched. Finally, the bottom image is the hit map that is
used for determining if the mouse is over the image.

Symbols can
be created in animate simply by drawing something and then selecting the
drawing and choosing the “convert to symbol” option from the right-click menu
or the modify menu from the menu bar. Creating a symbol adds it to the library.
Empty symbols can also be created from within the library, though personally
this is not something I do. The library is a file-folder structure allowing you
to easily arrange your symbols to make finding and working with them much more
efficient. This is especially true when you get to larger projects that contain
hundreds or thousands of objects.

Libraries
also have the benefit of being sharable between projects. Animate makes it easy
to move symbols between different libraries allowing you to create a standard
set of library symbols that can be copied between libraries. There are also
built in tools for converting a selection of library symbols into image atlases
or stand alone files which can come in handy for environments where animators
create assets in animate then hand them off to developers who are using pure
JavaScript (or other language for non-HTML projects) for creating the
application.

Saturday, February 3, 2018

Animate, as
mentioned earlier, is a vector based drawing and animation tool. All drawing in
Animate is built around shapes. Shapes are made up of a series of connected
lines and curves. You create the shapes by using basic building blocks such as
lines, rectangles and ovals. You also have text, which can be treated as text
or converted into a shape so that you can modify the shape. By breaking apart
text twice you are given the vector shape of each character and can then use
the arrow manipulation tools to alter the letters which can be great for
creating title text quickly.

Shapes can
have an outline and a fill, or can be just one of the two. The outline has a
color, a thickness, and a pattern associated with it. One of the most unique
thicknesses is the hairline. This is a special thickness as it will always be
drawn as thinly as possible.

The fill of
a shape can be a solid color, a gradient, or a bitmap fill. Gradients are a
series of colors that gradually change from one color to the next color in the
series. You may have as many colors in a series as you desire and can vary
where in the gradient range the colors will change. Gradients can be linear or
radial and the orientation, scale, and center spot can be adjusted. A bitmap
fill is a bitmap image that is used to fill the shape. Bitmap fills are tiled,
though you can adjust the orientation, scale, skew, and center spot.

For more
complex shapes you can use a pencil tool. The pencil tool takes whatever shape
you draw and turns it into a series of lines and curves. You can control how
close to what you draw the pencil will be, with the more accurate the representation,
the more anchor points in the object. The pencil tool is supposed to be
intelligent, so it will try to figure out the shape you are drawing picking the
most appropriate approximation it can come up with. The pen tool is just like
the pencil tool except instead of lines it deals with fills.

The
fountain pen tool lets you build a spline shape. The mathematics and techniques
behind splines are interesting but way beyond this book so I will try to
explain in simplified terms. A shape is made up of several points that define
the basic shape. These points are connected via lines which can each be edited
separately. For shapes made of straight lines this is fine, but for curved
shapes, splines are used. Each line has additional points (weights) that
control how much the line curves between two points. Curves can be controlled
by adjusting the weight points for that line segment. You can adjust these
points by using the sub-selection tool which looks like a white pointer. While editing a shape this way can be painful,
it gives you extreme control of the resulting shape.

The basic drawing tools within Animate are
enough to do quite a bit and may be all that an artist needs. If better tools
are needed, a vector package like Illustrator can be used. It is even possible
to import a bitmap image and use a tracing tool that will convert the image
into a vector shape.

About Me

I am a programmer who can program in a large variety of programming
languages (including some Assembly Language) but am currently focused
on interactive web development which means my current focus is on Flash
and JavaScript. When I am not programming for clients, I am working on my
game site.