百匹目の猿ゴムひもっぽい曲線描画

ゴムひもっぽい曲線描画

マウスカーソルの動きにあわせて曲線が変化するサンプルです。ゴムひもの端をつまんで動かすようなカンジ（？）です。

曲線はGraphics#curveToメソッドを使って描画しています。

サンプルではマウスカーソルの動きに連動する描画オブジェクトをいくつか用意して、そいつらの座標をコントロールポイント、２つのコントロールポイントの中点をアンカーポイントとしてcurveToメソッドを連続で使用しています。

中点をアンカーポイントにするのは、たしか「ActionScript 3.0 Animation」のcurveToのサンプルでやってたやり方だったと思います。

コントロールポイントとなる描画オブジェクトは、ターゲットとなる描画オブジェクトから一定の距離に減速しながら近づく動作をします。サンプルではコレをスプライトの派生クラスとして実装してみました。

package {
  import flash.display.*;
  import flash.events.*;
  /**
   * 減速しながらターゲットに近づくスプライト。
   */
  public class Stalker extends Sprite {
    /** ターゲット */
    private var _target:DisplayObject;
    /** ターゲットとの間に置く距離 */
    private var _distance:Number;
    /** 近づく速度係数 */
    private var _speed:Number;
    /**
     * コンストラクタ
     * @param target ターゲット
     * @param distance ターゲットとの間に置く距離
     * @param speed 速度係数
     */
    public function Stalker(target:DisplayObject,
                            distance:Number = 0,
                            speed:Number = 2) {
      _target = target;
      _distance = distance;
      _speed = speed;
      // フレームイベントを登録
      addEventListener(Event.ENTER_FRAME, doEnterFrame);
    }
    /**
     * フレームイベントハンドラ。
     * @param evt イベントオブジェクト
     */
    public function doEnterFrame(evt:Event) {
      // ターゲットまでの距離
      var dx:Number = _target.x - evt.target.x;
      var dy:Number = _target.y - evt.target.y;
      var td:Number = Math.sqrt(dx * dx + dy * dy);
      // 移動距離
      var d:Number = (td - _distance) / _speed;
      // 移動
      evt.target.x += dx * d / td;
      evt.target.y += dy * d / td;
    }
  }
}

コンストラクタで追跡対象の描画オブジェクト／最終的に追跡対象との間に置く距離／速度係数を指定すると、それらのパラメータに合わせて減速しながら移動します。自身の位置を変更する処理はdoEnterFrameメソッドに記述していて、コレをENTER_FRAMEイベントリスナに登録しています。

サンプルのフラッシュのフレームアクションはこんなカンジです。

// ポイント間の距離
var d:Number = 10;
// ポイント移動速度係数
var s:Number = 2;
// ポイント数
var point_cnt:int = 10;
// 先頭ポイント
var target:Sprite = new Sprite();
var g:Graphics = target.graphics;
g.beginFill(0x0000FF, 1.0);
g.drawCircle(0, 0, 2);
g.endFill();
target.visible = false;
addChild(target);
// ポイント配列
var point_array:Array = [target];
// 描画領域
var screen:Sprite = new Sprite();
addChild(screen);
// ポイント生成
for (var i:int = 0; i < point_cnt; i++) {
  var stalker:Stalker = createPoint(point_array[i]);
  addChild(stalker);
  point_array.push(stalker);
}
// フレームイベントハンドラ
addEventListener(Event.ENTER_FRAME,
  function(e:Event) {
    // ターゲットを移動
    target.x = stage.mouseX;
    target.y = stage.mouseY;
    // 曲線描画
    drawCurve();
  });
// クリックイベントハンドラ
addEventListener(MouseEvent.CLICK,
  function(e:Event) {
    for each (var p:Sprite in point_array) {
      p.visible = !p.visible;
    }
  });
// ポイント生成メソッド
function createPoint(target:DisplayObject):Stalker {
  var stalker:Stalker = new Stalker(target, d, s);
  var g:Graphics = stalker.graphics;
  g.beginFill(0x0000FF, 1.0);
  g.drawCircle(0, 0, 2);
  g.endFill();
  stalker.visible = false;
  return stalker;
}
// 曲線描画メソッド
function drawCurve() {
  var g:Graphics = screen.graphics;
  g.clear();
  var p:Sprite = point_array[0];
  var np:Sprite = point_array[1];
  g.moveTo(p.x, p.y);
  for (var i:int = 1, iEnd:int = point_array.length - 1;
       i < iEnd;
       i++) {
    p = np;
    np = point_array[i + 1];
    g.lineStyle(1, 0x9999FF);
    g.curveTo(p.x, p.y, (p.x + np.x) / 2, (p.y + np.y) / 2);
  }
}

最初にスプライトを一つ作成しています（target）。コレはマウスカーソルの位置に表示するスプライトです。先ほどのStalkerクラスを、指定したDisplayObjectを追跡するようにしたための措置デス。

つぎにpoint_cnt数分のStalkerインスタンスを生成しています。この際、ターゲットとして一つ前に作成したStalkerインスタンスを指定しています（ただし最初のStalkerインスタンスはtargetを追跡する）。こうすることによって各Stalkerインスタンスに数珠繋ぎっぽい動きをさせています。

フレームイベントでは、マウスカーソルの位置にtargetを移動。その後曲線を描画しています。曲線描画の実装はdrawCurveメソッドです。

drawCurveメソッドでは、ステージに配置したscreenインスタンスのgraphicsプロパティを使って描画を行っています。最初にscreenインスタンスに描画されている内容を消去し、次にtargetとStalkerインスタンスたちの座標を使って曲線を描画しています。

また、MouseEvent.CLICKイベントのハンドラでtargetとStalkerインスタンスたちの表示／非表示切り替え処理をしています。

テーマ:Flash - ジャンル:コンピュータ

2007.09.13 | | Comments(0) | Trackback(2) | Flash CS3

« Adobe AIR update Beta 1 for Flash CS3 Professionalを試してみた | ホーム | 一文字ずつ表示 »

百匹目の猿

スポンサーサイト

ゴムひもっぽい曲線描画

コメント

コメントの投稿

トラックバック

dankai (団塊) パンチ 2007年 10月号 [雑誌

CHOKi CHOKi (チョキチョキ) 2008年 02月号

プロフィール

最近の記事

最近のコメント

最近のトラックバック

月別アーカイブ

カテゴリー

ブロとも申請フォーム

ブログ内検索

RSSフィード

リンク

By FC2ブログ

メールフォーム