Jump to content

GUI - Spritesheet animations


Recommended Posts

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

Link to comment
Share on other sites

  • 8 months later...
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 = ...;

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...