Search the Community

Showing results for tags 'pivot'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 30 results

  1. what exactly is pivot and what it affects

    Hello, I would like better understand pivot and how it's stored, calculated and what it affects. As it causes me troubles when I apply setTextBounds. May be someone can share link to article or tell me something? Thanks in advance
  2. The problem Create a box fig 1 Use box.setPivotMatrix(BABYLON.Matrix.Translation(-0.5, 0.5, 0.5)); To set the pivot at the lower right front corner (shown by small grey sphere). fig 2 Position the box at (2, 0, 0) and note that it is the pivot that is positioned at (2, 0, 0). box.position = new BABYLON.Vector3(2, 0, 0); fig 3 Delete box.position and replace with box.translate(BABYLON.Axis.X, 2, BABYLON.Space.LOCAL); As you would expect since the local and world axes are in alignment you get the same result. fig 4 Now replace LOCAL with WORLD box.translate(BABYLON.Axis.X, 2, BABYLON.Space.WORLD); Since local and world axes are in alignment and translate is a vector displacement and the displacement is the same then you would expect the box to be at the same position. However it is not as is seen below. fig 5 Probable Issue Getting the position of the box for fig 2 it is at (0, 0, 0) ie the position of the pivot, the absolutePosition for the box in fig 2 is (-0.5, 0.5, 0.5) the position of the box's center in world space. So a translation in either local or world space would give the boxes position as (2, 0, 0) and its absolute position as (1.5, 0.5, 0.5) which it is for fig 3 using position and for fig 4 for translate in local space. However translation in world space gives a position of (1.5, 0.5, 0.5) and an absolutePosition of (1, 1, 1) = (1.5, 0.5, 0.5) + (-0.5, 0.5, 0.5) . It is out by the pivot vector. Tracking down translate in Mesh/babylon.abstractMesh.ts public translate(axis: Vector3, distance: number, space?: Space): AbstractMesh { var displacementVector = axis.scale(distance); if (!space || (space as any) === Space.LOCAL) { var tempV3 = this.getPositionExpressedInLocalSpace().add(displacementVector); this.setPositionWithLocalVector(tempV3); } else { this.setAbsolutePosition(this.getAbsolutePosition().add(displacementVector)); } return this; } where for Space.WORLD there is a call to 'setAbsolutePosition' the code for which is public setAbsolutePosition(absolutePosition: Vector3): AbstractMesh { if (!absolutePosition) { return; } var absolutePositionX; var absolutePositionY; var absolutePositionZ; if (absolutePosition.x === undefined) { if (arguments.length < 3) { return; } absolutePositionX = arguments[0]; absolutePositionY = arguments[1]; absolutePositionZ = arguments[2]; } else { absolutePositionX = absolutePosition.x; absolutePositionY = absolutePosition.y; absolutePositionZ = absolutePosition.z; } if (this.parent) { var invertParentWorldMatrix = this.parent.getWorldMatrix().clone(); invertParentWorldMatrix.invert(); var worldPosition = new Vector3(absolutePositionX, absolutePositionY, absolutePositionZ); this.position = Vector3.TransformCoordinates(worldPosition, invertParentWorldMatrix); } else { this.position.x = absolutePositionX; this.position.y = absolutePositionY; this.position.z = absolutePositionZ; } return this; } which takes into account a parent but not a pivot. Also it sets the absolutePosition by setting only the position. However as is seen above when using a pivot, like for the parent case, position and absolute position are different by the pivot vector. Possible Solution Would be very nervous of suggesting changes to 'setAbsolutePosition' as I would not know what else it might affect. So suggest the following change to translate - 'add(this.getPivotPoint())' - but am not submitting a PR since I am not absolutely certain this is the correct way to go. Have tried it locally and it gives me what I expect but do not know whether it affects anything else and will wait until better BJS minds than mine check it out. public translate(axis: Vector3, distance: number, space?: Space): AbstractMesh { var displacementVector = axis.scale(distance); if (!space || (space as any) === Space.LOCAL) { var tempV3 = this.getPositionExpressedInLocalSpace().add(displacementVector); this.setPositionWithLocalVector(tempV3); } else { this.setAbsolutePosition(this.getAbsolutePosition().add(displacementVector).add(this.getPivotPoint())); } return this; }
  3. Change pivot position of a group

    Hi I am new to phaser . I am working on a animation to rotate a glass with lid . when I rotate it ,it rotates anti cliockwise to the left . I want it turn clockwise to right . and when I try to change the pivot position the group position gets changed. Need help .
  4. i want to zoom to player position using pixi features. According to this comment. A camera is as easy as setting container pivot point to user position and move the container position to the canvas center. How about do a little more and zoom to the user position and make it look natural? I am currently using this const scaleDelta = -0.1; const offsetX = - (user.x * scaleDelta); const offsetY = - (user.y * scaleDelta); const currentScale = container.scale.x; let nScale = currentScale + scaleDelta; container.position.x += offsetX; container.position.y += offsetY; container.scale.set(nScale); This works when I am not using a camera, but looks jumpy when I add a camera. What is the solution with a camera?
  5. Hello everyone, I'm trying to get a label system which could work like https://jig.space/view?jig=v4Ga2VKw I'm using the 3ds max exporter to export the meshes and I wanted to use the pivot point as a base to place the label. Maybe there is a better way to do it. When I create my Group2D (containing a line, rectangle and text) and set the trackNode property to use the mesh, I can see that the pivot point is not used. It looks like it might not event been exported (I attached the file) since the pivotMatrix is null. Maybe I'm missing something ? Infos.babylon
  6. Hi everyone! I'm still learning and I think I got in way over my head. I'm trying to have a turret that will fire from multiple guns while facing the cursor. This means that the bullet reset-point keeps changing, but since I'm pivoting the sprite group, the coordinates are always staying the same! What do I do to get coordinates that update on every frame, which I can then use as bullet spawning point? Edit: Link removed
  7. 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. http://www.html5gamedevs.com/topic/26327-set-pivot-on-rotatedscaled-mesh/ http://www.html5gamedevs.com/topic/26327-set-pivot-on-rotatedscaled-mesh/ http://www.html5gamedevs.com/topic/26032-dont-change-the-mesh-position-when-setting-the-pivot/ http://www.html5gamedevs.com/topic/17207-rotating-a-mesh-around-a-pivot/ 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 http://babylonjsguide.github.io/advanced/Pivots
  8. I notice if I pan, rotate a bit, then scale and do that whole sequence a few times, the pivot point starts to shift which is noticeable when rotating. Is there a way to prevent the pivot point moving? I'm trying it out here www.punkoffice.com/scan/cat_kasey (use right-click to pan)
  9. http://www.babylonjs-playground.com/#147HRL#5 Hello, hello, good day to you sirs and mams, I'm a newb, i'm a newb. I'll try and keep it simple and straight forward, at a minimum my playground is (simple and straight forward). when I search for pivot, three options seem to come up, along with confusion: 1. the setPivotMatrix method 2. create a mesh where you want your pivot point to be and parent to it 3. world this or that and setting world so, i've experimented with OPTION 1, setPivotMatrix, and i can't find the connection between this and a pivot point, I assume this is a mathematicians version of pivot as opposed to a physicists pivot, if someone could please describe in a sentence what setPivotMatrix is, it would be greatly appreciated. On the other hand if it could be shown in a simple playground that this has something to do with a "pivot" that to would be greatly appreciated. Before you say that's easy and show me a sphere rotating around another sphere where the pivot is the one rotating please read: from wikipedia: "Pivot may refer to: Pivot, the point of rotation in a lever system More generally, the center point of any rotational system Pivot joint, a kind of joint between bones in the body Pivot turn, a dance move" for OPTION 2 parenting it works great with a single mesh you want to rotate around a point, but will it work with clones and rotating each clone another Math.PI/6? here is my playground: http://www.babylonjs-playground.com/#147HRL#5 OPTION 3 is beyond me thank you for looking reading thinking, maybe even writing have a lovely day, or if night, then sweet dreams
  10. Recently discovered that there's a v4 of the wonderful PIXI.js. An hour or so of font- & generateTexture-refacturing and I'm in the clear, except for the tweens. The tweening library that I'm using is Tween.js ( https://github.com/tweenjs/tween.js/ ) which has been working great for me so far. Apparently, in v4 there's been some changes to how the position, scale, pivot and probably some more values are being set, rendering most of my tweens unable to ...tween. Tweening the alpha works fine, as it seems to be unchanged. According to the v4 source, the affected values all have this comment in common: * Assignment by value since pixi-v4. ( https://github.com/pixijs/pixi.js/blob/dev/src/core/display/DisplayObject.js ), which is what prompted my current, albeit unsatisfactory, solution. To illustrate I'll show two examples of code, first one that works in v3 but not in v4 and then my current solution. This code example is no longer able to set the x position in v4: new TWEEN.Tween(stage.position) .to({ x: value }, 500) .start(); However, a solution is to use the onUpdate()-function of Tween.js and set the position manually with a temporary object acting as the target. This code example using onUpdate() works with v4: var temporaryObject = { x: stage.position.x }; new TWEEN.Tween(temporaryObject) .to({ x: value }, 500) .onUpdate(function() { stage.position.x = this.x; }) .start(); Which is a relief (been a rough day), but it also means that I have a lot of tweens to refactor in a tedious manner. My question is if there's a better way to refactor these old tweens that requires less change? I'm not super experienced with the high level of code that's in the source.
  11. I have searched these forums high and low. And i see alot of people ask about rotating a mesh around a set pivot point. They seem to have success, but i don't. I think the pivots were messed in the file i got, but regardless, in Babylon i want to set them. When i set: BABYLON.Matrix.TranslationToRef(middle.x, middle.y, middle.z, currentMesh.getPivotMatrix());It moves the mesh on me. I haven't even rotated it yet, and the mesh changes its position. If i move the mesh back to its original position after this, the pivot is not correct. Heres my playground attempt: http://www.babylonjs-playground.com/#H7V1D Could someone please tell me what i am doing wrong (I am really bad with Matrix Everything ) Thanks,
  12. Might be a bug or it could my expectations (again). However the problem could be at the root of people having difficulties placing pivots. If you rotate a parent them translate its child using LOCAL axes the child moves and positions as you would expect. However if you rotate a parent then translate its child using WORLD or use position the child moves again in the direction of LOCAL axes but distances depend on the rotation of the parent. The PG http://www.babylonjs-playground.com/#1J7LGZ shows the effect. The cylinders mark the positions of the child mesh (the pilot) as it and the parent (sphere) move. The red cylinder marks the expected final position following the final move of -2 in the direction of the world x axis. The pilot meshes show the actual positions. Commenting out the pilot and sphere moves and uncommenting them in turn will show the sequence.
  13. Hello everyone, http://babylonjs-playground.com/#RZGEH#0 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?
  14. Hi guys, Dragging a sprite, the pivot does not change position, How I can update the pivot of other Sprites? http://phaser.io/sandbox/Uwipmwxr/play if I move the "topLeft" sprite, I want the "topRight" sprite move the same distance upward based on the central point like rectangle if I move the "topLeft" sprite, I want the "bottomLeft" sprite move the same distance to the left based on the central point like rectangle PD: I want to simulate Fabric.js with pivots, check my example => http://codepen.io/jdnichollsc/pen/KgdRvV Can somebody help me? Thanks in advance, Nicholls
  15. Hi guys, Dragging a sprite, the pivot does not change position, How I can update the pivot of other Sprites? http://phaser.io/sandbox/Uwipmwxr/play if I move the "topLeft" sprite, I want the "topRight" sprite move the same distance upward based on the central point like rectangle if I move the "topLeft" sprite, I want the "bottomLeft" sprite move the same distance to the left based on the central point like rectangle PD: I want to simulate Fabric.js in Phaser, check my example => http://codepen.io/jdnichollsc/pen/KgdRvV Can somebody help me? This is a plugin for Phaser Thanks in advance, Nicholls
  16. Circular pathing

    Hello! I tried setting a sprite to pivot around another sprite, only to realize that it's rotating and one side always faces the other sprite. Is there a way to make a sprite circle a point, while staying static (without rotating)? I haven't found anything useful online. Thank you.
  17. Pivot not working

    Hi all! I'm trying to make a sprite pivot, as simple as that. However, it won't work and I'm not sure if I'm missing something. I checked the tutorials/examples and I can't see the problem: http://kresimir.majic.eu/games/single_state/pivot.html I'm kinda stuck, so any help would be greatly appreciated! Thanks!
  18. This is a problem which I've been struggling for too long now. Probably my approach is completely wrong, and my knowledge of matrices are lacking. Scenario: Two parent meshes in a scene Each parent has one so called connector mesh as a child Both parents have a pivotMatrix which is not equal to Matrix.Identity() Both child connectors have a pivotMatrix which is not equal to Matrix.Identity() Problem Moving the second parent in such a way that both child connectors have the same global position. Unfortunately this does not come out okay, because the pivotMatrix is 'messing' things up. What have I tried The models are made using 3DS Max and then exported to .babylon. When I apply a ResetXForm within 3DS Max on the connectors it all works fine, and the models connect at the right position. Unfortunately I do not have the possibility to do this for all the models I have. I've tried using this piece of code (TypeScript): let subject: BABYLON.Mesh = <BABYLON.Mesh>con2.parent; let con1pos: BABYLON.Vector3 = con1.getAbsolutePosition(); let con2pos: BABYLON.Vector3 = con2.getAbsolutePosition(); let pos2: BABYLON.Vector3 = subject.getAbsolutePosition(); subject.setAbsolutePosition(pos2.add(con1pos.subtract(con2pos))); What I would really like is a way to make the pivotMatrix == Matrix.Identity() and have the mesh/geometry stay at the same position. Because before I can move these, I also need to rotate the subject, in such a way that con2 faces the exact opposite direction as con1. And I am pretty sure that the pivotMatrix is going to mess up that as well. Edit: I've created two playgrounds. http://www.babylonjs-playground.com/#1UMJXS#0 (3ds max export where the connectors have an altered pivot) http://www.babylonjs-playground.com/#1UMJXS#1 (3ds max export where the connectors are reset using resetXform) I was very convinced that I did get values using the getPivotMatrix() method, but checking today, I was horribly wrong. Apparently that data is not output by the babylon 3ds max exporter. Which gives me the feeling there is little I can do about it. Perhaps the exporter needs to be adjusted so that the adjusted pivot matrix gets exported as well
  19. Hi guys, i've been scratching my head the past 5 hours, couldn't get past this Step1: Basically, i have a cube rotating along the x-axis: http://www.babylonjs-playground.com/#H7V1D#19 Step2: I want that same cube, to pivot around the origin: http://www.babylonjs-playground.com/#H7V1D#18 The problem is, in Step2, the cube isn't rotating (along it's x-axis) like in Step1. I guess my question is, how do I combine both Step1 and Step2?
  20. Group Pivot Point with P2 Gravity

    Hi all, very new to Phaser and I'm trying to basically make a colour switch kind of game. So I am using p2 physics for the rotating arcs so I can add collision detection later. I had these arcs as graphics in the game but then couldn't add physics to them so they are now sprites in a group call wheel. I have the pivot point of the group set to (85,85). I don't know why but this number works, the sprites are 170x170 but when I try to give the group a pivot point such as (0.5,0.5) it doesn't work I've even tried (0.25,0.25) to try and recreate the (85,85) pivot point. I am trying to do this because when I apply the p2 gravity to the game the wheels pivot point does not move so the wheels rotation gets bigger and bigger. If anyone has a possible solution to this or an alternative method to go about this then please reply! I'm so desperate right now it's not even funny.
  21. Hi, I have been generating planet systems. All planets are set to pivot around the same point. There is no physics involved, just static display. this.planetSprite = game.add.sprite(x, y, skin); this.planetSprite.scale.setTo(size); this.planetSprite.anchor.setTo(0.5); this.planetSprite.pivot.x = orbite/size; this.planetSprite.rotation = getRandomInt(0,360); The rotation and display is working fine but the coordinates are not updated after rotation. Is there a specific property to call to get new coordinates or should I manually calculate it? thanks
  22. I attach video example in blender. If we have box position (0,0,0) and if I set origion("Pivot") of box to (0,4,0) and if I rotate box about X axis I get this resoult (see video). How can I do this with Babylon.js? Can answare to this question with babylon.js code? Greetings Cand Kazam_screencast_00000.mp4
  23. hi, I just found out I had to multiply the pivot matrix values to compensate the object scaling is there no way to have the matrix transform applied AFTER the scaling ? mesh.setPivotMatrix(BABYLON.Matrix.Translation(10,0,0)); // got to multiply by 10 to compensate 0.1 scale ...mesh.scaling=new BABYLON.Vector3(0.1,0.1,0.1);also I found odd that "mesh" is used as the object holding everything instead of beeing the object holding only faces and vertices like in any other 3D api regards
  24. Phaser pivot doesn't work

    Hi guys, See my demo about this issue: http://phaser.azurewebsites.net/runner2/ Set the pivot to rotate the sprite doesn't work Regards, Nicholls