calendar

S M T W T F S
 123456
78910111213
14151617181920
21222324252627
28293031   
<< May 2017 >>

categories

archives

進化の早い3Dライブラリと上手く付き合っていく

0
    JUGEMテーマ:コンピュータ


    3D対戦ブラウザゲーを作ってて、最近思った事をまとめてみます。
    同じような事をやろうとしている方の参考になれば幸い。

    仕事で作るプログラムなんかですと、規模が大きいものはフロントエンド・アプリ・ビジネス・DBと、ロジック毎にレイヤー分けしますが、個人製作でも3Dライブラリを使ってなんかを作る時もレイヤー化した方がいいんじゃない?っていうお話です。

    まずは、その理由から。

    最近は、ブラウザで3D表示させる手法も多様化してきていて、どれを選択すれば良いのか迷ったりします。
    自分はFlashでAway3Dを使っていますが、Away3Dも年一回(以上?)のペースでメジャーバージョンアップされ、その度にライブラリ内の細かい部分が変わってしまうので、プログラム内でちょっと凝ったことをしていると、バージョンアップしたら動かなくなった、という事が毎回発生します。

    このように進化が早いにもかかわらず、3Dライブラリは複雑化していきますので、学習コスト(習得時間)及び製作時間は反比例して増えていきます。自分の場合、Flashでゲームを作るとしたら、昔は一か月もあれば大作(?)ができたものでしたが、3Dゲームとなると、ちょっとしたモノを作ろうと思ったら、最低でも3カ月。それなりのものを作ろうと思ったら半年や1年はかかるでしょう。苦労して作って完成したころには、型遅れになっています。

    常に最新のバージョンを使い続けるという選択肢もありますが、バージョンアップの度にライブラリ内を必死で解読したり、英語フォーラムに質問したりで、それなりに苦労します。

    一方、ウェブでコンテンツを公開する上で、気にしていなくてはいけないのが、閲覧者のPCスペックです。
    自分はネット対戦ゲームを作っている為、対戦相手の動作状況をある程度トレースしています。負荷をかけないように5000ポリゴン位で作っていますが、それでも1/60フレーム近くで動作しいてる人は半分もいません。ソフトウェアレンダリングの人に至っては、全体の1/3以上います。しかしながらユーザ環境は、PC買い替え等によって、ゆっくりと改善されていきます。こういった変化にも注意しながら、どの程度の負荷が妥当なレベルかを見極めていく必要があります。

    コンテンツを作るのに時間をかければ、長い間遊べるものにしたいと思うのは当然ですが、一方で進化が激しい3Dライブラリや変化していくユーザ環境と、どう付き合っていくか、が一つの課題となります。

    というわけで、これらの対策として3Dライブラリとやりとりする部分を、外に出したらいいんじゃねって事です。


    ゲームロジック内から、3Dライブラリをそのまま利用すると、3Dライブラリを変えたりバージョンアップする度にゲームロジック全体を見直さなくてはいけない。ゲームロジックは複雑煩雑化しがちな為、結構大変。


    そこで、3Dライブラリを呼び出す部分は、別クラスに切り出してまとめておく。こうすることで、3Dライブラリを変更する場合は、この中間部分のみを見直せばよくなるので、比較的ライブラリの変化に対応しやすい。 尚、このインターフェイス部分は、できるだけ汎用的に作っておき、どんなゲームでも利用できるように考えて作ると尚良い。


    こうすると、更に分かりやすくなるかも。



    FlashCS5からのiPhoneOSパブリッシュ手順

    0
      Flash CS5からiPhone書き出しをやってみたので備忘録用の手順を記載してみます。備忘録メモなので走り書きであまり具体的な手順は書いていないので全体の工程チェックなどに参照頂ければいいかと。この手順についてはAdobeの公式マニュアルが充実しているのですが、繰り返し同じ記載が多くて長いので、簡潔にまとめてみました。ただしAppleのディベロッパーサイト側の構成が変わるペースが早く、時間がたつと記載した内容通りいかなくなる可能性があるのでその際はやはり公式マニュアルを見ることをお勧めします。

      今回の手順は、全行程をWindows+FlashCS5で行っています。自分はMac+Xcodeも弄った事ありますが、やはりFlashで作った方が効率は全然いい気がします。ただしFlashで作ると非常に重たくなりますので、パフォーマンスを重視するようなゲームだとMac+Xcodeで作った方がいいみたいです。

      尚、本手順は以下を前提として書かれています。
      ・WindowsPCにFlashCS5、及びiTunesがインストールされている。
      ・iPhoneもしくはiPadなどのデバイスがあり、iTunesと同期されている。
      ・Appleのディベロッパー登録を完了している。(ディベロッパー登録は無料だが、iPhoneアプリ開発には、年間一万円くらいの費用が必要です)


      では、以下手順になります。

      ●●●●開発証明書ファイル(p12ファイル)の作成●●●●



      ■OpenSSL-Win32のインストール
      OpenSSLのサイトからOpenSSLをダウンロードしインストールする
      Visual C++ 2008 再頒布可能ファイルもインストール
      ・openssl.exeへのPathを通す(デフォルトインストールではC:¥OpenSSL-Win32¥bin)

      ■秘密鍵の作成
      ・フォルダを1つ作る(ここではC:¥apple_devとする)
      ・コマンドプロンプト(管理者として実行)でC:¥apple_devへ移動して以下の2つのコマンドを実行(mykey.keyとCertificateSigningRequest.cerSigningRequest(CSRファイル)が作成される)

      openssl genrsa -out mykey.key 2048

      openssl req -new -key mykey.key -out CertificateSigningRequest.certSigningRequest -subj "/emailAddress=hoge@hoge.com CN=hoge, C=JP"


      ※emailAddressとCN(証明書名)は適宜書き換える
      ※opensslはエラーが出てもファイルは作成されるがそれは使えないゴミファイルである。エラーが出たら必ずコマンドを確認して再実行すること。

      ■Appleのサイトへの開発証明書の登録(CSRファイルをアップロードしてCERファイルをダウンロードする)
      Appleのディベロッパーサイトにアクセスする(ブラウザはsafariがよいかも)
      ・ログオンし、[iOS Dev Center] - [iOS Provisioning Portal](画面右側)へ進む
      ・[Certificates]-[Request Certificate]をクリック
      ・先程作成した、CSRファイルを選択し[Submit]
      ・Statusが[Pending Issuance]になっているがページを再表示すればすぐ[Issued]になるので、[Download]
      ・[ios_development.cer]というファイルがダウンロードされるので、c:¥apple_devフォルダへ移動させる。

      ■開発証明書ファイルのp12ファイルへの変換(iphone_dev.p12ファイルの作成)
      ・コマンドプロンプトでC:¥apple_devへ移動して以下コマンドを実行(ios_development.pemファイルが作成される)

      openssl x509 -in ios_development.cer -inform DER -out ios_development.pem -outform PEM

      ・続いて以下コマンドを実行

      openssl pkcs12 -export -inkey mykey.key -in ios_development.pem -out iphone_dev.p12

      ・[Enter Export Password]と出るので、パスワードを入力、[Verifying - Enter Export Password]と出たら同じパスワードを入れる。
      ※入力したパスワード文字は画面に表示されないが、内部的に入力は認識されている。パスワードを入力後Enterを押し、[Verifying ...]と表示されたらもう一度同じパスワードを入力しEnterをおす。

      これで[iphone_dev.p12]というファイルが作成される。


      ●●●●デバイスへのprovisionファイル登録●●●●



      ■Appleのサイトへデバイスを登録する。
      ・iTunesを立ち上げ、デバイスを接続する。
      ・デバイスにiPhone/iPadが表示されたら、クリックして[概要]を表示させる。
      ・[シリアル番号]のところをクリックすると、[識別子(UDID)]に表示が切り替わる(40文字の英数字)、この状態で[Ctrl]+[C]すればUDIDがコピーできる。
      Appleのディベロッパーサイトを開きログオン
      ・[iOS Dev Center] - [iOS Provisioning Portal](画面右側)をクリック
      ・[Devices] - [Add Devices]をクリック
      ・Device Nameには「太郎iPhone」とか分かりやすい名前を入力、Device IDに、[Ctrl]+[V]でUDIDを貼りつけして[Submit]

      ■App IDsへアプリケーションIDを登録
      ・[App IDs] - [New App ID]をクリック
      ・[Description]へ分かりやすい名前を入力、Bundle Seed IDは[Generate New]、Bundle Identifierには、自分以外も含めた全てのアプリでユニークなIDを付ける(com.example.aaaとか)
      ・[Submit]をクリック

      ■Provisioning Fileの作成
      ・[Provisioning] - [New Profile]をクリック
      ・[Profile name]は分かりやすい名前、[Certificates]にチェック、[App ID]はさっき登録したものを選択、[Devices]にチェックし、[Submit]をクリック
      ・元画面に戻ると、Actionsが「Pending」になっているが、ページをリロードすればすぐに[Download]に変わるので、ここから[〜.mobileprovision]をダウンロードする。
      ・ダウンロードしたmobileprovisionファイルをc:¥apple_devへ移動させる。

      ここまでの手順で、C:¥apple_devには以下2つのファイルが用意できる。
      ・〜.mobileprovision(モバイルプロビジョニングプロファイル)
      ・iphone_dev.p12(開発用証明書)
      これら2つのファイルが出来れば、準備完了。


      ■デバイスへ、mobileprovisionファイルを登録する。
      ・iTunesを開き、デバイスを接続。
      ・[ファイル] - [ファイルをライブラリに追加](この際、追加されたファイルはどこにも表示されないので注意。再度追加しようとすると「上書きしますか?」と聞いてくる)
      ・デバイスを接続し、同期する。
      ・同期が完了したら、デバイス上で、[設定]-[一般]-[プロファイル]を開きmobileprovisionファイルが登録されている事を確認する。


      ●●●●Flash CS5からIPAファイルを書き出しデバイスへ転送●●●●



      ■アイコンファイルの作成
      ・Flashとは別途、以下の画像ファイルを用意する。
      C:¥apple_dev¥icons¥Icon29.png (29x29ピクセルのアイコン。)
      C:¥apple_dev¥icons¥Icon57.png (57x57ピクセルのアイコン。)
      C:¥apple_dev¥icons¥Icon512.png (512x512ピクセルのアイコン。)
      C:¥apple_dev¥Default.png (320x480ピクセルのアイコン。アプリ起動時の画像。必ずFLAファイルと同じフォルダに保存し、大文字Dから始まる名前にする)

      ■Flaファイルの作成及び書き出し
      ・Flash CS5を立ち上げ、[新規作成] - [iPhone OS]を選択。
      ・C:¥apple_devへ名前を付けて保存する。
      ・キャンバスに適当に絵を描くか、HelloWorldとか書いておく。
      ・[ファイル]-[iPhone OS 設定]をクリックし、以下の通り設定
       [一般]タブ
        [アプリケーション名]アプリの下に表示される名前
        [フルスクリーンモード]チェック
        [レンダリング]CPU
       [デプロイ]
        [証明書]iphone_dev.p12を指定
        [パスワード]p12ファイルを作成するときに入力したパスワード
        [プロビジョニングファイル]mobileprovisionファイルを指定
        [アプリケーションID]多分自動的に代入されるが、Appleのサイトで指定したApps IDを入力
        [デプロイタイプ]クイックパブリッシュ-デバイスでのテスト用にチェック
       [アイコン]
        それぞれの3つのアイコンに、作成したアイコンを指定する。

      ・この状態で[OK]を押して保存
      ・[パブリッシュ]を押すと数分間[パブリッシュ中]が表示された後、IPAファイルが作成される。


      ■デバイスへアプリの登録し動作テストする
      ・iTunesを立ち上げ、デバイスを接続した状態にする
      ・先程作成したIPAファイルをダブルクリックすると、iTunesのAppにアイコンが表示される。
      ・iTunesの[デバイス]-[App]タブを選択し、[Appを同期]にチェックする。
      ・一覧から作成したアイコンを、右のスクリーンイメージ上へドラッグする。
      ・右下の[適用]をクリック。同期が完了するとデバイス上でテスト可能となる。


      ■2回目以降のビルド・テスト手順
      ・デバイス上から、該当のアイコンを削除する。
      ・FlashCS5でパブリッシュしIPAファイルを更新(数分かかる)
      ・パブリッシュが終了したらIPAファイルをダブルクリック(iTunes内のファイルが更新される)
      ・iTunesのデバイス-[App]画面で、アプリのチェックが外れているのでチェックする。(スクリーンイメージ上にアイコンが追加される)
      ・右下の[適用]を押して同期

      FRateLimiterでフレームレートを安定させる

      0
        ※環境によっては却って重くなってしまう場合があるようです。ご注意ください

        BOX2DのユーティリティGeneralの中にあるFRateLimiterの紹介です。BOX2Dに限らず使える、文字通りGeneralなクラスです。
        自分は度々このクラスのお世話になるんですが、ネットでの情報があまり出てないようなので自分用メモを兼ねて紹介してみたいと思います。

        負荷の高いコンテンツを作成するとフレームレートが落ちてしまうので、作成した内容を削ったり、コーディングを見直すなどして負荷を軽くしていき、設定フレームレートで実行できるようにするという事がよくあるのですが、その際できるだけ多くのコンテンツは残したいので、だいたいギリギリ設定フレームレート前後で動作するものが最終的に仕上がる事になります。

        この状態の際に、Flashは設定したフレームを実現できない場合、それに追いつこうとしてか瞬間的に設定FPS以上のタイミングで処理を行ったりしますが、この速いタイミングの処理がまた負荷になってメモリを消費してFPSが遅れて、という悪循環になったりします。

        そこで、指定したFPS以上のスピードでは処理をしないように設定することで、CPUの負荷を減らし、結果的に設定FPSに近い数値で安定して動作させるという時に使うのがFRateLimiterです。

        FRateLimiterは、BOX2Dをダウンロードするとオマケみたいな感じでGeneralの中に入っているstaticなクラスです。

        使い方は簡単です。まずはインポートします。
        ----------------------------------
        import General.FRateLimiter;
        ----------------------------------


        あとは、EnterFrameイベントの中に以下の通り記述するだけです。
        ----------------------------------
        FRateLimiter.limitFrame(30); //フレームレートを30に固定
        ----------------------------------


        更に、例えばフレームレートは60に設定して、limitFrameで30でリミットカットすると、より安定する場合もあるようです。

        写真素材からベクターイラストを作る

        0
          Flashでコンテンツを作るに当たって、背景絵などでベクター絵を作りたい時が良くあります。ゲームとかだと、キャラクターをベクター絵などで作ると、背景が実写だと全体のバランスとして違和感が出てしまいますので、できれば背景もキャラクタに合わせてベクターのイラスト素材で揃えたい、と言った欲が出てきます。

          しかしながら、自分はあまり絵が得意ではないので、自分ではなかなかイラストが描けません。そこで、ネットのフリー素材や、図艦等に載っている写真をトレースして、できるだけ手間をかけずにベクターイラストを作る方法を模索してみました。

          今回色々な方法を試してみて、PhotoshopやIllustrator等も使ってやってみたところ、それなりにきれいに作れたのですが、もっとシンプルに1素材10分くらいでザッと作れる方法はないかと色々試行錯誤した結果、Flashだけを使って作成する今回の手順に落ち着きました。

          以下写真付きで解説してみたいと思います。
          説明長いですが、慣れれば10分位で作れるようになると思います。

          _菫をステージに配置しシェイプ化する
          ・jpgなりの画像をステージにドラッグして配置する。(以後配置したレイヤーを「画像レイヤー」とします)
          ・画像を右クリックして「分解」→プロパティでビットマップがシェイプになる。




          背景部分を削除する
          ■背景が無い画像の場合
          ・投げ縄ツールを選択し、自動選択ツールが選択されている状態にする。
          背景をクリックすると、背景だけが選択されるので、Deleteで背景部分を削除する。




          この時、絵と背景の境界線がギザギザになる場合は、[Ctrl]+[Z]で戻してから、「自動選択ツール設定」の「選択する色の範囲」の数字を調正して何度かやり直してみる。

          ※背景がある場合は、上手く輪郭が選択できない場合があるので、投げ縄ツールの自動選択モードをOFFにし、輪郭をなぞって選択します。

          ※この後、色を塗っていきますが、この時点で画像レイヤーを複製してロックしておくと、あとでやり直したり、写真の色の確認がしやすくなります。

          色の境界線を引く
          画像レイヤーをロックし、上位レイヤー(鉛筆レイヤー)を作成する。鉛筆レイヤーに、鉛筆ツールを使って色の境界となる線を引いていく。

          ※真っすぐの線が上手く引けないときは、[Ctrl]+[+]で画像を大きくしてやったり、画像を斜めにしたり(あとで線と元画像を一緒に戻す)してやる

          ち澗里凌Г鯏匹
          画像レイヤーのロックを解除し、画像全体をバケツツールで色を塗る。

          ※グラデーションで色を塗る場合は、一度縦にして塗ってからまた横に戻す。(自由変形で回転時は[Shift]を押しながらやると45度,90度と正確に回転できる)

          テ睇瑤良分の色を塗る
          鉛筆レイヤーの線を全て、画像レイヤーに切り取り・貼り付けする。画像と線が同じレイヤーになると、各領域を選択できるようになるので、領域毎にグラデーションの色を調正したり、色を塗ったりしていく。


          線を消す
          消しゴムツールで線を消すを選択する。大きい消しゴムにして、画像全体をゴシゴシして線だけを消す。



          ★できあがり★

          Enterキーで確定処理(変換中のEnterと区別させる)

          0
            TextFieldにカーソルがあって、Enterキーで入力処理を実行する、
            なんて事をしたい場合の方法です。ポイントとしては、日本語入力の
            漢字変換確定時のEnterキーと、区別させる事です。

            以下のコード例は、入力用のTextFieldをtxtChatInputという名前で
            宣言した場合の例です。処理実行として、Enter時にbtClick("送信")という
            関数を呼び出すとします。


            イベントリスナーセット
            txtChatInput.addEventListener(KeyboardEvent.KEY_UP, eCharInputKeyUp); //

            ・・・・

            //イベント実行時の関数(と変数)
            public var tmpInputString:String;
            public function eChatInputKeyUp(e:KeyboardEvent):void
            {
               switch (e.keyCode) {
                  case 32: //space 変換
                     break;
                  case 13: //enter
                     if (tmpInputString != txtChatInput.text) {
                        tmpInputString = txtChatInput.text;
                     } else {
                        btClick("送信");
                     }
                     break;
                  default:
                     tmpInputString = txtChatInput.text;
               }
            }

            入力した文字列を一時的に保存する変数(以下の例ではtmpInputString)へ
            入力イベントで入力値を代入していき、Enter時にTextFieldのtextと変数を比較し、
            同じなら処理を実行、異なるなら変換確定のEnterとみなして処理は実行しない、という方法です。

            swfのコピー転載や直リンクを防ぐ

            0
              swfファイルへの直リンク及びファイルコピーの防止方法について。

              ■swfコピー転載の防止
              swfファイルをコピーして転載されると、自分のHPへのアクセス数は伸びませんので正確な閲覧者数を知ることができません。
              まだ日本のサイトで良識ある運営者の場合なら、転載されたサイト管理者にメールするなりしてお願いできますが、必ずしも相手が止めてくれるとは限らないし、海外の理解不能な言語のサイトにコピー転載されたりすると止めてもらうのは至難の業です。

              そこで、swfにちょっとしたプログラムを記述する事で、自分のURL以外では動作しないようにします。
              以下のプログラムをタイトル等の任意の場所に記述します。

              //----------------------------------------------ここから
              var info: LoaderInfo = root.loaderInfo;
              trace(info.url.toString());
              if (info.url.toString() != "http://〜ご自身のサーバのswfのパス〜.swf" &&
              info.url.toString() != "file:///〜ご自身のローカル開発環境のswfのパス〜.swf")
              {
              //ここに画面のボタンを操作無効にするなり、タイムラインをstop()するなり記述する
              }
              //----------------------------------------------ここまで

              LoaderInfoのurlプロパティを使えば、swfが実行されている場所(URL)が判別できますので、自分のサイトもしくは開発ローカル環境以外では動かないようにできます。(ローカル開発環境のパスはtraceの記述のところで分かると思います。)

              ■swfファイルへの直リンクの防止
              .htaccessファイルをウェブサーバのルートディレクトリに配置すれば直リンクを防ぐことができます。
              .htaccessの内容は以下のように記述します。

              //----------------------------------------------ここから
              <Files ~ "¥.(gif|png|jpg|swf)$">
              SetEnvIf Referer "^http://polig¥.daa¥.jp" ShowOK
              SetEnvIf Referer "^$" ShowOK
              order deny,allow
              deny from all
              allow from env=ShowOK
              </Files>
              //----------------------------------------------ここまで

              上から2行目のURLはご自分のサイトに合わせて変更します。
              この方法については、下記サイトが詳しく説明しています。
              直リンクを防ぐには?・・・禁止と言っても無駄
              「直リンク禁止」とかでググっても結構いっぱい出てきます。

              PV3Dでのパフォーマンス向上テクニック

              0
                今回はPV3Dでのパフォーマンス向上テクニックについてです。

                最近のFlashの3D技術は単なるデモだけでなく、ゲームなどのコンテンツを作成しているブログをよく見かけますが、どの方も同じように「パフォーマンスが思うようにでない」という悩みにぶち当たるようです。例えば自分が作っているようなゲームなんかだと、自機、敵機、自弾、敵弾、爆発エフェクト、背景、音楽、効果音、スコア管理なんかを同時並行で処理していく為、どうしても処理が重くなってしまいます。コンテンツ作りの7割近くがパフォーマンス向上に対しての労力を割いているのではないかと思えるほどです。

                なので、とりあえず今まで自分が試行錯誤してきた中で気付いた点で特に効果が大きいものを書いてみます。
                まあ内容的に当たり前なものやインチキっぽいものまでありますが、苦労した中で気付いたものですので、積極的に情報共有していくべきかと思い書くことにします。


                。械追漸茲良蕾戮StatsViewを表示させて確認する。
                PV3Dには、3D描画に関する情報を表示させるStatsViewというクラスがあります。使い方は簡単で、以下のようにオブジェクト化してaddChildするだけです。

                import org.papervision3d.view.stats.StatsView;
                -------------------------
                var sv:StatsView = new StatsView(renderer);
                addChild(sv);


                この様にFPSや、描画されている▲ポリゴン数、メモリ使用量などが表示されます。特にメモリ使用量は、実行環境プレビュー、swfダブルクリック実行、HTML上からの表示で変りますが、HTMLからの表示で、できれば5MB前後、少なくとも10MB以下で抑えられるように最終調整していきます。またメモリ使用量は増えていって一気に下がる、を繰り返しますが、多分ガベージコレクタの動きを反映していると思われます。

                描画総ポリゴン数は1000以下にする
                というか、500位が理想です。StatsViewのCTr数で確認できます。ポリゴン数が少ないほどパフォーマンスが良くなる、といえば当たり前ですが、特に顕著に如実に結果に表れますので、試行錯誤して如何にポリゴン数を減らすか、という地道な作業の積み重ねが大事です。もちろん、キャラクタ自体はローポリ化するに越したことはないですが、例えば遠くの背景なんかはbitmap化して一枚のPlaneに張り付けたりします。特に球体はポリゴン数が多くなりがちなので、Planeに球体の絵のbitmap貼り付けが効果的です。

                あともっともポリゴン数を消費しがちなのが「床」です。これはtanjoさんがレースゲーム作成記で行われている、1枚のPlaneにbitmap.drawして書き換えていくという手法が現時点では最も効果的だと思います。


                Tweenerはメインのクラスのものを共有して使う
                クラス(ファイル)が複数になってくると、各クラスの頭にTweenerクラスをimportして使いがちですが、パフォーマンス上これはよくありません。メインとなるクラスにのみTweenerをインポートし、それをそれぞれのクラスで使いまわします。記述方法として正しいか分かりませんが自分は以下のような感じでやっています。


                ■メインとなるクラスは、thisを引数として子クラスを生成する。

                import caurina.transitions.Tweener; //メインとなるクラスのみTweenerをインポートする

                public var w = Tweener; //子クラスなどでも共有して使うTweener
                public var c:hogeClass;

                //子クラスを生成
                c = new hogeClass(this);


                ■子クラスはコンストラクタで親クラスを変数に割り当てる
                private var p;
                public function hogeClass(prmP):void //コンストラクタ
                {
                p = prmP;
                }

                ■子クラスからTweenerを使う場合
                p.w.addTween(〜)


                ・・・うーん、分かりずらくてスイマセンw

                3Dモデルよりも、できるだけParticleやLines3Dを使う
                例えばレーザビームは細長い立方体ポリゴンモデルを使うよりも、Lines3Dで線を一本描画して終わり、とします。空気中のチリやホコリや雪なんかはParticlesFieldを使います。これらは描画的にはシンプルな線・点としての表現になってしまいますが、事パフォーマンスに対してのメリットは大きいですので、全体のバランスを考えながら効果的に使っていきます。

                DisplayObject3Dの入れ子はできるだけ1重にする。
                sceneに直接3Dモデルなどを置くことができますが、Tweenerで動かしたときにスムーズに動かない場合があるようですので、3DモデルはできればDisplayObject3DにaddChildさせて使います。

                var do3d:DisplayObject3D; //コンテナとなるDisplayObject3D
                do3d = new DisplayObject3D;
                scene.addChild(do3d); //sceneにaddChild

                var c = new hogeChara(); //表示させる3Dオブジェクト
                do3d.addChild(c); //直接sceneにaddChildさせず、DisplayObj3ct3DにaddChildする。

                //キャラを移動させる場合は、cではなくdo3dを動かす。

                また、例えば人間の肩・肘の関係を表現する場合などはDisplayObject3Dをネストさせていく事で表現することができますがネストしすぎると、パフォーマンスへの影響が大きくなるようです。できるだけDisplayObject3Dのネストは1回のみ、多くても2回までと意識するのがいいかと思います。

                Γ械張ブジェクト生成・addChildは一番最初にすべて行っておく
                3Dオブジェクト生成・addChildは、一瞬ですがパフォーマンスを犠牲にします。最悪画面が一瞬止まります。例えば雑魚キャラを次々に表示させる場合、表示の度に雑魚キャラ生成・addChildするのではなく、ゲーム初期化時に最大数を生成しておき、あとはvisibleを切り替えたりしてその生成されたオブジェクトを使いまわします。(ただし、モノによってはいちいちremoveChildした方がパフォーマンス上がる場合もあるようなので、一応覚えときましょう)

                当たり判定などは毎フレームやらなくていいものもある
                自分はゲームは今のところすべて30FPSで作っていますが、自機の当たり判定などは、毎フレームやらなくても問題ありません。Timerイベントを使って
                ENTER_FRAMEの負荷を下げるのも効果があります。どの判定がどの程度端折れるかは試行錯誤しながら調整していきます。


                なんか全体的に分かり辛い内容になってますね、スイマセン。
                まだいろいろあるんですが疲れたのでとりあえず一旦ここまでとしますw
                では。

                3D用テクスチャ素材をてっとり早く入手する方法

                0
                  裏ワザ的なテクスチャ素材の入手方法です。
                  3Dモデルに使用するテクスチャ素材っていうのは、自前で作ろうと思うと結構な手間がかかるし、ネットで入手できる素材もイメージにマッチするのを探すのは苦労するし、有料のやつは結構高いし・・・という感じな訳ですが、自分なりにいろいろ検証した結果、一番てっとり早くテクスチャ素材を入手するやり方が、Googleの3Dギャラリーからテクスチャ素材を摘出する方法です。

                  手順は簡単で
                  ・3Dギャラリーから3Dモデル(skpファイル)をダウンロードする
                  ・Google SketchUpで開く。
                  ・[ファイル]-[Export]-[3Dモデル]でGoogle Earth 4形式のkmzファイルで出力する。
                  ・kmzファイルを解凍して、中にあるimageフォルダの中からテクスチャを探す。
                  これだけ。

                  KMZファイル解凍したところ


                  某モデルから入手したテクスチャ


                  テクスチャ使って作った立方体


                  利点としては以下。
                  ・元々3Dモデルに貼られているテクスチャだから、3Dモデルにマッチする。
                  ・自分が作っているものに似たキーワードで検索すれば見つけやすい。
                  ・数が豊富で、中にはレベルがかなり高いものも含まれる。

                  ※人様が作ったものを拝借する訳なんで、各自の責任において行って下さい。当方は責任持ちません。

                  PV3Dのブレンド未対応対策(爆発ムービークリップ)

                  0
                    前回エントリーした爆発モーションは、背景を黒以外にした場合に煙画像の黒い部分(背景部分)が見えてしまうことが分りました。

                    デモはこちら

                    ざっと調べた結果、PV3Dのマテリアルで使用するテクスチャ画像は、アルファは正確に反映されるものの、ブレンド情報は正確に表示反映されない(サポートされていない?)事が分りました。煙は背景が黒の素材をブレンドモード加算で使用しているので、それが見えてしまっています。

                    ※2008/9/6追記)オブジェクトのuseOwnContainerプロパティをtrueにすることでブレンドを適用する事ができます。詳しくはこちらのエントリをご覧ください。

                    そこで、Photoshopで作成した煙画像を、背景を透明にしたもので作成し直しました。作成手順は以下のような感じです。

                    1.白黒の雲模様を作る。(画像左上)
                    2.別レイヤーで、中心が透明な黒のグラデーション(円)を描く。(画像右上)
                    3.2つのレイヤーを統合する。(画像左下)
                    4.黒部分を透明にする。(画像右下)
                    5.この画像をPNGで保存する。

                    で、この画像を使って実現したのが↓

                    デモはこちら

                    怪我の功名というか、前よりもより爆発っぽくなりました。
                    Photoshopも最近使い始めたんですが、色々な素材を簡単に作れそうで面白いですね。
                    Photoshopはまだまだ初心者なんですが人並みに使えるようになりたいです。

                    爆発ムービークリップと爆発クラスの作成

                    0
                      PhotoShopで作った雲模様と光をブレンドで掛け合わせて、爆発のムービークリップを作りました。

                      デモはこちら
                      ソースはこちら

                      PhotoShopの雲はこんな感じで作ります。

                      PhotoShopはあまり使い慣れないんで他のサイトを参照して欲しいんですが、簡単に説明すると
                      ・[フィルタ]-[描画]-[雲模様1]で白黒の雲を描く。
                      ・新しいレイヤーを作り、グラデーションツールを使って中心がアルファ0%、外側がアルファ100%の黒の円を描く。
                      って感じで作ります。

                      あとは光の円と雲画像をブレンドモードで掛け合わせてモーショントゥイーンさせて出来上がりです。
                      光の作り方やブレンドについては以下エントリーが参考になると思います。
                      ブレンドを使用して画像の背景(黒)を透明にする
                      塗りカラーをアルファでグラデーションして光を表現する

                      で、このムービーを使って、爆発を司るクラス(effectsクラス)を作成しました。

                      デモはこちら

                      effectsクラスのexplosion関数に対象のオブジェクト、爆発の大きさ、点数、サウンドを渡すと、オブジェクト内のプリミティブをランダムで吹き飛ばしつつ、指定された条件で爆発を起こすと。

                      爆発のマテリアルはPlaneに張り付けたムービークリップですが、MovieAssetMaterialではなくMovieMaterialを使います。MovieMaterialではMovieClipを引数として渡すのでgotoAndPlay関数が使える為、これを利用して爆発モーションと設定タイミングの同期を取っています。

                      2008/6/10 追記:PV3D(GreatWhite)では個別のMovieClipのblendModeが適用されないようです。デモがそれっぽく動いているのは、背景が黒だったからでした。別途対策を検討中・・・orz

                      | 1/2PAGES | >>