Making an object face the cursor

jquery
gamedev

#1

I am having troubles getting code to work inside hype. I am taking a class that uses Hype 3 for retro game development, and I am currently working on a top down shooter game as an alternative to my original final. I have been using hype for maybe 2 years now, but this is my first time utilizing javascript inside of it. I am wondering how I can take this code an change it to work within hype. The code I was using for facing the cursor is below.

var box=$("#box");
var boxCenter=[box.offset().left+box.width()/2, box.offset().top+box.height()/2];

$(document).mousemove(function(e){

var angle = Math.atan2(e.pageX- boxCenter[0],- (e.pageY- boxCenter[1]) )*(180/Math.PI);	    

box.css({ "-webkit-transform": 'rotate(' + angle + 'deg)'});    
box.css({ '-moz-transform': 'rotate(' + angle + 'deg)'});
box.css({ 'transform': 'rotate(' + angle + 'deg)'});

});

I need to translate this into working condition within hype. It is also jquery, so if there is a pure plain javascript alternative I would love to know


#2

Vanilla Javascript (using Hype’s API also)

// could use hypeDocument.getElementById('blah'). different ways to do it. I chose this way :)
var box = element.querySelector('.box');

box.left = hypeDocument.getElementProperty(box, 'left');
box.width = hypeDocument.getElementProperty(box, 'width');
box.top = hypeDocument.getElementProperty(box, 'top');
box.height = hypeDocument.getElementProperty(box, 'height');
	
var boxCenter = [box.left + box.width/2, box.top + box.height/2]

// here element is the scene (as function is run on scene load) 
//could use document.onmousemove ... again just personal preferenc
element.onmousemove = function(e) { 
	
	var angle = Math.atan2(e.pageX- boxCenter[0],- (e.pageY- boxCenter[1]) )*(180/Math.PI);
		
	box.style.webkitTransform = "rotate(" + angle + "deg)";
	box.style.mozTransform = "rotate(" + angle + "deg)";
	box.style.transform = "rotate(" + angle + "deg)";
		
}

Also, “Position with CSS left/top” needs to be checked in the Document inspector.

EDIT
forgot you could also set an element’s rotateZ with Hype’s API too so you can replace

box.style.webkitTransform = "rotate(" + angle + "deg)";
box.style.mozTransform = "rotate(" + angle + "deg)";
box.style.transform = "rotate(" + angle + "deg)";

with

hypeDocument.setElementProperty(box, 'rotateZ', angle)

(𝕄𝕚𝕔𝕙𝕒𝕖𝕝 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #3

This might help too…


#4

So I implemented the code and got it running however, the box is not moving as desired. The box does not make a full circle. It will move clockwise about 30 maybe 45 degrees, and counter clockwise 5 degrees.

Here is the link to a video I uploaded showing what it is currently doing,


(Mark Hunte) #5

Try using @Photics code.

A few things to note about it.

You need to make sure :

Position with css left/top is on (Document inspector)
Scaling width height is on (Scene inspector)
The follower is inside a group that id is named group


roll.hype.zip (33.6 KB)


 window.onmousemove = function(event) {
 var box = hypeDocument.getElementById('box')
mx = event.pageX; // Mouse X
my = event.pageY; // Mouse Y
gx = parseInt(hypeDocument.getElementById('group').style.left);
gy = parseInt(hypeDocument.getElementById('group').style.top);
lx = hypeDocument.getElementProperty(box, 'left') + (hypeDocument.getElementProperty(box, 'width')/2) + gx;
ly = hypeDocument.getElementProperty(box, 'top') + (hypeDocument.getElementProperty(box, 'height')/2) + gy;
 
 
angle = Math.atan2((my-ly),(mx-lx)) * (180/Math.PI) ; // AHHHH MATH!
hypeDocument.setElementProperty(box, 'rotateZ', angle)
}

#6

As mentioned in the code I used “element” (which is the scene) as the element to listen for the mouse move event. This would make the dimensions of the scene the restrictions of where the mousemove would be detected so if you go off the scene then the detection stops. Change this to “document” or “window” and you should be good.

edit: @MarkHunte the code I used is the same as Photics. except he has 2 objects he wants to rotate that are inside a group. The OP doesn’t need a group or 2 objects so the code you have posted (and photics) would be bloated. :stuck_out_tongue:

I was merely porting his jQuery code into something he could use in Hype. Mistake I made was thinking he understood how to use it. And using element instead of document. I won’t go into the fact he has x and -y around differently and the fact that it’s minus. I try to stick with what he’s posted as I assume that’s the way he wants it :slight_smile: another mistake i guess.

Final Edit:
This is how I think it should be

// could use hypeDocument.getElementById('blah'). different ways to do it. I chose this way :)
var box = element.querySelector('#box');

document.onmousemove = function(e) { 
		
	box.left = hypeDocument.getElementProperty(box, 'left');
	box.width = hypeDocument.getElementProperty(box, 'width');
	box.top = hypeDocument.getElementProperty(box, 'top');
	box.height = hypeDocument.getElementProperty(box, 'height');
	var boxCenter = [box.left + box.width/2, box.top + box.height/2]
			
	var angle = Math.atan2((e.pageY- boxCenter[1]),(e.pageX- boxCenter[0]))*(180/Math.PI);
			
	hypeDocument.setElementProperty(box, 'rotateZ', angle)
			
}

Final Final Edit:
In @Photics’s code he has used global variables. What happens if the OP has already used variables such as ly, ry, mx in his code. These would then override them and break them or if he uses them further on down the road then he would break the movement of the turret.


(Mark Hunte) #7

Hah, granted. Wasn’t saying yours was bad code. ( never is ) Just got reproducing Photics working first.

Thankfully these are only examples of how to go about it that can be adaped. :innocent:

I think the most important thing is with either code.

** You will still need **
Position with css left/top is on (Document inspector)
Scaling width height is on (Scene inspector).


#8

Indeed CSS left/top checked is very important.

Scaling doesn’t need to be on unless the user wants it full screen and no scrolling which is probably more than likely as it’s a game.

You would think but he already got tripped up on attaching the listener to the “element” instead of the document. In his/her defence they did mention this was the first time using Javascript in Hype. Didn’t realise that they may be new at Javascript too. :slight_smile: Maybe my idea of an advanced Hype book/set of tutorials isn’t a bad thing. :slight_smile:


(Mark Hunte) #9

Huh,
I could not get it to work without Scalling. The Mouse would only register to the left of the scene and acts like a Pantograph!.

Clearly I am doing something stupid… :grimacing:


#10

Oh so now it’s your idea! :grinning:

I recall (almost) begging You over a year ago to write such a book - but You said You were too busy to consider it. :sob::beer:

An advanced set of tutorials would be awesome DBear! Especially if task based. There could be “prerequisites” sited for a particular chapter~tutorial (with links) so You didn’t have to waste time & “ink” for certain concepts involved in the task.

So let’s not waste any more time! (and begging is so unseemly).


#11

I know you mentioned it so I won’t take that away from you :slight_smile:

It’s possible that it will be on its way soon. That and also a CMS solely for Hype projects. Like Wordpress but just for Hype docs (well and other things but mainly Hype docs). :smiley:


#12

Thanks for all the help, Yeah I have been working with Javascript in hype in a class for about 4 months now, but the class has pretty much been provided code with little to no explanation of the differences betweens standard for html5 vs hype api. On top of that I have only been working with javascript for a little over a year and I have not done really anything on my own with it in terms of developing games until now so It has been a big reminder to me that I am still very much a beginner.

Thanks a lot for all the help I greatly appreciate it. @DBear , yeah I took your adjusted code and it works better than what I had initially put in but I think my movement code is interfering with it in some way because it still won’t make a full 360 degree turn. Something with my existing code is breaking the code, or I am missing something on the code you translated for me that would prevent the interference. I appreciate the help. I would love to see a hype tutorial series or book, there are next to none available and it would be a great resource for those who are using hype. I’d buy a book on it!

@MarkHunte Yes I ended up testing Photics code and it ended up working, Is there a way to make it so that I can have the mouse closer to the box and keep the rotation working fine?

Last question,Is there a way to make it so I can keep the mouse closer to the box, without having a negative effect on the rotation?


(𝕄𝕚𝕔𝕙𝕒𝕖𝕝 𝔾𝕒𝕣𝕠𝕗𝕒𝕝𝕠) #13

I thought I was good at marketing. :smile:


#14

Oh, haha. If you posted it before I must have over looked it in my scrambling around. I will definitely be checking that out and passing the link on to my teacher.