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

  1. 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 !
  2. 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
  3. 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.
  4. 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!
  5. 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
  6. 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?
  7. 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).
  8. 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,
  9. 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!
  10. 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])
  11. 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?
  12. 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
  13. 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) }
  14. 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; }
  15. 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)
  16. 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
  17. 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.
  18. 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); } });
  19. 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.
  20. 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?
  21. Camera rotation

    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.
  22. 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?
  23. 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
  24. 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?
  25. Mask works with rotation only

    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!