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 の保存ファイルから読み込みができそうなのだけど。使い方がどこにも載ってなかったので今回はアレだけど、そのあたりのドキュメント・サンプルが出てくるならそっちを使ったほうが良さそうだなと。
[ ツッコむ ]
以上です。