スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

--.--.-- | | スポンサー広告

ゴムひもっぽい曲線描画

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





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

サンプルではマウスカーソルの動きに連動する描画オブジェクトをいくつか用意して、そいつらの座標をコントロールポイント、2つのコントロールポイントの中点をアンカーポイントとして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

トラックバック

http://100th.blog96.fc2.com/tb.php/35-0c585fbb
この記事にトラックバックする(FC2ブログユーザー)

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

dankai (団塊) パンチ 2007年 10月号 [雑誌]・ゴムひもっぽい曲線描画・ターゲット / Target・メガトンパブ ターゲット・はてなRSS-ポイントサイト フィードが更新されました・LA激安お買い物情報その6・プロ馬券師の競馬マニュアル「ダート専用厳選馬券術」・layout/gene...

2007.09.27 | くるみのblog

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

CHOKi CHOKi (チョキチョキ) 2008年 02月号 [雑誌]・TARGET WORLD CHALLENGE・ゴムひもっぽい曲線描画・テイクオーバーターゲットは降着・無料レポート「データとってアフィリエイトしてますか?インフォトップ ...・User JavaScript - イベントキャプチャのテスト・ター?...

2008.01.08 | くるみのblog

«  | HOME |  »

プロフィール

HundredthMonkey

Author:HundredthMonkey
プログラマ。

ブロとも申請フォーム

この人とブロともになる

メールフォーム

名前:
メール:
件名:
本文:

ブログ内検索


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。