solved Can I load a spritesheet with BABYLON

[Herbert]

hi guys,
Is there a way to load 2D-resources as spritesheet in BABYLON, and I can take the frame I want by alias(frame_1.png or frame_2.png)?

or if I need to do it myself,  where can I set the attributes like clipX, clipY ......to get the part of image I want

{"frames": {

"frame_1.png":
{
	"frame": {"x":1,"y":1417,"w":93,"h":102},
	"rotated": false,
	"trimmed": true,
	"spriteSourceSize": {"x":5,"y":0,"w":93,"h":102},
	"sourceSize": {"w":98,"h":102}
},
"frame_2.png":
{
	"frame": {"x":311,"y":1187,"w":84,"h":102},
	"rotated": false,
	"trimmed": true,
	"spriteSourceSize": {"x":13,"y":0,"w":84,"h":102},
	"sourceSize": {"w":98,"h":102}
}},
"meta": {
	"app": "http://www.codeandweb.com/texturepacker",
	"version": "1.0",
	"image": "sprite_sheet.png",
	"format": "RGBA8888",
	"size": {"w":1922,"h":1555},
	"scale": "1",
	"smartupdate":
}
}

 

[aWeirdo]

Hi @Herbert

SpriteManager should do the trick.
http://doc.babylonjs.com/babylon101/sprites
 

then just sprite.cellIndex = NUMBER; to use a specific frame/sprite in your sheet,

[Herbert]

hi @aWeirdo

thanks, but it's a bit different, I don't use it for animation, so in my case every frame's size is different,  I just want to pack all the small images into one to save requests

[jerome]

On what do you want to apply these different images from the same file ? sprites ? meshes ? particles ? solid particles ?

[Herbert]

hi @jerome

for the place I used it most is GUI, things like

BABYLON.GUI.Button.CreateImageOnlyButton
BABYLON.GUI.Image

[GameMonetize]

Hello you can rely on GUI.Image.sourceXXX properties:

http://doc.babylonjs.com/how_to/gui#image

[Herbert]

hi @Deltakosh

I only find sourceXXX properties in GUI.Image. So perhaps I should create my own imageButton class based on GUI.Image.

By the way, GUI seems only shows on the scene which is created LAST, not so sure if it is a bug?

I borrow the PG in this post and make some changes to reproduce the issue(http://www.html5gamedevs.com/topic/15501-changing-scenes-locations/)

here's the PG(http://www.babylonjs-playground.com/#1B3R9A#33)

so I create a GUI button while scene 0 is being rendered(button not showing)
then I switch to render scene 1 which is created later(the button is there)

 

[GameMonetize]

GUI is based on an AdvancedDynamicTexture which is associated with a scene (if you do not specify it in the constructor it will used the latest created scene)

 

Regarding your question the CreateImageOnlyButton creates an image internally and you can get it with button.children[0]

 

[Herbert]

ok, thank you~