Sprite Size

[Mezzorio]

Hey, I was wandering if anyone knew the code to set the size of sprites to however many pixels as currently no matter what the cell size or image size they are all formatting to the same height which is very unhelpful for my project! Looking for any working solution so I can have height accurate sprites, my two pieces of code being used to position and call in my sprites are as follows;

var spriteManagerstaffs = new BABYLON.SpriteManager("peopleManager", "Images/TinyPNG/David.png", 1, 1010, scene);           //finds file, sets capacity to 1, cellsize to 1010<-- (does nothing) and adds to scene

 var staff = new BABYLON.Sprite("staff", spriteManagerstaffs);
                staff.position.x = -1.4;
                staff.position.z = 0;
                staff.isPickable = true;
//Sets the position within my 3d environment

[Wingnut]

Hi Mezz

Perhaps you are seeking the .size property?

You can see it used in our playground's built-in sprites demo.  See lines 34 and 43.

The "1010" parameter is for setting the square area that each sprite is mapped-to... on the sprite 'atlas' texture.  In our demo, it is set to 64, which indicates that each sprite uses a 64x64 square area of the sprite map/atlas.  Hope this helps.  Hope I didn't say anything incorrect/stupid.  (I do that sometimes) 

[Mezzorio]

1 hour ago, Wingnut said:

Hi Mezz

Perhaps you are seeking the .size property?

You can see it used in our playground's built-in sprites demo.  See lines 34 and 43.

The "1010" parameter is for setting the square area that each sprite is mapped-to... on the sprite 'atlas' texture.  In our demo, it is set to 64, which indicates that each sprite uses a 64x64 square area of the sprite map/atlas.  Hope this helps.  Hope I didn't say anything incorrect/stupid.  (I do that sometimes) 

Yo! Thanks the size thing was all I needed, I just couldn't seem to find it online for some reason :') but yeah its working now and ive got the cellsizes working now too! Happy Days!

[Wingnut]

Good to hear!  Mark as solved when you get a moment, thx.  (oh yeah, also show us your games when they are published) 

[Mezzorio]

1 minute ago, Wingnut said:

Good to hear!  Mark as solved when you get a moment, thx.  (oh yeah, also show us your games when they are published) 

Just realised an issue, Is it possible to change the height size not the overall size of the image?

[Wingnut]

Yeah, that would be staff.height and staff.width

One of my favorite "toys" is the built-into-browser "object inspector".

When you open your f12 "dev tools" or JS console in most browsers, and then do console.log(staff);  (within the scene code somewhere)...

...it prints the word "object" to the console... along with some other stuff.

IF you click the word 'object', an "object inspector" opens, and you can scroll down through a list of all the cool "knobs and switches" that are available on the SpriteClass object called staff.

Others use console.dir(staff)... and that does cool things in the JS console, too.

And some... go to the "classes list" in the docs, and find "sprite" in the list, and examine the sprite-class objects... in that way, too.

Just various toys to help you hack-on sprites.  Party on!

[Mezzorio]

13 minutes ago, Wingnut said:

Yeah, that would be staff.height and staff.width

One of my favorite "toys" is the built-into-browser "object inspector".

When you open your f12 "dev tools" or JS console in most browsers, and then do console.log(staff);  (within the scene code somewhere)...

...it prints the word "object" to the console... along with some other stuff.

IF you click the word 'object', an "object inspector" opens, and you can scroll down through a list of all the cool "knobs and switches" that are available on the SpriteClass object called staff.

Others use console.map(staff)... and that does cool things in the JS console, too.

And some... go to the "classes list" in the docs, and find "sprite" in the list, and examine the sprite-class objects... in that way, too.

Just various toys to help you hack-on sprites.  Party on!

Its telling me staff is undefined in the console.log(staff);

[Wingnut]

Put it lower in the code.  It must happen after staff has been created. 

If/When you ARE able-to view staff in the browser's object inspector, you can even type-in new values for its height and width and size.

You can type values directly into the object inspector (after a click on the property name), and the sprite will resize on-screen... instantly.  You cannot execute "methods" on the staff object... from within the object inspector.  You can only change the values of "properties" (sometimes called "members").

In the "old days" this was called "live pokes"  (and live peeks)    Peeking and poking "live" properties - kind-of fun, high-speed learning.

Soon, you'll get object-inspector disease... doing console.log(scene), or (window), or (document), or someMesh/someLight/someCamera.  Those are all some big big objects, with lots of knobs and switches.  heh.  You'll start becoming a mad scientist of demented 3D experiments... trying to cause browser crashes and other good demented things. 

[Mezzorio]

49 minutes ago, Wingnut said:

Put it lower in the code.  It must happen after staff has been created. 

If/When you ARE able-to view staff in the browser's object inspector, you can even type-in new values for its height and width and size.

You can type values directly into the object inspector (after a click on the property name), and the sprite will resize on-screen... instantly.  You cannot execute "methods" on the staff object... from within the object inspector.  You can only change the values of "properties" (sometimes called "members").

In the "old days" this was called "live pokes"  (and live peeks)    Peeking and poking "live" properties - kind-of fun, high-speed learning.

Soon, you'll get object-inspector disease... doing console.log(scene), or (window), or (document), or someMesh/someLight/someCamera.  Those are all some big big objects, with lots of knobs and switches.  heh.  You'll start becoming a mad scientist of demented 3D experiments... trying to cause browser crashes and other good demented things. 

The whole project opens and is working absolutely fine but this error when i try and use console.log(staff);

[Wingnut]

Oh... yeah... umm... console.log(staff) is put inside the scene code, and not entered at the console input line.  There IS a way to view staff in the way you are doing, but its kind of complicated and not always very useful (it takes lots more typing, too).  Instead, try this...

var staff = new BABYLON.Sprite("staff", spriteManagerstaffs);
staff.position.x = -1.4;
staff.position.z = 0;
staff.width = .5;
staff.height = 3;
staff.isPickable = true;

console.log(staff); // do it here... good place in the code.

After RUN, you SHOULD see 'object' at the JS console... and you can click on it... there.  (Wingy crosses his fingers) 

[Wingnut]

Note:  When I said console.map(something), I meant console.dir(something).  Sorry.