Image very large when using the dragging example

[Tushar]

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

test.html

[ivan.popelyshev]

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.

[Tushar]

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

[ivan.popelyshev]

Either its JS problem, and you have to study the language first:

XXX

Either I'm not telepath and dont understand what you want

[Taz]

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)

 

[Tushar]

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

[Tushar]

21 hours ago, ivan.popelyshev said:

Either its JS problem, and you have to study the language first:

XXX

Either I'm not telepath and dont understand what you want

thanks for the book.. I want to make something of this sort:-

http://enclosure.hummel.com/_gehaeusekonfigurator/default_en.htm

[Taz]

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

[Taz]

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