Rotating an object 45 degrees on button click

Hey, I have run into a few complications with the game project I am working on and I am looking at a new possible solution and I was wondering if somebody might be able to tell me if my new code will work.

I want to change my rotation from following the mouse to simply rotate 45 degress on the z axis when I press the right arrow key, and 45 degrees counter clockwise on the left arrow key press.

This way I can set it so that if my main character’s zrotation is set to 45 degrees the bolt will instead move at -2,2 for top and left and match the bolt movement based on zrotation.

so here is my code so far, the movement is currently set to the arrow keys but movement would instead be set to w,a,s,d keys to free up right and left arrow key for rotation

var input1 = event.which || event.keyCode;

if ((input1 == "37") && (window.setLoopLeft == false) && (window.gameOver == false)) { // LEFT ARROW
	window.setLoopLeft = true;
	window.setLoopRight = false;
	window.setLoopUp = false;
	window.setLoopDown = false;
	window.intervalLeft = setInterval(moveLeft, window.characterSpeed);
} else if ((input1 == "39") && (window.setLoopRight == false) && (window.gameOver == false)) { // RIGHT ARROW
	window.setLoopRight = true;
	window.setLoopLeft = false;
	window.setLoopUp = false;
	window.setLoopDown = false;
	window.intervalRight = setInterval(moveRight, window.characterSpeed);
} else if ((input1 == "38") && (window.setLoopUp == false) && (window.gameOver == false)) { // UP ARROW
	window.setLoopUp = true;
	window.setLoopRight = false;
	window.setLoopLeft = false;
	window.setLoopDown = false;
	window.intervalUp = setInterval(moveUp, window.characterSpeed);
} else if ((input1 == "40") && (window.setLoopDown == false) && (window.gameOver == false)) { // DOWN ARROW
	window.setLoopDown = true;
	window.setLoopRight = false;
	window.setLoopUp = false;
	window.setLoopLeft = false;
	window.intervalDown = setInterval(moveDown, window.characterSpeed);
} 

What I want to add in is this

else if (input == 39) {
hypeDocument.setElementProperty(box, ‘rotateZ’ 45)

}

WIll this rotate the object 45 degrees?

var input1 = event.which || event.keyCode;

if (input1 == "37") 

hypeDocument.setElementProperty(element, 'rotateZ', -45, 1.0, 'easeinout')

else if (input1 == "39") 

hypeDocument.setElementProperty(element, 'rotateZ', 45, 1.0, 'easeinout')

Ah ok, that is awesome. So just to be clear about the line, what is 1.0 in there for?

Also,if it is not too much trouble to add on to this question, can I use a hypeDocument.getElementById(‘element’).style to call of the current rotation? or is there some documentation called getElement Property?

I have a function that moves a bolt in a specifies direction, but at the moment it only moves up, I wanted to add in a few else if’s so that if the rotation meets any of the 8 points (0, 45, 90, 135, 180, 225, 270, 315,360) or their negative counter parts that it will fire in the specifiec direction. Here is an example below of a segment of my code should it not detect collision.

else if ( hypeDocument.getElementById(‘elment’).style. == “0” ) {
boltTop = boltTop - 2;
hypeDocument.getElementById(“laserBolt”).style.top = boltTop + “px”;
}

This is what I want it to look like but not sure if the getElementById is what I want to use here to find the current Zrotation.

That’s the amount of time (in seconds) it takes for the action to complete...

hypeDocument.setElementProperty(element, propertyName, value, optionalDuration, optionalTimingFunctionName)

You can click on the "More Info" link if you scroll to the bottom of each function in the script window.

Reference: Tumult Hype Documentation

I just tested the code and I realize that I think I made a minor mistake in my explanation. This code rotates the object to 45 and to -45. I meant to have it rotate by 45 degrees each click, so if it was already at 45 degrees it would rotate to 90, then 135.

You want to create 2 variables one to store the initial state and another to store the amount of rotation.
Something like:

rotation = 0;

The above would be set in another function perhaps on scene load and then:

var value;

value = rotation + 45;
hypeDocument.setElementProperty(element, "rotateZ", value);
rotation = value;

on a mouse click or whatever is doing the rotation. Then you can have another function to do the opposite (-45) so whichever you run will increase rotation by 45 or -45

1 Like

Alright, I will give that a shot and see if I can get it to work.

clicked reply before finished :slight_smile: it’s now been edited

Also, realised that you are using keys so the above code can be put in the conditional statements

if (key that is pressed) {
    run.the code with plus or minus 45;
    set rotation to value
}

and make sure rotation is global. i.e do not place var in front of it.

1 Like

I was going to create a separate function, and then in my else if statement fit in a section for when the button is pressed it would call the function.

Sadly it is breaking my movement code.

var input1 = event.which || event.keyCode;
var box = hypeDocument.getElementbyId(‘starLord’);

if ((input1 == "65") && (window.setLoopLeft == false) && (window.gameOver == false)) { // LEFT ARROW
	window.setLoopLeft = true;
	window.setLoopRight = false;
	window.setLoopUp = false;
	window.setLoopDown = false;
	window.intervalLeft = setInterval(moveLeft, window.characterSpeed);
} else if ((input1 == "68") && (window.setLoopRight == false) && (window.gameOver == false)) { // RIGHT ARROW
	window.setLoopRight = true;
	window.setLoopLeft = false;
	window.setLoopUp = false;
	window.setLoopDown = false;
	window.intervalRight = setInterval(moveRight, window.characterSpeed);
} else if ((input1 == "87") && (window.setLoopUp == false) && (window.gameOver == false)) { // UP ARROW
	window.setLoopUp = true;
	window.setLoopRight = false;
	window.setLoopLeft = false;
	window.setLoopDown = false;
	window.intervalUp = setInterval(moveUp, window.characterSpeed);
} else if ((input1 == "83") && (window.setLoopDown == false) && (window.gameOver == false)) { // DOWN ARROW
	window.setLoopDown = true;
	window.setLoopRight = false;
	window.setLoopUp = false;
	window.setLoopLeft = false;
	window.intervalDown = setInterval(moveDown, window.characterSpeed);
} if (input == "39") {

var value;

value = rotation + 45;
hypeDocument.setElementProperty(element, "rotateZ", value);
rotation = value;

}

my rotation is set in my initialize function that loads when the scene does and as mentioned it is set to 0

I have written it as rotation = 0; var rotation = 0; window.rotation = 0;

and have altered the code to match it and it is just breaking the existing movement code.

Not sure if the rotation = 0; is the problem or not but yeah that is what is happening. I am assuming that I am putting it in wrong or it just isn’t meshing with my existing code.

in your code above you have “input” instead of “input1” not sure if this is causing a problem or not. Also, is “starLord” the object that needs to be rotated. If so, you need to change “element” to “box”.

Here is a quick document to show how I would approach what you are doing. It uses requestAnimationFrame for better performance than setInterval and smoother animations.

This is just a proof of concept. My approach … hopefully it’s straightforward to follow.

gameTurret.zip (15.8 KB)