I'm trying to fit my interface for all resolutions. I have this code
private void OnEnable() {
GameObject back = Instantiate(Background) as GameObject;
BoxCollider2D back_bc2d = back.GetComponent<BoxCollider2D>();
float x = ((Screen.currentResolution.width) / back_bc2d.size.x) / 2;
float y = (Screen.currentResolution.height / back_bc2d.size.y);
back.transform.localScale = new Vector3(x, y, back.transform.localScale.z);
Destroy(back_bc2d);
}
As you can see, I'm trying to create something like GUI.DrawTexture (I don't want to use GUI.DrawTexture because of some reasons)
My texture have to draw on a half screen.
But on different resolutions it doesn't work. What I'm doing wrong?
Screen resolution does not mean anything in world space, only the aspect ratio is important there. The in game geometry size is the same in every resolution, only the viewport may be wider showing more of it - this is how the camera works.
Also, you should not derive localScale used in world space from screen space coordinates - they don't work this way.
If you want to position some geometry in worldspace relative to the camera, use http://docs.unity3d.com/ScriptReference/Camera.ScreenToWorldPoint.html
Related
I am trying to convert a mouse event to pixel coordinates within a video. By pixel coordinates, I mean coordinates relative to the original video resolution.
My video element has object-fit: contain, which means that the top left corner of the video is not necessarily located at position (0,0), as this picture shows:
If I click on the top-left corner of the white section in this video then I want to get (0,0), but in order to do this I need to discover the offset of the video content (white area) relative to the video element (black border).
How can I recover this offset?
I am already aware of width, height, videoWidth, and videoHeight, but these only let me account for the scaling, not the offset.
The offset can be deduced. I think this kind of code should do the trick:
if(videoHeight/height > videoWidth/width){
scale = videoHeight/height;
offsetX = (videoWidth - width*scale)/2;
offsetY = 0;
}
else{
scale = videoWidth/width;
offsetY = (videoHeight - height*scale)/2;
offsetX = 0;
}
I was also interested in getting the actual pixel positions from mouse or touch events when using object-fit, and this is the only result I found when searching. Although I suspect it is probably too late to be helpful to you, I thought I'd answer in case anybody else comes across this in future like I did.
Because I'm working on code with other people, I needed a robust solution that would work even if someone changed or removed the object-fit or object-property in the css
The approach that I took was:
Implement the cover, contain etc algorithms myself, just functions doing math, not dependent on the DOM
Use getComputedStyle to get the element's objectFit and objectPosition properties
Use .getBoundingClientRect() to get the DOM pixel size of the element
Pass the element's current objectFit, objectPosition, its DOM pixel size and it's natural pixel size to my function to figure out where the fitted rectangle sat within the element
You then have enough information to transform the event point to a pixel location
There's more code than would comfortably fit here, but getting the size of the fitted rectangle for cover or contain is something like:
if ( fitMode === 'cover' || fitMode === 'contain' ) {
const wr = parent.width / child.width
const hr = parent.height / child.height
const ratio = fitMode === 'cover' ? Math.max( wr, hr ) : Math.min( wr, hr )
const width = child.width * ratio
const height = child.height * ratio
const size = { width, height }
return size
}
// handle other object-fit modes here
Hopefully this gives others a rough idea of how to solve this problem themselves, alternately I have published the code at the link below, it supports all object-fit modes and it includes examples showing how to get the actual pixel point that was clicked:
https://github.com/nrkn/object-fit-math
I'm trying to draw scaled image on canvas in javafx. Using this code:
Image image = ...;
canvas.setWidth(scale * width);
canvas.setHeight(scale * height);
GraphicsContext gc = canvas.getGraphicsContext2D();
gc.drawImage(image, 0, 0, scale * width, scale * height);
// this gives same result
// gc.scale(scale, scale);
// gc.drawImage(editableImage, 0, 0, width, height);
It works really fast but makes blurred images like this:
This is not what I'd like to see. Instead I want to get this picture:
Which can be drawn by manually setting each pixel color with such code:
PixelReader reader = image.getPixelReader();
PixelWriter writer = gc.getPixelWriter();
for (int y = 0; y < scale * height; ++y) {
for (int x = 0; x < scale * width; ++x) {
writer.setArgb(x, y, reader.getArgb(x / scale, y / scale));
}
}
But I cannot use this approach as it's too slow. It took couple of seconds to draw 1Kb image scaled 8 times. So I ask if there's any way to disable this blurry effect for drawing on canvas?
UPD 10/07/2019:
Looks like the issue is fixed! Now GraphicsContext should have property "image smoothing" controlling this behavior.
INITIAL ANSWER
I guess I've found answer to my question. As this issue says that there's no way to specify filtering options in graphics context.
Description:
When drawing an image in a GraphicsContext using the drawImage()
method to enlarge a small image to a larger canvas, the image is being
interpolated (possibly using a bilinear or bicubic algorithm). But
there are times like when rendering color maps (temperature,
zooplancton, salinity, etc.) or some geographical data (population
concentration, etc.) where we want to have no interpolation at all
(ie: use the nearest neighbor algorithm instead) in order to represent
accurate data and shapes.
In Java2D, this is possible by setting the appropriate
RenderingHints.KEY_RENDERING on the Graphics2D at hand. Currently on
JavaFX's GraphicsContext there is no such way to specify how the image
is to be interpolated.
The same applies when shrinking images too.
This could be expanded to support a better form of smoothing for the
"smooth" value that is available in both Image and ImageView and that
does not seem to work very well currently (at least on Windows).
The issue was created in 2013 but it's still untouched so unlikely it will be resolved soon.
I have a custom chart which I scale using the following code:
final double SCALE_DELTA = 1.1;
treePane.setOnScroll(new EventHandler<ScrollEvent>()
{
#Override
public void handle(ScrollEvent event)
{
event.consume();
if (event.getDeltaY() == 0)
{
return;
}
double scaleFactor = (event.getDeltaY() > 0) ? SCALE_DELTA : 1 / SCALE_DELTA;
treePane.setScaleX(treePane.getScaleX() * scaleFactor);
treePane.setScaleY(treePane.getScaleY() * scaleFactor);
}
});
I noticed that when I scroll the chart with mouse wheel I cannot zoom the chart where my mouse points. Instead of this the chart is zoomed to left or right for example.
I would like when I zoom with the mouse wheel to scale the chart where my cursor points. Is there any solution?
I haven't worked with javafx, but I will try to answer anyway. From my experience with Win32Api/GDI and XNA you should definitely be able to read mouse coordinates. Anything you display is displayed at coordinates x,y. When you want to scale and zoom to the cursor's location, you will redraw with this in mind: (assume zoom factor = z, mouseX and mouseY the mouse coordinates X and Y the new coordinates)
your cursor will have to point at the same pixel, so if the image is z times bigger now, so will the mouse coordinates be, relative to the source of the picture. To these coordinates, essentially the distance from the top and left of the image, you have to add the coordinates of the source itself, which should remain unchanged relative to the window's top-left corner. This eventually means that mouseX - X = (mouseX - x)*z, which means X = mouseX - (mouseX - x)*z
Same goes for the Y coordinate. In theory this should work perfectly, i have not tried it with code but it seems right on paper. You will notice X and Y seem to be getting smaller, essentially they might even turn out negative since by scaling and keeping the mouse on the same pixel, you push/stretch the top-left corner further up and left, possibly out of the screen.
You will probably work with the scrollbars though, same philosophy on their displacement.
Play around with the variables a bit to make them fit the drawing mode, I do not know if the libraries you are working with start from the screen's (0,0), or the window's, or the working areas, so you will have to adapt it to the rest of the code, but this is the math/geometry behind it.
I'm messing around in SDL trying to build a game and have noticed that when I blit a sprite to the screen the origin of the sprite is set to the top left corner, 0,0.
To get around this I've simply adjusted the sprite placement by 1/2 the sprites width but as a solution it feels kind of clunky - I want to build a platform game so surely the COO will need to be at the sprites feet for collision detection with the platforms - and I was wondering if SDL had any functions in place that would allow me to set the center of origin a bit like the sprite editor in construct2.
This is my drawing routine:
// Draws the hero sprite according to clipframe
void apply_surface( int x, int y, SDL_Surface* source, SDL_Surface* destination, SDL_Rect* clip = NULL )
{
//Holds offsets
SDL_Rect offset;
//Get offsets
offset.x = x;
offset.y = y;
//Blit
SDL_BlitSurface( source, clip, destination, &offset );
}
My instantiation of it:
apply_surface(width /2 - heroSpriteSize /2, height /2 - heroSpriteSize /2, hero, buffer, &wait[frame]);
Ok, so I've been trying to get this concept to work for the day now and have had zero luck. I am not so good with math, so any help will be appreciated. I am trying to rotate a centered container from it's center. The problem with this code is when I use the rotatePicture method, it doesn't rotate from the center, instead it rotates from the box's top-left corner. Here's the code...
import mx.effects.Rotate;
private function init():void
{
calculateCoordinates();
}
private function rotateBox():void
{
var m:Matrix = myBox.transform.matrix;
var centerX:Number = myBox.width / 2;
var centerY:Number = myBox.height / 2;
var centerPoint:Point = new Point(centerX, centerY);
var transformPoint:Point= m.transformPoint(centerPoint);
m.translate(-transformPoint.x, -transformPoint.y);
m.rotate(90 * Math.PI / 180);
m.translate(transformPoint.x, transformPoint.y);
myBox.transform.matrix = m;
this.callLater(calculateCoordinates);
//calculateCoordinates();
}
private function calculateCoordinates():void
{
var x : Number = (myBox.parent.width - myBox.width) / 2;
x = x < 0 ? 0 : x;
var y : Number = (myBox.parent.height - myBox.height) / 2;
y = y < 0 ? 0 : y;
myBox.move(x, y);
}
Ok, this was a bit tricky and i'm working out a couple of details, but in case anyone had a similar issue, I found the general answer. Just took a movie break to refresh the brain...
I had to place a variable for how many turns the canvas had rotated which was easy since I was restricting the degrees to only 90. Then I place in a switch statement that tested the turns variable and recalculated the (x,y) coordinates based off of the turns. Since I knew that the Rotate class would create a cooler effect and end with the same result, I ended up using that instead.
Cheers!
I don't know what your background is, but in my experience this is a classic case of "out-thinking yourself".
You've written quite a bit of code to do something that is actually native to the Flash display API's.
Since you seem to be using Flex I'll just tell you that the simple way to achieve this is to dynamically reposition your display clip contents so that the center of your contents is at the 0,0 point of your clip.
This gets harder the more content you have, but if you just have something like an image or a button or what have you, it's really easy to just calculate the height and width, then divide by 2 and subtract.
Then the rotation property will work just fine.
In Flash it's even easier because you can just make a new clip, bind your class to the clip, and place all yours contents in the Flash authoring tool positioned properly for rotation to work as expected.
Yeah, what Back2Dos said.
Personally, I'd wrap the container in another sprite, position it so its center is at (0,0) in that sprites coordinate space, and then just rotate the sprite ... it's simple and robust ...
I'd like to use <s:Rotate> to rotate center. Hope useful to you.