Wozu braucht man Trigonometrie in Actionscript.
Mit der Trigonometrie werden Winkel berechnet. Diesen Winkelberechnungen liegt ein rechtwinkliges Dreieck zugrunde. In Flash können Objekte (beispielsweise Sprites oder Movieclips) in einem 2 dimensionalen Koordinatensystem positioniert werden. Diese Postionierung bildet mit dem Registrierpunkt immer ein rechtwinkliges Dreieck. Somit lassen sich viele Probleme, der Positionierung oder programmierten Bewegung mit den Mitteln der Trigonometrie lösen.
Siehe dieses Beispiel von Harald Krauß
http://www.hutschdorf.de/
Actionscript benötigt für viele Funktionen das Bogenmaß anstatt den Winkel in Grad. Das Bogenmaß ist der Abstand auf dem Einheitskreis. Der Kreisumfang ist 2 π das entspricht dem Winkel 360°. Daraus ergibt sich folgende Tabelle.
| Richtung | Grad | Raidant | AS |
|---|---|---|---|
| nach vorn | 180° | pi | Math.PI |
| nach rechts | 90° | pi / 2 | Math.PI/2 |
| nach links | -90° | -pi/2 | -Math.PI/2 |
| nach hinten | 0° | 0 | 0 |
Bogenmaß in Grad umrechnen
Grad=Radiant* (180/Math.PI);
Grad in Bogenmaß umrechnen
Radiant = Grad* (Math.PI/180);
Alternativ kann man Bogenmaß und Winkel mit einer Konstante umrechnen.
const RAD:Number = 180 / Math.PI;
bogenmass = w/RAD;
grad = w*RAD;
Im Beispiel weiter unten wird eine Drehbewegung mittels Math.sin(Number) und Math.cos(Number) erzeugt. Als Argument wird eine Variable bei jedem Funktionsaufruf erhöht. Sinus und Cosinus liefert einen Wert von -1 bis 1. Da Sinus und Cosinus entgegengesetzt verlaufen, kann man damit eine Drehbewegung erzeugen. Diese Werte werden mit einem Radius mulitipliziert. Außerdem wird der Mittelpunkt mittels xPos und yPos Wert versetzt. siehe unten
var i: Number = 0;
var xPos: Number = 200;
var yPos: Number = 200;
var radius: Number = 130;
ball_mc.addEventListener(Event.ENTER_FRAME, turnMe);
function turnMe(evt: Event)
{
ball_mc.y = Math.sin(i += 0.1) * radius + yPos;
ball_mc.x = Math.cos(i) * radius + xPos;
}
In meinen Actionscript 2 Tipps findet man einige Beispiele zu dem Thema.
Siehe auch das Thema Point. In AS3 lassen sich einige Dinge auch mit den Eigenschaften und Methoden der Point Klasse regeln.
Schon in meinen AS2 Tipps habe ich ein ähnliches Beispiel aufgeführt. Es geht darum ein Gefährt in eine bestimmte Richtung fahren zu lassen. Bekannt sind die Geschwindigkeit mit Pixeln pro ENTER_FRAME und der Winkel. Nun geht es darum mit den Mitteln der Trigonometrie x und y pro Enter Frame zu errechnen.
Schauen wir uns dazu das rechtwinklige Dreieck und die Sinus, Cosinus und Tangens Formeln an.
| Sinus Alpha | a/c | Math.sin(a/c) = Alpha; | Math.sin(Alpha) = a/c |
| Cosinus Alpha | b/c | Math.cos(b/c) = Alpha; | Math.cos(Alpha) = b/c |
| Tangens Alpha | a/b | Math.tan(a/b) = Alpha; | Math.atan(Alpha) = a/b |
Die Hypotenuse c bildet die Geschwindigkeit, auch der Winkel Alpha ist bekannt. Damit lässt sich a und b, welche y und x Position bilden berechnen. Da der Winkel im Bogenmaß benötigt wird, rechnen wir ihn mit einer Konstanten um:
const RAD:Number = 180 / Math.PI;
// bogenmass = w/RAD;
// grad = w*RAD;
var c:Number = 3;
var winkel:Number = 25
Math.cos( winkel / RAD) = b / c ;
Math.sin( winkel / RAD ) = a / c ;
Wir lösen die Formeln zur Unbekannten hin auf:
b= Math.cos(winkel / RAD) * c;
a = Math.sin(winkel / RAD) * c;
import flash.events.MouseEvent;
//c = Hypotnuse = speed
var c:Number = 3;
//Richtung in Grad
var winkel:Number = 200;
const RAD:Number = 180 / Math.PI;
// bogenmass = w/RAD;
// grad = w*RAD;
panzer.addEventListener(Event.ENTER_FRAME, movement);
function movement (evt:Event):void{
var alphaSin:Number = Math.sin( winkel/RAD);
var alphaCos:Number = Math.cos( winkel/RAD);
var a:Number = alphaSin * c;
var b:Number = alphaCos * c;
evt.currentTarget. y += b;
evt.currentTarget.x += a ;
evt.currentTarget.rotation = Math.atan2(b,a)*RAD;
}
stage.addEventListener(MouseEvent.CLICK, setPos);
function setPos(evt:MouseEvent):void{
panzer.x = mouseX;
panzer.y = mouseY;
winkel = Math.random()*360;
}
In diesem Beispiel wurde eine Tastatursteuerung für den Winkel eingefügt. Außerdem erscheint der Panzer an der gegenüberliegenden Seite, sobald er die Bühne verlässt.
import flash.events.MouseEvent;
var leftkeydown:Boolean = false;
var rightkeydown:Boolean = false;
//c = Hypotenuse = speed
var c:Number = 3;
//Richtung in Grad
var winkel:Number = 200;
const RAD:Number = 180 / Math.PI;
// bogenmass = w/RAD;
// grad = w*RAD;
this.stage.addEventListener(KeyboardEvent.KEY_UP,tasteUp);
this.stage.addEventListener(KeyboardEvent.KEY_DOWN, tasteDown);
panzer.addEventListener(Event.ENTER_FRAME, movement);
function tasteDown(event:KeyboardEvent):void
{
switch ( event.keyCode )
{
case Keyboard.LEFT :
leftkeydown = true;
break;
case Keyboard.RIGHT :
rightkeydown = true;
break;
}
}
function tasteUp(event:KeyboardEvent):void
{
switch ( event.keyCode )
{
case Keyboard.LEFT :
leftkeydown = false;
break;
case Keyboard.RIGHT :
rightkeydown = false;
break;
}
}
function movement(evt:Event):void
{
if (rightkeydown)
{
winkel -= 10;
}
if (leftkeydown)
{
winkel += 10;
}
var alphaSin:Number = Math.sin( winkel/RAD);
var alphaCos:Number = Math.cos( winkel/RAD);
var a:Number = alphaSin * c;
var b:Number = alphaCos * c;
evt.currentTarget.y += b;
evt.currentTarget.x += a;
evt.currentTarget.rotation = Math.atan2(b,a) * RAD;
//wenn Panzer aus der Bühne fährt, kommt er an der anderen Seite wieder an
if (evt.currentTarget.y > stage.stageHeight+evt.currentTarget.height)
{
evt.currentTarget.y = -evt.currentTarget.height/2;
}
else if (evt.currentTarget.y < - evt.currentTarget.height)
{
evt.currentTarget.y = stage.stageHeight+evt.currentTarget.height/2;
}
else if (evt.currentTarget.x > stage.stageWidth+evt.currentTarget.width)
{
evt.currentTarget.x = -evt.currentTarget.width/2;
}
else if (evt.currentTarget.x < -evt.currentTarget.width)
{
evt.currentTarget.x = stage.stageWidth+evt.currentTarget.width/2;
}
}
In diesem Beispiel ist die Up-Taste hinzugekommen, mit der man die Geschwindigkeit steuert. Für die Geschwindigkeit gibt es 3 Variablen.
c die eigentliche Geschwindigkeit und Hypotenuse
maxSpeed, die Höchstgeschwindigkeit, welche c zugewiesen wird, sobald mit die Up-Taste gedrückt hält.
speedDecay ein Wert zwischen 0 und 1. c wird onEnter Frame mit diesem Wert multipliziert dadurch wird der Geschwindigkeitswert immer kleiner, sobald man die Up-Taste nicht mehr drückt. Das führt zu einer dynamischen Verlangsamung. Da der Wert in Math.abs() eingeschlossen ist, sinkt er nie unter 0, so dass der Panzer nicht rückwärts fahren kann.
import flash.events.MouseEvent;
stage.align = StageAlign.TOP_LEFT;
var leftkeydown:Boolean = false;
var rightkeydown:Boolean = false;
var upkeydown:Boolean = false;
//c = Hypotenuse = speed
var c:Number = 0;
var maxSpeed:Number = 10;
var speedDecay:Number = 0.95;
//Richtung in Grad
var winkel:Number = 270;
const RAD:Number = 180 / Math.PI;
// bogenmass = w/RAD;
// grad = w*RAD;
this.stage.addEventListener(KeyboardEvent.KEY_UP,tasteUp);
this.stage.addEventListener(KeyboardEvent.KEY_DOWN, tasteDown);
panzer.addEventListener(Event.ENTER_FRAME, movement);
function tasteDown(event:KeyboardEvent):void
{
switch ( event.keyCode )
{
case Keyboard.LEFT :
leftkeydown = true;
break;
case Keyboard.RIGHT :
rightkeydown = true;
break;
case Keyboard.UP :
upkeydown = true;
break;
}
}
function tasteUp(event:KeyboardEvent):void
{
switch ( event.keyCode )
{
case Keyboard.LEFT :
leftkeydown = false;
break;
case Keyboard.RIGHT :
rightkeydown = false;
break;
case Keyboard.UP :
upkeydown = false;
break;
}
}
function movement(evt:Event):void
{
if(upkeydown){
c = maxSpeed;
}
if (rightkeydown)
{
winkel -= 10;
}
if (leftkeydown)
{
winkel += 10;
}
c *= Math.abs(speedDecay);
var alphaSin:Number = Math.sin( winkel/RAD);
var alphaCos:Number = Math.cos( winkel/RAD);
var a:Number = alphaSin * c;
var b:Number = alphaCos * c;
evt.currentTarget.y += b;
evt.currentTarget.x += a;
evt.currentTarget.rotation = Math.atan2(b,a) * RAD;
//wenn Panzer aus der Bühne fährt, kommt er an der anderen Seite wieder an
if (evt.currentTarget.y > stage.stageHeight + evt.currentTarget.height)
{
evt.currentTarget.y = - evt.currentTarget.height / 2;
}
else if (evt.currentTarget.y < - evt.currentTarget.height)
{
evt.currentTarget.y = stage.stageHeight + evt.currentTarget.height / 2;
}
else if (evt.currentTarget.x > stage.stageWidth+evt.currentTarget.width)
{
evt.currentTarget.x = - evt.currentTarget.width / 2;
}
else if (evt.currentTarget.x < -evt.currentTarget.width)
{
evt.currentTarget.x = stage.stageWidth + evt.currentTarget.width / 2;
}
}
In diesem Beispiel wurde die Programmierung in eine Klassendatei für den Panzer übertragen. Der Panzer ist ein Movieclip in der Bibliothek.
package
{
import flash.display.MovieClip;
import flash.events.KeyboardEvent;
import flash.events.Event;
import flash.ui.Keyboard;
public class Panzer extends MovieClip
{
protected var leftkeydown:Boolean = false;
protected var rightkeydown:Boolean = false;
protected var upkeydown:Boolean = false;
//c = Hypotenuse = speed
protected var c:Number = 0;
protected var maxSpeed:Number = 10;
protected var speedDecay:Number = 0.95;
//Richtung in Grad
protected var winkel:Number = 270;
public static const RAD:Number = 180 / Math.PI;
public function Panzer()
{
if (stage)
{
init();
}
else
{
addEventListener(Event.ADDED_TO_STAGE,init);
}
}
private function init(e:Event=null):void
{
this.stage.addEventListener(KeyboardEvent.KEY_UP,tasteUp);
this.stage.addEventListener(KeyboardEvent.KEY_DOWN, tasteDown);
addEventListener(Event.ENTER_FRAME, movement);
removeEventListener(Event.ADDED_TO_STAGE, init);
addEventListener(Event.REMOVED_FROM_STAGE, destroy);
}
private function destroy(e:Event):void
{
removeEventListener(Event.REMOVED_FROM_STAGE, destroy);
}
function tasteDown(event:KeyboardEvent):void
{
switch ( event.keyCode )
{
case Keyboard.LEFT :
leftkeydown = true;
break;
case Keyboard.RIGHT :
rightkeydown = true;
break;
case Keyboard.UP :
upkeydown = true;
break;
}
}
function tasteUp(event:KeyboardEvent):void
{
switch ( event.keyCode )
{
case Keyboard.LEFT :
leftkeydown = false;
break;
case Keyboard.RIGHT :
rightkeydown = false;
break;
case Keyboard.UP :
upkeydown = false;
break;
}
}
function movement(evt:Event):void
{
if (upkeydown)
{
c = maxSpeed;
}
if (rightkeydown)
{
winkel -= 10;
}
if (leftkeydown)
{
winkel += 10;
}
c *= Math.abs(speedDecay);
var alphaSin:Number = Math.sin( winkel/RAD);
var alphaCos:Number = Math.cos( winkel/RAD);
var a:Number = alphaSin * c;
var b:Number = alphaCos * c;
this.y += b;
this.x += a;
this.rotation = Math.atan2(b,a) * RAD;
//wenn Panzer aus der Bühne fährt, kommt er an der anderen Seite wieder an
if (this.y > stage.stageHeight + this.height)
{
this.y = - this.height / 2;
}
else if (this.y < - this.height)
{
this.y = stage.stageHeight + this.height / 2;
}
else if (this.x > stage.stageWidth+this.width)
{
this.x = - this.width / 2;
}
else if (this.x < -this.width)
{
this.x = stage.stageWidth + this.width / 2;
}
}
}
}
In dem Movieclip "Panzer" in der Bibliothek in der fla Datei befindet sich ein weiterer Movieclip mit Instanznamen "kanone". Es ist die Kanone welche sich mit gedrückter Shift Taste und den Pfeiltasten links und rechts drehen lässt.
package
{
import flash.display.MovieClip;
import flash.events.KeyboardEvent;
import flash.events.Event;
import flash.ui.Keyboard;
public class Panzer extends MovieClip
{
protected var leftkeydown:Boolean = false;
protected var rightkeydown:Boolean = false;
protected var upkeydown:Boolean = false;
protected var shiftkeydown:Boolean = false;
//c = Hypotenuse = speed
protected var c:Number = 0;
protected var maxSpeed:Number = 10;
protected var speedDecay:Number = 0.95;
//Richtung in Grad
protected var winkel:Number = 270;
protected var kWinkel:Number = 180;
public static const RAD:Number = 180 / Math.PI;
public function Panzer()
{
if (stage)
{
init();
}
else
{
addEventListener(Event.ADDED_TO_STAGE,init);
}
}
private function init(e:Event=null):void
{
this.stage.addEventListener(KeyboardEvent.KEY_UP,tasteUp);
this.stage.addEventListener(KeyboardEvent.KEY_DOWN, tasteDown);
addEventListener(Event.ENTER_FRAME, movement);
removeEventListener(Event.ADDED_TO_STAGE, init);
addEventListener(Event.REMOVED_FROM_STAGE, destroy);
}
private function destroy(e:Event):void
{
removeEventListener(Event.REMOVED_FROM_STAGE, destroy);
}
function tasteDown(event:KeyboardEvent):void
{
switch ( event.keyCode )
{
case Keyboard.LEFT :
leftkeydown = true;
break;
case Keyboard.RIGHT :
rightkeydown = true;
break;
case Keyboard.UP :
upkeydown = true;
break;
case Keyboard.SHIFT :
shiftkeydown = true;
break;
}
}
function tasteUp(event:KeyboardEvent):void
{
switch ( event.keyCode )
{
case Keyboard.LEFT :
leftkeydown = false;
break;
case Keyboard.RIGHT :
rightkeydown = false;
break;
case Keyboard.UP :
upkeydown = false;
break;
case Keyboard.SHIFT :
shiftkeydown = false;
break;
}
}
function movement(evt:Event):void
{
if (upkeydown)
{
c = maxSpeed;
}
if (rightkeydown && !shiftkeydown)
{
winkel -= 10;
}
if (leftkeydown && !shiftkeydown)
{
winkel += 10;
}
if (rightkeydown && shiftkeydown)
{
kWinkel += 5;
}
if (leftkeydown && shiftkeydown)
{
kWinkel -= 5;
}
c *= Math.abs(speedDecay);
var alphaSin:Number = Math.sin( winkel/RAD);
var alphaCos:Number = Math.cos( winkel/RAD);
var a:Number = alphaSin * c;
var b:Number = alphaCos * c;
this.y += b;
this.x += a;
this.rotation = Math.atan2(b,a) * RAD;
kanone.rotation = kWinkel;
//wenn Panzer aus der Bühne fährt, kommt er an der anderen Seite wieder an
if (this.y > stage.stageHeight + this.height)
{
this.y = - this.height / 2;
}
else if (this.y < - this.height)
{
this.y = stage.stageHeight + this.height / 2;
}
else if (this.x > stage.stageWidth+this.width)
{
this.x = - this.width / 2;
}
else if (this.x < -this.width)
{
this.x = stage.stageWidth + this.width / 2;
}
}
}
}
Hier wird das Spiel komplexer. Siehe dazu auch meinen Tipp Hittest. Dort befindet sich ein Spacegame mit einer Bullet.as Klasse. Diese Klasse habe ich für dieses Spiel etwas verändert, so dass die Geschosse in die richtige Richtung fliegen. Siehe hierzu auch den Tipp localToGlobal
Actionscript der fla
import flash.events.Event;
import flash.events.MouseEvent;
var tank:Panzer = new Panzer();
tank.x = 275;
tank.y = 200;
addChild(tank);
this.stage.addEventListener(KeyboardEvent.KEY_DOWN, shoot);
function shoot(evt:KeyboardEvent):void
{
switch (evt.keyCode)
{
case Keyboard.SPACE :
var quellPunkt:Point = new Point(-75,0);
var stagePoint:Point;
stagePoint = tank.kanone.localToGlobal(quellPunkt);
trace(stagePoint.x);
var bullet:Bullet = new Bullet(feinde);
addChild(bullet);
bullet.winkel = tank.kanone.rotation + tank.rotation ;
bullet.x = stagePoint.x;
bullet.y = stagePoint.y;
break;
}
}
Actionscript der Klasse Panzer
package
{
import flash.display.MovieClip;
import flash.events.KeyboardEvent;
import flash.events.Event;
import flash.ui.Keyboard;
public class Panzer extends MovieClip
{
protected var leftkeydown:Boolean = false;
protected var rightkeydown:Boolean = false;
protected var upkeydown:Boolean = false;
protected var shiftkeydown:Boolean = false;
//c = Hypotenuse = speed
protected var c:Number = 0;
protected var maxSpeed:Number = 10;
protected var speedDecay:Number = 0.95;
//Richtung in Grad
protected var winkel:Number = 270;
protected var kWinkel:Number = 180;
public static const RAD:Number = 180 / Math.PI;
public function Panzer()
{
if (stage)
{
init();
}
else
{
addEventListener(Event.ADDED_TO_STAGE,init);
}
}
private function init(e:Event=null):void
{
this.stage.addEventListener(KeyboardEvent.KEY_UP,tasteUp);
this.stage.addEventListener(KeyboardEvent.KEY_DOWN, tasteDown);
addEventListener(Event.ENTER_FRAME, movement);
removeEventListener(Event.ADDED_TO_STAGE, init);
addEventListener(Event.REMOVED_FROM_STAGE, destroy);
}
private function destroy(e:Event):void
{
removeEventListener(Event.REMOVED_FROM_STAGE, destroy);
}
function tasteDown(event:KeyboardEvent):void
{
switch ( event.keyCode )
{
case Keyboard.LEFT :
leftkeydown = true;
break;
case Keyboard.RIGHT :
rightkeydown = true;
break;
case Keyboard.UP :
upkeydown = true;
break;
case Keyboard.SHIFT :
shiftkeydown = true;
break;
}
}
function tasteUp(event:KeyboardEvent):void
{
switch ( event.keyCode )
{
case Keyboard.LEFT :
leftkeydown = false;
break;
case Keyboard.RIGHT :
rightkeydown = false;
break;
case Keyboard.UP :
upkeydown = false;
break;
case Keyboard.SHIFT :
shiftkeydown = false;
break;
}
}
function movement(evt:Event):void
{
if (upkeydown)
{
c = maxSpeed;
}
if (rightkeydown && !shiftkeydown)
{
winkel -= 10;
}
if (leftkeydown && !shiftkeydown)
{
winkel += 10;
}
if (rightkeydown && shiftkeydown)
{
kWinkel += 5;
}
if (leftkeydown && shiftkeydown)
{
kWinkel -= 5;
}
c *= Math.abs(speedDecay);
var alphaSin:Number = Math.sin( winkel/RAD);
var alphaCos:Number = Math.cos( winkel/RAD);
var a:Number = alphaSin * c;
var b:Number = alphaCos * c;
this.y += b;
this.x += a;
this.rotation = Math.atan2(b,a) * RAD;
kanone.rotation = kWinkel;
//wenn Panzer aus der Bühne fährt, kommt er an der anderen Seite wieder an
if (this.y > stage.stageHeight + this.height)
{
this.y = - this.height / 2;
}
else if (this.y < - this.height)
{
this.y = stage.stageHeight + this.height / 2;
}
else if (this.x > stage.stageWidth+this.width)
{
this.x = - this.width / 2;
}
else if (this.x < -this.width)
{
this.x = stage.stageWidth + this.width / 2;
}
}
}
}
Actionscript der Klasse Bullet
package
{
import flash.display.*;
import flash.events.*;
public class Bullet extends MovieClip
{
public var feinde:Sprite;
public var bulletSpeed:Number = 20;
public var winkel:Number = 1;
protected static const RAD:Number = 180 / Math.PI;
public function Bullet()
{
if (stage)
{
init();
}
else
{
addEventListener(Event.ADDED_TO_STAGE,init);
}
}
private function init(e:Event=null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
addEventListener(Event.REMOVED_FROM_STAGE, destroy);
addEventListener(Event.ENTER_FRAME, fly);
}
private function fly(evt:Event):void
{
if (evt.currentTarget.y < -10 || evt.currentTarget.y > stage.stageHeight + 10 || evt.currentTarget.x < -10 || evt.currentTarget.x > stage.stageWidth + 10)
{
evt.currentTarget.removeEventListener(Event.ENTER_FRAME, fly);
this.parent.removeChild(DisplayObject(evt.currentTarget));
}
else
{
var alphaSin:Number = Math.sin( winkel/RAD);
var alphaCos:Number = Math.cos( winkel/RAD);
y -= alphaSin * bulletSpeed;
x -= alphaCos * bulletSpeed;
rotation = winkel;
var i:uint = 0;
}
}
//-----------------------------------------------
private function destroy(e:Event):void
{
removeEventListener(Event.REMOVED_FROM_STAGE, destroy);
removeEventListener(Event.ENTER_FRAME, fly);
}
}
}