Okay, I decided to finally just port everything into jsfiddle because I am at the point where I cannot get this to work.
Here is the link: https://jsfiddle.net/d6wwbo4f/3/
Move around a bit, and you should be able to go under and around those tiles and move freely around the World Map.
The problem is, when the user clicks on a tile strip (or close to it), the .GameWorld's event listener gets the target name of the tile you clicked on and uses its offset. This is bad. I am trying to make it so the .GameWorld e.target is always the .GameWorld's target... Irregardless of what you click on inside the .GameWorld class. If that make sense.
I'm trying to get those tiles to have a background image effect (that cannot happen because my maps are over 3000x3000 in size and I would have some huge images for users to download.. :P
Edit: At line 19 in the Javascript Window on jsfiddle is where I detect the issue, but just not sure on a solution..
Edit2: I forgot to add some things for Firefox and EI. Only working in Chrome atm.
If you do not need to support IE <= 10, the easiest solution will be just to add:
.GameScreen img {
pointer-events: none;
}
to your CSS.
Related
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.
In Adobe Animate CC HTML5 Canvas (createJS), I'm trying to do something very simple, to trigger an animated rollover when the entire stage of an ad is moused over, and to trigger an animated rollout when the mouse leaves the stage. It should be very simple, but it's not. Using mouseenter and mouseleave on the stage is laggy and only works intermittently. It's the same with mouseover and mouseout.
Here's the code that's laggy and intermittent:
stage.addEventListener("mouseenter", fl_MouseOverHandler.bind(this));
stage.addEventListener("mouseleave", fl_MouseOutHandler.bind(this));
function fl_MouseOverHandler(){
this.btnOverAnim.gotoAndPlay("on");
}
function fl_MouseOutHandler(){
this.btnOverAnim.gotoAndPlay("off");
}
I also tried mouseover and mouseout on a button the entire size of the stage and I got the same issue. (Also doing it this way doesn't work at all from inside a frame, and the ad is served inside a frame). I put the var frequency way up to 90 to see if that would help with the lagging, it didn't.
This was the simple mouseover / mouseout code I tried:
var frequency = 90;
stage.enableMouseOver(frequency);
this.bgCta.addEventListener("mouseover", fl_MouseOverHandler.bind(this));
this.bgCta.addEventListener("mouseout", fl_MouseOutHandler.bind(this));
On the createJS website it says "You can monitor whether the pointer is over the canvas by using stage.mouseInBounds AND the mouseleave / mouseenter events." So I'm wondering if using stage.mouseInBounds will help (but I can't find an example anywhere of how to use it). But I actually don't think it'll help because I think this whole problem is about createJS not reading where the mouse is fast enough.
Does anyone know how to fix this lagginess and intermittent firing? A work around? Why does createJS not just monitor the mouse events constantly like pure js?
Also mouseenter and mouseleave on the stage in createJS do not work on tablets or mobile and that's a problem, so it would be better to do this with mouseover and mouseout on a button the entire size of the stage. I did try using mouseover and mouseout and having 3 pixels space around the button between the edge of the button and the edge of the ad banner, this helped, but it was still firing intermittently.
Your thoughts and ideas please.
Mouseover checks are expensive. A canvas is essentially just a bitmap, so EaselJS can't use mouse events from the browser (you just get one for the entire canvas). Instead, mouseover in EaselJS requires every element to be drawn to a 1x1 pixel canvas, and then checked for fill. This gives pixel-perfect detection, but is costly if you are either checking a lot of content, or checking too often.
Reduce your frequency:
It looks like you have set the frequency to 90. This is really high (11 ms between checks, which is basically trying to achieve 90 fps). The default is 10, which is slower than a good framerate, but fast enough to feel responsive. You can probably bring it down to 20 or so to give you a peppy check without it being unnecessarily high.
Modify interactivity: Another thing you can do is filter out exactly what gets checked. By default, all display objects get checked -- but you can reduce this by turning off mouseEnabled on anything you don't care about (omitting them from the check), and turning off mouseChildren on containers that you want to treat as a single object (so something like a complex button is drawn once, instead of all its contents being drawn individually).
// Example
myBackground.mouseEnabled = false;
myButton.mouseChildren = false;
Hope that helps!
Friends, I know this was asked 4 years ago, but the lagginess in Adobe Animate CC V.21 is no different (horrible) regarding mouseenter, mouseleave, mouseover and mouseout. After 10 times of rolling over/out the page becomes unresponsive. I was able to alleviate this using stage.mouseInBounds on a setInterval. The original poster could not find an example, so here is what I did:
// Place this in a keyframe on the timeline where the named cta exists.
setInterval(function(scope){
if(stage.mouseInBounds){
createjs.Tween.get(scope.cta).to({scaleX:1.1, scaleY:1.1}, 150);
}
else{
createjs.Tween.get(scope.cta).to({scaleX:1, scaleY:1}, 150);
}
}, 150, this );
Make sure to pass this into the end of the setInterval function as an argument for the callback function as to not lose scope. I am guessing this can be reworked to use gotoAndPlay() on the timeline, in this instance the built-in tweener for CreateJS sufficed for what I needed.
I am trying to display a heatmap of where the user moved their mouse on a screen (using a Chrome extension). I'm using a library called heatmap.js to handle this.
More specifically, I am using this as an example -- https://www.patrick-wied.at/static/heatmapjs/example-mousemove-heatmap.html
My problem is that the site I wish to display this heatmap on is making heavy use of z-index. The issue with this is that when you mouseover an element with a z-index other then auto, the value returned by onmousemove is not what one would expect -- instead of the value of the mouse on the screen, some other value relative to the top left of the screen is returned.
You can see this in action here -- https://jsfiddle.net/rj870o6c/
To counteract this, I tried adding an overlay div on top of the entire page with a z-index of 9999. This works, but then I lose the ability to interact with the page below, and of course, I can not use pointer-events: none; since I need to capture the value of the mouse.
You can see this in action here (try clicking the link in the yellow box, it won't work) -- https://jsfiddle.net/ktwbbpbn/
Is there a way to get the real value of the mouse pointer when hovering over elements that have a z-index?
Any help would be greatly appreciated.
So it turns out that the issue was that I was using layerX and layerY for grabbing the position of the mouse. That's a bad idea for my use case because that only returns data relative to the current layer (https://developer.mozilla.org/en/docs/Web/API/UIEvent/layerX). The answer is to use pageX and pageY instead. See this for more info.
For anyone who might find this useful, here's a JSFiddle with everything working as expected -- https://jsfiddle.net/h1us1syr/
I want to create zoom functionality when we click on + sign whole page get zoom and when we click - sign it get zoom out in javascript or in CSS. How it is possible? It will be used in php. It also show Zooming %.
Apparently there is zoom property in CSS3.
You can apply it to body and it should zoom the whole page.
It's kind of bad user experience to zoom in and out a whole page. Users who really have low vision and challenges know already where and how to do it in the browser. Those who don't have any, well they would be shocked a bit when the entire page gets bigger or smaller.
My advise: just try to analyze what exactly you what to zoom in-out, if it is text area, just set bigger font size with js, if its image, just stretch it with js, it if is block, svg etc., just set bigger parameters.
P.S.: the zoom property in not cross-browser and has weird behavior. But you can combine it with the transform property to make a more or less cross-browser solution.
is it possible to have a visible html element but one which lacks presence on the page?
Let me give you an example of what I mean. Lets say I have a picture gallery and a light box. Usually lightboxes grey out the background so you can focus on the image. All i want is the greyed out overlay but i dont want it to be interactive. So if you were to click on it, you would click on the element behind it. So lets say I have a paragraph and in that paragraph i have a link and covering the paragraph is a overlay at 50% opacity, if i were to hover over the link, the link would react asif the overlay was not there.
I hope I have explained this well enough
AFAIK there is no easy way to do this and the only alternative would be to get the mouse coordinates and relay them somehow :/ is ther anyway what I want is possible?
Thanks
This can be done with pointer-events: none in certain browsers, but unfortunately not any version of IE.
It is not possible to have an overlay be transparent in the sense you want it to be. What you could try to do is the opposite; put the 'overlay' layer behind the rest of your page and then change the opacity of your entire page to 50%. Visually this will not make any difference, but it will remove the bubbly effect of JS clicking.
You can take an element out of the document flow with CSS but when that happens the element still receives click events as long as it is visible.
You could probably attach a click event to the overlay and then use the mouse coordinates with document.elementFromPoint or by manually looping through all the elements you want to be interactive and checking their coordinates on the page. The problem with this approach is that NoScript or a number of other products might detect this as ClickJacking, which it essentially is even though you are using it for a benign purpose.
I don't see why this isn't possible. opacity is about 5 css properties for cross-browser. I am not sure what exactly you mean by an overlay (same thing as a layer or z-index?) or are you talking about the possibility of using a css
for all p tags, then it's p:hover in css, but for a specific p tag, then you use an #id with :hover pseudo-class like this:
#myptag:hover {
background-color: #f3c9d5;
background-image:url(/images/mybgimg.jpg);
color:blue;
cursor:pointer;
}
for opacity, use a number in windows.index from 0 to 100:
//this function modifies the opacity of an element at a
//specific id like el1 or el2 using imageNumber as the index.
//you also specify an opacityInteger, which is an non-negative
//integer number in the range 0..100
//works on chrome, safari, ie, and firefox, all the major browsers.
function processimage(imageNumber, opacityInteger) {
var opacityFloat=opacityInteger/100.0;
//set image style, if we can - I hear it's readonly...
//filter:alpha(opacity=100);-moz-opacity:1.0;opacity:1.0
document.getElementById("el"+imageNumber).style.filter="alpha(opacity="+opacityInteger+")";
document.getElementById("el"+imageNumber).style.mozOpacity=opacityFloat.toString();
document.getElementById("el"+imageNumber).style.opacity=opacityFloat.toString();
}
well, I just realized this is only marginally helpful. while it may get your toward your goal, you may still have to set a css z-index:1; on a layerto get an actual overlay. what I just gave you was an UNDERLAY or simply setting a given p tag's color or background image to another thing. I don't know if that's desirable to you or not. I have found overlays to be extremely difficult to manage, because the page layout engine treats all the layers as if they were the same layer tags-flow-wise and you have to use absolute positioning to force them to stick in a position you want them in. plus it messes up your main page using layers.