Search the Community

Showing results for tags 'rotate'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 56 results

  1. Hi, I'm creating a game that player can walk over terrains with lots of slopes. How can I make my player rotate accordingly to the angle of the slope? This is how it's currently working: And this is how is must work (I've changed the angle manually): I'm using Box2D plugin to generate the terrain accordingly to an image. That's the reason of all these bodies. Thanks!!
  2. I am trying to make a gate that opens when you click on it, and rotate it 90 degrees. I have accomplished this much, but how do I make it go back to it's original position once I click on it again? For instance: *clicks on gate, gate opens, 90 degrees.* *clicks on gate again, gate closes, -90 degrees from the 90 degrees that it went on previous click* Any help would be appreciated! html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Simple Canvas Game</title> <style> html { background: black } canvas { margin: auto; } </style> </head> <body> <script src="phaser.js"></script> <script src="game.js"></script> </body> </html> game.js var game = new Phaser.Game(550, 540, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.crossOrigin = 'anonymous'; game.load.image('gateopen', 'fenceleft.png'); } var sprite function clickSprite() { console.log("clickSprite"); sprite.angle += 90; } function clickGame() { console.log("clickGame"); } function create() { sprite = game.add.sprite(100, 100, 'gateopen'); sprite.anchor = {x: 1, y: 1} game.inputEnabled = true; sprite.inputEnabled = true; sprite.events.onInputDown.add(clickSprite) game.input.onDown.add(clickGame); } function update() { } function render() { game.debug.bodyInfo(sprite, 32, 32); game.debug.body(sprite); }
  3. Need help with rotation

    I'm new to phaser and doing a course. I'm a noob so dont make fun of me too much. anyways, i need to rotate this image of a cupcake when clicking it counter clockwise 10 degrees. how would i do this? here is my code right now. import 'phaser' var game = new Phaser.Game(500, 300, Phaser.AUTO, 'game', { preload: preload, create: create }) function preload() { game.load.image('cupcake', '/api/asset/png/!vault/phaserData.cupcake') } // Declare a global variable which we can access in any function in the file var cupcake function create() { cupcake = game.add.sprite(80, 120, 'cupcake') // The default sprite anchor point is at the // top-left (anchor.x=0, anchor.y=0) of the image // We change the anchor point to be the center of the image // so that scaling doesn't look weird // TODO: Try other anchor points... cupcake.anchor.x = 0.5 cupcake.anchor.y = 0.5 // By default, clicking on a sprite will have no effect. // We have to enable this feature as follows: cupcake.inputEnabled = true // sprite has different events. More http://phaser.io/docs/2.4.7/Phaser.Events.html#members // we pass a function which is executed when trigger event occurs cupcake.events.onInputDown.add(clickCupcake) // event triggers when we click anywhere on the game screen game.input.onDown.add(clickGame) } function clickCupcake(){ cupcake.scale.x += 0.1 cupcake.scale.y += 0.1 } this currently makes it grow everytime it is clicked but how would i change it to rotate it instead 10 degrees counter clockwise? thanks
  4. I have a cube with a simple texture...how can the textures in the faces have the same rotation? For example, the front face is rendered ok(lines are vertical), but the sides are rotated(lines are horizontal), I want them all with the lines vertical, like the original texture. http://www.babylonjs-playground.com/#LS6QNX Thanks!
  5. Hi, On Firefox the camera stops rotating when your pointer leaves the canvas: http://playground.babylonjs.com/ Which doesn't happen on Edge, IE, Chrome or Opera
  6. Multi Touch Rotate?

    Hi there, I am new here, and am just digging into Phaser. I was wondering, if anybody succeeded in adding rotation with two finger touch gestures into their games? Any help appreciated :-) Thanks, Jamirokwai
  7. Rotate sprite axis Y

    Hello guys, I am using the sprite for a shot from a gun effect. How I can rotate Y axis of a sprite? I need somthing like on screenshot. My sprite: It screen I did in the photoshop to give an opportunity to understand what I need
  8. In this example I set a parent to the ground and then rotate it. I would expect that the absolute position of the ground would change but it doesn't... The weirder thing is that getAbsolutePosition returns always the same vector - the vector it returned first time I called it. For instance in this example the absolute position does change according to the rotation but after I get an absolute position for the first time it doesn't change. Am I missing something?
  9. Hello, I have searched a solution for a problem for long time and didn't found, if someone have some ideas I am taking all x) did someone know if it's possible to rotate a group of bodies around an anchor point, I set some bodies for invisble walls and my objective is to turn them around by 90° around an anchor point, I know It must be not very comprehensive so I set up an Image to explain myself. In the screen, I have 2 bodies and I want them to turn around the red dot what must be my anchor point, I know it's impossible in arcade so I tried in P2 physics and impossible to found any solution :/ Thanks for reading, feel free to leave a feedback
  10. Rotated Text collision

    Hi everyone! I have several Pixi.Text objects floating in my Pixi container. var style = { font:"22px Verdana", fill:getRandomColor() }; var text = new PIXI.Text("My text", style); text.anchor.set(0.5, 0.5); text.dx = 0.1; text.dy = 0.1; Each Text object is rotating from -90 degrees to + 90 degrees. When collision happens with Text object and container, Text acts like a ping-pong ball changing its direction. Currently I'm using this code to check if text object is < or > of my pixi container width: if(text.x < 0 || text.x > $("#pixi-container").width()) text.dx = -text.dx; if(text.y < 0 || text.y > $("#pixi-container").height()) text.dy = -text.dy; text.x += text.dx; text.y += text.dy; Collision happens when a center of text object reaches container border. I need collision detection when ends of text object touches the container border.
  11. Hi everyone! I'm still learning and I think I got in way over my head. I'm trying to have a turret that will fire from multiple guns while facing the cursor. This means that the bullet reset-point keeps changing, but since I'm pivoting the sprite group, the coordinates are always staying the same! What do I do to get coordinates that update on every frame, which I can then use as bullet spawning point? Edit: Link removed
  12. I have an ArcCamera with a root object as it's target. I'm going for a 3rd person or "over the shoulder camera". I want the root to rotate on the y axis when the ArcCamera moves on the alpha axis. I'm currently doing something like: It seems like the alpha is at a lower magnitude than what the rotation vector expects. I can rotate the camera like 3 times around the root before it rotates completely
  13. This might be due to a lack of general understanding - however I would like to know if there is a way (within bablyonjs) to convert a rotation (e.g. rotation.x = a, rotation.y = b, rotation.z = c) to a quaternion (axis of rotation, and an angle for rotation around that axis; e.g. x,y,z,w). According to the babylonjs docs; they seem to be exclusive of each other; e.g. if you set the AbstractMesh.rotate property (quaternion) then the .rotation property is automatically set to the Zero vector & vice versa. Basic rotation around each of the three axes (e.g. .rotation) is easier for most people (e.g. users of my code) to understand (compared to quaternions) but some other software that I'm trying to integrate with works better with quaternions. Rotation matrix seems to have the same problem (e.g. setting the .rotation property doesn't affect it). I converted some C++ code from cocos2dx into JS to convert a rotation matrix to a quaternion: http://www.babylonjs-playground.com/#1H0QGF#2 However this also doesn't give me a the desired result (because BJS is returning an identity matrix I think). Any Thoughts?
  14. rotate sprite along z-axis

    Is there any way to rotate sprite (concretely coin) along z-axis? It is 3d efect but maybe achievable in canvas and phaser by setting scale or other properties. Ultimate efect I want to achieve can be done by such spritesheet:
  15. Hi guys, i've bring this example with Pixijs and i've done a test. I put the canvas inside a div (#content), this div has transform: perspective(900px) and rotate(20deg). The hit area is not ok, 'cause has the old coordinates without calculate perspective. (see attachment) So, how can i get the new coords to pass to hitarea ? Thanks
  16. Hi, i have just started to study three.js and i am having some trouble to write a function that takes as arguments an object position (Vector3) and a time in milliseconds, and gradually rotate the camera to face it in that time. Substantially a lerp version of the builtin lookAt method. First i've tried using tweenjs to get smooth rotate transition. For the start and end parameters i've created a dummy object and set its position, rotation and quaternion the same as the camera, then i have use the lookAt function on it to face towards the object and i've stored its quaternion in a new variable "targetQuaternion". Then i have used this variable as the target parameter in the TWEEN.Tween method to update camera.quaternion. I've tried before with quaternions to avoid gymbal lock and then with rotation, but none works fine. function rotateCameraToObject(object3D, time) { var cameraPosition = camera.position.clone(); // camera original position var cameraRotation = camera.rotation.clone(); // camera original rotation var cameraQuaternion = camera.quaternion.clone(); // camera original quaternion var dummyObject = new THREE.Object3D(); // dummy object // set dummyObject's position, rotation and quaternion the same as the camera dummyObject.position.set(cameraPosition.x, cameraPosition.y, cameraPosition.z); dummyObject.rotation.set(cameraRotation.x, cameraRotation.y, cameraRotation.z); dummyObject.quaternion.set(cameraQuaternion.x, cameraQuaternion.y, cameraQuaternion.z); // lookAt object3D dummyObject.lookAt(object3D); // store its quaternion in a variable var targetQuaternion = dummyObject.quaternion.clone(); // tween start object var tweenStart = { x: cameraQuaternion.x, y: cameraQuaternion.y, z: cameraQuaternion.z, w: cameraQuaternion.w }; //tween target object var tweenTarget = { x: targetQuaternion.x, y: targetQuaternion.y, z: targetQuaternion.z, w: targetQuaternion.w }; // tween stuff var tween = new TWEEN.Tween(tweenStart).to(tweenTarget, time); tween.onUpdate(function() { camera.quaternion.x = tweenStart.x; camera.quaternion.y = tweenStart.y; camera.quaternion.z = tweenStart.z; camera.quaternion.w = tweenStart.w; }); tween.start();}So this does not work. I've also tried another approach, computing the angle between camera vector and object vector and use that angle as target rotation: function rotateCameraToObject(object3D, time) { // camera original position var cameraPosition = camera.position.clone(); // object3D position var objectPosition = object3D.position.clone(); // direction vector from camera towards object3D var direction = objectPosition.sub(cameraPosition); // compute Euler angle var angle = new THREE.Euler(); angle.setFromVector3(direction); /* * tween stuff */ var start = { x: camera.rotation.clone().x, y: camera.rotation.clone().y, z: camera.rotation.clone().z, } var end = { x: angle._x, y: angle._y, z: angle._z, } var tween = new TWEEN.Tween(start).to(end, time); tween.onUpdate(function() { camera.rotation.y = start.x; camera.rotation.y = start.y; camera.rotation.y = start.z; }); tween.start(); }This doesn't work neither, eventually camera rotate towards the object but the rotation is not right. Any help? What is the correct way to have a lerp rotate function for the camera? Thanks in advance!
  17. I have searched these forums high and low. And i see alot of people ask about rotating a mesh around a set pivot point. They seem to have success, but i don't. I think the pivots were messed in the file i got, but regardless, in Babylon i want to set them. When i set: BABYLON.Matrix.TranslationToRef(middle.x, middle.y, middle.z, currentMesh.getPivotMatrix());It moves the mesh on me. I haven't even rotated it yet, and the mesh changes its position. If i move the mesh back to its original position after this, the pivot is not correct. Heres my playground attempt: http://www.babylonjs-playground.com/#H7V1D Could someone please tell me what i am doing wrong (I am really bad with Matrix Everything ) Thanks,
  18. Might be a bug or it could my expectations (again). However the problem could be at the root of people having difficulties placing pivots. If you rotate a parent them translate its child using LOCAL axes the child moves and positions as you would expect. However if you rotate a parent then translate its child using WORLD or use position the child moves again in the direction of LOCAL axes but distances depend on the rotation of the parent. The PG http://www.babylonjs-playground.com/#1J7LGZ shows the effect. The cylinders mark the positions of the child mesh (the pilot) as it and the parent (sphere) move. The red cylinder marks the expected final position following the final move of -2 in the direction of the world x axis. The pilot meshes show the actual positions. Commenting out the pilot and sphere moves and uncommenting them in turn will show the sequence.
  19. rotating (.. once more)

    Hi, To describe my questions I would like to offer this pics What I try to do (simplified): steering a cube indirect with html sliders (as per touch), whereby I have to interpolate the linear scale for left <-> right and up <-> down into a babylon 3D rotation solution. - The sliders are "fixed" .. If I reaches the 360 the box has turn around 360 (1 complete rotation) - If both sliders are moved in same time I want the box to spin in z as well .. if right und up the box proceed in z my questions are: 1) How to use Babylon.Tools.ToRadians correct? I not are able to compute from degree to rad If doing just var angel = Babylon.Tools.ToRadians(710); or mesh.rotation.y = Babylon.Tools.ToRadians(710); this has no effect on my stage. 2) What is best data stucture to solve? Should the normal quaternions structure do this job for this behavior? 3) How to got a fast smooth rotation? The can use the slider per touch and as per click Doing so the cube should rotate in place according to the sliders speed but needs to be able to "move" to the final rotation position if the user clicked on its own .. there should be no "the cube jumps from 0 to 170 degree" (I was thinking about the actionmanager .. ?) As tried with this mesh.rotate(new BABYLON.Vector3(0, 1, 0), angle_inDegree); I only got the new added rotation angle not the interpolated delta between old and new rotation position. I would be thankful for some solutions and answers. With best regards, Stefan
  20. The main reason for the playground is to produce an example for the guide on BJS that I am writing to show how translate, rotate, parent and setPivot can be used. After various struggles due to mistakes and lack of knowledge I have come up with this http://www.babylonjs-playground.com/#102TBD#14 where you steer(?) the car (which has a set forward speed) with keys A and D Issues are : The response to the keys only happens if after clicking on run the canvas is clicked on immediately afterwards ( and sometimes you have to do this again before it works) While a key is pressed down it interferes with the rendering (too much going on?) If you think too much is going on then have a look back at earlier versions #10 for example. It would be nice to have solutions to these problems but if not then as I can show the parts of the code I wanted to without the key control I will probably just go for a predetermined path for the car to follow.
  21. I used to use skybox.rotate(BABYLON.Axis.X, 1.0, BABYLON.Space.PIVOT) to rotate skybox, but now in 2.5-alpha it no longer works, BABYLON.Space is missing PIVOT and rotation doesn't work on mesh that is set infiniteDistance. I don't want to resort to moving the skybox with the camera via code, is there a new way to approach this? Thanks!
  22. I'd like to manually rotate my ArcRotateCamera around the target by code, taking into account the radius of the camera. It should imitate how it works with user control when camera.attachControl(canvas, true). e.g. something like camera.setRotation(Math.PI, 0, 0) - which doesn't exist. How do I do that?
  23. Mesh not rotating

    Hey everyone, I'm currently facing the problem, that whenever I try to rotate a Mesh using the .rotation property, it won't rotate at all. It only works via the rotate() method. Example: m.rotate(BABYLON.Axis.X, Math.PI/4, BABYLON.Space.WORLD); //works m.rotation.x = Math.PI/4; //won't work m.rotation = new BABYLON.Vector3(Math.PI/4, 0, 0); //won't work The code gets executed from an event handler. Changing scale and position works no problem btw. I also checked several .babylon models, which all had the same problem. I feel like I'm missing something big, since this is such a basic feature. Any Help is much appreciated!
  24. Rotate Mesh to given Point

    http://babylonjs-playground.com/#RC9CZ Hello, I'm currently developing a small game and need to rotate a mesh to a point. I want to set the rotation of a mesh to face a specific point in the "3D-Room". I hope anyone can get this cylinder in the playground to face to (0|0|0). Thanks a lot, Josh