百匹目の猿

天井からぶらさげる

天井からひもがぶら下がってる風にボールを配置します。
ボールはつかめます。

各ボールは間隔が固定されて数珠つなぎになってます。先頭のボールは天井に固定、それ以外のボールは重力で下に落ちようとします。
つかんだボールはマウスカーソルの位置に固定されます。

このサンプルのActionScriptは以下です。第一フレームのアクションとして記述しています。

// 節の数
var pointCnt:int = 10;
// 節の間隔
var dist:Number = 20;
// x座標
var initX:Number = stage.stageWidth / 2;
// 重力加速度
var gravity:Number = .5;
// つかんでいる節
var target:Object = null;
// 節の配列
var pointArray:Array = [];
// 節を準備する
for (var i:int = 0; i < pointCnt; i++) {
  var point:Object = createPoint(i);
  point.sprite.addEventListener(MouseEvent.MOUSE_DOWN, createMouseDownHandler(point));
  pointArray.push(point);
}
// マウスダウンイベントハンドラを生成し、戻します
function createMouseDownHandler(point:Object):Function {
  return function (e:MouseEvent):void {
    // 節をつかむ
    target = point;
    // マウスアップではなす
    stage.addEventListener(MouseEvent.MOUSE_UP, doMouseUp);
  };
}
// マウスアップイベントハンドラ
function doMouseUp(e:MouseEvent):void {
  target = null;
}
// フレームイベントリスナを登録する
addEventListener(Event.ENTER_FRAME,
  function (e:Event):void {
    // 節の位置を更新する
    for each (var point:Object in pointArray) {
      // 重力加速度により位置を移動する
      point.sprite.y += gravity;
      // 位置を一旦保存する
      var orgX:Number = point.sprite.x;
      var orgY:Number = point.sprite.y;
      // 前回位置からの移動量により位置を更新する
      point.sprite.x += point.sprite.x - point.prevX;
      point.sprite.y += point.sprite.y - point.prevY;
      // 前回位置を更新する
      point.prevX = orgX;
      point.prevY = orgY;
    }
    // 節間の距離を調整する
    for (var i:int = 0, iEnd:int = pointArray.length - 1; i < iEnd; i++) {
      var point1:Object = pointArray[i];
      var point2:Object = pointArray[i + 1];
      // 節間の距離を算出する
      var dx:Number = point2.sprite.x - point1.sprite.x;
      var dy:Number = point2.sprite.y - point1.sprite.y;
      var d:Number = Math.sqrt(dx * dx + dy * dy);
      // 指定された間隔と現在の距離との差 / 2を各点の移動量とする
      dx = (dist - d) / 2 * dx / d;
      dy = (dist - d) / 2 * dy / d;
      // 節を移動する
      point1.sprite.x -= dx;
      point1.sprite.y -= dy;
      point2.sprite.x += dx;
      point2.sprite.y += dy;
    }
    // 最初の節は天井に固定する
    pointArray[0].sprite.x = pointArray[0].prevX = initX;
    pointArray[0].sprite.y = pointArray[0].prevY = 0;
    // つかんでいる節は移動しない
    if (target) {
      target.sprite.x = target.prevX = mouseX;
      target.sprite.y = target.prevY = mouseY;
    }
  });
// 節を生成し、戻します。
function createPoint(idx:int):Object {
  // 表示オブジェクトを生成する
  var sprite:Sprite = new Sprite();
  sprite.graphics.beginFill(0x0000FF);
  sprite.graphics.drawCircle(0, 0, 10);
  sprite.graphics.endFill();
  sprite.x = initX + dist * idx;
  sprite.y = 0;
  addChild(sprite);
  // オブジェクトを生成し、戻す
  return {sprite:sprite, prevX:sprite.x, prevY:sprite.y};
}

最初に各種パラメータを定義しています。このサンプルでは１０個のボールをボールの中心間の距離が２０ピクセルとなるようにしています。ぶら下げる位置はステージの中央で、重力に関する係数は0.5です。

targetにはマウスでつかんでいるボールの情報を持つオブジェクトをセットします。初期状態ではnull（どれもつかんでない）デス。

pointArrayは、ボールの情報を持つオブジェクトの配列です。オブジェクトは青いボールを表示するSpriteと直前のｘ座標／ｙ座標をパラメータとして持っています。
createPoint(int)関数がオブジェクトを生成する関数です。
また、ボールはマウスダウン時にtargetにオブジェクトをセットするためのイベントリスナを登録してます。
マウスアップでtargetをnullに戻します。

フレーム毎に各ボールの位置を更新します。

最初にpointArray内のSpriteの位置を重力により下に移動させます。
それから直前の位置と現在の位置の差を移動ベクトルとして位置を更新します。これはベレの方法というらしいです。たぶん。

次に、ボール間の距離を調整します。ボール間の距離が、設定された間隔より離れていたらたがいに近づけます。設定された間隔より近づいていたらたがいに遠ざけます。

pointArrayの先頭のボールは天井に固定して動かないようにします。
また、つかんでいる最中のボールはマウスカーソル位置から動かさないようにしています。

スポンサーサイト