Search the Community
Showing results for tags 'Rotate'.
-
solved [SOLVED]+ How to rotate object around it's local axis
dbawel posted a topic in Questions & Answers
Hello, How might I rotate the propeller in the following scene: http://qedsoft.com/DEMOS2017/bjs_loader/index8.html I'm obviously not defining the variable for the prop correctly. Below is the full code: Thanks, DB -
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
-
How to rotate an object toward mouse cursor? so far i tried this code, but the object not rotate correctly update:function{ var mousePos = me.input.globalToLocal(me.input.pointer.clientX,me.input.pointer.clientY); var angle = this.angleToPoint(new me.Vector2d(mousePos.x, mousePos.y)); this.renderable.currentTransform.rotate(angle - this.PrevAngle); this.PrevAngle = angle; } Thanks
-
Hi together, can someone explain me the behaviour of the following: Step 1: creation of 4 boxes: let box = new BABYLON.MeshBuilder.CreateBox("0", 1, scene); let box1 = new BABYLON.MeshBuilder.CreateBox("1", 1, scene); let box2 = new BABYLON.MeshBuilder.CreateBox("2", 1, scene); let box3 = new BABYLON.MeshBuilder.CreateBox("3", 1, scene); box1.position = new BABYLON.Vector3(7,0,0); box2.position = new BABYLON.Vector3(8,0,0); box3.position = new BABYLON.Vector3(9,0,0); Step 2: now lets group boxes 1, 2 & 3 and apply rotateAround: box3.setParent(box2); box2.setParent(box1); box1.rotateAround(new BABYLON.Vector3(7,0,0),BABYLON.Axis.Y,Math.PI/2); For me it seems that the grouped boxes are moved to (0,0,0) after the rotation. Or am I getting something wrong? See your self: https://playground.babylonjs.com/indexStable.html#T99QF6#1 --> Also: I want to create two abstract methods (1) Rotate an arbitrary mesh (having children) around it's "Center". (2) Position an arbitrary mesh (having children) sucht that it's top left corner is at some target coordinates. I always encounter problems with getting the current Boundingbox (even if I calculate it recursively by merging the bounding boxes of the children). I almost feel like I am not understanding something entirely. How would you implement such a method? Thanks for helping ;)
-
How is it possible to drag an elf around a point rotate? Can I drag and drop the entire group?
-
Hi there, I have had a good look in the forums for this before asking, but I cannot seem to get my simple HTML canvas to run properly on my iPhoneX. My URL is here: http://lindsay.thefusion.works/ Initially I was trying to build a kaleidoscope (8 triangles making a square) but setting one triangle and then using the _cacheContext.rotate for the other 7 triangles meant that my iPhoneX was struggling to hit 3 frames per second. My old Galaxy S6 phone will render it flawlessly. The iPhone X will get really hot within a minute so it is definitely working overtime to try and keep up with a 3 year old Galaxy phone. This is in both Safari and Chrome on the iPhoneX. I have tried various optimisations and caching tricks but still cannot get the iPhone X to better than 3 frames per second. Does anybody have any hints or ideas on anything I can try to get my kaliedoscope working on iPhones? Thanks in advance, Lindsay.
-
I have done a demo code that creates a gun (blue box) and bullets (red boxes). How can I set the initial position of the bullets depending of the rotation of the gun? Said with other words, if I rotate the gun (left/right arrows) , the bullets keep coming from the top side of the gun (box) instead of rotating accordingly. Code: http://plnkr.co/edit/3evg6J2cGo0nS7QKxiak?p=preview Preview: http://run.plnkr.co/AodG3n4Ykb3osdh2/
-
Hi. I'm new to phaser and to this forum. I have a problem that I would like to ask for some help with. I'm trying to import a level from a JSON file exported from a 3rd party level editor that is not meant to be used with Phaser or any other 3rd party engine. It is just me trying to use the JSON coming from the editor to load the level in Phaser and I have some problem with rotation and scale of the sprites. The level editor rotate the sprites around a center point and scale the sprites from the origin point. In Phaser, I set the position of the anchor point to match the position of the origin point and set the position of the pivot point to match the position of the center point for each sprite and it works for getting the position and the rotation of the sprites but when I scale a sprite in the editor, it does not appear right in Phaser. This is how it looks like in the editor: And this is how it looks like in Phaser after import: Notice the distance between the two sprites. It does not match and I think it is because in the editor the sprite is scaled from the top left corner of the sprite (origin/anchor point) while in phaser it is scaled from the center of the sprite (pivot point). At least If I don't change the position of the pivot point, the scale and position works but then rotation is off because in the editor the sprite is rotated around the center point which is in the middle by default. In any case I can't find a solution to this. I can't get the scale match without messing up the rotation or the rotation without messing up the scale because of the two points. When I check the values, everything seems to match. Position, rotation, scale but it still does not look the same in Phaser. I hope someone did have the same problem with rotating and scaling sprites in Phaser and already figured a solution. What I would like to know specifically, is there any way to rotate a sprite around a middle point without changing the position of the anchor and pivot point or is there any way to scale a sprite from the anchor point instead of the pivot point? Because the problem seems to be in Phaser the sprites are scaled and rotated around the pivot point but in this case I need to scale it and rotate it in two separated points to get the same result as in the level editor. I would appreciate any help. Thank you.
-
Hi there, I want to implement a car which can be dragged and is able to turn around corners while being draged so far I only found a posibility to turn in direction of the pointer (eg mouse) but than the car turns before it is even (pixelperfect)clicked too any sugguesstions or helpfull links? thanks:)
-
Hello, so I'm trying to make it so that the player can 'rotate' the camera around them. For example when they press E and Q the world rotates and things like walls get repositioned and their angle changes. Here is the code I have written: function rotateWorld(angle) { for (var i = 0; i < walls.getAll().length; i++) { var wall = walls.getAll()[i]; wall.angle += angle; var delta_x = wall.x - player.x; var delta_y = wall.y - player.y; var thetaAngle = Math.atan2(delta_y, delta_x) * 180 / Math.PI; wall.x = player.x + lengthdir_x(distance(wall.x, player.x, wall.y, player.y), thetaAngle + angle); wall.y = player.y + lengthdir_y(distance(wall.x, player.x, wall.y, player.y), thetaAngle + angle); } } function lengthdir_x(length, direction) { return Math.cos(direction * Math.PI / 180) * length; } function lengthdir_y(length, direction) { return Math.sin(direction * Math.PI / 180) * length; } function distance(x1, x2, y1, y2) { return Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)); } So far this sort of works but objects lose proper positioning after rotating a bit. It seems like they are not rotating around a perfect circle. Any help would really be appreciated and if there is a way to do this that's easier please let me know. Thanks!
-
Hi all, Hopefully, this is just something quick I'm missing... I have initialized my game with the resolution of 500x800 and SCALE_MODE is set to RESIZE; In portrait orientation, the game is the correct size of 500x800, however, when I rotate the device and would expect the game to now be 800x500 it is actually 500x313. I'm thinking I'm just missing something that I need to manually resize or update or something, but I'm having trouble finding what I need by searching around. Anyone know how to accomplish what I'm expecting? Thanks. -
Hi, my sprite is pointing to the top. But the angle = 0 means the it points to the right. So if i start moving, e.g. with velocityFromAngle the movement direction is default to the right, while the sprite is facing to the top. If i try to turn the sprit 90 degrees to the right, the angle for the movement also changes (the movement direction is then down). so the movement direction and the pointing direction of my sprite are never the same. one way would be to change the sprite image. but i want to be flexible to move it in all 4 directions (90 degrees steps), depending on its random start postion. this has to be possible somehow. please help me in other words now: sprite is ^ and movement direction is > if i change the angle then sprite is > but movement direction is v what i want is the this: Sprite > and movement direction > or Sprite ^ and movement direction ^ or Sprite < and movement direction < or Sprite v and movement direction v best regards Oliver -
I could probably mess with currentTransform from update(), but is there a better way to tween a sprite rotation?
-
Hi all, Currently I try to rotate the game 90 degree to meet the portrait mode for my [landscape] game, I used other's solution to rotate all display object by this.game.scale.setGameSize(, ; and Phaser.World.prototype.displayObjectUpdateTransform = function() { if(!this.game.scale.correct) { this.x = this.game.camera.y + this.game.width; this.y = -this.game.camera.x; this.rotation = Phaser.Math.degToRad(Phaser.Math.wrapAngle(90)); } else { this.x = -this.game.camera.x; this.y = -this.game.camera.y; this.rotation = 0; } PIXI.DisplayObject.prototype.updateTransform.call(this); }; now all display object are rotated, but the pointer are not rotate, so when I want to do something with activePointer like: calculation with the mouse position drag and drop logic the x, y are reversed. So I want to know is there any good solution to switch the x, y of the pointer, thx.
-
Hello, i have a question about rotating an cube driven by the position of the cursor. Have created an playground: http://www.babylonjs-playground.com/#NPOXN#5 The cube rotates by not follow the cursor. When the cursor is left, 0° rotate, cursor right litle more as 90°. The code that i use: document.getElementById("renderCanvas").addEventListener("mousemove", function (event) { //console.log(scene.pointerX); //box.rotation.y = scene.pointerX / 2; box.rotation.y = (scene.pointerX / canvas.width) * 2; // We try to pick an object //var pickResult = scene.pick(scene.pointerX, scene.pointerY); }); I want that the Z Axis follow the cursor 360°. Can anyone give me a right hint ?
-
Hello everyone. I create a sprite and set its pivot to rotate it around the center. Just wonder why not its position updated, as console log wrote its x and y position always at the center, but then it is rotating and moving. create: function { let sprite=game.create.sprite(game.world.centerX, game.world.centerY,"sprite"); sprite.pivot.y=500; }; update: function { sprite.rotation+=0.1; console.log(sprite.x); console.log(sprite.y); } Is it the way I do it improper? Can anyone help me out? Thanks.
-
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!!
-
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); }
-
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
-
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!
-
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
-
I try to rotate a bigger circle which contains a smaller circle. but I want the smaller circle inside the big circle moves independently at the same time when they rotate together to the same direction. How can I do this? For example when I rotate the big one to the right the smaller circle first moves to right a little bit then goes back to its original position in the big circle. When the big circle arrives at the new rotation the smaller circle is also rotated to the new rotation with the same relative position in the big circle. I have set their anchors both to 0.5. This seems easy but first the sprites don't rotate at the same center point. So when I rotate the big circle the smaller circle won't rotate with it. It will only stays at its own position and rotate at its own center point. If I want it to rotate with the big circle I have to manually change its positions. And that is what causes more trouble. The position doesn't follow the rule newX = (small.x - big.x) * Math.cos(rotation) and newY = (small.y - big.y) * Math.sin(rotation). It will rotate to the opposite direction. I don't know what is happening. If I put the two sprites into a container I can't set the container's anchor so I can't rotate them together at their center. -
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
-
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
-
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?
