FLASHのお勉強_アクションスクリプトaction script

FLASHのお勉強　ーアクションスクリプトの実践的事始めー

(64) FLASHでスロットゲーム 　　2008/5/2

　先に「SLOT(スロット)型　「おみくじ」」を公開した直後に本稿の内容は出来上がっていたのだが、リーチアクションなどもう少し趣向を加えるつもりで公開を控えていた。　しかし、スロットはだいぶ前に遊んだことはあるが、そのときも遊び方と言うか、何をどうしていいやら訳がわからないまま終えた経験があるだけである。　したがって、手付かずのまま構想が沸かず、時間ばかり過ぎていくので、ここでとにかく勉強材料に供することにした。　非常にシンプルと言うか、幼稚なものであるが、スクリプトの勉強にはなると思う。　actionscript 2.0 で作成
　数字を流れるように移動させる方法として、ここでは0から9までの文字を回転させる方法を取っている。　「おみくじ」では、文字列を縦方向に流しているが、この方が見た目には滑らかに動くようだ。　いずれも、stopボタンをクリックしたときに、いかに窓の真ん中に止めるかに苦労した。　回転式の場合は、止まる寸前にギクシャクした動きになるし、縦流し式の場合はうまくタイミングを調節しないとへんなことになるので調節幅が小さいと言う問題があった。　この辺にまだ修正の余地がありそうである。

SAMPLE　（右は、マスクをかけずに動きを見られるようにしたもの)

ステージの準備

●250*160、背景色黒のステージ（48fps）を設定
●デザインは好みでよいが、ここでは、数字が流れる窓三つと、その下にストップボタン、右に、スタートボタンを配した。
　　インスタンス名は、スタートボタンは start_btn 、ストップボタンは、stop1, stop2, stop3 とした。
●マスク用矩形（30*60）を作成し、リンケージ名を mask としてライブラリーに格納しておく。

スクリプト（_root、FRAME1に記述）

var tfFormat1 = new TextFormat();
var tfFormat2 = new TextFormat();
tfFormat1.font = tfFormat2.font="Impact";
tfFormat1.size = tfFormat2.size=36;
tfFormat1.color = 0x000000;
tfFormat2.color = 0xff0000;
main();
function main() {
  for (n=1; n<=3; n++) {
    for (i=0; i<10; i++) {
      mc = createEmptyMovieClip("mc"+n+i, 10*n+i);
      tf = mc.createTextField("tf"+n+i, 10*n+i, 0, 0, 40, 40);
      tf.text = i;
      if (i == 3 || i == 7) {
        tf.setTextFormat(tfFormat2);
      } else {
        tf.setTextFormat(tfFormat1);
      }
      mc.angle = -(i-4)*360/10;
      rad = mc.angle*Math.PI/180;
      mc._x = 35+55*(n-1)+12*Math.sin(rad);
      mc._y = 60+100*Math.cos(rad);
      mask = attachMovie("mask", "mask"+n+i, 100+10*n+i);
      mask._x = 15+55*(n-1);
      mask._y = 22;
      mc.setMask(mask);
      run(mc,n);
    }
  }
}
function run(mc, n) {
  mc.speed = 5+n;
  var friction = 36;
  mc.onEnterFrame = function() {
    rad = this.angle*Math.PI/180;
    mc._x = 35+55*(n-1)+10*Math.sin(rad);
    mc._y = 60+110*Math.cos(rad);
    if (startB) {
      if (this.speed<1) {
        this.targetangle = this.angle+36-(this.angle)%36;
        this.angle += (this.targetangle-this.angle)/20;
      } else {
        this.angle += this.speed;
      }
      if (stop1B && n == 1) {
        this.speed += (0-this.speed*2)/friction;
      }
      if (stop2B && n == 2) {
        this.speed += (0-this.speed*2)/friction;
      }
      if (stop3B && n == 3) {
        this.speed += (0-this.speed*2)/friction;
      }
    }
  };
}
start_btn.onRelease = function() {
  stop1B = stop2B = stop3B = false;
  main();
  startB = true;
};
stop1.onPress = function() {
  stop1B = true;
};
stop2.onPress = function() {
  stop2B = true;
};
stop3.onPress = function() {
  stop3B = true;
};

数字文字の書式定義
（３，７は赤)

ｎは１，２，３列
ｉは０から９までの数字
空のムービークリップ
　mc11,,,,,,,mc39まで
各mcにテキストフィールド
　tf11,,,,,,,,,tf39まで
各ｔｆに０から９までの文字を
３，７は赤、その他は黒

36度毎に文字を並べる
（表示を7に揃える)
ラディアンに変換
ｍｃのｘ座標
ｍｃのｙ座標

マスク用矩形（mask）の配置

ｍｃにマスクを掛ける
関数 run の実施

speed：回転速度
friction：停止の係数

ラディアンに変換
mcのx座標
mcのy座標
startボタンが押されたら、
もし、speedが1以下になったら
ターゲットの角度で止まる
そうでなかったら
mc.speedで回転

stop1がクリックされ n が1なら
1列目のspeedを0まで減速し停止

スクリプトの説明

● this.targetangle = this.angle+36-(this.angle)%36;
　　数字文字が窓の中央で止まるように、angleを36度おきに設定する
　　（this.angleを36で割った余りを引くことで、this.angleが36度おきになる）
●数字が3つ揃ったら、何かイベントを起こそうとするときのヒント
　一つの数字が揃うと言うことは、すべての数字の位置（angle）が同じになっていると言うことなので、例えば、「0が3個同じangleになったら、イベントへ」と言うスクリプトを書けばよいことになる。
　　if (this.speed<1) {　　　}　の中のスクリプト内の、既述の2行の下に、
　　a = _root["mc"+10].targetangle%360;
　　b = _root["mc"+20].targetangle%360;
　　c = _root["mc"+30].targetangle%360;
　　if (a && b && c) {
　　　　if (a==b && b==c) {
　　　　　　trace("Bravo!");
　　　　}
　　}
を加え、trace("Bravo!"); のところへ、イベントを起こすスクリプトを記述すればよいということになる。　なお、もちろん二つが揃ったら、リーチアクションを起こすなどのことも同様に可能である。

HOME　　　お勉強総リスト

FLASHのお勉強 ーアクションスクリプトの実践的事始めー

FLASHのお勉強　ーアクションスクリプトの実践的事始めー