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, Is there a built in way to "lookAt" a point in 3D space, using only 2 coordinates( x and y ). I found a lookAt function from this forum, but that used 3 coordinates which screws up the camera and player orientation. Id like to keep my player's z rotation always at 0.
  2. I'm making a game in Phaser using Tiled for level design. However, when I rotate objects in the object layer and use the createfromobjects function to generate those objects in the game itself, the x and y positions have been messed up. I've taken screenshots to demonstrate: In Tiled In Phaser How do I solve this? Is this a known bug with the current version of Phaser?
  3. Hello everyone, In the example above, on the left should be exactly what's on the right. But, the mesh should stay in place, I don't want to change its position to compensate for the new pivot point. ajustPosition bellow should be 0. var offsetUnit=2; var ajustPosition=offsetUnit; var box1 = BABYLON.Mesh.CreateBox("box1", 2, scene); box1.position.z = -2+ajustPosition; box1.setPivotMatrix(BABYLON.Matrix.Translation(0, 0, -offsetUnit)); How to set the pivot point and keeping the mesh in place without changing its position?
  4. Folks I am not sure whether this is a mathematical limitation or a babylon/javscript limitation (or a touslecoq limitation!). As part of the app I am developing I am comparing the normals of faces on 2 meshes in order to calculate the angle and axis of rotation required those faces. This works fine in most cases - however I found in certain cases that the rotation was seemingly random. Some investigation using the console and I determined that this occurs when the faces being compared are exactly 180 degrees apart. I have created a playground to recreate/illustrate the issue. This basically creates a mesh and rotates randomly in 3 dimensions; creates a second mesh with exactly the same rotation. calls a function to calculate the normals of a given face (0-12) for each mesh and calculate the angle between those normals and the axis of rotation (ie a vector that is 90 degrees to those normals). I call the function twice: comparing Mesh 1, Face 0 with Mesh 2, Face 2 - these faces are on opposite sides of the meshes. The angle (180 degrees) is correctly determined but the axis is calculated as (0,0,0). This I believe is the cause of the strange behaviour I have seen in my app. comparing Mesh 1, Face 0 with Mesh 2, Face 4 - these faces are on 2 perpendicular sides of the meshes and the angle (90 degrees) and axis are correctly determined See the console log for the outputs which include the vertices, normals of each selected face and the calculated angle and axis. Look out for axis = (0,0,0) for the second test. Re-run several times and it gets it wrong consistently. So ... million dollar (since pound is worthless now) question ... is there a workaround to calculate the normal to 2 vectors that are 180 degrees apart? Cheers Rich
  5. Hi this topic is related to this one but it's not necessary to read it. So Théo Sabattié and I are trying to make a game in which the player controlls an airplane flying around a planet and is followed by an homing missile. To make the missile chase the player, we use plane :The plane is attached to the missile and the plane normal is the right vector of the missile. If the player is on the right side of the plane the missile rotate to the right (but stays tangent to the sphere) and if the player is on the left side it rotate to the left. This works at the begening but eventually it fails. And we don't get why. Does anyone know why ? Thanks Here is the playground version :
  6. Hi everyone ! I am making a game with a friend (mazelpomme): The player controls an airplane. It rotates around a sphere and missiles try to touch it, so missiles align themself with the player. To align missiles on player, we worked with Cross product, Dot product with the down missile's vector and the vector "missile to sphere's center" (@see uploaded images) currently, our code is: missile.lookAt(Player.getInstance().getAbsolutePosition()); var missiletoCenter : BABYLON.Vector3 = missile.getAbsolutePosition().negate(); var missileDown : BABYLON.Vector3 = missile.down.getAbsolutePosition().subtract(missile.getAbsolutePosition()); var angle : number = Math.acos(BABYLON.Vector3.Dot(missiletoCenter.normalize(), missileDown.normalize())); var axis : BABYLON.Vector3 = BABYLON.Vector3.Cross(missiletoCenter, missileDown); missile.rotate(axis, angle); sphere center position is x0, y0, z0 We didn't undestand why that didn't work because we reproduced the same in unity and that worked. (missile.down is a missile's child placed on down missile's axis) Has someone an idea? Can you help us? Thanks Théo & mazelpomme
  7. Edit : problem solved, look below ______ lookAt works well on the view. But the parameter rotation doesn't change staying at 0,0,0. And I need it after to calculate the vector forward in local space of a mesh to moveWithCollision : var forwards = new BABYLON.Vector3(parseFloat(Math.sin(character.rotation.y)) / speedCharacter, gravity, parseFloat(Math.cos(character.rotation.y)) / speedCharacter); forwards.negate(); character.moveWithCollisions(forwards); In the playground, I don't know how to display text to debug and Jsfiddle doesn't work so I paste my code here : <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> #renderCanvas { width: 100%; height: 95%; min-height: 95%; } </style> </head> <body> <div id="info"> aaa </div> <canvas id="renderCanvas"></canvas> <script src=""></script> <script> var info = document.getElementById('info'); var canvas = document.getElementById("renderCanvas"); var engine = new BABYLON.Engine(canvas, true); var scene = new BABYLON.Scene(engine); var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 10, BABYLON.Vector3.Zero(), scene); camera.attachControl(canvas, false); var light = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(0, 100, 100), scene); var cube = BABYLON.Mesh.CreateBox("Box", 1, scene); var cube2 = BABYLON.Mesh.CreateBox("Box2", 1, scene); cube.position.x = -5; var material = new BABYLON.StandardMaterial("default", scene); material.emissiveColor = new BABYLON.Color3(0.3, 0.3, 0.5); cube.material = material; var material2 = new BABYLON.StandardMaterial("default2", scene); material2.emissiveColor = new BABYLON.Color3(0.5, 0.3, 0.3); cube2.material = material2; scene.beforeRender = function() { }; // Render loop var renderLoop = function () { cube.lookAt(cube2.position); cube2.position.z += 0.01; info.innerHTML = cube.rotation; // !!! display 0,0,0 everytime !!! scene.render(); }; // Launch render loop engine.runRenderLoop(renderLoop); </script> </body> </html> Thank you
  8. 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!
  9. Hi All I am new to BabylonJS and have been playing with the library for a few days now and am absolutely loving it! A big thumbs up to the team/community that have developed this amazing library. My 3D geometry is rusty, hence im having problems resolving what many will see as a simple 3D transformation. My scene has a simple tube created from a path that was created using a bezier curve. Along the path trajectory I want to render a series of torus shapes, each torus needs to be aligned with the tube axis. I have created a simple program that creates; the bezier curve path, the tube and adds the torus shapes along the trajectory. Without attempting to rotate the torus shapes I get the following result (which is expected): (see attachement 1) Playground Code: To fix this problem (i.e. rotate the torus to align with the trajectory of the tube) I have an idea but do not know how to code this using the Babylon JS API - here is my idea for aligning the torus to the tube: a ) the bezier path trajectory has a series of vertices that can be used for defining a vector/axis and position for the Torus to be positioned. b ) the tube mesh (end region) has a series of vertices that can be used to define a plane for aligning the Torus with the Tube. (see attachement 2) Use the above vertices to define a plane / axis for orientaton - e.g. if adding the torus at start of the tube mesh then you could: 1 ) create vector for defining axis of trajectory (i.e. use bezier path points (1) and (2) for defining the vector) 2 ) create a plane for aligning the torus (i.e. use bezier path point (1) and end tube mesh points (a) and (b) for defining the plane) i.e. (see attachement 3) Using the above it should now be possible to orientate the Torus to the specified plane. The only problem is: a ) I dont know how to reference the end tube mesh points b ) I dont know which API calls I should use to orientate the torus to the specified plane/vector c ) Im guessing there is probably an easier method for solving my problem If anyone can help me out with this challenge I would appreciate it (possibly update the playground code to illustrate what needs to be done?). Thanks in advance Rolento
  10. Hello! I have a problem with parent mesh rotation. Scene has two objects which will be rotation around center of bottom object. If bottom object placed on scene center then objects rotation correctly. But if replace bottom object then stranges begin... I create parrent mesh for object and try to rotate it. Please tell me where I wrong?
  11. What is the way to rotate a mesh about a given axis? For example I have a triangle whose vertices are (0,0,0), (1,0,0), (0,0,-1) and I want to rotate it about the axis z = -0,5, x = 0 . How can I achieve that?
  12. Hi everyone, I have an animated sprite of a meteorite with it's tail. I need that the collisions are only for the rock and to be able to rotate the sprite with the movement direction. If I setup the body size like this: this.anchor.set(.55, .55); this.body.setSize(110, 110, 400, 350); The graphic and body collision is fine if the angle of rotation is 0. But I need to rotate the sprite around the anchor point and then the body is not on the desired position of the sprite. How can I fix this?
  13. is there a simple way to limit the amount of rotation of a mesh? I have a throttle in my project and I have it setup so that I can click and drag it to rotate the lever on the x axis(Thanks to Wingnut and others in this forum). I want to limit the amount that it can be rotated no matter how much the drag, but I am getting odd results. Is there a way that I can use a clamp to lock the rotation into a certain angle? PS... to move the throttle, you click and drag from the cylinder objects on the left or right Thanks in advance
  14. I'm trying to make a 2d space game involving a sort of space dogfight between the player and some ai bots. I need help with the enemy ship automatically rotating towards the player, but not being exactly pointed towards the ship 24/7. I want the enemy ship to have some "lag" in its response to the player's movement so it's more realistic. Right now I have a model which is not realistic and would probably be too hard for the player to win: update: function(){ //blah blah var tempAngle = Math.atan2(fightSprites.player.y-fightSprites.enemy[i].y, fightSprites.player.x - fightSprites.enemy[i].x); //gets angle between player and enemy fightSprites.enemy[i].body.rotation = tempAngle + (3.141/2); //too precise }
  15. I may be doing this wrong, so tell me if you have a better idea for a solution to my problem. I am creating a toy hockey game and my toys keep falling over smashing into each other and the puck. My theory was to use a upright null player (positioned under the ice and therefore invisible to the viewer) as the correct orientation. I would check the orientation of the real player, and if he was on his side I would stop his x,y,z velocity and SLOWLY rotate him to match the null player orientation. Once his position is upright (like upon mesh creation) he will resume his chasing of the puck. Make sense? Or does my solution sound goofy? In this playground, how would you make body2 rotate slowly to match the rotational value of body1? Thanks for any tips! Having fun with this.
  16. 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!
  17. var game = new Phaser.Game(1024, 600,, 'phaser-example', { preload: preload, create: create, update: update, render: render }); var result = 'Press a key'; function preload() { //load assets game.load.image("single_turret","./img/single_turret_64x64.png"); game.load.image("mouse","./img/mouse.png"); } function create() { //start physics game.physics.startSystem(Phaser.Physics.P2JS); single_turret = game.add.sprite(400,300,'single_turret'); mousep = game.add.sprite(50,50,'mouse'); //enable psysics on all items and enable debugged game.physics.p2.enable([single_turret,mousep], true); mousep.body.setCircle(4); mousep.body.kinematic = true; single_turret.body.setCircle(4); single_turret.body.kinematic = true; } function update() { } function render(){ game.debug.text(result, 32, 32); mousep.body.x = game.input.x; mousep.body.y = game.input.y; lookAtObject(single_turret, mousep, 0.005); } function lookAtObject(obj, target, rotspeed){ var angle = Math.atan2(target.body.y - obj.body.y, target.body.x - obj.body.x); result = obj.body.rotation + '**'+ (angle + game.math.degToRad(90))+ '**'+obj.body.angle; obj.body.rotation = angle + game.math.degToRad(90); } The code above rotates the "turret" to always be pointed towards the mouse so that it can fire at the mouse position. The code works, but I want to add a rotation speed to it, however I can't figure out how to code that in. The lookAtObject() function is where I have the problem. function lookAtObject(obj, target, rotspeed){ var angle = Math.atan2(target.body.y - obj.body.y, target.body.x - obj.body.x); result = obj.body.rotation + '**'+ (angle + game.math.degToRad(90))+ '**'+obj.body.angle; if (obj.body.rotation <= angle + game.math.degToRad(90)){ obj.body.rotation += rotspeed; }else{ obj.body.rotation -= rotspeed; } } This statement does not work as intended because of how p2js works, so when It gets at ( -x , 0) the radians go from -1.5 to 4.7 and the rotation will reverse. I am really stumped atm, so any ideas on how to approach this?
  18. I am trying to determine the face of a cube facing toward the user after a random number of quarter rotations of a cube (I rotate the cube, not the camera that is always along the z axis). I assigned each face of the cube to a submesh and tried to check which one had a normal z value equals to -1 but the normals do not seem to be affected by the rotation (I always have the same face with a normal vector equals to (0, 0, -1) at its vertices whatever the rotation I apply and this is the face facing the user before the rotation). So is there a simple way to check the orientation of each face of a cube after a rotation to determine which one is perpendicular to the z axis and facing the user?
  19. I know how to get world rotation from the rotation quaternion using the eulerAngles function. I know how to set the world rotation using the RotationYawPitchRoll function. I also want to have the option to read and set local rotation but I have no idea how to do this using the rotation quaternion. I've checked the docs and searched the forums but I can't find an example. Does anyone know if its possible to read and set absolute local rotation?
  20. I am working on a project within PIXI that requires me to shift the hue of a saturated rainbow gradient in a loop so it looks like its moving. I figured this would be cut and dry, since changing the hue of said image in Photoshop make it appear as if its moving. When starting out and getting the filter in place and animating, I was perplexed by the results. The colors looked nothing like I expected nor could have predicted. You can see a little demo of what I'm talking about and seeing on codepen here. I started digging to see what could be the problem, trying different image formats and color depths to no avail. I gave a shot at another canvas solution, GLFX, and can get the proper results I expected, as also seen on codepen here. My question to you guys is whats going on here? I am suspecting either an error in PIXI or my understanding of how hue rotation should work. I tried a few different PIXI revisions and didn't spot a difference. I dug a little further and came across an article explaining the difference between HSL and CSS hue rotations and its inaccuracies here. Though, that doesn't help me fix the issue with PIXI. Anyway to fix this on my end while staying within PIXI? Thank you.
  21. Hi there, by default it seems the ANIMATIONTYPE_QUATERNION slerps between 2 quaternions the short way (270 degrees turns into -90 for instance). If I compute the angle between the 2 quaterinon and determine that it's more than 180, how would I go about slerping it the long way? I tried looking at the code but variable names such as num1 num2 num3 num4 num5 num6 didn't really help Any help appreciated! Cheers, Quaternion.Slerp = function (left, right, amount) { var num2; var num3; var num = amount; var num4 = (((left.x * right.x) + (left.y * right.y)) + (left.z * right.z)) + (left.w * right.w); var flag = false; if (num4 < 0) { flag = true; num4 = -num4; } if (num4 > 0.999999) { num3 = 1 - num; num2 = flag ? -num : num; } else { var num5 = Math.acos(num4); var num6 = (1.0 / Math.sin(num5)); num3 = (Math.sin((1.0 - num) * num5)) * num6; num2 = flag ? ((-Math.sin(num * num5)) * num6) : ((Math.sin(num * num5)) * num6); } return new Quaternion((num3 * left.x) + (num2 * right.x), (num3 * left.y) + (num2 * right.y), (num3 * left.z) + (num2 * right.z), (num3 * left.w) + (num2 * right.w)); };
  22. Does anyone know how to get the rotation of an object in Babylon 2.4? mesh.rotation is always zero. I can't set absolute rotation either.
  23. I'm making a game with Asteroid like controls, but I'm in doubt about how to move the sprite in the direction it is facing. What's the easiest way to do this?
  24. Hello everyone, I have 2 questions and I think they both deal with math. 1. How do i get the x,y, x+ width and y+ height of a sprite after setting a rotation (corners of sprite) image 1 (white background image) 2. how do i make a sprite look at the position of the mouse ( rotate to where the mouse is) I tried various version and this seems to give me the closes one var angle = Math.atan2(mouseX - (boxIMG.position.x), -(mouseY - boxIMG.position.y)); then set the rotation to that boxIMG.rotation = angle; but is not working correctly (black background image)
  25. I've stumbled across an undesirable effect. When I add a filter to a sprite, and rotate it, the sprite is smoothed (blurred a small amount, looks like linear maybe) and also, it shakes slightly (you have to look closely to see it, but it becomes very apparent on small sprites. I don't know if this is phaser or pixi, but I was wondering if anyone knew of a way to alleviate the effect. The position thing looks to be loss of precision on the position or at least the effect makes it look like that, jumping from one pixel location to the next or something like that. The other I don't know about. There's no interpolation in the filter, the only thing I'm really doing is gl_fragcolor = texture2D(uSampler, vTextureCoord); both effects are removed if you just comment out the line: sprite.filters = [filter]; (removing the filter) here's a link to the simple example: and here's the code for that example: <html id="html" style="overflow: hidden;" ng-app="html"> <head> <title>Example</title> <meta name="author" content="glitchedRaven"> <meta name="keywords" content=""> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> <script src="phaser.min.js"></script> </head> <body style="background: green; margin: 0vh; padding: 0vh;"> <script> var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update }, true); function preload() { game.load.image('texture', 'test.png'); } var filter; var sprite; function create() { // Shader by Kali ( // Image patched by Richard Davey var fragmentSrc = [ "precision mediump float;", "uniform float time;", "uniform vec2 resolution;", "varying vec2 vTextureCoord;", "uniform sampler2D iChannel0;", "uniform sampler2D uSampler;", "void main( void ) {", "vec2 uv = gl_FragCoord.xy / resolution.xy;", "uv.y *= -1.0;", "uv.y += (sin((uv.x + (time * 0.5)) * 10.0) * 0.1) + (sin((uv.x + (time * 0.2)) * 32.0) * 0.01);", //"vec4 texColor = texture2D(uSampler, uv);", "vec4 texColor = texture2D(uSampler, vTextureCoord);", "gl_FragColor = texColor;", "}" ]; // Texture must be power-of-two sized or the filter will break sprite2 = game.add.sprite(310, 230, 'texture'); sprite = game.add.sprite(0, 0, 'texture'); sprite.width = 400; sprite.height = 300; sprite.x = 400; sprite.y = 300; sprite.anchor.set(0.5, 0.5); sprite.scale.set(1.5, 1.5); sprite.smoothed = false; var customUniforms = { iChannel0: { type: 'sampler2D', value: sprite.texture, textureData: { repeat: true } } }; filter = new Phaser.Filter(game, customUniforms, fragmentSrc); filter.setResolution(1024, 1024); sprite.filters = [ filter ]; } function update() { sprite.rotation += 0.01; filter.update(); } </script> </body> </html> As I understand it, filters use a canvas element behind the scenes to render, but is there any way I can set the imageSmoothingEnabled property of that element? Or make the filtered sprite match the unfiltered sprite some other way? To be honest, the position shaking thing is more troublesome to me than the smoothing thing, is there a way to keep the location steady?