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)                                                           
}