Jump to content

Scaling Sprite2D


AlbertTJames
 Share

Recommended Posts

Hey !

 

I was wondering (instead of sleeping) if the scaling behavior for sprite2D is working OK. I have this strange behavior:

 

Scale 1 position(0,0)

Screen Shot 2016-09-24 at 06.34.45.png

Scale 0.5 position (0,0)

Screen Shot 2016-09-24 at 06.35.58.png

 

How to know the correct position on the screen after scaling ??

The code:

var texture = taskObject.cloneAssetIntoScene(taskObject.assets.faceTexture, scene); 
var ts = texture.getSize();
var sprite = new BABYLON.Sprite2D(texture, {
    parent: canvass,
    id: "sprite1",
    x: 0,
    y: 0,
    invertY: false,
    spriteSize: ts,
    scale: 0.5, 
    spriteLocation: new BABYLON.Vector2(0, 0)
  });

Thanks!

Link to comment
Share on other sites

Nobody for this one ? 

 

Edit:

AHH - found it !

Set the origin to BABYLON.Vector2.Zero(),

var sprite = new BABYLON.Sprite2D(texture, {
    parent: canvass,
    id: "sprite1",
    x: 0,
    y: 0,
    origin: BABYLON.Vector2.Zero(),
    scale: 0.5,
    invertY: false
  });

And voila !

Scales in place... 

Screen Shot 2016-09-24 at 06.34.45.pngScreen Shot 2016-09-24 at 17.17.08.pngScreen Shot 2016-09-24 at 17.17.29.png

 

Again.. I hope somebody will benefit from my pain. ;)

Link to comment
Share on other sites

Wow, what a classy thing to ask, @Nockawa.  I like you more and more each day.  :)  I strive to do the same thing in our other docs, too.  I watch my forum friends use things, identify if/where confusion happened, and try to smooth-out the "potholes". 

You're just the coolest, Nox!

ATJ - same for you.  You're an advanced coder and fast-grasper... and I learn lots from you.  Thanks!

On-subject:  I bet it was... spriteLocation: new BABYLON.Vector2(0, 0).  Or maybe... it was about having an x: and y: and origin:?  http://babylonjs-playground.com/#20MSFF#46

There, I'm using x: for lateral movement, origin.y: for vertical movement, and doing some scaling as well.  Crazy, huh?  Also trying to convince Nox to quit using the 'canvas'  variable, because it clashes with the OTHER 'canvas' variable active in playgrounds/scenes.  I may have to PAY him to stop.  :D

Hey Nox... did you avoid putting your docs property lists in .md tables... because tables were only 60% width... on the resulting HTML docs versions? 

If so, that has recently changed.  http://doc.babylonjs.com/generals/offsite_tutorials_list  (last table might still be 60%.  It is a "late bloomer", slow to catch-up.)  :D

Possibly, your list of available properties... is cluttered... a bit difficult to read.  Possibly not.

But please notice that... xy:  and origin: ...are not listed, there.  Is that because they are inherited from a superClass?  hmm.  The classDoc for Sprite2D is much more detailed: http://doc.babylonjs.com/classes/2.4/Sprite2D   Here we even learn that position: is another way (vec2?). 

That bullet list has nice white-space there... easy to read.

Hey Noxxy... what if... instead of trying to "keep up" with updating the tutorials when changes happen... instead you simply add a link to the top of the tutorial, and say... "For a list of properties, see the Sprite2D Class docs, here" (link).  You can use a link such as... http://doc.babylonjs.com/classes/Sprite2D (no class version included in the URL)... and the docs system will automatically get the latest classDoc version.

THEN... you don't need to show constructors or attempt to keep an updated list of properties in that tutorial.  Just show the link, then start talking about the "meat", and let the classDoc for Sprite2D... handle the current properties and methods listing.  This should remove some documentation workload for you, and possibly keep things accurate.  *shrug*

Ok, I'll shut up now.  Thx for consids.

Oh yeah, the secret word... to insert before an .md table... for making it 100% width (in after-build HTML)... is... "rumpelstiltskin".  :D  Nah.  It's this:

<div class='beforeWideTable'></div>

Easy as pie, piece of cake.  :)  Secret HTML-based triggers... sneaking-around in our .md files, triggering special purpose robots during our docs builds!  Coooool.  @Temechon built it from an old snow blower and a stolen HAARP antenna!   Warning: BRAND SPANKIN' NEW and subject to anything.

Link to comment
Share on other sites

Quote

But please notice that... x y:  and origin: ...are not listed, there.  Is that because they are inherited from a superClass?  hmm.  The classDoc for Sprite2D is much more detailed: http://doc.babylonjs.com/classes/2.4/Sprite2D   Here we even learn that position: is another way (vec2?). 

Hey Noxxy... what if... instead of trying to "keep up" with updating the tutorials when changes happen... instead you simply add a link to the top of the tutorial, and say... "For a list of properties, see the Sprite2D Class docs, here" (link).  You can use a link such as... http://doc.babylonjs.com/classes/Sprite2D (no class version included in the URL)... and the docs system will automatically get the latest classDoc version

Today the reference documentation as a major flaw, ihmo. For a given class it only shows the declaration of this class' level and not the inherited content. So I honestly wonder how useful it is for users and if users do rely a lot on this reference documentation. I still try to make a good inline documentation because it's important no matter what, but I still think overview may be more useful today.

But I try to update the overview doc at a slower pace than the code releases, otherwise it would be too much time consuming. So there's no silver bullet on this topic...

 

Link to comment
Share on other sites

2 minutes ago, MasterK said:

i want to complaint: i hate marginAlignment and margin!!

If it is correctly all the time. I'll say nothing. 

More reason is @Nockawa said using margin and x/y same time is not expected.  That cause lot's of problem!!! I'm even a little angry..

Margin and alignment are meant to compute the position of a given Primitive, right? So how would you expect to also be able to use the x/y/position properties? You simply can't!

If you want your element aligned to the left border, you set a horizonalAlignemnet of "left", if you want it to be 10 pixel from the left border then  you specify a marginLeft of 10.

I believe margin and alignment are working most of the time now. What happened recently is someone use it inside a StackLayout and I didn't forseen this when I developed the StackLayout Engine, my bad on this.

Finally, using either x/y/position is equivalent to alignment "horizontal: left, vertical: bottom" and setting a left/bottom margin with the x/y values.

Dealing with margin/alignment is hard for everyone in every GUI lib, people always struggle at first. Canvas2D is no exception. What I need from you guys is to know what are your expected behavior in some specific use case and make sure that if it's legitimate it should work.

Last thing: you're off topic talking about this in this thread, again! ;)

Link to comment
Share on other sites

can you make x/y as marginLeft/marginTop when i set marginAlignment? I think when the align is default "h:left, v:bottom" ,  x/y also is same as marginLeft && marginTop. just y and marginTop is negative.

They should be one thing....

i complaint here because i got scale problem too~ but we solve it by limit our usage. not feel free.

 

Link to comment
Share on other sites

On 9/27/2016 at 6:03 PM, Wingnut said:

Hey Albert... we definitely want to hear from you, too, of course. 

I jumped-in and got your thread all messy, but I know Nockawa and all of us... want to hear your ideas about Canvas2d docs/usage experiences.

Ahah well thanks, 

I'll notify you guys as I go. This week I had to work on a prototype using canvas2d and sprites2d and it work pretty well.  

I have seen some issues that I did not report yet, as I did not have the time but, as I told nockawa, I will try to make a precise list of the roadblocks I encountered hopefully in the next days.

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.

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

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