I'm building a HTML5 game and I am trying to put the mouse cursor over a certain control on a specific event so that moving in a specific direction always has the same result. Is this possible?
You cannot move the mousepointer with javascript.
Just think about the implications for a second, if you could ;)
User thinks: "hey I'd like to click this link"
Javascript moves mousecursor to another link
User clicks wrong link and inadvertently downloads malware that formats his c-drive and eats his candy
Run a small web server on the client machine. Can be a small 100kb thing. A Python / Perl script, etc.
Include a small, pre-compiled C executable that can move the mouse.
Run it as a CGI-script via a simple http call, AJAX, whatever - with the coordinates you want to move the mouse to, eg:
http://localhost:9876/cgi/mousemover?x=200&y=450
PS: For any problem, there are hundreds of excuses as to why, and how - it can't, and shouldn't - be done.. But in this infinite universe, it's really just a matter of determination - as to whether YOU will make it happen.
I would imagine you could accomplish placing the mouse cursor to a given area of the screen if you didn't use the real (system) mouse cursor.
For instance, you could create an image to act in place of your cursor, handle an event which upon detecting mouseenter into your scene, set the style on the system cursor to 'none' (sceneElement.style.cursor = 'none'), then would bring up a hidden image element acting as a cursor to be anywhere you like with in the scene based on a predefined axis/bounding box translation.
This way no matter how you moved the real cursor your translation method would keep your image cursor wherever you needed it.
edit: an example in jsFiddle using an image representation and forced mouse movement
Great question. This is really something missing from the Javascript browser API. I'm also working on a WebGL game with my team, and we need this feature. I opened an issue on Firefox's bugzilla so that we can start talking about the possibility of having an API to allow for mouse locking. This is going to be useful for all HTML5/WebGL game developers out there.
If you like, come over and leave a comment with your feedback, and upvote the issue:
https://bugzilla.mozilla.org/show_bug.cgi?id=630979
Thanks!
You could detect position of the mouse pointer and then move the web page (with body position relative) so they hover over what you want them to click.
For an example you can paste this code on the current page in your browser console (and refresh afterwards)
var upvote_position = $('#answer-12878316').position();
$('body').mousemove(function (event) {
$(this).css({
position: 'relative',
left: (event.pageX - upvote_position.left - 22) + 'px',
top: (event.pageY - upvote_position.top - 35) + 'px'
});
});
So, I know this is an old topic, but I'll first say it isn't possible. The closest thing currently is locking the mouse to a single position, and tracking change in its x and y. This concept has been adopted by - it looks like - Chrome and Firefox. It's managed by what's called Mouse Lock, and hitting escape will break it. From my brief read-up, I think the idea is that it locks the mouse to one location, and reports motion events similar to click-and-drag events.
Here's the release documentation:FireFox: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_APIChrome: http://www.chromium.org/developers/design-documents/mouse-lock
And here's a pretty neat demonstration: http://media.tojicode.com/q3bsp/
You can't move a mouse but can lock it.
Note: that you must call requestPointerLock in click event.
Small Example:
var canvas = document.getElementById('mycanvas');
canvas.requestPointerLock = canvas.requestPointerLock || canvas.mozRequestPointerLock || canvas.webkitRequestPointerLock;
canvas.requestPointerLock();
Documentation and full code example:
https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
Interesting. This isn't directly possible for the reasons called out earlier (spam clicks and malware injection), but consider this hack, which creates an impression of the same:
Step 1: Hide the cursor
Let's say you've a div, you can use this css property to hide the real cursor:
.your_div {
cursor: none
}
Step 2: Introduce a pseudo cursor
Simply create an image, a cursor look-alike,and place it within your webpage, with position:absolute.
Step 3: Track actual mouse movement
This is easy. Check internet on how to get real mouse location (X & Y coordinates).
Step 4: Move the pseudo cursor
As the actual cursor move, move your pseudo cursor by same X & Y difference. Similarly, you can always generate a click event at any location on your webpage with javascript magic (just search the internet on how-to).
Now at this point, you can control the pesudo cursor the way you want, and your user will get the impression that the real cursor is moving.
Fair Warning: Do not do it. No one wants their cursor or computer controlled this way, unless if you've some specific use-case, or if you are determined to flee your users away.
You can't move the mouse pointer using javascript, and thus for obvious security reasons. The best way to achieve this effect would be to actually place the control under the mouse pointer.
Couldn't this simply be done by getting actual position of the mouse pointer then calculating and compensating sprite/scene mouse actions based off this compensation?
For instance you need the mouse pointer to be bottom center, but it sits top left; hide the cursor, use a shifted cursor image. Shift the cursor movement and map mouse input to match re-positioned cursor sprite (or 'control') clicks When/if bounds are hit, recalculate. If/when the cursor actually hits the point you want it to be, remove compensation.
Disclaimer, not a game developer.
I created an animation screen in javascript which is running about 20 frames per second. (I can do it faster, but 20fps is fine and have one eye on battery consumption.)
However, it can rain or get dark in the game, so I want to put a blue or grey hue over the scene.
The obvious idea is to have another canvas with a higher z value with the blue/grey hue on it. I can have that offscreen or onscreen depending on when it rains or gets dark.
Unfortunately, this is not a great solution as I need to capture touch/mouse events on the original canvas. This means the rain/dark/hue canvas would block the original canvas from receiving those events.
So is there any fast way of doing this? Again I want to keep an eye on battery consumption and speed. (I do not want to access and modify the image data of each pixel of the original canvas each frame.)
Is having the rain/dark canvas showing permantently but with transparent, blue or grey drawn once every 10 or so minutes (the typical gap between night/rain events). This could then capture the mouse events and the lower canvas has mouse/touch events turned off.
The only thing I do not like about that is when it is a clear day I would constantly have the gpu calculating colours for the screen when looking through a totally transparent canvas. That does not seem great.
If you really need to use 2 canvas, you can use the pointer-events: none CSS property so the clicks events go through the "filter" canvas.(Click through div to underlying elements)
If you are using a canvas library, there most likely is a layer system so you don't have to manage it by yourself.
I setup an example jsfiddle to illustrate this with proper assets.
When your character is moving and the camera starts to pan, you will notice the background has a small "jitterness". This can be disabled by setting game.camera.roundPx to true.
However, if that is disabled and you move the character. Your character starts to jitter. Some things I've found in this adventure:
This only happens when moving with body.velocity.x, under both P2 and Arcade physics.
If you move the character with body.x or just x it's absolutely fine.
If you remove the tilemap texture you can literally see the jitterness happen behold your eyes when moving. Example here -- Make sure you move far enough for the camera to pan.
I've also tried game.renderer.renderSession.roundPixels = false; with no prevail.
This happens under CANVAS and WEBGL render modes
Great Question! These jitters are caused by subpixel rendering.
Phaser can use non-integer values for the positions of sprites when game.camera.roundPx is false. According to the documentation for roundPx:
If a Camera has roundPx set to true it will call view.floor as part of its update loop, keeping its boundary to integer values. Set this to false to disable this from happening.
view.floor:
Runs Math.floor() on both the x and y values of this Rectangle.
When drawing to non-integer positions, the browser tries to interpolate to make it appear as if a pixel is placed between two pixels. This can cause a single pixel of your source image to be displayed as two physical pixels. The switching between these two states when the camera pans is what is causing the jittering. Here's an example:
That's why setting game.camera.roundPx = true fixes it.
I have realy specific question about Canvas handling mouse-events.
I'm working on a isometric game, I have a displayed map with all tiles, and I want know on which one the mouse are.
On a basic isometric map it's easy to transform the position on the screen (blue on the next image) on a map position (orange) with basic affine function (ax+b, with 'a' is width_tile/height_tile and b is the current position of the map view, red line on the image)..
But I have a complication, each tile of the game have a specific elevation (displayed by red arrow on second image). So i can't use a function for each line(y)/column(x) of the map.
On the same technique I'll try to calculate if mouse position are on EACH tile one by one for EACH mouse event (move, click, ..) but I'm afraid for the heavy code : if I have a 100x100 map and I shack the mouse, I'm sure all this test will ruin the client browser..
I realy don't know how can I do it better ?!
Someone have an idea, or a tips to optimize this check ?
I have big horizontal strip image in photoshop which is made of lots of smaller elements. The background is transparent and the strip goes from smaller elements (left) to bigger elements (right). My goal is to make this strip interactive to mouse events.
Each element is some kind of polygonal image which is trimmed left and right and then exported as a png. It is then imported into a canvas.
The problem is that I can put them side by side but since they are not rectangles I need a way to calculate the offset made up by the transparent pixels on each side of each element to make them stick together correctly... I am using KineticJs to get a precise hitarea for each element... So maybe there is a way to do it automatically with kineticjs,or there is some kind of operation I could do using each image data?
My problem illustrated:
Any ideas?
Also I am doing this simply because I would prefer precise mouseOver bounding box on each item (rather than a simple rectangle) and would rather avoid the solution to calculate each offset manually... But maybe that's not worth it?!
Ok, so you have yourself a custom shape you want to use, here is a tutorial for that: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/ , the simplest thing you can do, and even that seems fairly long, is to calculate the bounding lines for that shape. (Two somewhat vertical lines, and two somewhat horizontal lines). Then you test if the right vertical line of shape one crosses with the left vertical line of shape two, if they do, then set the coordinates of the images to be the same coordinate.
http://www.mathopenref.com/coordintersection.html
line1 = ax + b ..... line2 = cx+d //see possible tests
if(...intersection test...){ // or just test if some coordinate is left of some other coordinate
shape2.setX(shape1.getX()+shape1.getWidth()); //account for image width, so they don't overlap
shape2.setY(shape1.getY()) // no need to account for height
}
UPDATE: This is a very rough solution to the workings of the problem. The next step would be to do more fine tuning dependent on each image.
http://jsfiddle.net/9jkr7/15/
If you want precise areas, use an image map. With some clever finagling and a blank image gif you should be able to have the background you want whenever you hover over any particular area of the image map (might require javascript).
The other option I can think of would be to use SVG itself or one of the many libraries in existance to build interactive vector graphics into your page.
You could also write a function that calculates the left most, top most, right most, and bottom most pixel by looking at all of the pixels in the image data. Here's a tutorial on that:
http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-tutorial/