AS3.0做游戏的360度摇杆

写这篇文章的目的主要是为了明确AS3.0中，“注册点”与“坐标”的关系。本人在Java上做了这个小程序，实现方法简单，但是在AS3.0上写这个程序时，一直遇到问题。两个圆在舞台上的显示位置总是与自己期望位置不一致。后查资料，请教了一些网上的朋友，终于搞清楚问题原因。以下文字注释属于自己理解，在其他朋友阅读时，如有疑问，请留言。先黏贴程序：

1.主程序，

package
{
 import flash.display.Sprite;
 import flash.display.StageAlign;
 import flash.display.StageScaleMode;
 import flash.events.Event;
 [swf(width = "800",height = "400",backgroundColor = "0x9966ff",frameRate = "30")]
 public class TankGame extends Sprite
  
 {
  public var rockingBar:RockingBar
  public function TankGame()
  {
   super();
   
   // 支持 autoOrient
   stage.align = StageAlign.TOP_LEFT;
   stage.scaleMode = StageScaleMode.NO_SCALE;
   Init();
   stage.addEventListener(Event.ENTER_FRAME,Loop);
  }
  public function Init():void{
   
   rockingBar = new RockingBar(this.stage,this.root);
   //this.addChild(rockingBar);
  }
  public function Loop(e:Event):void{
   //trace("test");
   
  }
 }
}

2.摇杆360度类

package
{
 import flash.display.DisplayObject;
 import flash.display.Graphics;
 import flash.display.MovieClip;
 import flash.display.Sprite;
 import flash.display.Stage;
 import flash.events.Event;
 import flash.events.GestureEvent;
 import flash.events.MouseEvent;
 import flash.events.TouchEvent;
 import flash.geom.Point;
 import flash.ui.Multitouch;
 import flash.ui.MultitouchInputMode;
 public class RockingBar extends Sprite
 {
  public var screenW:Number = 0;
  private var screenH:Number = 0;
  private var radius:Number = 0;
  private var angle:Number = 0;
  private var rad:Number = 0;
  
  
  private var bigCircle:Sprite,smallCircle:Sprite;
  public var sprite:Sprite;
  private var bigCircleX:Number = 0,bigCircleY:Number = 0;
  private var smallCircleX:Number = 0,smallCircleY:Number = 0;
  private var bigCircleR:Number = 0;
  private var smallCircleR:Number = 0;
  private var mColor:int = 0;
  private var mAlpha:Number = 0,mLineStyle:Number = 0;
  private var touchSupport:Boolean;//= Multitouch.supportsTouchEvents
  
  private var num:int = 0;
  public function RockingBar(stage:Stage,root:DisplayObject)
  {
   screenW = stage.stageWidth;//stage.width;
   screenH = stage.stageHeight;//stage.height;
   bigCircle = new Sprite();
   smallCircle = new Sprite();
   sprite = new Sprite();
   init(stage);
  }
  public function setSmallCircleXY(centerX:Number,centerY:Number,r:Number,rad:Number,flag:Boolean):void
  {
   trace(centerX);
   trace(centerY);
   if (flag)
   {
    smallCircle.x = smallCircleX = r * Math.cos(rad)+centerX;
    smallCircle.y = smallCircleY = r * Math.sin(rad)+centerY;
   }
   else
   {
    smallCircle.x = centerX;//smallCircleX = centerX;
    smallCircle.y = centerY;//smallCircleY = centerY;
   }
   trace(smallCircle.x);
   trace(smallCircle.y);
   
  }
  public function getRad(px1:Number,py1:Number,px2:Number,py2:Number):Number
  {
   var x:Number = px2 - px1;
   var y:Number = py2 - py1;
   var hyx:Number = Math.sqrt(Math.pow(x,2) + Math.pow(y,2));
   var cosAngle:Number = x / hyx;
   
   var rad:Number = Math.acos(cosAngle);
   
   if (py2 < py1)
   {
    rad =  -  rad;
   }
   return rad;
  }
  
  public function drawCircle(stage:Stage,mySprite:Sprite,centerX:Number,centerY:Number,r:Number,myColor:int,myAlpha:Number,myLineStyle:Number):void
  {
   mySprite.graphics.lineStyle(myColor,myAlpha,myLineStyle);
   mySprite.graphics.beginFill(myColor,myAlpha);
   mySprite.graphics.drawCircle(centerX,centerY,r);
   mySprite.graphics.endFill();
   stage.addChild(mySprite);
   trace(mySprite.x,mySprite.y);
   
   
   
  }
  public function onMouse(e:MouseEvent):void
  {
   var flagR:Boolean = true;
   var pointX:Number = e.stageX;
   var pointY:Number = e.stageY;
   
   trace(e.stageX);
   trace(e.stageY);
   
  }
  public function onTouch(e:TouchEvent):void
  {
   
   trace(e.touchPointID);
   var flagR:Boolean = true;
   var pointX:Number = e.stageX;
   var pointY:Number = e.stageY;

   switch (e.type)
   {
    case TouchEvent.TOUCH_BEGIN :
     trace("begin");
     if (Math.sqrt(Math.pow((bigCircleX - pointX),2) + Math.pow((bigCircleY - pointY),2)) <= bigCircleR)
     {
      flagR = false;
      setSmallCircleXY(pointX,pointY,smallCircleR,getRad(bigCircleX,bigCircleY,pointX,pointY),flagR);
     }
     else
     {
      flagR = true;
      setSmallCircleXY(bigCircleX,bigCircleY,bigCircleR,getRad(bigCircleX,bigCircleY,pointX,pointY),flagR);
     }
     break;
    case TouchEvent.TOUCH_MOVE :
     trace("move");
     if (Math.sqrt(Math.pow((bigCircleX - pointX),2) + Math.pow((bigCircleY - pointY),2)) <= bigCircleR)
     {
      flagR = false;
      setSmallCircleXY(pointX,pointY,smallCircleR,getRad(bigCircleX,bigCircleY,pointX,pointY),flagR);
     }
     else
     {
      flagR = true;
      setSmallCircleXY(bigCircleX,bigCircleY,bigCircleR,getRad(bigCircleX,bigCircleY,pointX,pointY),flagR);
     }
     break;
    case TouchEvent.TOUCH_END :
     trace("end");
     flagR = true;
     smallCircle.x = bigCircle.x;
     smallCircle.y = bigCircle.y;
     //setSmallCircleXY(bigCircleX,bigCircleY,bigCircleR,getRad(smallCircleX,smallCircleY,bigCircleX,bigCircleY),flagR);
     break;
    case TouchEvent.TOUCH_TAP :
     trace("tap");
     break;
   }
   
  }
  public function init(stage:Stage):void
  {
   Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
   
   //bigCircle = new Sprite();
   //smallCircle = new Sprite();
   bigCircle.x = (screenW - smallCircle.width) / 2;
   bigCircle.y = (screenH - smallCircle.height) / 2;;
   bigCircleX = 0;
   bigCircleY = 0;
   bigCircleR = screenH / 4;
   drawCircle(stage,bigCircle,bigCircleX,bigCircleY,bigCircleR,0x00ff00,0.5,0);
   
   
   smallCircle.x = (screenW - smallCircle.width) / 2;//smallCircle.x =
   smallCircle.y = (screenH - smallCircle.height) / 2;//smallCircle.y =
   smallCircleX = 0;
   smallCircleY = 0;
   smallCircleR = screenH / 8;
   drawCircle(stage,smallCircle,smallCircleX,smallCircleY,smallCircleR,0xff0000,0.75,0);
   
   bigCircleX = screenW / 2;
   bigCircleY = screenH / 2;
   smallCircleX = screenW / 2;
   smallCircleY = screenH / 2;
   
   stage.addEventListener(TouchEvent.TOUCH_MOVE,onTouch);
   stage.addEventListener(TouchEvent.TOUCH_BEGIN,onTouch);
   stage.addEventListener(TouchEvent.TOUCH_END,onTouch);
   stage.addEventListener(TouchEvent.TOUCH_TAP, onTouch);
   //stage.addEventListener(Event.ENTER_FRAME,onLoop);
   stage.addEventListener(MouseEvent.CLICK,onMouse);
  }
  public function onLoop(e:Event):void
  {
   trace("loop");
   trace(smallCircle.x,smallCircle.y);
   var flagR:Boolean = true;
   angle++;
   if (angle >= 360)
   {
    angle = 0;
   }
   setSmallCircleXY(bigCircleX,bigCircleY,bigCircleR,angle *Math.PI/180,flagR);
   
  }
 }
}

本想在重要位置加上特殊颜色呢，这里不会使用。

        这里设置了两个Sprite:bigCircle,smallCircle,这两个实例在舞台上的位置设置为bigCircle.x = (screenW - smallCircle.width) / 2;

       bigCircle.y = (screenH - smallCircle.height) / 2;smallCircle.x = (screenW - smallCircle.width) / 2;
   smallCircle.y = (screenH - smallCircle.height) / 2;而在画圆时设置圆心：mySprite.graphics.drawCircle(0,0,r);而不是将圆心设置为舞台的中心（400,200）（舞台尺寸我设置为800,400）。这是因为用此种方式画出的圆的圆心坐标就是此圆的注册点，而这个注册点却是相对于mySprite即bigCircle或者smallCircle来说的，也就是说此时画出的圆在舞台上的实际显示位置是：（smallCircle.x +0，smallCircle.y + 0)，也就是舞台的中心位置。如果mySprite.graphics.drawCircle(centerX,centerY,r)的centerX=400,centerY=200，那么实际在舞台上显示的位置就是（smallCircle.x+400 ，smallCircle.y+200)也就是舞台的最边角落了。