Herstellung Kreis erscheint hinter Objekt, das von Punkt A bewegt sich B in AS3 zu Punkt

Question

Ich habe diesen Code in AS3 bekam, dass ein Boot bewegt sich von Punkt A zu Punkt ist zu machen B..etc

tween = new Tween(boat, "x", None.easeNone, boat.x, lastClick.x, 1, true);  
tweenY = new Tween(boat, "y", None.easeNone, boat.y, lastClick.y, 1, true);  

(video here)

Ich möchte einen Kreis hinzufügen, der hinter dem Boot erscheint (wie ein Pfad auf einer Karte).

Ich habe versucht mit Linien, aber es passt nicht sehr gut (wie es sofort erscheint und natürlich ist es nicht Kreis).

my_shape.graphics.moveTo(lastClick.x, lastClick.y); 
my_shape.graphics.lineTo(event.currentTarget.x, event.currentTarget.y); 
my_shape.graphics.lineTo(event.currentTarget.x, event.currentTarget.y); 

Wissen Sie, wie ich von lastClick zu event.currentTarget gehen, um etwas Kreis hinzufügen könnte? (video of an example here)

Answer 1

Da Sie Tweens verwenden, können Sie Ihre Punkte beim Tween-Update zeichnen. Wenn Sie Ihren Code direkt auf der Timeline schreiben müssen Sie möglicherweise „private“ von den Funktionen entfernen:

// draw a point every X pixels 
private var DISTANCE_BETWEEN_POINTS:int = 20; 
private var pointsArray:Array = []; 
private var lastPoint:Point; 

tween = new Tween(boat, "x", null, boat.x, lastClick.x, 1, true); 
tween.addEventListener(TweenEvent.MOTION_CHANGE, onTweenUpdate); 
tween.addEventListener(TweenEvent.MOTION_FINISH, onTweenEnd); 

tweenY = new Tween(boat, "y", null, boat.y, lastClick.y, 1, true); 
tweenY.addEventListener(TweenEvent.MOTION_CHANGE, onTweenUpdate); 
tweenY.addEventListener(TweenEvent.MOTION_FINISH, onTweenEnd); 

// for the start we assume the last drawn point was at the boat origin 
lastPoint = new Point(boat.x, boat.y);  

// called on every tween update 
private function onTweenUpdate(e:TweenEvent):void 
{ 
    // draw a point if the distance to the last point is greater than DISTANCE_BETWEEN_POINTS 
    if (distance(lastPoint.x, lastPoint.x, boat.y, lastPoint.y) > DISTANCE_BETWEEN_POINTS) 
    { 
     // pseudocode here. Add your points as movieclips or just draw circles 
     // you might adjust the point position as this will draw a point over the boat. 
     // you might want to add a layer where you draw points that will be under your boat 
     var point:MovieClip = new PointMC(); 
     point.x = boat.x; 
     point.y = boat.y; 
     addChild(point); 

     // remember the last drawn point position for the next one 
     lastPoint = new Point(boat.x, boat.y); 

     // add point to array so we can remove them when the tween is done 
     pointsArray.push(point); 
    } 
} 

// called when a tween ends 
// remove event listeners so your tweens can be garbage collected 
private function onTweenEnd(e:TweenEvent):void 
{ 
    tween.removeEventListener(TweenEvent.MOTION_CHANGE, onTweenUpdate); 
    tween.removeEventListener(TweenEvent.MOTION_FINISH, onTweenEnd); 
    tweenY.removeEventListener(TweenEvent.MOTION_CHANGE, onTweenUpdate); 
    tweenY.removeEventListener(TweenEvent.MOTION_FINISH, onTweenEnd); 

    removePoints(); 
} 

private function removePoints():void 
{ 
    for (var i:int = 0; i < pointsArray.length; i++) 
    { 
     removeChild(pointsArray[i]); 
    } 

    pointsArray = []; 
} 

// measures the distance between two points 
private function distance(x1:Number, x2:Number, y1:Number, y2:Number):Number 
{ 
    var dx:Number = x1 - x2; 
    var dy:Number = y1 - y2; 
    return Math.abs(Math.sqrt(dx * dx + dy * dy)); 
} 

würde ich raten Ihnen dringend, auf die TweenLite für die Tween-Bewegungen zu wechseln - es ist sehr einfach zu stecken und Sie können in einer Zeile all dies zu tun und nicht zu verwirren mit Event-Listener und wie das Zeug haben bis:

// move the boat to x and y in one go - DONE :) 
TweenLite.to(boat, 1, {x: lastClick.x, y: lastClick.y, onUpdate: onTweenUpdate}); 

plus kann es Tonnen von anderen Sachen wie Bezier-Kurven tun, rückwärts usw. Sobald Sie daran gewöhnt wirst du dich fragen, wie du ohne es vorher gelebt hast :)