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 59 results

  1. how to rotate pointer's X Y

    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.
  2. 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 ?
  3. 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.
  4. 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!!
  5. 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); }
  6. 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!
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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.
  12. 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
  13. 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
  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. 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.
  17. 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
  18. 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
  19. 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.
  20. 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!
  21. 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?
  22. 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?
  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