Search the Community

Showing results for tags 'rotation'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • 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 133 results

  1. When adding a rectangle to a p2 body you have the option to specify a rotation in radians for the shape which it appears is just passed directly on to the p2 shape constructor (hence the need for it to be in radians instead of degrees as are used elsewhere in Phaser). I find that if I use any value other than 0 for a rotation, the shape is properly rotated however drawing of the body via the debug parameter ignores the rotation. Here is a quick codepen illustrating the bug. The character should have a long protrusion coming out the bottom achieved with a rotated rectangle. The physics collision seems to indicate that the rotation has occurred correctly, however the debug shape is not drawn rotated. Notice that he appears to sit a little ways off the ground due to the un-rotated debug visualization of the shape. It seems to me this must be a bug (or maybe a limitation of the debugbody drawing system) but I thought I would post here first for thoughts. I will likely dig in and see if I can find a fix / workaround for this. Phaser P2 DebugBody rotation bug (codepen)
  2. Hey guys, I'm thinking there's a really simple answer to this, but I'm currently blanking on it. Basically, I'm trying to position/rotate a cylinder such that it is perpendicular to a given facet. Here's the PG: It looks like it works for facets on part of the sphere (maybe?), but there's clearly something I'm missing. Thanks in advance!
  3. I'm getting the freecamera values but they are radians and if i continue rotate they increase more than 6.28 or less than -6.28 . So whay i do for conversion actually is: (camera.rotation.y*360)/6.28 So i get the camera values as i want. But i can figure how fix the infinite rotation value thing, maybe there is some function or something i missing to avoid that?
  4. I have a box and a ground with physicsImpostor, how can I keep the rotation of the ground up to date with the rotation of the box. here is the playground If I use "ground.rotation = box.rotation", then the ground rotate but the box do not. If I use "ground.rotation.x = box.rotation.x", then the ground will keep rotating.
  5. angleToPointer on child sprite

    Hi guys, I'm trying to rotate a player's arm (anchored at the shoulder) to the mouse pointer using angleToPointer() method for aiming. I have a player sprite and a frontArm sprite. angleToPointer works as expected until I make the frontArm sprite a child of the player sprite. When I do this, the frontArm sprite will get stuck at certain points and won't rotate any further. I'm a complete newbie to Phaser and game dev so any help would be appreciated. I'll put my code below: create: function() { this.background =, 0, 'background');; this.player =, 500, 'player', 'Fire Marshall Main_00025');; this.player.anchor.setTo(0.5); this.frontArm = this.player.addChild(, -240, 'frontArm')); this.frontArm.anchor.setTo(0.48, 0.30);; //walk animation this.player.animations.add('walkright', Phaser.Animation.generateFrameNames('Fire Marshall Main_', 0, 24,'', 5), 24, true, false); this.player.animations.add('walkleft', Phaser.Animation.generateFrameNames('Fire Marshall Main_', 24, 0,'', 5), 24, true, false); cursors =; }, update: function() { //player walk movement this.player.body.velocity.x = 0; if (cursors.right.isDown) { this.player.body.velocity.x = 150;'walkright'); }else if (cursors.left.isDown){ this.player.body.velocity.x = -150; this.'walkleft'); }else { this.player.animations.stop(); this.player.frame = 25; } this.frontArm.rotation =; }
  6. Freeze Rotation

    Hey Guys, I have an object parented to a modified ArcRotateCamera. The Camera can pan left and right. I want my object to move left and right with the camera but not rotate when the camera rotates around its target. Is there any way to freeze the rotations of a mesh so that it does not rotate with its parent?
  7. Hi, We have a project where there's a need to get absoluteRotation and / or absoluteRotationQuaternion. Is there a need somewhere so a pull request about this is possible ? If so, is it wise to compute it here By adding _absoluteRotation and _absoluteRotationQuaternion private properties and this._worldMatrix.getRotationMatrixToRef(Tmp.Matrix[0]); BABYLON.Quaternion.FromRotationMatrixToRef(Tmp.Matrix[0], this._absoluteRotationQuaternion); if (!this.rotationQuaternion) { this._absoluteRotationQuaternion.toEulerAnglesToRef(this._absoluteRotation); } Or should it be only done in a getAbsoluteRotation method to avoid the overhead of computing it every time computeWorldMatrix is invoked ? (note : what's the usage for this kind of question ? using the forum, GitHub issues or directly submitting a PR on GitHub ?) Thanks a lot and have a nice day !
  8. Animation Question

    Hey Everyone! Still working with my same project looking at the depth perspectives and minor animations, I'm either looking for a page which is better structured than babylons own help page - Find it very unhelpful and vague personally, or some suggestions from everyone on here. I am looking to see if i can create the animation affect to give a sense of depth to the build, the best online example effect of what I mean is here: - You can see as you go across the team, you are able to see the effect i'm trying to describe and aspire to build, as you look for example at Pharrell Williams sat on the stool and the tall guy with glasses behind him, as you go from the leftmost view to rightmost. If anyone can help me with this I would be very appreciative. as I am currently struggling to find a start point, I will attach a playground of my current project to see what I currently have running and if possible could even demo the effect i'm after using it would be great! Please note that the FOV I wish to use is 0.30, but is set to 1 in the example as the texture error boxes are rather big. Playground: Thanks everyone! Mezz
  9. I just want to know how to set it so my camera rotation wont look all the way up and down id like it to look about 10% above and below where my content is, there is a link to the playground at the end. I have tried setting beta/radius/alpha limits, I have tried inertia, I have tried the height map stuff, I have tried everything I can think of or find in the documents.
  10. Hi everyone! I have actually a problem which is quite stupid but I really need help to solve it: I have a sphere (position 0,0,0) on which I want to "put" a mesh. I have a ray coming from the center on the sphere to a point somewhere in space, and want to put the mesh on the sphere surface, oriented to the center of the sphere, as if the sphere was a planet. I don't find anything in order to rotate a mesh from a ray in Babylon, and all the tries I do with a trigonometric approach aren't satisfying… Here is the code doing that: Thanks for your help!
  11. Hi all, is it possible to disable camera movement except rotation, so as to get a streetview-like camera ? I prepare a playground : Here we have a sphere, with a spherical texture mapped on it, camera is placed on its center, and all we want for now it that user can't move, but still can look around. Is their a way to override movement settings, or other tweaks ? Thanks for helping
  12. Is it possible to get the absolute rotation of a child mesh, in the same way it is possible to get the absolute position of a child mesh via mesh.getAbsolutePosition?
  13. So, making a card game. Im trying to spread the cards in the players hand out, essentially along an upside down, elongated U pattern (basically, the reverse of how you would hold playing cards in real life. - But reverse or not, the task is pretty much the same, fanning the cards and rotating, evenly distributing amongst a finite amount of space. - originally I tried solving it via a super janky function. Then I realized: if I draw the shape I am trying to align the objects around, in theory I could get the coordinates of various points of the shape and then essentially assign each card in hand the distributed coordinates. - So I guess I'm wondering, is there an easy way to do this? I've finally set up a playground to replicate the basic structure of my scene. Sidenote: I am trying to replicate as close as I can to what I actually have, because what I actually have is less than ideal (im having various issues with text rendering, positioning, and other things, that I think may be a scene structure type of issue. (So if you see something stupid that I am doing or that could be improved I'm all ears.) - Anyways here's scene 1, with what I am currently doing with the hand (the rotation is causing the middle cards to appear higher than the cards on the ends, which is the opposite of what I want). Instead I would rather align the bottoms of the cards to the bottom of the half ovalish shape seen here (the player hand shape object) But I have been struggling to figure out how to do so. Is there a technique to do this easily? Or anyone have any suggestions? Any help much appreciated as always. P.S. I read which sounded like it might lead me to what I am trying to do, but it's still a little advanced for me, and ultimately, the starting point would be knowing how to split up the path of the oval shape into positions, which I am failing to figure out. (and IDK if there is a built in, easier way to align the planes to the bottom of the oval).
  14. Hello, This may be a simple answer. A cube is rotating around the x axis with .addRotation(). GOAL: detect when cube is flat on top, with z axis, to stop animation. So what are best ways to measure Quaternion rotation progress? And then stop the animation? Thanks much,
  15. Image Angle/Rotation Wrong????

    Hello fellow HTML5 Game Devs. I have an interesting problem I am testing out some controls and different schemes for my game. I have an image of a fighter. It uses the arcade physics mode. When I press the UP arrow, it goes right.... Code: var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); function preload() { game.load.image('background','../assets/images/deep-space.jpg'); game.load.image('fighter','../assets/images/Human-Fighter.png'); } var player; function create() { game.add.tileSprite(0, 0, 1920, 1920, 'background');, 0, 1920, 1920); game.physics.startSystem(Phaser.Physics.ARCADE); player = game.add.sprite(,, 'fighter'); player.anchor.set(0.5, 0.5); game.physics.arcade.enable(player); // Notice that the sprite doesn't have any momentum at all, // it's all just set by the camera follow type. // 0.1 is the amount of linear interpolation to use. // The smaller the value, the smooth the camera (and the longer it takes to catch up), Phaser.Camera.FOLLOW_LOCKON, 0.1, 0.1); } function update() { player.body.velocity.x = 0; player.body.velocity.y = 0; player.body.angularVelocity = 0; if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) { player.body.angularVelocity = -200; } else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) { player.body.angularVelocity = 200; } if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) { game.physics.arcade.velocityFromAngle(player.angle, 300, player.body.velocity); } } function render() { } If you can help, it would be greatly appreciated! Thanks!
  16. Hi @all, I have a question about the rotation again. This time its also about the lock joint. I had a similar question in the past without lock joint here: I want the same as last time, but now with lock joint. I prepared a playground: [In this PG you can rotate the platform with key v, b, and n. The player can rotate with the mouse (drag&drop)] Without the lock joint the behavior is like I want, but for many reasons I need this behavior also with the lock joint. The problem is, the player rotates in a strange circle on the ground. I mean the player changes his position on rotation too. Here is a picture: How can I rotate it right?
  17. Hi , I am trying to solve small geometry problem but somehow cant solve it in 3d I generated boxes in circle, but cant rotate them so that they look forward centre along circle line
  18. Hello guys I'm making a platformer game, I struggled with making collision between the player and objects created in tiled but after that I got it working with a function I created, however, when I make the rectangle rotated in tiled, in the game it comes out away from its position, take a look: this is on tiled in the game it comes out like this here is my code, createCollisionObjects is where the magic happens var game = new Phaser.Game(70 * 10, 70 * 7, Phaser.AUTO, 'game', { preload: preload, create: create, update: update, render: render }); function preload() { // tilemap game.load.tilemap( 'map', 'assets/tilemaps/maps/lvl-1.json', null, Phaser.Tilemap.TILED_JSON ); // tilemap images game.load.image('new', 'assets/tilemaps/tiles/new.png'); game.load.image('sheet', 'assets/tilemaps/tiles/sheet.png'); game.load.image('s9af', 'assets/tilemaps/tiles/s9af.png'); // player spritesheet game.load.atlasJSONHash( 'player', 'assets/spritesheets/player_walk.png', 'assets/spritesheets/player_walk.json' ); } /* * GLOBAL VARIABLES */ var map; var player; var playerSpeed = 400; var jumpTimer = 0; function create() { game.physics.startSystem(Phaser.Physics.P2JS); game.physics.p2.setBoundsToWorld(true, true, true, true, false); game.physics.p2.gravity.y = 300; game.physics.p2.restitution = 0; game.stage.backgroundColor = '#ffffff'; map = createMap().map; var start = map.objects.objective[0]; player = createPlayer({x: start.x, y: start.y}); cursors = game.input.keyboard.createCursorKeys(); } function update() { player.body.setZeroVelocity(); if (cursors.up.isDown && > jumpTimer && checkIfCanJump()) { player.body.velocity.y = 600; jumpTimer = + 750; } if(cursors.left.isDown) { player.body.velocity.x = -playerSpeed;'walk'); } else if (cursors.right.isDown) { player.body.velocity.x = playerSpeed;'walk'); } else { player.body.velocity.x = 0; player.animations.stop(); player.frame = 0; }; } function render() { } function createMap() { var m, g, f, b, c; m = game.add.tilemap('map'); var mWidth = m.widthInPixels; var mHeight = m.heightInPixels;, 0, mWidth, mHeight); m.addTilesetImage('sheet', 'sheet'); m.addTilesetImage('new', 'new'); m.addTilesetImage('s9af', 's9af'); g = m.createLayer('ground'); f = m.createLayer('fringe'); b = m.createLayer('background'); g.resizeWorld(); f.resizeWorld(); b.resizeWorld(); createCollisionObject(m.objects.objects); return { map: m, ground: g, fringe: f }; } function createPlayer(pos) { var p = game.add.sprite(pos.x, pos.y, 'player', 'Symbol 2 instance 10000'); //p.scale.setTo(0.4, 0.4); game.physics.p2.enable(p); p.body.setZeroDamping(); p.body.fixedRotation = true; p.body.x+=p.width/2; p.body.y+=p.height/2; // animation p.animations.add( 'walk', Phaser.Animation.generateFrameNames('Symbol 2 instance 1000', 0, 7, '', 1), 10, true, false); //'walk-left'); return p; } function createCollisionObject(objects) { if (objects) { for(var i=0; i < objects.length; i++) { var p2 = game.physics.p2; var obj = objects[i]; var sprite = game.add.sprite(obj.x, obj.y, null); sprite.width = obj.width; sprite.height = obj.height; sprite.angle = obj.rotation; game.physics.p2.enable(sprite, false); sprite.body.x = sprite.x + sprite.width / 2; sprite.body.y = sprite.y + sprite.height / 2; sprite.body.rotation = obj.rotation; sprite.body.static = true; sprite.body.debug = true; } } } function checkIfCanJump() { var yAxis = p2.vec2.fromValues(0, 1); var result = false; for (var i = 0; i <; i++) { var c =[i]; if (c.bodyA === || c.bodyB === { var d =, yAxis); // Normal dot Y-axis if (c.bodyA === d *= -1; if (d > 0.5) result = true; } } return result; }
  19. Hi all, I lurked some topics related to bones and their rotation but didn't find a clear solution to my problem, so I try to expose it. I'm trying to find the best way to compose rotation of bone on all 3 local axes. In my simulation, i rotate manually the bones of a human rigged model to match desired poses. Everything works fine when a bone rotates only around one local axis (x, y or z), but if I have to compose rotations and rotate, by example, a bone 90° around original x axis and 90° around original z axis, the results are not the ones I expected. E.g: bone.rotate(BABYLON.Axis.X,Math.PI/2, BABYLON.Space.LOCAL); bone.rotate(BABYLON.Axis.Z,Math.PI/2, BABYLON.Space.LOCAL); gives different results than bone.rotate(BABYLON.Axis.Z,Math.PI/2, BABYLON.Space.LOCAL); bone.rotate(BABYLON.Axis.X,Math.PI/2, BABYLON.Space.LOCAL); So what's the best way to compose rotations on 3 bone axes? Using quaternions and multiplying 3 rotation matrixes with the initial quaternion? Thus I'd like to write a sort of function rotateBone(bone, x, y, z) that rotates a bone of x degrees around its original X axis, y axis and z axis, where x, y, and z are expressed in radians [0 - 6.28] (or degrees [0 - 360])
  20. Arcade: rectangle sprite rotation

    I know that it is not a good idea to rotate sprite using arcade physics (AABB), but if my sprites are rectangles and I want to rotate 90 degrees....Does this work? I try changing body size (Height - Width) but it doesn't work. (Sorry for my English)
  21. Hi @all again, I have a huge problem with rotation. I hang about one week on this problem. I perpared a playground: I have a player with a front side. You can see the front side with the aid of the nose mesh. It is the player view direction. The player rotates with the camera rotation. The player stand on a platform. It is possible to rotate the platform with the keys V, B and N. My achived behavior is: The player stand ALWAYS orthogonal on the platform indifferent the platform is rotating AND the player can rotate normal by himself in his own Y-axis direction by rotating the mouse. In the playgound you can see my try with the nearest similar behavior. It seems to work, but how you see in the picture it dont work correct. I realy dispair I am open to all suggestions
  22. CSG rotation

    Hi there, Ive been picking up the babylon framework over the past couple of weeks but this one has really stumped me. All i'm trying to do is rotate the CSG's 45degs about the y axis. So the result looks like a 'X' rather than a '+' I can move one bar or the other into place but as soon as i apply a rotation to both they revert to the original 'plus' position. Im trying to rotate the CSG rather than the resulting mesh because I need the y axis to = 0 for the roll over effect. Any help would be really appreciated! Cheers, Jake.
  23. hi, i don't see where is my error with this snippet i want receive a collision between a object who's rotating and another. if a put my "projectile" on "axe" i receive a notification but nothing with the rotation ??? thanks for your help var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload:preload, create: create,update: update }); function preload() { game.load.image('circle', ''); game.load.image('rect', ''); } function create() { this.projectile=game.add.sprite(100,400,'circle') this.projectile.touch=function(){ alert('touch') } this.axe=game.add.sprite(200,200,'rect') this.axe.width=300 this.axe.height=10 game.physics.arcade.enable(this.projectile); game.physics.arcade.enable(this.axe); game.physics.startSystem(Phaser.Physics.ARCADE) } function update(){ this.axe.body.rotation += 1; game.physics.arcade.collide(this.axe,this.projectile,this.projectile.touch,null,this) }
  24. Hi! I am new to Babylon.js. Love it so far. I am trying to write a simple game. I want the game character to "float" over the playing field. Right now, I'm just trying to get a simple box to hover. I'm doing it in a somewhat funny way because I want some wobbling to occur as part of the hover. I am trying to use physics. So I have gravity enabled in the scene and collisions enabled for the meshes. Further, I want to apply impulses to the box to get it to hover. I wrote some code to figure out which vertex is the "lowest" of all the verticies of the box. I then apply an impulse to that vertex. Because the vertex is extended from the centroid of the box, a torque is generated by the impulse. I am having difficulty keeping the impulses in range. Typically, without squelching the angular velocity, the box eventually starts rotating out of control. So, I was looking into just manually leveling the rotation using addRotation. First I get the Euler angles from the rotation quaternion. Then I reverse a little bit back onto the box each frame. Oddly, this seems to work very well for about 1 minute. Then suddenly, it fails. I fails slowly, which is even odder to me. It seems like I have to reset some internal state or something.... Can someone point out my missteps? Thanks. Wingnut was kind enough to build a playground example that works (but without the wobble): (see his post below). I also have a running version on my website, at: When I fix the issue, that site will be updated. This snippet shows the original issue. Notice the difference between the working demo Wingnut wrote and this one which doesn't (specifically: the impulses are applied at the verticies here, whereas in the working example, the impulses are applied to the centroid): let dHoverHorizon = 50; let dImpulseForceDivisor = 10; let dRotationAdjustmentFactor = 20; meshBox.registerBeforeRender(() => { try { // Get all the verticies of the mesh, given as an array of 72 floats. // 3 floats for each vertex * // 4 verticies per face * // 6 faces. // // Question #1: Why all 6 faces, which produces 3 times as many verticies as necessary? // Question #2: Is there a way to combine these to remove redundant geometry? let arrayMeshVertexFloats = meshBox.getVertexBuffer(BABYLON.VertexBuffer.PositionKind)._buffer._data; // Extract the 4 verticies for the // face in which we are interested. // This happens to be the 6th face. let arrayMeshVerticies = []; for (let i = 3 * 4 * 5; i < arrayMeshVertexFloats.length; i += 3) { arrayMeshVerticies.push(BABYLON.Vector3.FromArray(arrayMeshVertexFloats, i)); } // Convert these 4 verticies to world coordinates. let arrayWorldVerticies = => { let vertexWorld = BABYLON.Vector3.TransformCoordinates(vertex, meshBox.getWorldMatrix()); // Attach original mesh-vertext to the world-vertex. vertexWorld.localVertex = vertex; // Return the new vertex. return vertexWorld; }); // Just for fun, only allow impulse on the lowest of all verticies. let v3Lowest = null; arrayWorldVerticies.forEach((v3) => { if (!v3Lowest || v3Lowest.y > v3.y) { v3Lowest = v3; } }); // Drop out now, if lowest vertex is above hover-horizon. if (v3Lowest.y > dHoverHorizon) { return; } // Generate an impulse proportional to a square- // root of the drop down from the hover-horizon. let dImpulseForce = Math.sqrt(dHoverHorizon - v3Lowest.y) / dImpulseForceDivisor; // Get the linear velocity. let v3LinearVelocity = meshBox.physicsImpostor.getLinearVelocity(); // Only care about the y-axis. let dLinearVelocityAlongYAxis = v3LinearVelocity.y; // If the velocity is negative, then increase the impulse. // Eventually, this will need to take mass into consideration.... if (dLinearVelocityAlongYAxis < 0) { dImpulseForce *= (1 - dLinearVelocityAlongYAxis); } // This doesn't seem to work in a madening way: // Actually, it works for about 1 minute, then // just slowly and seemingly-deliberately fails. let v3Rotation = meshBox.rotationQuaternion.toEulerAngles("XYZ"); meshBox.addRotation(-v3Rotation.x / dRotationAdjustmentFactor, -v3Rotation.y / dRotationAdjustmentFactor, -v3Rotation.z / dRotationAdjustmentFactor); // Apply an "up" impulse to the physics // imposter at the local location of the // lowest vertex found during this pass. meshBox.physicsImpostor.applyImpulse(new BABYLON.Vector3(0, dImpulseForce, 0), v3Lowest.localVertex); } catch (e) { console.log("Error in meshBox.registerBeforeRender: " + e.message); } });
  25. First of all here is my project, controls are WASD and mouse. I was wondering what is causing some kind of friction between the ground and a tank, try to press A or D for 5 seconds, it will not turn smoothly, I noticed that the glitch occurs when the tank is on X or Z axis (probably also on Y axis too but I didn't try). You can see that wheels are rotating propertly, there are no forces pushing the hull, just wheels are jointed to it. Any ideas?