Does sprite for SpriteManager must be only a square?

[Demian]

Hi everybody! I want to animate this picture with SpriteManager. There are 36 frames 85x57 each. The problem is that they are not squares. SpriteManager requires only squares. Of course I can redraw this picture in Photoshop and make frames as squares, but is there any other solution?

[GameMonetize]

Hey !

Sprite can now be non-squared:

http://doc.babylonjs.com/tutorials/Sprites

Quote

Starting with Babylon.js v2.1, you can define sprite's width and height:

player.width = 0.3;
player.height = 0.4;

 

[Demian]

Deltakosh, thanks for answering. But you are talking about scaling. Let me try to explain. In playground scene the palm-sprite has size 800x800 px (11 line of code). And source image has size 768x1024 px. So half of trunk is cut. We can set size of sprite at 1024, but in my case it is bad idea, because other figure of warrior will shift. So, is there any way to make palm-sprite with height 1024 and width 768, equal to image size?

[GameMonetize]

like this?

http://playground.babylonjs.com/#18FFKE#0

[Wingnut]

Sorry to butt-in, but DK, the bottom of the tree trunk is missing.  Lots missing.  About 40% of tree trunk height... missing on its bottom.

http://playground.babylonjs.com/#18FFKE#1

Compare to http://playground.babylonjs.com/textures/palm.png

Thin horz black line (on trunk) is at knee-height in PG.  Conversely, in image, it is halfway-up the trunk.

Bottom half of trunk is missing in scene, as @Demian mentions.  "half of trunk is cut."

By the way, welcome to the forum, Demian.  Interesting find.  I think @Deltakosh misunderstood the issue, or I am misunderstanding his answer (quite common for me).  I think there is a "clamping" needed here somewhere.  The bottom of the texture is not clamped to the bottom of the sprite.  The texture seems to be "overflowing" the sprite... on the bottom.

I hope I'm clarifying the issue, here, and not making it messy. 

[Demian]

yep, Wingnut, exatly) thanks for help, and thanks for welcoming, this forum is fine

[Wingnut]

  Good.  We could go hacking src... see if we can find the reason... faster than Deltakosh.  It might be rough, because he is hot hot hot.  His brain is like a hard drive of the BJS framework, and he has similar read-write head seek-times. heh

https://github.com/BabylonJS/Babylon.js/blob/master/src/Sprites/babylon.spriteManager.js#L21

There's our two clampers.  They look healthy and happy.

You know these darned spriteManagers and the sprites they manage... can be "power hacked".... by "hijacking" their src code... stuffing it into a playground.  Should we do that?  Ok, here we go...

http://playground.babylonjs.com/#18FFKE#2

I got a console.log in the spriteMANAGER constructor, and the same in the SPRITE constructor.  Watch your JS console [f12]... and you'll see things get made.  That way we KNOW that OUR hijacked code is creating the sprites and managers, and NOT the default framework code.  We've accomplished an over-ride.  So now, with this playground, we can mess with things.  We have about 7 hours before Deltakosh finally leaves the prostitute's apartment (just kidding, of course), and it will take him exactly 72 seconds after reading our issue... to know why it is happening.

So, we got work to do... if we expect to shine for the chief core programmer... and make his morning coffee taste better.  And I'm already sleepy.

But now you have some tools... and you can insert a few thousand console.log(any-value)... and see if you can be a hero.  (if wanted)    No pressure.  It's just JS (even though it DOES look like Chinese writing sometimes, eh?)

[Demian]

Well, Wingnut, it will be pleasure for me to look that code, but only for fun) It is rather difficult for me to make such serious things.

[Demian]

Actually, i have done something. But this is not very good solution. Here what i've got. The next lines were replaced:

5:      function SpriteManager(name, imgUrl, capacity, cellWidth, cellHeight, scene, epsilon, samplingMode) {
9:      //this.cellSize = cellSize;
10:     this.cellWidth = cellWidth;
11:     this.cellHeight = cellHeight;
160:    var rowSize = baseSize.width / this.cellWidth;
184:    effect.setFloat2("textureInfos", this.cellWidth / baseSize.width, this.cellHeight / baseSize.height);

And now we need to call SpriteManager in such way

331:    var spriteManagerTrees = new BABYLON.SpriteManager("treesManager", "textures/palm.png", 2, 768, 1024, scene);

in wich we set width and height of an image. But after this we have to change scale of the sprite and this is not good

339:    tree.width = 3 * (768 / 1024);

Wingnut, thanks alot for help)

[GameMonetize]

Ok I'll try to provide a good solution. I'll keep you posted

[GameMonetize]

Better?  ( clear your cache)

http://playground.babylonjs.com/#18FFKE#6

[Demian]

yep) that's great. but have you changed the source SpriteManager? I copypasted it and my program does not work. But anyway I know how to solve this problem, thanks alot

[GameMonetize]

I changed nothing but babylon.js it self. Did you get the latest bjs 2.5 ?

[Demian]

yes, that was a reason. I've got the latest one. And now all is ok

[GameMonetize]

lol ok:D