calendar

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

categories

archives

AdobeAIRでスマホ開発して苦労した件

0
    今回「狭くて小さいドルアーガの塔」をFlashCC/AdobeAIRで開発し、Web/iOS/Android向けに公開しました。

    AIRで開発するにあたって、技術的な部分に関していろいろ苦労した点などがあったので、まとめてみました。
    これからAIRでスマホアプリ作ってみたいと思われている方の参考になれば幸いです。
    とりあえず結論から言うと、AIRはブラウザゲームを作るのにはいいと思いますが、スマホ向けではお勧めしません。

    ■自分の技術レベルについて
    自分は、AIRは昔からブラウザゲームでコンテンツを作り慣れていて、AIRだったらDB連携でもオンラインゲームでも一通り作れます。UnityややCocos2DやSwiftは、初心者向けの本を一通りやった程度で、コンテンツを作って公開したことはありません。基本的にすべて独学なので知識に偏りがあるかと思いますが、以下この程度のレベルでAIRと他開発ツールを比べてみた所感になります。

    ■AIRを使ってよかったと思う点
    AIRはActionScript3.0を使い作成することになりますが、1ソースでWeb(Flash)、iOS、Androidの全てにパブリッシュできることが良い点です。Unityでも同様のことができると思いますが、基本的にビルドがFlash内ですべて完結できるため、より手間は少なく済むと思われます。

    ■スマホ開発となるとFlashの大きなアドバンテージであるMovieClipが使いにくい
    Flashで作る場合のメリットとして、MovieClipなどのベクターアニメーションを描きながら、コーディングも同時にできるという点があります。これは1人ですべて作成している個人クリエーターとして、素材作成とコーディングがすべて1つのIDEで行える点は、とても楽です。

    ところが・・・スマホ開発となると、この恩恵は受けにくくなります。

    なぜかというと、MovieClipはCPUレンダリングで動かす必要があるため、スマホで動作させるとカクカクになったり本体が熱くなったりてしまいます。それを解決するには、StarlingやAway3DといったGPUのライブラリを使うことになりますが、その場合MovieClipをそのまま表示できず、スプライトシートやアトラス化して使う必要がある(StarlingのMovieClipへ置き換える必要がある)ので、そう考えると、他の開発ツール使うのと結局やることがあまり変わらなくなります。

    ただ、flash.display.MovieClipをStarlingのスプライトシート化するクラスを自作したりすれば楽できるとは思います。ちなみに自分は、ドット絵を作成するエディタを別途作ったので、そのデータを元に動的にTextureAtlasを作成するという力技で対応しました。というわけでMovieClipは、タイトルとかのメニュー作成でしか使いませんでした。

    ■AIRを使って苦労する点
    大きく分けて3つあります。

    ・AIR開発だと、ネットに日本語の情報がほとんどない
    AIRはネット上に日本語の情報がほとんどありません。本屋に行っても書籍は少ないです。海外のフォーラムは未だに活発なのですが、当然質問も英語で書く必要があります。ある程度自力で問題点を解決していく必要があります。

    ・アプリ内課金とかは、基本有料のANEを購入する必要ある。しかも英語
    GamingSDKというiOSのアプリ内課金を実現するための無償ANEがAdobe公式で公開されていますが、なんとか使いたかったのですが、リンクをクリックしてもなんか同じページを順番にグルグルまわるだけでダウンロードできませんでした。結局、milkmangamesという有償のANEを購入し使うことにしました。milkmangamesはサポートなど対応いいのですが、こちらも英語になります。ANEはネイティブ機能にアクセスするための有力な手段ではあるのですが、自分で作成するには敷居が高いし、公開されているものも少なく選択肢が限られてしまうというのが現状。

    ・AIR開発だと、Nendなどの国内の広告開発キットが完備されていない
    実はこれがAIRで開発する一番大きなデメリットだったりします。広告の開発キットがほぼ無い。AIRで広告を表示させたい場合、WebViewという部分的にブラウザ表示するような機能を使う事になりますが、これは細かいハンドリングができず、自分がやりたかったインタースティシャルとか動画アワード広告とかに対応していません。しかもWebViewはAndroidでGPU表示すると画面がブラックアウトするという問題が発生しますが、Nendに問い合わせてもちゃんとした回答がかえってきません。AIRは枯れた技術として見放されているのでしょうね。Adobeサポートに問い合わせてもバグレポート出しといてください、と言われて終わり。

    ■Adobeのやる気が感じられない
    最終的な結論としてはコレ。広告にしてもGPU対策にしても、色々打つ手はあると思うんですが、全くそういった動きがない。WebViewのバグも改善される様子もない。公式のサポートもいまいち。Adobeはモバイル関係は苦労したのか、勢いが感じられないっすねえ。

    以上、最後は愚痴っぽくなってしまいました。
    長らくFlash使ってきましたが、最近はまたUnity5の本を読んでます。
    ブログのタイトルは「flashゲーム作成記」なんですけどこれからどうしたらいいのでしょう・・・

    JUGEMテーマ:コンピュータ



    Starling/Feathersの概要まとめ

    0
      最近、スマホアプリをもっと作っていけるようになりたーいと思いまして、SpriteKitとかcocos2D-xとか色々本を買ったりして調べていたのですが、結局個人創作レベルならAIRで十分じゃね?という結論に至ってしまった為、相変わらずAdobeの呪縛から逃れられない日々を過ごしております。

      AIRで作るデメリットとしては、日本語の情報がとにかく少ないって事ですかね。これは人柱になるかーと思い、調べた事を日本語でちょっとづつでも発信していけたらばと思い、公開することにしました。という訳で、今回はFeathersを紹介したいと思います。

      Feathersは、Flash/AIRのStarlingでUIを実現するためのライブラリです。
      主にスマホアプリで使う事を想定して作られています。

      前述の通り、Feathersも日本語の情報が皆無で大変苦労しましたので、自分なりに調べた内容をまとめて公開することにしました。特にコンテナ周りは、PanelとかScreenとかLayoutGroupとか似たようなクラスが沢山あって違いを理解するのに時間がかかりました。※Feathersでは、クラス名にコンテナという名前はあまりでてこないのですが、以下では総称して「コンテナ」と呼んでいます。

      以下概要ではありますが、ざっと頭に入れておけば、Feathersのサンプルなどを見ても、何をしているか大体分かると思います。Feathersこれから始めてみようという方いましたら参考にしてみてください。

      --------------------------------------------------------------------
      ■Feathersの基本構成

      まず、Feathersを理解するに当たって以下の4つを押さえておく必要があります。

      ●テーマ( MetalWorksMobileThemeなど )
      Feathersの全体的なスキン(ボタンやリストの色・形・大きさなど、見た目を統一するもの)を設定するもの。
      Feathersを使う場合は、最初に必ず宣言しておく必要がある。

      ●コントロール( Button, Label, ToggleSwitch, PickerList,NumericStepper などなど)
      ボタンやラベルなど。各クラスの名前そのまんまなので一番イメージしやすいかも。

      ●コンテナ( ScrollContainer, ScrollScreen, Panel, LayoutGroup, Drawersなど)
      ボタンやラベルなどのコントロールをまとめる為の四角い枠。各画面もコンテナである。
      入れ子形式でaddChildできて、親の右側・上部などに吸着するように大きさ・位置を自動調整させたりできる。

      ●ナビゲータ( ScreenNavigator, StackScreenNavigator )
      複数の画面(コンテナ)を管理し、表示切替するためのもの。ScreenNavigatorとStackNavigatorの2種類しかない。
       ・ScreenNavigator : 自分で次画面を指定して切り替える。直観的に分りやすい(と思う)
       ・StackScreenNavigator : ツリー構造メニューをpush/popで画面を上乗せ(Stack)して表示切替する。iPhoneの設定画面見たいな感じ(?)戻るときに前画面を指定しなくてよい。
      画面遷移のアニメーション(Transition)は、スライド・フェードなど設定できる。

      --------------------------------------------------------------------
      ■コンテナのレイアウト位置のプロパティ
      上記4つに加えて、特に押さえておくべきプロパティが2つ。コンテナのレイアウト位置に関するプロパティです。

      ●layoutプロパティ
       コンテナ自分自身のレイアウトに関する設定。基本的には以下の3つが使われたりする
       ・HorizontalLayout : 水平方向に、子コントロールを並べて表示させる。Alignや間隔を設定できる。
       ・VerticalLayout : 垂直方向に、子コントロールを並べて表示させる。Alignや間隔を設定できる。
       ・AnchorLayout : 自分の子供がそれぞれ設定したlayoutData(後術)によって位置を決める。

      ●layoutDataプロパティ
       自分の親に対する位置情報を設定するためのもの。基本的にlayoutDataを設定する場合は、親のlayoutプロパティはAnchorLayoutを設定する。
       AnchorLayoutData(上下左右のアンカー設定して位置を決定)を主に使う。

      ※Anchorは船のアンカーと同じ意味。場所を固定して動かなくするイメージ。
      例えばAnchorDataLayout(0,0,NaN,0) TopとLeftとBottomにアンカー0(余白0) とすれば、左側(上から下まで)にピッタリくっついた状態で配置される。
      例えばAnchorDataLayout(0,0,0,0) と設定すれば、親コンテナ全体に広がった状態で配置される。
      尚、親に対しての相対位置だけでなく、並列の子要素などを基準にアンカー設定することもできる。

      --------------------------------------------------------------------
      ■沢山あるコンテナの種類
      コンテナの種類は沢山あって、しかも名前から機能をイメージしにくいです。
      どのようなものがあるか、以下に各クラスの概要をまとめてみます。

      クラス名スクロール ヘッダ SN参照
      LayoutGroup×××
      ScrollContainer××
      Panel×
      Screen××
      PanelScreen×
      ScrollScreen

      ※スクロールは、コンテナ内をスライドでスクロールできる機能です。
      ※ヘッダは、コンテナの一番上にタイトルや戻るボタンを設置する黒い帯です。
      ※SN参照は、自身が含まれている親となるScreenNavigatorを相互参照できるかどうかです。

      このように、各クラスの名前から機能を類推することができません(笑)

      で、結局どれを使えばいいのかという話ですが、基本的にScreenNavigatorを使って複数の画面を遷移表示させる事になると思いますので、画面はScrollScreen・PanelScreen・Screenをスクロール/ヘッダの必要に応じて使い分けて作るといいと思います。で、1つの画面内で上下左右にアンカー貼って領域作ったりするのは、LayoutGroup,Panel,ScrollContainerを使えばいいのかなーと思います。

      --------------------------------------------------------------------
      ■あとまだよく分かってない部分
      Feathersのテーマは、Atlas使ってるはずなのに、ボタンとか配置する度にDrawカウントが増えていきますね。
      ボタン1つ配置する度に、文字で+1、背景画像で+1。なにか設定があるのかな・・・


      --------------------------------------------------------------------
      Box2Dの時のGravity2Dみたいに、もっと簡単にFeathersを使うためのユーティリティを作りながら学んだりしてます。ひょっとしたら将来公開するかもしれません。


      preloadJSを使って掲示板を作るコード

      0
        CreateJSのpreloadJSを使って、掲示板を作るコードの備忘録メモ。

        自分がAS3で掲示板のコメント表示や、ステージ一覧表示などの処理を行う場合、以下の手順でコーディングしています。

        ・AS3で、読込ページや検索文字列等の変数をPOSTでPHPへ投げる
        ・PHPで、受け取った変数を元にMySQLからデータを読み込む。結果をクエリー文字列として返す
        ・AS3で、PHPの結果をURLVariables変数へ代入し、画面上へ一覧表示させる

        今回は、ここのAS3の部分をCreateJSに置き変えて同様の事をやりたいです。
        ここで1つ問題なのが、CreateJSではURLVariablesクラスがありません。
        というわけで、URLVaribles関数を自前で作って、同様の処理を行っています。

        html









        myCode.js

        function main() {
        var loader = new createjs.LoadQueue(false); //CGIへデータを取得する
        loader.addEventListener("fileload", returnCgi);
        vals = [];
        vals["test"] = "456";
        loader.loadFile({method:"POST", values:vals, src:"http://hoge.com/hoge.php"});
        }

        function returnCgi(e)
        {
        //php側はこうなっている
        //

        var val = URLVariables( e.result );
        alert( val["a"] ); //取得したデータを表示
        }

        function URLVariables( queryStr ) {
        var ret = [];
        var vals = queryStr.split("&");
        for (i = 0; i < vals.length; i++) {
        var data = vals[i].split("=");
        if (data.length == 2) ret[ data[0] ] = data[1];
        }
        return ret;
        }


        実際には、読込部分は共通関数にして汎用性を持たせます。
        JUGEMテーマ:ゲーム



        TweenJSをやってみた

        0
          TweenJSを使って、ボールをバウンドさせるモーションを作ってみました。
          デモはこちら

          html側はこんな感じ








          myCode.jsの中身はこんな感じ

          function main() {

          var ball = new lib.mcBall();
          stage.addChild(ball);

          var tweenX = new createjs.Tween(ball, { loop: true });
          tweenX.to({ x: 500, rotation: 500 }, 3000, createjs.Ease.linear);

          var tweenY = new createjs.Tween(ball, { loop: true });
          tweenY.to({ y: 380 }, 3000, createjs.Ease.bounceOut);
          }


          Tweenは異なるイージングの組み合わせを1まとめで記述できないのかな・・・

          HTMLCanvasのデフォルトFPSは24だけど、ちょっとカクカクが気になるので30にした。
          スマホ的にはどのぐらいが最適なのかしら。

          Easeについては、ここのデモが視覚的に分りやすい。まあ自分は基本的にlinearとSineしか使わないんだけどw

          TweenJSの本家サイトはこちら

          CreateJSでHelloWorld

          0
            CreateJSでHelloWorldする手順をまとめてみました。
            画面に、クリックできるMovieClipを配置して、クリックするとJSで「HelloWorld」のアラートを出すというものです。
            作成物はこちら

            ちなみに、Flashでコンテンツを作成する方法は大きく分けて2種類ありますね。
            ・メインタイムラインに全てのコンテンツを配置してgotoAndStopでメインタイムラインを行ったり来たりしながら処理を行う方法
            ・メインタイムラインには何も置かずに、ドキュメントルートから必要に応じてインスタンス化したりして制御をおこなう方法

            それぞれの手法にメリット・デメリットありますが、ゲームなどのコーディングが沢山必要なものやパフォーマンスを出したいものなんかは、後者の方がいいと思います。

            自分はゲームを作る人なので、いつも後者の方法で作るのですが、HTML5Canvasでパブリッシュすると、前者の方法を前提とした感じに出力されてしまいます。そこで今回のHelloWorldは、独自のやり方で後者の方法に近い形で進められる様な手順でまとめみました。

            おおまかな作業の流れとしては
            ・Flashでデザインを行ってパブリッシュする
            ・出力されたHTMLを、メインタイムラインの内容を表示させないように修正する
            ・JSファイルを別途作り、そこへドキュメントルートに相当する記述を行う。
            という感じになります。

            独自のやり方なので、最善の方法なのか分りません。もっといい方法があるよ〜とかあったらぜひ教えてくださいませ。

            尚、手順ではFlash Professional CC(一か月無料体験版)を使っています。

            まず、Flash CCを立ち上げて、新規作成のところにある「HTML5 Canvas」を選択します。

            test.flaという名前で保存します。

            次に、矩形とテキストを組み合わせて、ボタンのMovieClipを作成します。
            名前は「mcButton」としました。


            さて、ここで1つ注意する事があります。AS3では、リンケージを設定することでAS3からインスタンス化できましたが、
            「HTML5 Canvas」ではリンケージの設定が選択できません。


            パブリッシュして書き出されたJSファイルの中を見ると分るのですが、メインタイムライン上に配置したMCの定義は書きだされるのですが、配置されていないMCの情報は書き出されません。定義が書き出されたMCについては、AS3でリンケージ設定した時と同様に、JSファイル上からインスタンス化できます。

            というわけで、JSファイルから利用できるようにするために、メインタイムライン上にMCを配置します(複数のMCがある場合は、全て配置しておきます)。

            メインタイムラインは1フレームだけです。
            ちなみにメインタイムラインに配置したものは使いません。後でHTML内のJSを編集してメインタイムラインに配置されたものは使用しないように修正します。

            パブリッシュすると、HTMLとJSファイルが作成されます。(test.htmlとtest.js)
            実行結果は次の通りです。



            Flash側での作業は、ここまでとなります。
            この後は、HTMLファイルと、JSファイルを直接直します。(メインタイムラインに配置したものを表示させないようにすることと、JS上からインスタンス化と配置を行い、クリックイベントの挙動を記述する)
            あ、ちなみに、HTMLとJSを修正したあと、Flashでまたパブリッシュすると、同じファイルを上書きしてしまいますので注意です。
            パブリッシュの設定でHTML出力しない、とかはできますが、念の為。
            名前を変えるとかして対応すると良いと思います。

            パブリッシュで生成されたHTMLファイル内のJSは、こんな感じになっています。










            これを以下の通り書き換えます。




            //←※1




            ※1.test.jsは、MovieClipなどの情報が書き込まれているファイルです。基本的に自分で弄って修正するものではありません。デザインやモーションを修正したい場合は、Flash側で行うべきです。つまり、test.jsは一切手を加えず、自分で作るプログラムは、別ファイルで管理したいです。というわけで、その別ファイルへの参照を追加します。(myCode.jsという名前にしました。このファイルは後で作成します。)

            ※2.exportRootっていうのをインスタンス化してaddChildしていますが、これはメインタイムラインの内容を書き出している部分です。ドキュメントルート派としては、メインタイムラインに配置したものは使わないので、消します。

            ※3.canvasっていう変数ですが直接文字列で指定しても動くみたいなので、書き換えてすっきりさせます。

            ※4.stage.update()っていう命令によって、画面が更新されます。が修正前のままだと、表示時に一回画面が更新されて、それ以降は更新されません。今回の作成するものは画面が更新されないので問題ないのですが、アニメーションものは、毎フレーム毎に表示を更新するようにする必要があります。なので、stage.update()を消して、Tickerのイベントリスナーのコメントを外します。

            ※5.ドキュメントルートに該当する命令を追加する必要があります。
            これは、myCode.jsの中に記述します。

            ここまでで、HTMLファイルの準備はできました。
            続いて、myCode.jsファイルを同じフォルダへ別途作成します。

            ファイルの内容は以下の通りにします。


            function main()
            {
            var btn = new lib.mcButton();
            btn.setTransform(100, 100);
            stage.addChild(btn);

            btn.addEventListener("click", eClick);
            }

            function eClick(e) {
            alert("Hello world");
            }


            こちらの内容は、AS3に慣れた方でしたら説明は不要かと。
            型の定義がない部分などが、AS2臭がしますが(笑)ここは慣れるしかないところですね。

            JUGEMテーマ:コンピュータ


            Away3Dの地形生成に関するクラスについて

            0
              Away3dで、公式にあるデモを色々弄っていたら、地形に関するクラスで知らなかったものが幾つかあったので、ザッとまとめてみました。

              まずは、デモをご覧ください。
              マウスで方向転換、キーボードの矢印キーで移動できます。

              Away3Dデモ
              デモはこちら

              Away3Dには、地形を作るための便利なクラスが色々用意されています。今回のデモによって使ったクラスを幾つか紹介してみます。(覚え中なので説明とか間違っている可能性があるので注意w)

              ・material.method.TerrainDiffuseMethod
              このクラスは、Bitmapで作った色地図(地形)に合わせて、それぞれにパターンタイルとして貼れるテクスチャを指定できる、というものです。例えば地形で、ここは砂地、ここは岩、ここは芝生、といった具合にBitmapの「色地図」(splats)を作ってあげれば、それぞれの色の部分をテクスチャのパターンタイル化できるというものです。地形のMeshは非常に大きいのに対して、手前のテクスチャは細かく見せる事ができますので、デモの様なスピード感あふれる表現も簡単に実現できます。materialのduffuseMethodに指定する事で使用できます。

              ・material.method.FogMedhod
              名前の通りフォグ(霧)を表現できます。遠くに行くほど、暗くしたり、白っぽくできるので、よりリアルに空間を表現する事ができます。デモでは白いフォグを地面に対して設定しています。

              ・primitives.SkyBox
              空を表現するための「無限遠」オブジェクトです。実態はBox(つまり箱)なので、6枚のテクスチャが必要です。

              ・extrusions.Elevation
              このクラスはMeshの派生クラスで、白黒で凹凸を表現したBitmapに合わせて山や谷を作ってくれます。コンストラクタで幅や奥行き、高さを指定できます。地形をモデリングではなくてBitmapで作れるので、テクスチャや上で説明したTerrainDiffuseMethodクラス用のマップと合わせて作るといいと思います。

              ・materialのnormalMapプロパティ
              特に地形に限った事ではありませんが、DirectionalLight等の光源からの光反射に凹凸をつけることで立体感を感じる事ができます。バンプマップに似てます(同じ?)

              まだまだ知らない便利なクラスが事が沢山ある気がしてきた今日この頃。テクスチャについてもまだまだ自分も知識が少ないので色々勉強していきたいです。
              JUGEMテーマ:コンピュータ



              新しい3Dエンジンを検討中

              0
                Stage3DはFlash Player11から使用できる、3D等の描画が高速にできる技術です。ただし、このStage3Dを堪能するには、パソコンのグラフィックボードがStage3Dの技術に対応していないと速く描画されないのです。

                で、自分のメイン開発PCのグラフィックボードがStage3D対応じゃないし、一般的にStage3D対応レベルのグラボがスタンダードになるにはまだ先だなと思っててStage3Dには特に興味が無かったんです。がしかし、別の調べ物をしている途中で、Stage3D対応のグラボじゃなくても今までより速くなるよ!っていう記事を見つけたので早速検証してみたところ、ウチのPCでも全然速い事が分かり、今更ながら一人で大はしゃぎしている今日この頃です。

                下のデモ画像はAway3D4.0.0betaのチュートリアルで出てくる外人のおっさん。
                開発者かなんかだろうか・・・


                グラボがStage3D対応じゃないのに、17000ポリゴンで41FPS出ていますね。多分Stage3D対応のグラボだったら60FPS余裕っぽいです。PV3D時代は1000ポリゴンでひーひー言いながら作ってたのに、桁が2桁位違うレベルで表現出来る感じです。これで今作ってる格闘ゲームも、指が5本にできるぜえ(って規模が小さいけどww)

                あとは、シェーディングもいい感じで出てますね。Alternativa3D8も検討しているんですが、shadow周りが重い気がするのでAway3Dにしようかなあ、と。あとは使いやすさとか、それぞれに用意されている物理演算ライブラリの性能なんかを比較して、今後付き合っていく3Dライブラリを決めたいなあー、と。

                JUGEMテーマ:アート・デザイン


                立体3DをFlashで作ってみた

                0
                  なんとなく実験してみました。

                  カメラの位置を1フレーム毎に左右にずらしつつ、赤・青交互にフィルタ表示


                  3D眼鏡が無いので作る。

                  コンビニで売っているお稲荷さんの入れ物


                  3D眼鏡の完成




                  んで、フレームレート変えたり、色調節したり、左右の幅変えたりと、
                  20分くらい試行錯誤しましたが、、、

                  浮き出て見えないorzしょんぼり

                  多分赤と青の眼鏡と画面の色が上手く合ってないのが原因かな

                  BOX2D小技テク 物理演算と表示の形状を変える方法

                  0
                    前回エントリーしたGravity2Dが予想以上の反響だったので、調子に乗ってBOX2Dの小技テクニックについてまとめましたので紹介します。

                    デモを作ったのでご覧ください。

                    BOX2Dでは多角形も物理演算形状として作成する事ができますが、やはりデザイン時の手間が大変で、しかもあまり複雑にしすぎると、動きも重くなってきたりと、いい事がありません。なので、簡単に作れてしかも動作も軽い四角形と円形を上手く組み合わせて使うのが実用的です。

                    しかし、見た目上四角形と円形だけでは表現できる幅も限られてしまう為、「物理計算する形状と、表示させる形状を変える」というテクニックが必要になってくる訳です。

                    例えば、「ばらんす牧場」では、様々な果物や葉っぱなどがゲーム上に出てきますが、実はこれらは単なる四角形として物理計算されています。

                    Gravity2Dでもサポートしている形状は今のところ四角形と円形だけですが、今回紹介したテクニックを上手く使えば、表現の幅は格段に広がるんじゃないかと思います。

                    hitTestPointを使って背景との判定を作ってみる

                    0
                      このあいだの超むりげーで集まったとき、babarageoのbabaraさんが「マリオって自機と障害物の判定とか面倒くさそう!なんかいい方法ないかい?」と仰られてましたので、自分が思いついた手法として、hitTestPointを使った作り方を紹介してみたいと思います。


                      デモはこちら
                      プログラム一式はこちら

                      このデモで大体プログラム100行くらい。「}」だけの行とかも沢山あるので、頑張れば50行くらいでできそうな位のコード量です。基本的な動作の判定をほぼ全てhitTestPoint関数を使って行っています。hitTestPointは、あるDisplayObject(今回は背景)と、一点(今回は自機の進行方向の位置)が重なっているかどうかを判別してくれる関数です。DisplayObject同士(例えばMovieClipとMovieClip)が重なっているか判定するhitTestObjectという関数よりも、動作がかなり軽いらしいという事に最近気づいたので、自分もhitTestPointは最近のゲームには積極的に使っています。「ファイナルぴーちゃんをゲットせよ」でも、hitTestPointをあらゆる当たり判定の場面において多用しましたが、それによるパフォーマンス上の影響は少なかったと思います。

                      今回のデモでは、自機が走ったときは進行方向10pxくらい先の座標位置と背景をhitTestPointして障害物とぶつかるか判定し、ジャンプしたときはジャンプした頭の上(y座標)及び足元の座標と背景をhitTestPointして空中か着地かを判定しています。

                      あと、ちょっとした注意点としては、移動速度とフレームレートによっては、障害物にめり込んで停止する場合がありえますので停止したときに、若干障害物にめり込んでいたら位置を微調整して直すようなロジックを入れてあげるといいと思います。
                      (サンプルプログラムでは、着地時に位置を微調整するロジックを入れています。左右の移動には逆に微調整を入れていないので、若干めり込んで止まる場合があります)

                      あと、サンプルの中にある赤い板のように、厚さが薄いものはタイミングによって当たり判定がスカッてしまう場合があります。(サンプルでは、自機の当たり判定は10px先で行っているが、赤い板は厚さが3pxしかありません)この場合は、赤い板のところに、高さ15pxくらいのアルファ0%の透明な図形を配置してあげます。そうすれば、見た目は薄い3pxの板ですが、当たり判定はアルファ0%の部分も考慮して判定してくれるので、スカることが無くなります。


                      | 1/3PAGES | >>