Transcript CS 426 : Multimedia - Electronic Visualization Laboratory

"The games of a people reveal a great deal about them.“
Marshall McLuhan
Intro to Action Script 12
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid and race games river.fla
The player controls an object or a character that moves left-right
Other objects move up from the bottom of the stage
The player must avoid upcoming objects
4 frames:
1
“start”
2
play game itself
3
“lose”
4
“win”
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid and race games river.fla
Frame 1
“start”
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid and race games river.fla
Frame 2
Actual
Game
Dynamic
Tex var
“spills”
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Catch and race games river.fla
Frame 3
“lose”
Dynamic
Tex var
“score”
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Catch and race games river.fla
Frame 4
“win”
Dynamic
Tex var
“score”
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid and race games river.fla
Objects moving up create an illusion of moving fox
The goal is to avoid ALL objects
Collisions treated as negative spills
The game is over if too many spills occur
The game speed decreases with each spill – collision
The slowdown delays the end of the game
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid and race games river.fla
Movie clip fox exported for Action Script as “kayaking fox”
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid and race games river.fla
1 frame of the
“kayaking fox”
movie clip
“stil”
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid and race games river.fla
2 frame of the
“kayaking fox”
movie clip
“right”
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid and race games river.fla
3 frame of the
“kayaking fox”
movie clip
“left”
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid and race games river.fla
4 frame of the
“kayaking fox”
movie clip
“spil”
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid and race games river.fla
3 frames of the “rocks” movie clip
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid and race games river.fla
3 frames of the “rocks” movie clip
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid and race games river.fla
3 frames of the “rocks” movie clip
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid and race games river.fla
Fox racing down the river with paddles out of the water (frame “stil”)
If the user pressed “right” key, fox movie clip goes to frame “right”
If the user presses left key, fox movie clip goes to frame “left”
If the user hits the upcoming objects fox movie clip goes to frame “spil”
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid and race games river.fla
“actions” movie clip contains the following script
onClipEvent (load) {
_root.initGame();
}
onClipEvent (enterFrame) {
_root.moveFox();
_root.newRock();
_root.moveRocks();
}
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid and race games river.fla
The scond frame of the main timeline (play game) script is similar to the
catch apples game script:
stop();
function initGame() {
// the range of rock clips
firstRock = 1;
lastRock = 0;
// init the number of spills
spills = 0;
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid and race games river.fla
// set the number of rocks to pass
totalRocks = 50;
// init the speed and time delay
timeSinceLastRock = 0;
riverSpeed = 0;
}
// create the fox so that it is on top of the rocks
attachMovie( "kayaking fox", "fox", 999999 );
fox._x = 275;
fox._y = 200;
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid and race games river.fla
function moveFox() {
if (fox._currentFrame > 4) {
// if during a spill, don't look at keys
dx = 0;
} else if (Key.isDown(Key.RIGHT)) {
// fox rows right
dx = riverSpeed;
fox.gotoAndStop("left");
} else if (Key.isDown(Key.LEFT)) {
// fox rows left
dx = -riverSpeed;
fox.gotoAndStop("right");
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid and race games river.fla
} else {
// no key
dx = 0;
fox.gotoAndStop("still");
}
// move the fox and limit that movement
fox._x += dx;
if (fox._x < 150) fox._x = 150;
if (fox._x > 400) fox._x = 400;
}
// go a little faster to increase the speed of the game
if (riverSpeed < 20) riverSpeed += .5;
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid and race games river.fla
function newRock() {
// add new one only if it has been long enough
if (timeSinceLastRock > 5) {
// start if only there are more rocks
if (lastRock < totalRocks) {
// add only 10% of the time
if (Math.random() < .1) {
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid and race games river.fla
// create next rock and set its location
lastRock++;
attachMovie( "rocks", "rock"+lastRock, lastRock );
// limits all rocks to appear inside the river
_root["rock"+lastRock]._x = Math.random()*250+150;
_root["rock"+lastRock]._y = 450;
// decide which frame to show
f=
int(Math.Random()*_root["rock"+lastRock]._totalFrames)
+ 1;
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid and race games river.fla
_root["rock"+lastRock].gotoAndStop(f);
// reset time delay for next rock
timeSinceLastRock = 0;
// init whether rock was hit
//set to “false” for each new rock. This indicates that kyak
has never hit that rock. In the moveRock function this is
checked before a collision is allowed. When collision
happens, the “hit” variable of that movie clip is set to
“true”
So it cannot be hit again as the boat passes over it.
_root["rock"+i].hit = false;
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid and race games river.fla
}
}
}
}
// even if no rock added, get closer to next rock
timeSinceLastRock++;
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid and race games river.fla
function moveRocks() {
// loop through all existing rock clips
for (i=firstRock;i<=lastRock;i++) {
// get rock location
x = _root["rock"+i]._x;
y = _root["rock"+i]._y - riverSpeed;
// see whether rock reached past top
if (y < -50) {
removeRock(i);
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid and race games river.fla
// to have a hit, rock must not have been hit before
//the collision happens withing 60 pixels horizontally and 25
pixels vertically of the center of the fox
} else if ((_root["rock"+i].hit == false) and (Math.abs(yfox._y) < 60) and (Math.abs(x-fox._x) < 25)) {
spills += 1;
// note that rock was hit
_root["rock"+i].hit = true;
// turn boat over
fox.gotoAndPlay("spill");
// stop boat
riverSpeed = 0;
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid and race games river.fla
// is game over?
if (spills > 5) {
removeAll();
gotoAndPlay("lose");
}
}
}
}
// continue to move rock
_root["rock"+i]._y = y;
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid and race games river.fla
function removeRock(n) {
// take away rock movie clip
_root["rock"+n].removeMovieClip();
// reset range of rocks to move
firstRock = n+1;
}
// see whether this was the last rock
if (n == totalRocks) {
removeAll();
gotoAndPlay("win");
}
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid and race games river.fla
There are two ends of the game lose and win.
In both case the removeAll function is called
It removes remaining rocks, and fox movie clip.
This is necessary because otherwise they stay on the screen even after
the game is over.
function removeAll() {
// take away all remaining rocks
for (i=firstRock;i<=lastRock;i++) {
_root["rock"+i].removeMovieClip();
}
fox.removeMovieClip();
}
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid, catch and race games racing.fla
3 frames
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid, catch and race games racing.fla
Straight
Dinamic texts
timeDisplay
score
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid, catch and race games racing.fla
Game over
Dinamic texts
timeDisplay
score
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid, catch and race games racing.fla
The road moves towards the player
Illusion of depth is created by scaling objects during the movement
The player must hit stars to get points
The faster he goes the more stars he can hit
If the player hits sides of the road he slows down
And the score is reduced
The rocks and stars and placed at the bottom of the screen and named
“bonus” and “sideObject”
Race car movie clipd is named “car” on the stage
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid, catch and race games racing.fla
4 frames in the “race car”
movie clip
1 frame “straight”
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid, catch and race games racing.fla
4 frames in the “race car”
movie clip
2 frame “right
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid, catch and race games racing.fla
4 frames in the “race car”
movie clip
3 frame “left”
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid, catch and race games racing.fla
4 frames in the “race car”
movie clip
4 frame “crash”
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid, catch and race games racing.fla
“car” movie clip script:
onClipEvent(load) {
// init speed
_root.speed = 0;
}
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid, catch and race games racing.fla
onClipEvent(enterFrame) {
if (Key.isDown(Key.LEFT)) {
// move left
this._x -= 10;
this.gotoAndStop("left");
} else if (Key.isDown(Key.RIGHT)) {
// move right
this._x += 15;
this.gotoAndStop("right");
} else if (Key.isDown(Key.UP)) {
// speed up
_root.speed += .1;
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid, catch and race games racing.fla
} else if (Key.isDown(Key.DOWN)) {
// slow down
_root.speed -= .1;
// check for minimum speed
if (_root.speed < 0) _root.speed = 0;
} else {
_root.car.gotoAndStop("straight");
}
// check for score
if (this.hitTest(_root.bonus._x,_root.bonus._y)) {
_root.score++;
_root.bonus._y += 100;
}
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid, catch and race games racing.fla
}
// slow down if sides hit
if (this._x < 80) {
this._x = 80;
_root.speed /= 2;
} else if (this._x > 470) {
this._x = 470;
_root.speed /= 2;
}
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid, catch and race games racing.fla
SideObjects do not interact with the car, they just provide the illusion of
depth
sideObject movie clip script:
onClipEvent(enterFrame) {
// move down
this._y += _root.speed;
// move out
this._x += dx*_root.speed;
// reset when at the bottom of the screen
if (this._y > 600) {
this._y = 200; //horizon line
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid, catch and race games racing.fla
if (Math.random() < .5) {
// left side
this._x = Math.random()*170;
dx = -1;
} else {
// right side
this._x = 550-Math.random()*170;
dx = 1;
}
}
}
// set scale according to vertical position
this._xscale = this._y/4;
this._yscale = this._y/4;
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid, catch and race games racing.fla
Bonus star movie clip script:
onClipEvent(enterFrame) {
// move down
this._y += _root.speed;
this._x += dx*_root.speed;
// reset when at the bottom of the screen
if (this._y > 600) {
this._y = 200;
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid, catch and race games racing.fla
}
}
if (Math.random() < .5) {
// come up left side
this._x = 250;
dx = -.5;
} else {
// come up right side
this._x = 300;
dx = .5;
}
// set scale according to vertical position
this._xscale = this._y/4;
this._yscale = this._y/4;
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid, catch and race games racing.fla
“Actions” movie clip script handles the game clock. Counts down from
the start of the game (15 seconds). When the clock gets to 0 the
game is send to game over fame.
onClipEvent(load) {
// calculate end time
endTime = getTimer()+15000;
}
onClipEvent(enterFrame) {
// calculate time left
timeLeft = (endTime - getTimer())/1000;
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid, catch and race games racing.fla
}
// game over
if (timeLeft <= 0) {
_root.speed = 0;
_root.timeDisplay = "0";
_root.gotoAndStop("game over");
} else {
// display time left
_root.timeDisplay = timeLeft;
}
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007
Avoid, catch and race games racing.fla
Second frame movie script moves the car to the front of the screen, so
that bonus stars appear under it. Copies the sideObject movie clip 5
times. Eqch copy is given a different _y value so that the rocks do
not appear at the same time.
// move car to front
car.swapDepths(999);
// create five rocks
for(i=0;i<5;i++) {
mc = sideobject.duplicateMovieClip("side object"+i,i);
mc._y = 400+Math.random()*200;
}
stop();
AD 305 Electronic Visualization I : School of Art and Design : University of Illinois at Chicago : Spring 2007