Graphics Reference
In-Depth Information
7.5.5 Game Logic
The actual game logic, which includes the hotspot interactions, is done in two
steps in one action with the
compositionReady
event, which is fired once at
the start of the composition. In the first step, we select all the previously created
hotspots of our scene. We first query a list of all our composition's symbols via
the
sym.getComposition().getSymbols()
action. We run through the
list with a simple each loop, during which we check each symbol for the CSS
“.hotspot” class. We store all detected
hotspots
in the hotspots array so that we
can access it at any time in order to calculate any collisions.
.
jQuery Collision
The jQuery Collision plug-in (http://
sourceforge.net/projects/jquery-
collision) is recommended for more
complex collision queries. This
plug-in provides detailed informati-
on on the overlap of two elements,
which can be addressed via CSS
selectors. The value returned by the
plug-in's
collision()
function
returns a so-called overlap object
that provides additional information,
such as the direction. In game envi-
ronments, the direction often plays
an important role in the collision
between two objects.
The second step is a little more complex. Here the actual collisions between
the character and the hotspots are calculated and evaluated. In case of a col-
lision with an obstacle, the animation, along with the character's movement,
must be immediately stopped so that the character never moves through an
object. Through actions, the character can simply walk through something.
However, the animation of each action is played so that, for example, hidden
messages can appear. To implement this behavior, first load the jQuery library
“jQuery Collision” via the
yepnope()
function (1). Once it is fully loaded, the
callback is executed, which prompts the cyclical call of a function through
setInterval()
. In this interval, we can listen for possible collisions. Within the
interval, we select the player symbol and the previously identified hotspot from
(2). In (3), we now use the
collision()
function provided by the plug-in to
determine with which hotspots (if any) the character is currently interacting. The
hits
variable now includes an array with the affected hotspots. We iterate this
array in (4) with an
each
loop, in which we check what type of hotspots are in-
volved (5). If the type is an action (6), we note this in an array in order to activate
it further down or deactivate it through a play reverse when leaving the hotspot.
