前回の続きです。
いざ、Starlingを使って進めて行こうと決めるもいろいろと問題が発生することがわかりました。
今回は、それについて書いていきます。
Starlingの使い方は、他のサイトでも散々解説されているので割愛。
まず、単純にStarlingを組み込んでみました。
Starlingのメリットは、AS3クラスと同じような使い方が出来るので、そのままの感じで
使う事ができる事です。Sprite、Eventと言った感じでクラス名も同一です。
しかし。。。
まずここでつまずきました。
今回は既存のプログラムの一部を Starling で置き換えるということで、同一名のクラスが
混在してしまう問題が発生しました。
Startling 側のSpriteクラスのイベントリスナーに Event.ADDED_TO_STAGE を登録した場合で例えてみると、
|
1 2 3 4 5 |
this.addEventListener(Event.ADDED_TO_STAGE, this.onAddedToStage); private function onAddedToStage(e:Event):void { // } |
上記コードにおける “Event” は、starling.events.Eventクラスです。
flash.events.Eventクラスとは別物です。
よって、AS3側のEvent処理を行う事ができません。
プログラム全体を Starling で組む場合は特に気にする必要がありませんが、混在する場合は、
気をつけなければなりません。
この問題を解決するためにこんなクラスを作ってみました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
public class EventManager extends EventDispatcher { private static var _instance:EventManager; private var m_objEvents:Object; public static function getInstance():EventManager { if (!_instance) { _instance = new EventManager(); } return _instance; } public function EventManager() { this.m_objEvents = new Object; } public function Reset():void { for (var _key:String in this.m_objEvents) { var _funcs:Vector.<Function> = this.m_objEvents[_key] if (_funcs) { for (var _i:int = 0; _i < _funcs.length; ++_i) { super.removeEventListener(_key, _funcs[_i]) } delete this.m_objEvents[_key]; } } } override public function addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void { var _funcs:Vector.<Function> = this.m_objEvents[type] if (!_funcs) { _funcs = new Vector.<Function>(); this.m_objEvents[type] = _funcs; } if (_funcs.indexOf(listener) == -1) { _funcs.push(listener); super.addEventListener(type, listener, useCapture, priority, useWeakReference); } } override public function removeEventListener(type:String, listener:Function, useCapture:Boolean = false):void { var _funcs:Vector.<Function> = this.m_objEvents[type] if (_funcs) { for (var _i:int = 0; _i < _funcs.length; ++_i) { if (listener == _funcs[_i]) { _funcs.splice(_i, 1) break; } } } // super.removeEventListener(type, listener, useCapture); } } |
これでAS3側とStarling側のクラスを橋渡ししてあげます。
このクラスを使うことでの副産物として、イベントを一括管理出来るのでイベントの消し忘れが減りました。
イベント処理がどうにか上手くいきそうなので、次は実際に画像を表示していくことにしました。
今回 Starling を使う上で参考にしたのが、こちらのIntroducingStarlingを翻訳したPDF
これによると、
「Stage3d でテクスチャとして使う画像は、２のべき乗で正方形である必要がある」
「Stage3d でテクスチャとして使う画像の最大サイズは 2048 まで」
ということのようです。
Staling は読み込んだ画像のサイズを調べ自動的に元々の画像サイズに一番近い２のべき乗の
正方形テクスチャを作成してくれるます。
ただ、今回は少しでも処理を軽くしたかったので、事前に２のべき乗で正方形化した立ち絵画像
を新たに作りそれを素材としました。これで１つ目の条件はクリア。
で、問題は２つ目の条件。
今回使っているゲーム素材には、たまたま 2048 を超えるサイズのものがありませんでしたが、
昨今のゲームは高解像度化が進んでいるので、2048 を超える物が出てくるかもしれません。
今回はやりませんでしたは、いずれは分割表示の仕組みも必要になってくるでしょう。
とりあえず、２つの条件はクリアしているのでいざ表示してみると、
立ち絵の位置が合ってない。。。
新しく作った立ち絵の画像は下の様な形になります。
まず、Starling で画像を表示するには Textureクラス で画像を読み込み
その読み込んだ Textureクラス を引数として Imageクラス を作成する必要があります。
AS3クラスで言うと、BitmapDataクラスと Bitmapクラスの関係です。
最終的に、作成した Imageクラスは starling.display.Spriteクラスに addChild して表示します。
どうして表示位置がずれたかというと、まず上の画像の座標Pと座標qに注目しましょう。
Imageクラスには “pivotX” “pivotY” というプロパティが存在します。
これは、Imageクラスの基点プロパティです。
基点とは、移動 回転 スケール の中心となる座標です。
ゲームスクリプト内での座標指定は、座標qを基点として書かれています。
しかし、実際のImageクラスの基点は座標pです。
その差によって、表示された立ち絵の位置がずれたわけです。
じゃあ、基点のX座標を立ち絵画像の横幅の中心にし、Y座標を立ち絵画像の底辺Y座標にするということで、
|
1 2 |
_image.pivotX = _texture.width * 0.5; _image.pivotY = _texture.height; |
が思いつきましたが、元々の立ち絵の縦横は画像によってバラバラなのでなのでこのままでは使えません。
そこで、下の画像のようにして配置を修正しリサイズしてみました。
こうすることで、常にX座標を立ち絵の幅の中心、Y座標を立ち絵の底辺に設定することが出来ました。
これらの処理によって、無事ADVゲームらしく表示することが出来ました。
GPUの恩恵もあり、立ち絵の移動速度も格段にアップしました。
が、ここでまた問題。
画像の切り替わりが遅い。。。
これは Starling を使う前から気がついていた問題なので、描画以外の問題であることがこれでわかりました。
通常は、パック化されたファイルから指定画像のデータを読み取って表示ってのがセオリーですが、
今回の移植版では、画像ファイルは１つずつ読み込む形を取っています。
1024ｘ1024 の立ち絵画像の容量は大体、300~500KB
どうやらそこが引っかかっているようです。
どうにかこの容量を小さくするべく、次回は 画像フォーマットについて書いていこうと思います。