I'm looking for a way to determine the display/screen coordinates of a movie clip element.
point = uie.localToGlobal(new Point(uie.x,uie.y));
posX = point.x + (uie.width / 2);
posY = point.y + (uie.height / 2);
The code above only retrieves coordinates within the stage. However - I need display/screen coordinates and NOT stage coordinates.
Maybe there is a way to retrieve the display/screen position (top left corner) of the flash container or move the mouse to a position within the stage, retrieve the screen/display and stage position of the mouse and determine an offset between screen position and stage position. Is this possible within (!) AS3?
This isn't possible within the Flash player. You could try to get the coordinates of the flash container with javascript this will get you a coordinate relative to the browser window. Javascript can get the browser's screen position relative to the desktop. You need the window.screenLeft api of the browser. With this you can get the position of the flash element on the page and add it to the browser window. This will give you the correct position with a small error margin.
You can also achieve this with Adobe Air. With the NativeWindow api.
stage.nativeWindow.x = 0
stage.nativeWindow.y = 0
This code snippet will set the window in the top left corner for example.
Related
I wanted to create this Pixel Effect from Frontend Expert.
Although I was able to implement the entire pixel effect on a full screen canvas:
const canvas = getElementById('canvas');
canvas.height = window.innerHeight; // Gives the canvas height of fullscreen
canvas.width= window.innerWidth; // Gives the canvas width of fullscreen
and got the coordinates of the mouse pretty easily
const mouse = {
x: undefined,
y: undefined
}
canvas.addEventListner('mousemove', function(e) {
mouse.x = e.x;
mouse.y = e.y;
}
About now the canvas width and height was equal to that of the document, therefore, it was pretty easy to get the exact coordinates of the mouse.
But when I tried to implement it with 800px X 400px dimensions and used a flexbox with it (like shown in the website) my mouse coordinates got completely messed up and I spent hours in fixing but wasn't able to get the accuracy as shown in the above website. Also there were some issues related to resize.
I would like to know how can I preserve the mouse accuracy.
Your help is much appreciated.
I believe when you use e.x and e.y, even though used in an event listener for tha canvas, they return the mouse coordinate relative to the top-left pixel of the entire page, not just the canvas. If by messed up, you mean that anywhere you click, the pixel effect is offset in some constant direction, this may be your issue and you should replace e.x and e.y with e.clientX and e.clientY. The ‘client’ in e.clientX refers to which element the listener is for and specifies to give event coordinates relative to that element instead of the page. If it is messed up in some other way, then I don’t think I have an answer for that.
I have create a sample tile map like this, I am confused on how to show the camera on the center of the tilemap or in a specific position.
the output looks like this. how do I make the camera show the center of the tilemap also how do I make the image show smaller
The camera's position is always considered to be the center of the camera.
An uninitialized camera will point to (0,0) and show as much space to the top, bottom, left and right as the viewport allows.
You can set the position in the create method:
OrthographicCamera camera = new OrthographicCamera(width, height);
camera.position.set(camera.viewportWidth / 2f, camera.viewportHeight / 2f, 0);
camera.update();
Do not forget to call the update method after any changes or they will not be visible.
In order to show the camera in a specific position after creation you need to move the camera by calling
camera.translate(x,y,z);
To zoom in and out simply set the zoom:
camera.zoom = someFloat;
If this does not make sense i recommend researching more about the orthographic camera
(https://github.com/libgdx/libgdx/wiki/Orthographic-camera)
and viewports (https://github.com/libgdx/libgdx/wiki/Viewports).
If this does not help at all, because I misunderstood something, post more information plus some code and we will figure something out.
In a certain point when you want to see things closer, can you zoom in the whole screen without changing the games' levels and items' size and scale?
In an swf file, you can right click to zoom in, but I want the same feature for the game using code.
Thanks.
You can play with the scaleXand scaleY properties of the DisplayObject, which holds your graphic elements.
Assumed,holder contains your stuff:
holder.scaleX = holder.scaleY = 2;
will scale the holder and all its children to double size.
I have been struggling with this problem for sometime, I hope someone would be able to help me out on this.
I have added canvas object in my html code, in which I load a photo image. I am trying to scale the image at some random coordinates, but the scaling happens only from the center of the canvas. If I use translate the whole image moves as the origin changes. I have also tried transform but that too doesn't give the desired result.
use context.drawImage() + extended parameters to scale your original image onto your canvas
context.drawImage(srcImage, srcX, srcY, srcWidth, srcHeight,
canvasX, canvasY, scaledWidth, scaledHeight)
Where:
srcImage = your source image
srcX = the X-coord on your source image you want to start grabbing pixels from
srcY = the Y-coord on your source image you want to start grabbing pixels from
srcWidth = width of a rectangle of pixels you want to start grabbing from the source image
srcHeight = height of a rectangle of pixels you want to start grabbing from the source image
canvasX - the X coord on the canvas where you want to start painting your pixel rectangle
canvasY - the Y coord on the canvas where you want to start painting your pixel rectangle
scaledWidth - scale the source pixel rectangle to this width before painting to the canvas
scaledHeight - scale the source pixel rectangle to this height before painting to the canvas
For example:
context.drawImage(myMap, 50,50,100,150, 20,20,200,300)
This will grab a 100x150px rectangle of pixels from myMap image object starting at coordinate [50,50].
Then it will scale the pixel rectangle to 200x300px.
And finally, it will paint the scaled-up pixel rectangle at coordinate [20,20] on the canvas
I'm having a sprite (canvas) which is being scaled. The canvas has a mask. The problem is that simple scaling (scaleX=newScale; scaleY=newScale;) takes the part of canvas under mask beyound the mask. So I need to move canvas after scaling in such a way that point of canvas under mask remain in the same place. I'm trying to do something like the following:
var deltaScale = newScale / scale;
//w and h are width and height of mask
canvas.scaleX = newScale;
canvas.scaleY = newScale;
canvas.x += (canvas.x + w/2) - (canvas.x + w/2) / deltaScale;
canvas.y += (canvas.y + h/2) - (canvas.y + h/2) / deltaScale;
still after that central point do not remain on the same place. Can somebody prompt me how should I move canvas after scaling?
PS: width and height of canvas is extremely big (some of 25000) if that helps.
UPD: Canvas with it's mask are added on Sprite, mask is having the same sizes as that parent sprite, canvas.x and canvas.y are negative.
The way I did something similar before was to put the canvas sprite inside another sprite eg. zoom which has its reg point in the centre of the screen (or where ever needed). You can then move canvas around inside the zoom sprite (in my case it was draggable) and scale the outer sprite so the centre is zoomed into.
Scaling and positioning different sprites I found much easier than doing an offset.