2013/09/10(火) [n年前の日記]
#1 [haxe] HaxeFlixel勉強中
Haxe + OpenFL + HaxeFlixel で書いたサンプルが、flashで書き出すと動くのに、html5で書き出すと動かない件。なんかちょっと分かってきた。
json を解析するところで止まってしまう症状は、json 解析後に、var w = Std.parseInt(d.width); 等、Std.parseInt() を使ってたせいらしい。json解析直後、数値にできる情報は既に数値になっているようで、また数値化しようとするとそこでコケる、のかなと。
04WebServer を経由して開いた html 上では、一応動くようになった。Firefox、Google Chrome、IE で動くことを確認。もちろん、サウンドは鳴ってないけど。
- html5出力時、サウンドは、mp3 にも ogg にも対応してない。どちらを使ってもブラウザのエラーコンソールに「mp3? ogg? 知らねえフォーマットだな。このブラウザは対応してねえよ」とメッセージが表示される。
- ただし、サウンドが鳴らせない点は、HaxeFlixel ―― FlxG.playMusic() 等の制限っぽい。HaxeFlixel を使わずに、Haxe + OpenFL で鳴らそうとすれば鳴らせなくもない。(以前試したら鳴ったし。) ただ、サウンド関係の管理部分を自分で書く羽目になるのでは、という気もする。
- jsonファイルは、そのままの拡張子では読み込めない。hoge.json を hoge.json.txt 等にして使う必要有り。
- 本来、json も、xml内で <assets path="hoge.json" type="text" /> と指定しておけば、text形式として扱ってもらえそうだけど…。そのあたり色々試しても上手く行かなかった。どうも type="text" や type="music" 等、ファイル形式の指定は怪しい部分がありそう。海外掲示板でも、「まとめて type を指定するとおかしくなるけど、1ファイルずつ指定していったら動いた」等の妙な報告も見かけたし。
- FlashDevelop 上で、何か動作が怪しいなと思ったら、プロジェクトのクリーンアップや、FlashDevelop の再起動をどんどんしていったほうが良さそう。例えば flash 出力状態でクリーンアップをしたら、一旦 html5 を選んでから、また flash に戻す、といった操作をするとハマらずに済む、ような気配がする。
json を解析するところで止まってしまう症状は、json 解析後に、var w = Std.parseInt(d.width); 等、Std.parseInt() を使ってたせいらしい。json解析直後、数値にできる情報は既に数値になっているようで、また数値化しようとするとそこでコケる、のかなと。
04WebServer を経由して開いた html 上では、一応動くようになった。Firefox、Google Chrome、IE で動くことを確認。もちろん、サウンドは鳴ってないけど。
◎ TmxJson.hx の修正版をメモ。 :
_Tiled Map Editor
でエクスポートした json を読んで、BG描画用の csv に変換するソース、の修正版をメモ。
TmxJson.hx
利用してる箇所をメモ。
ただ、Hxae + OpenFL には、そもそも tmx というライブラリがあって、ソレを使えば直接 tmx から ―― Tiled の保存ファイルから読み込みができそうなのだけど。使い方がどこにも載ってなかったので今回はアレだけど、そのあたりのドキュメント・サンプルが出てくるならそっちを使ったほうが良さそうだなと。
TmxJson.hx
package ; import haxe.Json; /** * Tiled Map Editor で export した json を解析 * @author mieki256 */ class TmxJson { public var width:Int; public var height:Int; public var layerTileData:Map<String,String>; public var layerWidth:Map<String,Int>; public var layerHeight:Map<String,Int>; public var tileWidth:Int; public var tileHeight:Int; public function new(jsondata:String) { // jsonを解析 var d = Json.parse(jsondata); // タイルの縦横個数を取得 width = d.width; height = d.height; // タイルのサイズを取得 tileWidth = d.tilewidth; tileHeight = d.tileheight; layerTileData = new Map(); layerWidth = new Map(); layerHeight = new Map(); // 各レイヤーのタイル並び情報を取得 var layernum:Int = d.layers.length; for (i in 0...layernum) { var name:String = untyped d.layers[i].name; // レイヤーの縦横タイル個数を取得 var w:Int = untyped d.layers[i].width; var h:Int = untyped d.layers[i].height; layerWidth.set(name, w); layerHeight.set(name, w); // タイル並びを整形 var tiledata:Array<Int> = untyped d.layers[i].data; var count = 0; var layer:String = ""; for (y in 0...h) { var row = new Array(); for (x in 0...w) { var c:Int = untyped tiledata[count]; // Tiledのデータは、 // 0番が透明、1番からチップ番号が始まるので、 // 若干番号を調整する。 if ( c > 0 ) c -= 1; row.push(c); count++; } layer += row.join(",") + "\n"; } layerTileData.set(name, layer); //trace('tmx layer=$name is save'); } } // 与えられたレイヤー名のタイル並びを返す public function getLayer(layerName:String):String { if (layerTileData.exists(layerName)) { return layerTileData.get(layerName); } else { trace('$layerName layer is None'); return "0"; } } }
利用してる箇所をメモ。
import flash.display.BitmapData; import openfl.Assets; import org.flixel.FlxTilemap; import TmxJson;
// BGを生成 // BG用画像ファイル読み込み var mapimg:BitmapData = Assets.getBitmapData("assets/maps/mylevel1_tiles.png"); // json読み込み var mapdata:String = Assets.getText("assets/maps/mylevel1.json.txt"); // json解析・BG用データを記録 var dt:TmxJson = new TmxJson(mapdata); // 奥のBG bg_c = new FlxTilemap(); bg_c.loadMap(dt.getLayer("layer4"), mapimg, dt.tileWidth, dt.tileHeight, FlxTilemap.OFF); bg_c.solid = false; // アタリなし bg_c.scrollFactor.x = 0.25; // スクロール速度の割合 bg_c.scrollFactor.y = 0.25; add(bg_c);
ただ、Hxae + OpenFL には、そもそも tmx というライブラリがあって、ソレを使えば直接 tmx から ―― Tiled の保存ファイルから読み込みができそうなのだけど。使い方がどこにも載ってなかったので今回はアレだけど、そのあたりのドキュメント・サンプルが出てくるならそっちを使ったほうが良さそうだなと。
[ ツッコむ ]
以上です。