Object that follows mouse


(Jonathan Langberg) #1

So I made this ridiculous game (spacecreamcone.com) completely through Hype for fun. In the game, you have to grab onto the cone (static element) and move it around to make sure the “space cream” (dynamic element) doesn’t drop below the screen line and fall for eternity.

I was thinking it would be better if you could move your mouse around and have the cone follow the mouse without having to click and hold. I know there are ways to replace the mouse cursor with an image, but I’m not sure if it’s possible to apply the physics attributes to the mouse, which is necessary for gameplay.

Any ideas for some custom JS that would achieve this while retaining the “static” attribute?

By the way, please don’t try to make sense out of the physics or premise of the game, it follows no sound logic.


Mouse controls drop shadow direction?
(Mark Hunte) #2

Have a look at this


#3

I took a slightly different approach than Mark using jQuery & CSS: FollowMe.hype.zip (14.1 KB)
Example here. “MouseOver” the graphic to have it follow. Click to disengage.

Below is the core code. The variables: “liveArea, graphicFollow_X, graphicFollow_Y” are created in another function called by the “On Scene Load” handler:

function followMe(hypeDocument, element, event) {
    $(document).bind('mousemove', function(e){
    	var xAdjust = ((window.innerWidth-liveArea)/2) // establish where the "0" left pixel position is

    $('#followerGraphic').css({
       left:  e.pageX - (xAdjust + graphicFollow_X), // lock the graphic to the horizontal mouse movements
       top:   e.pageY - graphicFollow_Y // lock the graphic to the vertical mouse movements
    });
   });
}

@jon4896
You can replace the circle with any graphic you wish, just use the innerHTML of the circle to reference another source (and remove the styling for the circle of course).


(Mark Hunte) #4

You may also want to look at this thread which has a few methods that keep an object in play.


(Jonathan Langberg) #7

Actually, all the ones (except for the method through the link which MarkHunte provided) don’t work in the context of the game. For some reason, the image moves with the mouse, but the invisible “static” space from where the image used to be stays in place. That was not a problem with the method Mark provided as I mentioned, but the problem with that one is if any other elements appear on the page, the image disappears when scrolling over any element.


(Mark Hunte) #8

The problem is it will be hard for use to help you let alone visualise without an example project. :smile:


(Jonathan Langberg) #9

Valid point!

Mark’s method: https://www.dropbox.com/sh/pcyhmlbvdox4tp9/AACShpt-U_51zqhWZDuaUvbza?dl=0

Problem: Other elements seem to affect the visibility of the cone.

Jim’s method: https://www.dropbox.com/sh/ukoarig2ye9j064/AABDbPYCkEvixZ2eDR1qToQYa?dl=0

Problem: the ‘static’ physics attribute doesn’t seem to move with the object. You can see the “space cream” just bounces in the center even when you move the cone.


(Frans Hanekom) #10

I have a question regarding this topic. I have two images stacked on top of each other. The idea is to reveal the image below by masking the top image. I’ve managed to control the mask by clicking and dragging the mouse, but what I actually want is to have the mask move when I mouse over. Essentially the mask should respond by following my cursor. How would I link this action to my cursor?

Here is what I’ve manage to do up to this point: http://narrativemedia.co.za/test/pointer_follow/pointer_follow.html

Here is my project file: pointer_follow.hype.zip (387.0 KB)

Thank you in advance!


(MMuser) #11

The next version of Hype should come with a drag and drop Behaviors Library…


(Mark Hunte) #12

A rough idea…

pointer_follow.hype 2.zip (408.1 KB)


#13

Just an addition to @MarkHunte 's example to add a mouseover action with the same code (with some additions)

A few changes should be made in my opinion. Your animations on your timeline should be changed to “linear” instead of “easeinout”.

The code below is to be run on mouseover of the element and that element (the ellipse) should be placed on top of the stacking order.

var sceneWidth = parseInt(element.parentElement.parentElement.style.width);

var pointA = (window.innerWidth - sceneWidth) / 2 // left hand side of document

document.addEventListener('mousemove', dragTimeline);
   
// adding a click listener to release the element (cancel the mousemove listener)
document.addEventListener('click', function(){
	document.removeEventListener('mousemove', dragTimeline);
})
	
function dragTimeline(e){

	var movement = e.pageX - pointA;

	var pointer = hypeDocument.getElementById('pointer')
	hypeDocument.goToTimeInTimelineNamed(movement * 5.7 / 1000, 'Main Timeline')

}

pointer_follow-vDBear.hype.zip (285.3 KB)


(Frans Hanekom) #14

Great! That is fantastic, works perfectly now.


#15

You guys are amazing.


(elcalibano) #16

With special thanks to @DBear and @TYancy, Here is a combination of two techniques, the parallax pointer follow. parallax_follow.hype.zip (14.6 KB)

It would be cool to build on this technique to create other effects where the mouseover is able to control a timeline rather than just trigger a timeline to play. Maybe an object that On Enter Viewport drags a timeline vertically so that an animation plays as a page is scrolled, following the position of the “follow” element.


(Kalle) #18

This is a wonderful small script for use as a tooltip script :smile: