webアプリブログ | The Designium

blog home

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

「webアプリ」タグのエントリー一覧
「くままり」で使用したBox2D AS3テクニックScroll
「DSN Player」特設ページ＆プレイヤーSWFファイルを公開しました。Scroll
WebアプリのセキュリティScroll

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

弊社で製作し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」特設ページ＆プレイヤーSWFファイルを公開しました。

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

ブログ向けのFlash MP3プレイヤー「DSN Player」の特設ページを開設いたしました。

DSN Playerはブログパーツとしては先に公開しておりましたが、今回のページ開設に伴い、ブログ設置用のプレイヤー本体SWFファイル＋設置用スクリプトのダウンロードも可能になりました。詳しくは以下の特設ページをご覧下さい。

http://www.thedesignium.com/player/

個人利用や商用問わず、ご利用はフリーとなっております。どうぞお試し下さい。

今後ブログパーツでの新曲の追加配信や、新しいスキンの開発など、徐々にバージョンアップを重ねて、より便利でインタラクティブ性に富んだプレイヤーにしていきたいと思っていますので、何卒よろしくお願いいたします。

link: http://www.thedesignium.com/blog/news/1544
autor: sakuma comment: 0件
tags: DSN Player, Flash, webアプリ

Webアプリのセキュリティ

2009.04.14 - CMS, スキル, デザイン/アート

初めまして横山です。来年度入社予定です。

さて、今回はWebアプリケーションにおけるセキュリティの話です。コミュニケーションツールとしては掲示板・Blog・SNSなどがありますが、不特定多数のユーザーが書き込み可能という点においてはどれも共通しています。ユーザーのメールアドレスが登録されている場合も安心ではありません。セキュリティ対策を行わなかった場合、「他のユーザーになりすまして書き込み」、「データベースに保存されているデータを消去」、「認証すりぬけ」などの被害が予想されます。

一から開発する場合、セキュリティ対策はかなり時間のかかるものとなってしまいます。フレームワークを利用すればよいのかもしれませんが、独自仕様を習得する必要があります。そこで利用したいのがオープンソースです。Blogの場WordPressやMovable Type、SNSの場合OpenPNEが代表されます。ソースが公開されているので、セキュリティ対策がしてあります。必ずしも完璧ではありませんが、問題があった場合に開発側が対策パッチをリリースしてくれます。後はパスワード管理、フォルダのパーミッションくらいに気をつけるくらいでしょうか。サーバーを独自で持っている場合は、それのセキュリティ対策も重要ですが。

OpenPNEは、どの攻撃方法に対応しているのか公開しています。>>OpenPNEセキュリティ対策攻撃方法自体はこれだけではありませんが、この対策をしていれば残りの方法でも攻撃できません。ただしユーザーの利用に制限が出てしまいます。現在も日記を書く際にHTMLタグでの装飾はできません。これの対策としてBBコードを採用し、簡単な装飾が可能になっています。BBコードはもちろん安全ですが、WYSIWYGエディタは採用されていないようですので、結果を想像しながら装飾しなければなりません。(一応FCK Editorに変更すればBBコードの一部でWYSIWYG編集ができ、プラグインで対応するコードを増やす事もできるようです。)「セキュリティ」と「ユーザーの自由度」のバランスは難しいものですね。

link: http://www.thedesignium.com/blog/design-art/1294
autor: yoko comment: 0件
tags: javascript, SNS, webアプリ, WordPress

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

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

「DSN Player」特設ページ＆プレイヤーSWFファイルを公開しました。

Webアプリのセキュリティ