I have a Sprite object with a Width and a Height (texture size).
I want to display the sprite on the screen with the same size as the original texture size.
Because the scene size, the camera position, and texture sizes are not constant values I need some way to scale the Sprite.
Most of the time camera is Perspective but some times it can be Orthographic.
So I need 2 formulas for the scale.
I've found some answers on how to make the Sprite size constant when zooming but in this calculation the initial scale is unknown.
Thanks.
One way that I do something similar to this is by creating an initial(optimal) size of the screen, and scaling the node based on changes to the screen.
The easiest way to do this is to have an initial size of the scene in which your sprite is the exact size you want it. You would call this before doing any zooming and you only call it ONCE:
var initialScreenWidth = self.size.width
var initialScreenHeight = self.size.height
Now whenever you change the size of screen(such as zooming), you have to find the scale at which the screen has changed:
var scaleWidth = self.size.width/initialScreenWidth
var scaleHeight = self.size.height/initialScreenHeight
Now that you have those two scales, all you have to do is:
texture.xScale = scaleWidth
texture.yScale = scaleHeight
You will have to create the scales and set the texture dimensions every single time you change the size of the screen. (Most likely in the Update function so it looks smooth).
Hope this helps!
Related
I want to increase pixel density per unit area on every zoom operation in 'QPixmap'.
To increasing pixel density I create pixmap on every zoom according to the rectangle get from sceneboundingrect() but I think it does not increase the pixel density
The QPixmap is a raster image, that means a finite amount of pixels, making it bigger will not make it clearer (as it does on CSI).
You will need a considerably bigger / larger resolution image to begin with, then you will downsample it when you render it "un-zoomed" and the more you zoom in the closer you render it to its original size.
I'm scaling a QImage, currently as so (I understand there may be more elegant ways):
img.setDotsPerMeterX(img.dotsPerMeterX() * 2);
img.setDotsPerMeterY(img.dotsPerMeterY() * 2);
When I save:
img.save("c:\\users\\me\\desktop\\test.jpg");
and subsequently open and print the image from Photoshop, it is, as expected, half of the physical size of the same image without the scaling applied.
However, when I simply print the scaled QImage, directly from code:
myQPainter.drawImage(0,0,img);
the image prints at the original physical size - not scaled to half the physical size.
I'm using the same printer in each case; and, as far as I can tell, the settings are consistent between both print cases.
Am I misunderstanding something? The end goal is to successfully scale and print the scaled image directly from code.
If we look at the documentation for setDotsPerMeterX it states: -
Together with dotsPerMeterY(), this number defines the intended scale and aspect ratio of the image, and determines the scale at which QPainter will draw graphics on the image. It does not change the scale or aspect ratio of the image when it is rendered on other paint devices.
I expect that the reason for the latter case being the original size is that the image has already been drawn before the call to the functions to set the dots per meter. Or alternatively, set the dots per meter on the original image, before loading its content.
In contrast, when saving, it appears that the device which you save to is copying the values you have set for the dots per meter on the image, then drawing to that device.
I would expect creating a second QImage, setting its dots per meter, then copying from the original to that second image, it would achieve the result you're looking for. Alternatively, you may just be able to set the dots per meter before loading the content on the original QImage.
I have created an logarithmic spiral in canvas, and plotted circles along it. Using your mouse scroll wheel you can zoom in and out of the spiral (which works) – but I am having problems updating the size of the circles to match the zoom level... I'm no math expert!
There are two values I am using when trying to calculate the circle radius:
The initial size: This makes circles smaller the further down the spiral they are. I think I have this pretty close.
The growth size: This is the amount that each circle must increase to accurately grow in size as it gets closer to the viewer. Currently circles seem to be the correct size at the beginning and end of the spiral, but are too small in the middle.
I have hacked together some janky math and I'm sure there is an actual formula for this sort of sizing. Any help would be greatly appreciated – I just want the circles to feel "attached" to the spiral and scale appropriately.
Here is the jsFiddle for reference
// a = starting radius of spiral
// spiralNum = spiral length (100.6)
// timeOffset = scroll position
// node_count_visible = number of total circles
offset = (this.spiralNum - 0.05 - this.node_count_visible) + id + (this.timeOffset/30);
var initial = Math.exp(b * offset)/4;
var growth = (a/8.5);
node.radius = initial + growth;
Thank you in advance for any help provided...
I was able to get an affect you are looking for by doing
node.radius = a * Math.exp(b * offset)/6;
6 is an arbitrary number to adjust the size of the circle.
I'm trying to tint a circle around the player in my 2D side scroller but I keep getting an oval! Here's the part of the code I'm using that matters:
if(length(abs(coords - playerCoords)) < .1)
{
color = color *float4(1,0,1,1);
}
return color;
My screen size is 1280 wide x 720 tall. I know that this is the reason for the distortion, but I don't know enough about my issue in order to come up with or find a solution. Can someone explain to me how to compensate for the screen stretch?
Thanks!
-ATD
multiply the "abs()" term by "float2((720./1280.),1.0)" -- or whatever your y/x aspect ration might be
The coords you are using are normalized in 0-1 space, so just correct them
I need to know what the visible height of a display object will be after I change it's rotationX value.
I have an application that allows users to lay out a floor in 3D space. I want the size of the floor to automatically stretch after a 3D rotation so that it always covers a certain area.
Anyone know a formula for working this out?
EDIT: I guess what I am really trying to do is convert degrees to pixels.
On a 2D plane say 100 x 100 pixels, a -10 degree change on rotationX means that the plane has a gap at the top where it is no longer visible. I want to know how many pixels this gap will be so that I can stretch the plane.
In Flex, the value for the display objects height property remains the same both before and after applying the rotation, which may in fact be a bug.
EDIT 2: There must be a general math formula to work this out rather than something Flash/Flex specific. When viewing an object in 3D space, if the object rotates backwards (top of object somersaults away from the viewer), what would the new visible height be based on degrees of rotation? This could be in pixels, metres, cubits or whatever.
I don't have a test case, but off the top of my head I'd guess something like:
var d:DisplayObject;
var rotationRadians:Number = d.rotationX * Math.PI / 180;
var visibleHeight:Number = d.height * Math.cos(rotationRadians);
This doesn't take any other transformations into account, though.
Have you tried using the object's bounding rectangle and testing that?
var dO:DisplayObject = new DisplayObject();
dO.rotation = 10;
var rect:Rectangle = dO.getRect();
// rect.topLeft.y is now the new top point.
// rect.width is the new width.
// rect.height is the new height.
As to the floor, I would need more information, but have you tried setting floor.percentWidth = 100? That might work.
Have you checked DisplayObject.transform.pixelBounds? I haven't tried it, but it might be more likely to take the rotation into account.
Rotation actually changes DisplayObject's axis's (i.e. x and y axes are rotated). That is why you are not seeing the difference in height. So for getting the visual height and y you might try this.var dO:DisplayObject = new DisplayObject();
addChild();
var rect1:Rectangle = dO.getRect(dO.parent);
dO.rotation = 10;
var rect2:Rectangle = dO.getRect(dO.parent);
rect1 and rect2 should be different in this case. If you want to check the visual coordinates of the dO then just change dO.parent with root.