Intro to Action Script 12

Post on 24-Jan-2016

34 views 0 download

description

"The games of a people reveal a great deal about them.“ Marshall McLuhan. Intro to Action Script 12. 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” - PowerPoint PPT Presentation

Transcript of Intro to Action Script 12

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Intro to Action Script 12

"The games of a people reveal a great deal about them.“ Marshall McLuhan

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Avoid and race games river.fla

Frame 1“start”

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Avoid and race games river.fla

Frame 2Actual Game

Dynamic Tex var

“spills”

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Catch and race games river.fla

Frame 3“lose”

Dynamic Tex var

“score”

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Catch and race games river.fla

Frame 4“win”

Dynamic Tex var

“score”

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Avoid and race games river.fla

Movie clip fox exported for Action Script as “kayaking fox”

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Avoid and race games river.fla

1 frame of the“kayaking fox”movie clip

“stil”

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Avoid and race games river.fla

2 frame of the“kayaking fox”movie clip

“right”

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Avoid and race games river.fla

3 frame of the“kayaking fox”movie clip

“left”

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Avoid and race games river.fla

4 frame of the“kayaking fox”movie clip

“spil”

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Avoid and race games river.fla

3 frames of the “rocks” movie clip

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Avoid and race games river.fla

3 frames of the “rocks” movie clip

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Avoid and race games river.fla

3 frames of the “rocks” movie clip

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

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 clipsfirstRock = 1;lastRock = 0;

// init the number of spillsspills = 0;

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Avoid and race games river.fla

// set the number of rocks to passtotalRocks = 50;

// init the speed and time delaytimeSinceLastRock = 0;riverSpeed = 0;

// create the fox so that it is on top of the rocksattachMovie( "kayaking fox", "fox", 999999 );fox._x = 275;fox._y = 200;

}

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

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 rightdx = riverSpeed;fox.gotoAndStop("left");

} else if (Key.isDown(Key.LEFT)) {// fox rows leftdx = -riverSpeed;fox.gotoAndStop("right");

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Avoid and race games river.fla

} else {// no keydx = 0;fox.gotoAndStop("still");

}

// move the fox and limit that movementfox._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 gameif (riverSpeed < 20) riverSpeed += .5;

}

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Avoid and race games river.fla

function newRock() {// add new one only if it has been long enoughif (timeSinceLastRock > 5) {

// start if only there are more rocksif (lastRock < totalRocks) {

// add only 10% of the timeif (Math.random() < .1) {

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Avoid and race games river.fla

// create next rock and set its locationlastRock++;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 showf = int(Math.Random()*_root["rock"+lastRock]._totalFrames) + 1;

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Avoid and race games river.fla

_root["rock"+lastRock].gotoAndStop(f);

// reset time delay for next rocktimeSinceLastRock = 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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Avoid and race games river.fla

}}

}

// even if no rock added, get closer to next rocktimeSinceLastRock++;

}

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Avoid and race games river.fla

function moveRocks() {// loop through all existing rock clipsfor (i=firstRock;i<=lastRock;i++) {

// get rock locationx = _root["rock"+i]._x;y = _root["rock"+i]._y - riverSpeed;

// see whether rock reached past topif (y < -50) {

removeRock(i);

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

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(y-fox._y) < 60) and (Math.abs(x-fox._x) < 25)) {

spills += 1;

// note that rock was hit_root["rock"+i].hit = true;

// turn boat overfox.gotoAndPlay("spill");

// stop boatriverSpeed = 0;

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Avoid and race games river.fla

function removeRock(n) {// take away rock movie clip_root["rock"+n].removeMovieClip();

// reset range of rocks to movefirstRock = n+1;

// see whether this was the last rockif (n == totalRocks) {

removeAll();gotoAndPlay("win");

}}

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Avoid and race games river.fla

There are two ends of the game lose and win.In both case the removeAll function is calledIt 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 rocksfor (i=firstRock;i<=lastRock;i++) {

_root["rock"+i].removeMovieClip();}fox.removeMovieClip();

}

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Avoid, catch and race games racing.fla

3 frames

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Avoid, catch and race games racing.fla

Straight

Dinamic texts

timeDisplay

score

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Avoid, catch and race games racing.fla

Game over

Dinamic texts

timeDisplay

score

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

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 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Avoid, catch and race games racing.fla

4 frames in the “race car”movie clip

1 frame “straight”

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Avoid, catch and race games racing.fla

4 frames in the “race car”movie clip

2 frame “right

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Avoid, catch and race games racing.fla

4 frames in the “race car”movie clip

3 frame “left”

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Avoid, catch and race games racing.fla

4 frames in the “race car”movie clip

4 frame “crash”

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Avoid, catch and race games racing.fla

“car” movie clip script:

onClipEvent(load) {// init speed_root.speed = 0;

}

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Avoid, catch and race games racing.fla

onClipEvent(enterFrame) {if (Key.isDown(Key.LEFT)) {

// move leftthis._x -= 10;this.gotoAndStop("left");

} else if (Key.isDown(Key.RIGHT)) {// move rightthis._x += 15;this.gotoAndStop("right");

} else if (Key.isDown(Key.UP)) {// speed up_root.speed += .1;

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Avoid, catch and race games racing.fla

} else if (Key.isDown(Key.DOWN)) {// slow down_root.speed -= .1;// check for minimum speedif (_root.speed < 0) _root.speed = 0;

} else {_root.car.gotoAndStop("straight");

}

// check for scoreif (this.hitTest(_root.bonus._x,_root.bonus._y)) {

_root.score++;_root.bonus._y += 100;

}

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Avoid, catch and race games racing.fla

// slow down if sides hitif (this._x < 80) {

this._x = 80;_root.speed /= 2;

} else if (this._x > 470) {this._x = 470;_root.speed /= 2;

}}

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

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 downthis._y += _root.speed;

// move outthis._x += dx*_root.speed;

// reset when at the bottom of the screenif (this._y > 600) {

this._y = 200; //horizon line

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Avoid, catch and race games racing.fla

if (Math.random() < .5) {// left sidethis._x = Math.random()*170;dx = -1;

} else {// right sidethis._x = 550-Math.random()*170;dx = 1;

}}// set scale according to vertical positionthis._xscale = this._y/4;this._yscale = this._y/4;

}

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Avoid, catch and race games racing.fla

Bonus star movie clip script:

onClipEvent(enterFrame) {// move downthis._y += _root.speed;this._x += dx*_root.speed;

// reset when at the bottom of the screenif (this._y > 600) {

this._y = 200;

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Avoid, catch and race games racing.fla

if (Math.random() < .5) {// come up left sidethis._x = 250;dx = -.5;

} else {// come up right sidethis._x = 300;dx = .5;

}}

// set scale according to vertical positionthis._xscale = this._y/4;this._yscale = this._y/4;

}

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

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 timeendTime = getTimer()+15000;

}

onClipEvent(enterFrame) {// calculate time lefttimeLeft = (endTime - getTimer())/1000;

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

Avoid, catch and race games racing.fla

// game overif (timeLeft <= 0) {

_root.speed = 0;_root.timeDisplay = "0";_root.gotoAndStop("game over");

} else {// display time left_root.timeDisplay = timeLeft;

}}

AD 206 Intermediate CG : School of Art and Design : University of Illinois at Chicago : Spring 2009

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 frontcar.swapDepths(999);

// create five rocksfor(i=0;i<5;i++) {

mc = sideobject.duplicateMovieClip("side object"+i,i);

mc._y = 400+Math.random()*200;}

stop();