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
    • Facebook Instant Games
    • Web Gaming Platform
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 167 results

  1. 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])
  2. 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. How can I rotate it right?
  3. 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
  4. 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) }
  5. 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; }
  6. 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)
  7. 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
  8. 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.
  9. 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); } });
  10. Hi @all, I have a new Demo with strange camera behavior: In the Demo is one player again (green box). The player has two children: the camera and a red box. The red box is the view direction of the player. You can move the player with WASD and the camera with the arrowkeys. Now the Problem: You can rotate the player body by pressing the R key. I rotate also the camera, but the camera.getTarget() is very wrong. You can check it by moving around with the camera after some rotations. Similar problem if I dont rotate the camera. I want the vector of the camera view direction if I use camera.getTarget(), like i get if there is still no rotation.
  11. 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?
  12. I want to make my camera follow an object, but I also need the ability to look around, the only thing I need at the moment is the camera rotation quaterion or matrix. Is it possible to calculate it somehow? If I had Z vector of camera I could just move camera back by Z vector times n from player and it would work well. If there is a topic about it leave a link below.
  13. I have this Code to move a player (3rd person) forward and backward, with the arrow keys left-right I can rotate the Player: if (key == 37) // left android.rotation.y -= Math.PI/2; if (key == 38) // foreward android.position.z += 0.5; if (key == 39) // right android.rotation.y += Math.PI/2; if (key == 40) // backward android.position.z -= 0.5; But after a rotation the facing direction is wrong. How can I correct this?
  14. In the second part of last year I was involved in many a topic related to pivots and I suggested a number of ways to solve the various but similar problems. Recently I needed to return to pivots and realised that I had never really understood them. My re-visiting them has gained me some new insight into pivots and manipulating them in a much simpler way than before. Quite possibly in another year's time I will discover there is still a better way than I have now found. For the time being I would like to share my new found understanding and hope it might help some of you. So if you are trying out pivots and want to know of a fairly straightforward technique to use them read on
  15. 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: However this also doesn't give me a the desired result (because BJS is returning an identity matrix I think). Any Thoughts?
  16. Hi. I wasted a lot of time with next problem: my mask only works when its rotation is 0.1 or more (when I applied mask to a container, the container didn't display anything). I made little example on jsfiddle, but it works well I know I'm asking too much to help me without example and I understand the problem is exactly in my project, but maybe somebody encountered with similar problem or knows what can be a cause? Pixi 4.3.4. P.S. I've read docs about masks, but maybe I did't get something... Thanks!
  17. Hi I have some problem with collider of child box. If we set parent box and add child box. If Child have its box collider, and if we rotate parent box, child is changing (potition and rotation), but child's box collider is not changing (position and rotation). How should we achive that box-collider will follow child when we (rotate or maybe change position of parent). Here is example of what I am talking about. (here is grid-box seen as box-collider of child-box. and grid-box is not changing position and rotation). (or mybe - here we can se grid-boxes as colliders and blue box is rotation and changing position but it's box-collider is not) How can/should we repair code so that box-collider is folowing its child's box-mesh? Greetings
  18. I'm using a FreeCamera, gravity,etc... and when i look at the sky and press W to go forward i go up and can fly, the same if i look at the floor and press back. I want that with WASD the camera moves without take the Y.rotation in consideration, because i still need to move the camera and rotate to look everywhere. How can i achieve that? I tried with "Camera.CamFrontX(Distance)" , Camera.DirectionX(AxisX, AxisY, AxisZ) ,etc... to fix the Y.Rotation value but never got the desired behaviour, sometimes the Y is limited and i can't climb ramps or stairs, other the collisions are not detected or other weird stuff.
  19. Hello ! Do you know a solution to rotate slowly toward a vector ? Can we do it without using quaternion ? Thanks
  20. When i rotate a sprite i dont know why it looks weird. After rotation Before Is this a common bug or just my code?
  21. Hello. This is my first post on this forum, i read the rules and i hope i'm not breaking them because i don't have a demo. I need a way to display a 2d galaxy map (it will be in 3d, but it will be a top view) for my game, i will use Babylon.js, however i need some help on some points. My map have 3 modes which depends on the zoom on the map; mode 1 where you see the planets (which are meshes); mode 2 where you see the solar systems (planets are hidden), mode 3 where you see the galaxies (solar systems are hidden). Here is a representation of mode 1 with the zoom bar on the right : The red bar is the current zoom level. My questions are : - How to make a top view camera with rotation blocked but keep the wheel for zooming in and out ? - How to make that i can move the camera on x,y with my mouse ? (Since the rotation will be disabled the mouse is free) I will use camera.radius to get the current zoom level and dynamicly update the planets / solar systems / galaxies display with AJAX as a function of x,y coordinates. Thank you so much.
  22. Hello, It seems that the mesh has the method lookAt() but the rotation is then expressed in quaternions and euler angles remain at 0 with mesh.rotation Although camera has the method setTarget. It does the same thing but the classic rotation is given. I know how to manage that in my project. (With atan2 or get the rotationQuaternion angles) But I ask : is there a reason for this difference in classes ? Do you plan to integrate a setTarget method in meshes ?
  23. Hey guys, I'm newbie of Phaser so I hope you don't get mad for my simple problem. My code simply moves a tank sprite around the screen, along with rotating its barrel (its childSprite) by using the mouse position...that's it. The problem is the barrel: its rotation is completely broken! I used angleToPointer() directly from documentation but I can't find the solution of this problem. video: broken_rotation.wmv var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }) var player; var barrel; function preload() { game.load.image('tank', 'assets/PNG/Tanks/tankBlue_outline.png'); game.load.image("barrel", "assets/PNG/Tanks/barrelBlue_outline.png"); } function create() { player = game.add.sprite(200, 200, 'tank'); player.scale.setTo(0.5, 0.5); player.anchor.setTo(0.5, 0.5); barrel = new Phaser.Sprite(, 0, 0, "barrel"); player.addChild(barrel); barrel.anchor.setTo(0,0.5) } function update() { if (game.input.keyboard.isDown(Phaser.KeyCode.W)) { speed = 3 var velocityX = Math.cos(player.angle * Math.PI / 180) * speed; var velocityY = Math.sin(player.angle * Math.PI / 180) * speed; player.x += velocityX; player.y += velocityY; } if (game.input.keyboard.isDown(Phaser.KeyCode.D)) { player.angle += 1; } if (game.input.keyboard.isDown(Phaser.KeyCode.A)) { player.angle -= 1; } if (game.input.keyboard.isDown(Phaser.KeyCode.S)) { speed = -2; var velocityX = Math.cos(player.angle * Math.PI / 180) * speed; var velocityY = Math.sin(player.angle * Math.PI / 180) * speed; player.x += velocityX; player.y += velocityY; } //barrel.angle += 1 the automatic rotation works perfectly!... barrel.rotation = game.physics.arcade.angleToPointer(barrel); // ...but not the input one sadly } function render() { game.debug.spriteInfo(barrel, 20, 32); }
  24. I'm creating triangles using Phaser.Graphics.drawTriangle. Then I'm rotating the shape by the center point (width/2, height/2). After that I want to place triangles side by side, but, after the rotation the height and width may change, so I recalculate this and get a new center point. But the shapes are not very well placed. How to place it right? There is another way to center the shapes? In attchament I generated the same triangle side by side rotating then 45°. The red dot and the lines are only for reference where they would be. Thanks in advance,
  25. Hi all! Maybe my question is simple, but tell me please, how can I find out mesh.rotation(in world space), wich atached to bone? That one more mesh set in this rotation whitout using attachToBone. Because mesh, which attached to bone, rotation always equals 0, 0, 0 . Thank!