Tushar

Image very large when using the dragging example

Recommended Posts

i am using dragging example of pixijs and using simple 100x100 image but that is displaying very large (300x300). I used the cdn linking script to link pixi js framework. How can I  make the image smaller and put bounds so that the image wont go beyond those bounds

image.jpg

test.html

Share this post


Link to post
Share on other sites

Do you see "bunny.scale.set(3);" in that example? ;)

Also if you want better dragging that remembers the point mouse clicked first and supports clicks too, look at http://pixijs.github.io/examples/#/projection/basic.js , it has better code for dragging.

Beware, example is made for custom plugin, and things like "Sprite2d" and "proj" doesn't exist in vanilla pixi. I'm afraid that you copy stuff without understanding what it actually means, and that leads to that kind of questions.

Share this post


Link to post
Share on other sites

I only have knowledge of basic js but i have a project at hand that i have to complete. I would really appreciate it if you could help me. 

I looked at the example but its the projection, that I am not looking for

I want to know how to create boundaries, so that the image can not go out of bounds. and if they do, they are deleted

Share this post


Link to post
Share on other sites
2 hours ago, Tushar said:

I want to know how to create boundaries, so that the image can not go out of bounds. and if they do, they are deleted

You can use bunny.texture.frame to set boundaries and everything outside will be clipped. But make sure that  you stay within the image's dimensions. For instance, the bunny image is 26 by 37, so x + width must be <= 26, and y + height must be <= 37.

For example this will clip the bottom half of the bunny:

bunny.texture.frame = new PIXI.Rectangle(0, 0, 26, 37/2); // (x, y, width, height)

 

Share this post


Link to post
Share on other sites
18 hours ago, magig said:

You can use bunny.texture.frame to set boundaries and everything outside will be clipped. But make sure that  you stay within the image's dimensions. For instance, the bunny image is 26 by 37, so x + width must be <= 26, and y + height must be <= 37.

For example this will clip the bottom half of the bunny:


bunny.texture.frame = new PIXI.Rectangle(0, 0, 26, 37/2); // (x, y, width, height)

 

i dont want it clipped...i want so that it doesnt go outside the bounds

Share this post


Link to post
Share on other sites

You can use bunny.width = bunny.height = 100; For example that will auto-adjust the scaling so that it fits exactly in the 100x100 square. Other than scaling or clipping not sure how  you want it to work thou..

Share this post


Link to post
Share on other sites
On 8/6/2017 at 10:23 AM, ivan.popelyshev said:

Also if you want better dragging that remembers the point mouse clicked first and supports clicks too, look at http://pixijs.github.io/examples/#/projection/basic.js , it has better code for dragging.

Great example! The drag and click setup was a perfect start to my level editor :)

Share this post


Link to post
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...

  • Recently Browsing   0 members

    No registered users viewing this page.