2012-01-11 7 views
3

現在、ブロブコードで遊んでいて、小さな問題があります。アニメーション "blob" as3

問題は、ブロブが反転して白い色がブロブ自体の中に入り、私が本当に欲しくない白い穴ができてしまうことです。

これを修正する方法についての提案はありますので、ブロブはすべての時間をちょっとした素敵なものにしていますか?これはで遊ん1つのIMである

: デフォルトhttp://wonderfl.net/c/rYzh

class Blob extends Sprite 
{ 

    private var speed :Number = .01; 
    private var grav  :Number = .25; 
    private var dist  :Number = 27; 
    private var k  :Number = .55; 
    private var damp  :Number = .99; 
    private var cx  :Number = 370; 
    private var cy  :Number = 0; 
    private var points :Array = []; 
    private var mids  :Array = []; 
    private var numPoints:Number = 30; 
    private var oneSlice :Number = Math.PI * 2/numPoints; 
    private var radius :Number = 100; 

    public function Blob() 
    { 
     for (var i:Number = 0; i < numPoints; i++) 
     { 
      var angle:Number = oneSlice * i; 
      var obj:Object = {x:Math.cos(angle) * radius + cx, y:Math.sin(angle) * radius + cy, a:angle - Math.PI/2, wave:i*.08, vx:0, vy:0}; 
      points[i] = obj; 
     } 

     this.addEventListener(Event.ENTER_FRAME, update); 

    } 

    private function update(event:Event):void 
    { 
     this.graphics.clear(); 
     this.graphics.lineStyle(1, 0x666666, 50); 
     this.graphics.beginFill(0x000000, 100); 
     for (var i:Number = 0; i < numPoints-1; i++) 
     { 
      mids[i] = {x:(points[i].x + points[i + 1].x)/2, y:(points[i].y + points[i + 1].y)/2}; 
     } 
     mids[i] = {x:(points[i].x + points[0].x)/2, y:(points[i].y + points[0].y)/2}; 
     this.graphics.moveTo(mids[0].x, mids[0].y); 
     for (var j:Number = 0; j < numPoints - 1; j++) 
     { 
      this.graphics.curveTo(points[j+1].x, points[j+1].y, mids[j+1].x, mids[j+1].y); 
     } 
     this.graphics.curveTo(points[0].x, points[0].y, mids[0].x, mids[0].y); 
     this.graphics.endFill(); 

     var point:Object; 
     for (var k:Number = 0; k < numPoints - 1; k++) 
     { 
      point = points[k]; 
      spring(point, points[k + 1]); 
      mouseSpring(point); 
     } 
     spring(points[k], points[0]); 
     mouseSpring(points[k]); 

     for (var l:Number = 0; l < numPoints; l++) 
     { 
      point = points[l]; 
      point.vx *= damp; 
      point.vy *= damp; 
      point.vy += grav; 
      point.x += point.vx; 
      point.y += point.vy; 

      if (point.y > stage.stageHeight) 
      { 
       point.y = stage.stageHeight; 
       point.vy = 0; 
      } 
      if (point.x < 20) 
      { 
       point.x = 20; 
       point.vx = 0; 
      } 
      else if (point.x > stage.stageWidth) 
      { 
       point.x = stage.stageWidth; 
       point.vx = 0; 
      } 
     } 
    } 

    private function spring(p0:Object, p1:Object):void 
    { 
     var dx:Number = p0.x - p1.x; 
     var dy:Number = p0.y - p1.y; 
     var angle:Number = p0.a+Math.sin(p0.wave += speed)*2; 
     var tx:Number = p1.x + dist * Math.cos(angle); 
     var ty:Number = p1.y + dist * Math.sin(angle); 
     var ax:Number = (tx - p0.x) * k; 
     var ay:Number = (ty - p0.y) * k; 
     p0.vx += ax * .5; 
     p0.vy += ay * .5; 
     p1.vx -= ax * .5; 
     p1.vy -= ay * .5; 
    } 

    private function mouseSpring(p:Object):void 
    { 
     var dx:Number = p.x - stage.mouseX; 
     var dy:Number = p.y - stage.mouseY; 
     var dist:Number = Math.sqrt(dx * dx + dy * dy); 
     if (dist < 40) 
     { 
      var angle:Number = Math.atan2(dy, dx); 
      var tx:Number = stage.mouseX + Math.cos(angle) * 40; 
      var ty:Number = stage.mouseY + Math.sin(angle) * 40; 
      p.vx += (tx - p.x) * k; 
      p.vy += (ty - p.y) * k; 
     } 
    } 

} 

答えて

1

、グラフィックスAPIが充填されたパスがそれ自体に重なる場合は、塗りつぶしを否定を意味し、巻EVENODDを使用します。

Graphics.drawPath関数では、ワインディング値が "nonZero"である必要があります。これにより、パスが重複しているときには否定されません。このlittle demoをチェックし、重なり合った形にし、巻き上げをevenOddからnonZeroに切り替えて動作を確認します。

update()ルーチンでgraphics.moveTo()および.curveTo()を使用する代わりに、コードの翻訳では、パスの説明を作成する必要があります(別名drawPathの入力)最後にgraphics.drawPath()に渡します。アドビは、hereの例を示しています。