||images:Images|| are used to represent many things on screen in Arcade -
||scene:backgrounds||, ||sprites:Sprites||, many other elements of the games.
A number of complex behaviors can be handled easily using ||arrays:arrays|| of
||images:Images||, allowing for games with a larger variety of content for
the person playing to experience.
Animations in games are represented as a series of different images that get shown in a sequence.
Using ||arrays:arrays||, these ||images:images|| can be stored in
a single location and referenced much more easily than they could be using
individual variables.
||images:Image|| array is created||loops:for|| loop is used to iterate through the
different ||images:images|| of the ||sprites:ducks||let characterImages: Image[] = [
sprites.duck.duck1,
sprites.duck.duck2,
sprites.duck.duck3,
sprites.duck.duck4,
sprites.duck.duck5,
sprites.duck.duck6
];
let duck: Sprite = sprites.create(characterImages[0], SpriteKind.Player);
for (let index = 0; index < characterImages.length; index++) {
pause(150);
duck.setImage(characterImages[index]);
}||variables:characterImages||||loops:for|| loop that causes the current ||loops:for||
loop to repeat 20 times, so that the animation will continue to repeatCreating an animation using arrays is useful, but does lead to some issues. For example, what if the intention is to run it in the background, forever?
One approach would be to use the ||game:on update interval|| event.
Using this with the previous example might look like the snippet below.
let count = 0;
game.onUpdateInterval(150, function () {
duck.setImage(characterImages[count]);
count++;
});However, this won’t quite work; after the last index in the array, the code will crash,
because you will be trying to refer to an ||images:image|| that doesn’t exist.
This could be handled using ||logic:logic|| to reset the value when it gets too high.
let count = 0;
game.onUpdateInterval(150, function () {
duck.setImage(characterImages[count]);
count++;
if (count == characterImages.length) {
count = 0;
}
});The remainder operator, %, can be used to handle this case more appropriately.
This operator is used to signify the remainder of integer division between two numbers:
that is, 5 % 3 is equal to 2, because 5 goes into 3 one time, with two remaining.
||variables:count|| is used%) operator is used to refer to a value
within the ||images:image|| ||arrays:array||let characterImages: Image[] = [
sprites.duck.duck1,
sprites.duck.duck2,
sprites.duck.duck3,
sprites.duck.duck4,
sprites.duck.duck5,
sprites.duck.duck6
];
let duck: Sprite = sprites.create(characterImages[0], SpriteKind.Player);
let count: number = 0;
game.onUpdateInterval(150, function () {
duck.setImage(characterImages[count % characterImages.length]);
count++;
});||loops:for|| loops with the ||game:on update interval||
event with a ||variables:counter|| as shown in example #2 to make the
animation run indefinitely||controller:move|| with the directional buttonsIn games, ||sprites:sprites|| will often need to be created a large number of times,
to represent ||sprites:enemies||, ||sprites:collectible items||, or anything else.
To make the games more visually appealing, these ||sprites:Sprites||
can be given different ||images:images|| to make sure they do not all look the same.
The ||sprites.onCreated|| event is helpful for handling this type of behavior.
sprites.onCreated(0, null);
||sprites:Asteroid||s are defined,
and what happens to the image originally set for the ||sprites:Sprite||||sprites:Asteroid|| is ||sprites:created||||math:Math.pickRandom|| is used to pick a
||math:random|| ||images:image||namespace SpriteKind {
export const Asteroid = SpriteKind.create();
}
let asteroids: Image[] = [
sprites.space.spaceAsteroid0,
sprites.space.spaceAsteroid1
];
game.onUpdateInterval(1000, function () {
sprites.create(img`1`, SpriteKind.Asteroid);
});
sprites.onCreated(SpriteKind.Asteroid, function (sprite: Sprite) {
sprite.setImage(Math.pickRandom(asteroids));
sprite.y = randint(0, screen.height);
sprite.x = randint(0, screen.width);
});||sprites:on created|| event, set the ||variables:sprite||
||sprites:y|| position to be 0, so it starts at the top of the screen||sprites:y|| position, set the ||sprites:vy||
to a ||math:random value between|| 30 and 50||sprites:Ghost|| flag for every ||sprites:Asteroid|| to ||logic:true||||images:images|| allow for games that are
more visually appealing?% operator used to make sure the code never
accesses an invalid index in the ||arrays:array||?