Bye Bye Moore

猫マンション建築の野望を胸に零細事業主として資本主義の荒波に漕ぎ出したアラサー男の技術メモ

jsonで記述されたtexturetileの情報をTextureCacheで読み込む

実際のところ

まず、必要なファイルを調達します。lerningPIXIに良いサンプルがあるので、使わせてもらいましょう。

$ cd IMAGE_DIR
$ wget https://raw.githubusercontent.com/kittykatattack/learningPixi/master/examples/images/animals.json
$ wget https://raw.githubusercontent.com/kittykatattack/learningPixi/master/examples/images/animals.png
animals.png

f:id:shuzo_kino:20160408234919p:plain

animals.json

tilesetの構造を記述するには、以下の様なjsonファイルを使います。
後で紹介しますが、ちゃんとした生成ツールがあります。
どこかのバカのように自力で書こうなんて思う必要はありません。

{"frames": {

"cat.png":
{
	"frame": {"x":2,"y":2,"w":64,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
	"sourceSize": {"w":64,"h":64},
	"pivot": {"x":0.5,"y":0.5}
},
"hedgehog.png":
{
	"frame": {"x":68,"y":2,"w":64,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
	"sourceSize": {"w":64,"h":64},
	"pivot": {"x":0.5,"y":0.5}
},
"tiger.png":
{
	"frame": {"x":134,"y":2,"w":64,"h":64},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
	"sourceSize": {"w":64,"h":64},
	"pivot": {"x":0.5,"y":0.5}
}},
"meta": {
	"app": "http://www.codeandweb.com/texturepacker",
	"version": "1.0",
	"image": "animals.png",
	"format": "RGBA8888",
	"size": {"w":200,"h":68},
	"scale": "1",
	"smartupdate": "$TexturePacker:SmartUpdate:52586866875309c357a59ef94cc3e344:67b70cfeefc06c04b551ab33c8f1fc7a:b00d48b51f56eb7c81e25100fcce2828$"
}
}

pixiapp.js

そろそろ使いふるし感が漂いますが、以下の様なサンプルで、トラの部分だけ表示する実験をしてみます

// 画面範囲まわりは略
var loader       = PIXI.loader;                                                      
var graphics     = new PIXI.Graphics()                                               
var TextureCache = PIXI.utils.TextureCache;                                          
var Sprite       = PIXI.Sprite;                                                           

loader.add("views/images/animals.json")                                              
    .load(setup);                                                                    
                                                                                                                                                                      
function setup() {                                                                   
    var tileTexture = TextureCache["tiger.png"]                                      
    tiger = new Sprite(tileTexture);                                                 
    stage.addChild(tiger)                                                            
    renderer.render(stage)                                                           
}

鯖を起動すると、端っこの方にトラの絵が出てくるはずです。
f:id:shuzo_kino:20160408235252p:plain