いろんなグッズに応用される「おきあがりこぼし」。
漢字で書くと「起きあがり小法師」。本来は、どんな困難も、こころ静かにグッと耐え忍ぶ、会津の法師さまのお姿なのでございます。
球を転がす
まずは、球が転がる様子を表現してみます。下のトラコンボールをマウスで突っついて転がしてみてください。
「回転(_rotation)と同時に、平行移動(_x)」するだけ。
球が40度回転したとすれば、進む距離は、
円周 × 40÷360
= 2 × 円周率 × 半径 × 40÷360
コードに直すと、
clip._rotation += 40;
clip._x += 2 * Math.PI * radius * 40 / 360;
となります。
光や影まで回転させると変なことになるので、平行移動だけする部分と、回転+平行移動の部分に分けておきます。
小法師のソース
あとは、バネ運動の要領で角度を変化させると、小法師さんのようになります。
dynamic に関してはこちら、バネ運動に関してはこちらを参照してください。
dynamic class Kobosi extends MovieClip{
var speed = 0;
var radius = 45;
var tension = 0.99;
var decay = 0.9;
var angle = 0;
var onDrag = false;
function onPress(){
onDrag = true;
}
function onRelease(){
onDrag = false;
}
function onEnterFrame(){
if( !onDrag ){//離したときのゆれ
speed = -this.kobosi._rotation*tension+(speed*decay);
this.kobosi._rotation += speed;
this.kobosi._x = this.kage._x
= 2 * Math.PI * radius * speed/360
}
else{//ドラッグ中
var radian = Math.atan2( this._ymouse , this._xmouse ) + Math.PI/2;
angle = radian * 180 / Math.PI;
if( angle >= 180 ) angle -= 360
if( angle < -120 || angle > 120 ) return;
this.kobosi._rotation = angle;
this.kobosi._x = this.kage._x
= 2 * Math.PI * radius * angle/360
}
}
}