I’ve built a simple game where you have to click on moving targets to score points. I have a custom cursor that looks like a crosshair (like a gun sight). The game is a fixed size (980x600px)
When I preview in a browser it works great - as long as the browser window is the same size as the hype doc, ie 980x600px. But when the browser window is bigger than that, with the game floating in the middle of the window, the actual cursor and the crosshair no longer match up. It seems to be measuring the cursor position from the top left corner of the browser window but positioning the crosshair relative to the top left corner of the game. This is the javascript I’m using for the custom cursor:
function matchCursor(hypeDocument, element, event) {
var cursorAni = document.getElementById('CROSSHAIR_start');
document.onmousemove = function (e) {
var x = e.clientX,
y = e.clientY;
cursorAni.style.top = (y - 60) + 'px';
cursorAni.style.left = (x - 60) + 'px';
};
}
What I’m trying to end up with is the cursor becoming a crosshair when it’s over the game and then returning to being just a normal cursor on the rest of the webpage that it’s being displayed on.
You could just place something like this in your head.
<style>
.HYPE_element, .HYPE_scene{
cursor: url(http://bringerp.free.fr/Files/RotMG/cursor.gif), auto !important;
}
</style>
This acts on all HYPE_element class and HYPE_scene. Which would be about every thing unless you have changed the class of a HYPE_element. If you do you would need to include them.
I used HYPE_element here becouse in (hype 2.5 at least) element being animated by a timeline do not seem to pick up the instructions. and act like they are outside of the scene.
The rest of the page outside of the scene will have a normal cursor.
I am on hype 2.5v at the minute so cannot test that further.
You can put your own image in your resources and point to it like so:
cursor: url(${resourcesFolderName}/cursor.gif), auto !important;
I did see this before, but I currently have it setup so the cursor is actually an element that changes/animates on it’s own timeline depending on where the cursor is:
It changes colour to show you’re on target.
When you click to fire it animates a red cross for a miss and “10 points” for a hit.
I did it this way so the hit/miss animation is right there with the cursor. I suppose I could simplify it so the cursor is a simple static image (using the code you suggested), forget the “miss” animation and place the “hit” animation over the score instead of with the cursor. That only leaves showing when you’re on target in some way…