書き物

技術とか作った物の話とか愚痴文句感想など

Flex SDK で作った外部 swf の中で定義されているクラスを取り出す方法

AS3 技術 未分類

Flash で外部ファイルを扱う場合、swf へ埋め込む方法と、直接画像ファイル等をロードする方法があります。swf へ埋め込むとコンパイルに時間がかかったり、埋め込んだ swf 自体のサイズが大きくなったりします。外部ファイルをロードする場合、素材自体が丸見えになる他、数が多くなると、サーバーの負荷が上がったりなど。外部ファイルを自作アーカイブ化して、バイナリデータとして読み込んだ場合、音声データの復元に苦労したりします。

外部データをまとめておく方法の 1 つとして、素材用 swf にデータを埋め込んでおき、その swf をロード、swf 内の素材を取得・・・という方法がありますので、方法を書きます。

続きを読む

スクロールするマップチップのマップを表示する

0.61 AS3 Yasume 技術

この記事は「ActionScript Game Utility Library ‘ヤスメ’」v0.61 を対象にしています。

Yasumeにはマップチップによるマップ描画と、マップに対するオブジェクトの当たり判定を行う機能があります。 サンプル（ソース） サンプルでは、マウスカーソルをカメラが追従する形でマップスクロールします。マップ上には、2つの●が跳ね回っています。マップ上には4つの部屋があるように見えますが、マップデータとしては1部屋分のデータだけを定義しており、マップをループ描画することによって同じ部屋が4つ並んだように見えています。

サンプルの作り方は以下です。

続きを読む

Flexで動作毎にアニメーションさせる

0.61 AS3 Yasume 技術

この記事は「ActionScript Game Utility Library ‘ヤスメ'」v0.61 を対象にしています。

Flex は Flash のようにタイムラインが存在しないため、アニメーションをさせるための機構を自分で作る必要があります。「ActionScript Game Utility Library ‘ヤスメ'」には、動作単位でアニメーションを管理し、Flash のタイムラインっぽく操作するための機能があります。

続きを読む

ActionScript Game Utility Library 'ヤスメ' v0.61 をリリースしました。

0.61 AS3 Yasume 技術

ActionScript Game Utility Library ‘ヤスメ’ v0.61 をリリースしました。成果物はSpark projectをご参照下さい。 ActionScript Game Utility Library ‘ヤスメ’

v0.60からの主な変更点

  • シーン管理機能追加
  • RTMFPのNetStreamクラスによる複数人相互通信確立機能追加
  • マップオブジェクトの当たり判定機能追加（アクションゲームで言うリフトとかが作れます。）
  • サンプル作成。
    • 攻撃当たり判定 - AttackSample
    • マップオブジェクトの当たり判定 - HitObjectSample
    • マップオブジェクトの有効無効コントロール - MapObjectSample
    • マップチップによるマップ描画、当たり判定 - MapSample
    • RTMFPのNetStreamクラスによる複数人相互通信確立 - NetStreamChat
    • シーン管理、オブジェクトの状態遷移 - SceneTaskSample
    • 動作毎のアニメーションを管理 - TimelineSample
  • 他バグを修正

課題

  • 外部ファイルの構造を見直す。世間一般的には、外部ファイルは出来るだけ少ない数のswfに固めてリリースするらしい。ということで、開発時の外部ファイルはバラバラ、リリース時はswfに固めた物を、というスイッチングを簡単に出来る構造で外部ファイルの構成を見直す必要がある。
  • 未実装機能の実装。（攻撃の属性補正とか）
  • 多々残ったバグの修正。

NetStream と NetGroup 比較

AS3 RTMFP 技術

RTMFP による通信手段には大きく分けて NetStream クラスを使う方法と、 NetGroup クラスを使う方法があります。それぞれ一長一短があるので、要件に応じてうまいこと使っていきたいところ、ということで、ゲームを作る上で調べてた時に気づいたことを書いてみます。

NetStream

  • FlashPlayer10から使用可
  • 基本的に 1 対 1 の一方向通信用。双方向通信するためには、クライアント毎に受信用、送信用、2 つの NetStream が必要。
  • 通信速度が速い。ローカルで試した結果、お互い通信待ち処理を入れても、スムーズに同期がとれた。（遠距離だと分からないですが）
  • コネクションの確立に、相手の NearID が必要。不特定の相手と接続するためには、 CGI とかによる別ルートのやり取りが必要。

NetGroup

  • FlashPlayer10.1から使用可
  • 不特定多数との同時通信向き
  • 通信速度が若干遅い。同期待ち処理を入れると、かなりガタガタして使いものにならなかった。
  • あるグループに対して接続するイメージであるため、グループの識別名を指定するだけで、簡単に双方向通信する準備が出来る。

総括 格ゲーとかアクションゲームのようなリアルタイムさが要求される場合、NetStream クラスを、RPG の戦闘や、ボードゲーム、 カードゲームのような、各プレイヤーが順番に操作していくようなリアルタイムさはさほど不要なゲームなら NetGroup クラスを使う感じでしょうか。 しかし、NetStream クラスは高速ながら、複数人数の双方向通信環境を構築するだけでも、結構な手間です。NetGroup クラスの、コーディングの容易さは異常で、簡単なチャット程度ならすぐに実装出来てしまいます。リアルタイムさを求めるゲームを Flash で実現する場合、まずはできるだけ簡単に NetStream クラスによる複数人数の双方向通信を行える環境を作れるようにする必要があると思います。

Flex4でSpriteを使う

AS3 MXML 技術

Flex で画面を作るのに MXML はとても便利なので使いたいけど、同時に Shape をぐりぐり動かすようなゲームも作りたいというような場合、MXML で Shape を addChild したいことと思います。しかし、MXML のコンポーネントに対して Sprite を addChild しようとすると、例外が発生します。 こういう場合は、mx:Image に対して addChild をすると、Sprite を追加することができ、追加した Sprite に対して Shape なり Bitmap なりを addChild することで、自由にオブジェクトをぐりぐりできます。

サンプルコードは以下。今回の例は Flex4 の MXML ですが、Flex2、 Flex3 でも使えると思います。 <?xml version=“1.0” encoding=“utf-8”?> <s:Application xmlns:fx=“http://ns.adobe.com/mxml/2009” xmlns:s=“library://ns.adobe.com/flex/spark” xmlns:mx=“library://ns.adobe.com/flex/mx”>

<mx:Image id="rootObject" initialize="_onInitialize()">
</mx:Image>

<fx:Script>
    <![CDATA[
    import flash.display.Shape;
    import flash.display.Sprite;
    import flash.events.Event;

    private var _rootSp:Sprite;
    private var _shape:Shape;

    private function _onInitialize():void
    {
        _rootSp = new Sprite();
        _rootSp.addEventListener(Event.ENTER_FRAME, _onEnterFrame);
        rootObject.addChild(_rootSp);

        _shape = new Shape();
        _shape.graphics.beginFill(0);
        _shape.graphics.lineStyle(1, 0);
        _shape.graphics.drawCircle(0, 0, 10);
        _shape.graphics.endFill();

        _rootSp.addChild(_shape);
    }

    private function _onEnterFrame(event:Event):void
    {
        _shape.x++;
        _shape.y++;
    }

    ]]>
</fx:Script>

</s:Application>

RTMFP導入

AS3 RTMFP 技術

FlashPlayer10から、クライアント間で直接データ送受信を行えるAPIが追加されたようです。Flashで複数のクライアント上のデータをリアルタイムに同期させようとすると、XMLSocketだとかソケットサーバーだとかで実現してたと思いますが、FlashPlayer10からはデータ送受信の処理をサーバーではなく、swfのみで実施できるようになったということみたいです。これらのAdobe製通信プロトコルをRTMFPというらしいです。 今回はRTMFPを試すのに有用なページを幾つかピックアップしたいと思います。

RTMFPのサンプルを試すには、以下のページを見ると良いかと思います。 Adobeのプロジェクトページは以下です。 Adobe Labs - Cirrus 英語ですが、一番下のGetting Startedを見たら、なんとなくどうすれば良いかが分かります。 また以下のページにて、RTMFPのステキさが伝わる詳細な説明を読むことができます。 Flash Player上でP2P通信ができるRTMFPについて - blog.katsuma.tv

実際にAS3でRTMFPを使用したプログラムを書く場合は以下をば。 akihiro kamijo: netアーカイブ 具体的なクラスの説明はこちら。 Adobe® Flex® 4.1 リファレンスガイド

僕が軽く試した感覚だと、チャットぐらいならサーバーサイドのプログラム無しでかなり手軽に作ることができそうです。

次回から、RTMFPでFlashによるリアルタイムなオンラインゲームが出来るかどうか、僕が試してみたことを書いてみようと思います。