actionscriptブログ | The Designium

blog home

「actionscript」のタグキーワードで表示しています
これ以上前のページはありません
これ以上次のページはありません

「actionscript」タグのエントリー一覧
ブラウザの画面サイズリサイズされてもこれでOK Tips（ActionScript3.0）Scroll
「くままり」で使用したBox2D AS3テクニックScroll
ブログ向け音楽プレイヤー「DSN Player」を公開しました。Scroll

ブログメニュー
カテゴリー+タグ一覧へScroll
コメント&トラックバック一覧へScroll

ブラウザの画面サイズリサイズされてもこれでOK Tips（ActionScript3.0）

2010.02.04 - スキル

フルFlashサイトでブラウザの画面サイズが変更されてしまったときActionScriptでな～んしてないとムービークリップの大きさが画面サイズに連動して変わってしまいます。

それだと結構こまったチャンになってしまうときが多いのでキリンはコピペでこれ↓をよく使います(ﾉﾟοﾟ)ﾉｵｵｵｵｫｫｫｫｫｫ-

このサンプルswfを見てブラウザの画面サイズを変更してもらえればわかるかと思いますが、あらま！中央にムビクリが表示させて大きさが変わらないではありませんか！ActionScript3.0です！

resize

Flaファイルダウンロード！！！

link: http://www.thedesignium.com/blog/skill/2142
autor: ミズタニキリン comment: 0件
tags: actionscript, Flash, Tips

弊社で製作しmixiアプリとして公開させていただいている「くくまり」は、主にFlash ActionScript3を用いて開発しました。その中でもゲームの根幹部分を担っている2D物理演算処理については、「Box2D」という物理演算ライブラリを使用しています（実際に使用しているのはBox2DのAS3移植版）。ボールの落下速度、衝突時の跳ね返りといった処理はすべてこのライブラリを使用して実現しています。

以前「Drop Burger」を製作した際もこのライブラリを利用したのですが、今回はより発展的な使い方をしています。開発中は主にネットで解説記事を探して問題解決していましたが、中には参考ドキュメントが見つからず苦労した部分がありましたので、その箇所について解説をしておきたいと思います。同じ事でお悩みの方がいましたらぜひ参考にして下さい。

なおBox2Dの基本的な使い方に関してはこの記事では解説しませんので、これから勉強しようという方は以下の記事を参考にしていただけるとよいと思います。

・「特集：Box2DでActionScript物理プログラミング｜gihyo.jp」

1．生成したオブジェクトに固有の属性（ID）を持たせる

「くままり」では落下するボールに種類があり、それぞれグラフィック、重さ、大きさなどに違いがあります。Box2Dで扱える物体オブジェクト（b2body）には固有IDや属性といった概念がないため、これらを実装するには一工夫必要です。b2bodyオブジェクトには「m_userData」という空のオブジェクトが用意されているので、ここにMovieClipオブジェクトを作成して、そこに必要な属性を入れていきます。

newBall.m_userData = new MovieClip();
newBall.m_userData.id = 'panda';
newBall.m_userData.flag = false;
newBall.m_userData.enable = true;

こんな感じです。m_userDataに作成するオブジェクトのデータ型はSprite型でもString型でも大丈夫ですが、複数の属性を持たせる事を考えるとMovieClip型が一番使いやすいでしょう。もちろんライブラリ内のMCのクラス名を指定してもOKです。くままりではIDの他にXY座標やボールのレベル（リフティング回数）などを持たせています。これをEnterFrameイベント中の処理分岐に使うわけです。

2．反発の強さ（ベクトル）を操作する

「くままり」では自機とボールの衝突の際、マウスクリックで一瞬反発力が強まり、より勢いよくはじき飛ばせるという仕様を取り入れています。通常ではb2Bodyに設定されたdensity（密度）・restitution（反発計数）・friction（摩擦係数）を元に物理運動が再現されます。これらを動的に動かす事も可能ではありますが、物体に初速度を与える処理を実現したい場合はこの方法では難しいため、別の方法をとる必要があります。

b2Bodyクラスには「b2Vec2」というオブジェクトがあり、ここには物体の運動ベクトルが格納されています。この値を操作する事で、物体に初速度を与えたり、勢いを強める、進行方向を変えるといった処理が可能になります。

var vec:b2Vec2 = cbb.m_shape1.m_body.GetLinearVelocity();
if (vec.Length() < minimumBallVec) vec.Multiply(minimumBallVec / vec.Length());
if (vec.Length() > maximumBallVec) vec.Multiply(maximumBallVec / vec.Length());
vec.Multiply(myBallStatus.restitution);
cbb.m_shape2.m_body.SetLinearVelocity(vec);

b2BodyのGetLinearVelocityメソッドでベクトルを受け取り、SetLinearVelocityメソッドで計算し直したベクトルを設定します。b2Vec2クラスに計算に使えるメソッドがいくつか設定されているので、それを使うとよいでしょう。詳しくはソースファイル、ドキュメントを参照下さい。
「くままり」では何度も衝突させているとボールの勢いが弱まって、自機とボールがぶつかってもバウンドしなくなるという問題があったため、ベクトルの大きさに最小値（minimumBallVec）を設ける事で勢いが弱まった状態でも一定量以上バウンドさせるようにしました。またこの例では自機に反発力（myBallStatus.restitution）のパラメーターを設けています。反発力は通常1ですが、マウスをクリックする事で一瞬2に設定され、この間に衝突したボールのベクトルにその計数を乗算しています。この反発力にTweenMaxを使って変化を付け、自然にバウンドするよう調整しました。

3．衝突時に処理が重なる仕様を回避する。

Box2Dでオブジェクト同士の衝突を検出するには「b2world.m_contactList」を使用します。基本的にはEnterFrameイベント中で以下のようなforループを回して使用します。

for (var cbb:b2Contact = world.m_contactList; cbb; cbb = cbb.m_next) {
  trace(cbb.m_shape1.m_body.m_userData.id
      + ' : ' + cbb.m_shape2.m_body.m_userData.id);
}

これで衝突したボールのIDをTraceできます。出力をみれば分かりますが、「A：B」と「B：A」のような順序違いはひとつの衝突として見なされ重複しません。
ただここでひとつ問題が発生します。m_contactListに格納される判定リストは「衝突した瞬間」ではなく「衝突と言っていいくらい近い距離にいる」という基準で取得されているようで、フレーム数が細かいと1度の衝突で2、3回のイベントを重複して実行したり、接触している状態だと延々とイベントを実行し続けてしまったりします。これはBox2Dの仕様上の問題であるため、実装で回避するしかありません。

くままりではこれを「衝突後に数フレームの処理間隔を与える」事で解決しています。

const crashInterval:int = 5;

function enterFrameEvent (e:Event) {
    // 全b2Bodyオブジェクトを走査
    for (var b:b2Body = world.GetBodyList(); b; b = b.GetNext()) {
        // 衝突インターバルをデクリメント
        if (b.GetUserData() is MovieClip && b.GetUserData().crashinterval > 0) {
            b.GetUserData().crashinterval--;
        }
    }

    // 衝突イベント処理
    for (var cbb:b2Contact = world.m_contactList; cbb; cbb = cbb.m_next) {
        // 長ったらしいので代入
        var u_data1:MovieClip = cbb.m_shape1.m_body.m_userData;
        var u_data2:MovieClip = cbb.m_shape2.m_body.m_userData;
        // 衝突オブジェクトの処理間隔が0なら何かする
        if (u_data1.crashinterval <= 0 && u_data2.crashinterval <= 0) {
            // ここで何かする
        }
        // 処理間隔を設定
        u_data1.crashinterval = u_data2.crashinterval = crashInterval;
    }
}

こうする事で衝突処理の重複を回避できました。「くままり」の場合、crashIntervalの値は調整した結果5になりましたが、この値はフレームレートなどによって変わってくると思います。

4．衝突したオブジェクトの種類により処理を分岐する

Box2Dは基本的には『動く物体』と『動かない物体』の2種類でしかオブジェクトを判別しておらず、たとえばブロック崩しのようなゲームでも「壁」と「自機のバー」は同じ『動かない』オブジェクトですが、ボールがそれぞれと衝突した際の反応は異なっています。たとえば衝突音を変化させたい、反発度を変えたい場合などは処理を区別しなくてはなりません。
これはオブジェクトの種類によりIDを割り振って処理分岐を作る事で実現できます。項目1の内容が出来ていればもうほとんど解決なのですが、「くままり」ではそれぞれのオブジェクトに割り振ったIDを判別してSwitch文で分岐処理しています。

for (var cbb:b2Contact = world.m_contactList; cbb; cbb = cbb.m_next){
  if (cbb.m_shape1.m_body.m_userData && cbb.m_shape2.m_body.m_userData) {

    var u_data1:MovieClip = cbb.m_shape1.m_body.m_userData;
    var u_data2:MovieClip = cbb.m_shape2.m_body.m_userData;

    switch (u_data1.id) {
      // 自機との衝突
      case 'myball':
      if (u_data2.crashinterval <= 0) {
        /* ここで何かする */
      }
      break;

      // 床との衝突
      case 'floor':
      if (u_data2.crashinterval <= 0) {
        /* ここで何かする */
      }
      break;

      case 'wleft':
      case 'wright':
      if (u_data2.crashinterval <= 0) {
        /* ここで何かする */
      }
      break;

      case 'border':
      if (u_data2.crashinterval <= 0) {
        /* ここで何かする */
      }
      break;

      // ボール同士の衝突
      default:
      if (u_data2.crashinterval <= 0) {
        /* ここで何かする */
        // 衝突インターバルを設定
        u_data1.crashinterval = u_data2.crashinterval = crashInterval;
      }
      break;
    }
  }
}

以上のコードをEnterFrameイベント中で実行しています。毎フレーム実行する処理なので、負荷に気をつけながらコンパクトなコードに仕上げるのがよいでしょう。

link: http://www.thedesignium.com/blog/skill/1919
autor: sakuma comment: 0件
tags: actionscript, Flash, Tips, webアプリ

ブログ向け音楽プレイヤー「DSN Player」を公開しました。

2009.05.27 - デザイニウムニュース

Flashベースの音楽プレイヤー「DSN Player」のリリースを開始しました。

貼り付けコードは以下のものをお使いください。
<script type=”text/javascript” src=”http://www.thedesignium.com/player/blogparts.js”></script>

ブログ貼り付け型のプレーヤーは他にもいくつかありますが、このDSN Playerは以下のような特色を持っています。
・ Papervision3Dを使用した3Dビジュアライザーの搭載
・プレイリスト形式（xspf）の読み込み、再生

現在ブログパーツ形式でのみの公開となっていますが、近日中にSWFファイルの配布を開始いたします。MP3データをご自分のブログなどで公開したい場合などに、ご由にお使いいただけるようになります。自分で言うのもなんですが、このクラスの機能を持ったプレイヤーだと、フリーのものはなかなか無いのではないでしょうか。
今後も小サイズバージョンの作成やスキンの追加など、随時更新やバージョンアップも行っていく予定ですのでご期待ください。

現在ブログパーツに同梱されている曲は、自分が作成した曲と、大学の時の後輩でwevyにも曲を提供してもらったこともある「GK-CORE」によるトラックです。3曲ともかなりクラブ志向の強い曲ですが、気に入っていただければなによりです。現在も何曲かトラックを作成中ですので、完成し次第追加していきたいと思います。

近日中に続報を打てると思いますので、興味のある方はまたブログをチェックしてください。では。

link: http://www.thedesignium.com/blog/news/1481
autor: sakuma comment: 0件
tags: actionscript, Flash

tg

:

wevy(38) wevyムービー(22) イベント(21) 待ち受けFlash(16) Flash(15) 地域(12) Tips(11) ミズタニキリンのクレイジーセンサー(7) SNS(6) javascript(6) 会津大学(5) wevy待ち受け特集(5) mixiアプリ(5) WordPress(5) wevy週間ランキング(5) Webデザイン(5) アート(4) 社内教育(4) phidgets(4) センサー講座(4) 会津しこん(4) HTML/CSS(3) actionscript(3) レイアウト(3) webアプリ(3) WEBユーザビリティ(3) 地域、会津(3) GAINER(2) CSR(2) wiimote(2) mootools(2) DSN(F)シリーズ(2) Wii(2) 会津漆器(2) マルチタッチディスプレイ(2) 取材(2) 福島県(1) OpenSocial(1) ハッカソン(1) 音楽(1) 会津若松(1) Movable Type(1) UI(1) AR(1) Processing(1) Joomla(1) Google App Engine(1) ドット絵(1) GAE(1) 会津　データ(1) DROP BURGER(1) 地域性(1) ワークライフバランス(1) 夢(1) API(1) concept(1) AIR(1) 映画(1) 新人研修(1) DSN Player(1)

2010.1.20
:
mixiアプリモバイル作成前に見ておくべき10のまとめLink
suzukimilanpaak：
お返事が遅くなってしまい大変申し訳ございません。ご丁寧な回答...
2009.11.26
:
mixiアプリモバイル作成前に見ておくべき10のまとめLink
ミズタニキリン：
下記(A)、(B)より80～90%の機種はFlash lite 2.0に対応しているという結果になり「mixiのユーザー層にFlash lite...
2009.11.24
:
mixiアプリモバイル作成前に見ておくべき10のまとめLink
suzukimilanpaak：
(2)FlashLite2.0での開発がオススメについて質問させてください。mixi�...
2009.10.10
:
ミズタニキリンのよくある質問Link
ミズタニキリン：
ごめんなさい。ゴーキのミズタニではないです。ゴーキってゴーキ美術研究所のことですよね？はちゃめちゃな妹は確かゴーキに行...
2009.10.6
:
ミズタニキリンのよくある質問Link
キョン：
ひょっとしてひょっとするとゴーキのミズタニさんですか？間違ってたらごめんなさい。

2009.12.10
:
センサー講座 Spe.001 Wiimote WhiteboardLink
お金と知識のない学生が努力と根性で作ったもの
from アナリハ
この前の１０月・１１月に定期的にプレゼンをする事になった。...
2009.10.27
:
11/7 CSS Nite in 新潟開催!Link
ブログで紹介いただきました。
from CSS Nite in NIIGATA
デザイニウムブログ
2009.9.4
:
越後妻有アートトリエンナーレ大地の芸術祭2009（前編）Link
ブログ | The Designium - デザイニウム
from 越後妻有アートトリエンナーレ大地の芸術祭2009（後編）
越後妻有アートトリエンナーレ...
2009.9.4
:
越後妻有アートトリエンナーレ大地の芸術祭2009（後編）Link
ブログ | The Designium - デザイニウム
from 越後妻有アートトリエンナーレ大地の芸術祭2009（前編）
越後妻有アートトリエンナーレ...
2009.6.25
:
若手向けの勉強会企画してみました。Link
[勉強会]みちのくIT会議ってのが福島であったようだ。
from 笑う角でずっこける。
まぁ、タイトルでまとまってしまったけど…。初めて聞く名前だったので情報を集めてみた。...

TheDesignium

blog home

ブラウザの画面サイズリサイズされてもこれでOK Tips（ActionScript3.0）

「くままり」で使用したBox2D AS3テクニック

ブログ向け音楽プレイヤー「DSN Player」を公開しました。