GUI - Spritesheet animations

[royibernthal]

That would be a nice feature

[GameMonetize]

Can you tell me more? Always motivated to add more to GUI

[royibernthal]

I completely forgot about Sprite.

Like Sprite & Sprite Manager, but for GUI:

https://doc.babylonjs.com/tutorials/sprites

[GameMonetize]

But what could be the usage as we have sprites already?

[royibernthal]

Displaying GUI related animations.

For instance a tutorial with animated instructions (e.g. demonstrating a gameplay feature), gui 2d effects (e.g. lightning animation in a screen), animations that attract the user's attention to a certain place in the gui, etc.

[GameMonetize]

So basically the idea would be to improve the image object?

Because so far you can define image.sourceLeft, sourceTop, sourceWidth and sourceHeight to pick any part of a picture. This is close to what you need

[royibernthal]

In that case I guess that'd be the idea yes. Ideally an external class that manages the data and controls an image (or can be used by an image), the way I see it at least.

 

For instance have a TextureMap that contains the bitmap segments data, and then Spritesheet or Animation class that extends TextureMap and adds animation functionality.

Possibly it can have an observer that notifies each frame change, and a textureMap setter in Image will listen to that observer.

 

Just tossing ideas around, not really sure what'd be the best way to do it yet.

I'm guessing you have a better grasp of the subject having already programmed Sprite

[GameMonetize]

Can you create an issue on github to track the idea?

[royibernthal]

Sure:

https://github.com/BabylonJS/Babylon.js/issues/2927

[DylanD]

On 10/9/2017 at 7:45 PM, Deltakosh said:

So basically the idea would be to improve the image object?

Because so far you can define image.sourceLeft, sourceTop, sourceWidth and sourceHeight to pick any part of a picture. This is close to what you need

I know this is kind of an old post but it helped me understand a little but I have more questions.

Hi @Deltakosh I was wondering if you could elaborate on how to use image.sourceleft and stuff.  

Im wondering how I can use this and a sprite sheet, to make a bunch of buttons from a sprite sheet problem is they're all different sized.

So how do I use sourceLeft and will it even work if I have different sized sprites.  Any ideas?  Thanks for your time.

 

Some stuff I'm currently using(just an example):

button = BABYLON.Gui.CreateImageOnlyButton()

button.children[0].width = #;

button[0].children[0].horizontalAlignment = ...;

[DylanD]

var Pic = new BABYLON.GUI.Image("sprite","./spriteSheet.png");
        Pic.width = 0.5;
        Pic.height = 0.5;
        Pic.top = "0%";
        Pic.left = "0%";
        Pic.sourceLeft = 40;
        Pic.sourceTop = 40;
        Pic.sourceWidth = 40;
        Pic.sourceHeight = 40;

@Deltakosh I figured out how to do it with images but I still can't figure out if it is possible on image only buttons.  For now I will just make an image and put a simple button onto of it with no text.

Any Ideas?

[Guest]

Well actually image only buttons are clearly just an image with a button around. So I see no reason why you should not be able to do it

Please feel free to build a playground repro if this does not work like you want

[Wingnut]

Hi guys.  I started fiddling around... https://www.babylonjs-playground.com/#PF5SYT#6

Not doing any animating, yet.

Line 26... certain kinds of buttons have children... but they rarely let them leave the house. 

Buttons aren't REALLY containers, but... you know.... back-packs. 

(I'm getting good comedy mileage from this "impure pure-controls" thing, eh?  *nod*)

Hey Dylan.  I heard a rumor that GUI image controls WILL allow youtube video, flash, animated gif, animated png, webM, avi, mp4, mkv, camera live-streams, and renderTargetTextures... as image sources... SOON!

It's a total lie... that I told to myself, but... that's what I heard!  COOOOOOL!