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
    • Haxe JS
    • Kiwi.js
  • 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 guys, See my demo about this issue: Set the pivot to rotate the sprite doesn't work Regards, Nicholls
  2. Hi all, I'm playing around with PIXI and using what I know of autonomous agents in Processing to help me along the way. I used Processing extensively about 2 years ago and integrated a lot of Craig Reynolds' work into my projects (ie autonomous agents, steering, boids etc). To learn that I used the wonderful book The Nature Of Code by Daniel Shiffman. Chapter 6 of this book is on autonomous agents and moves from steering into a boids algorithm using Processing. The section related to my question is "Example 6.1: Seeking a target" (if you can visit the page for Chapter 6 - Autonomous Agents and look at Example 6.1 as it has an embedded applet showing the intended results of what I'm trying to achieve. Note how nicely the triangle just turns to be facing the direction it is moving). I've been able to rewrite most of that example in JS/PIXI but I'm having trouble with the vehicle rotating to face the mouse. The relevant section from the full Vehicle Class code is: // Draw a triangle rotated in the direction of velocityfloat theta = velocity.heading2D() + PI/2; //this line in particularfill(127);stroke(0);strokeWeight(1);pushMatrix();translate(location.x,location.y);rotate(theta); //the Vehicle is rotated by the angle calculated by heading2D() abovebeginShape();vertex(0, -r*2);vertex(-r, r*2);vertex(r, r*2);endShape(CLOSE);popMatrix();What I cannot figure out is how to translate the float theta = velocity.heading2D( ) + PI/2; line into something usable by PIXI and then correctly rotate the triangle primitive I have drawn with PIXI.Graphics( ). My 'Vehicle' is also an object that draws the triangle and moves towards the mouse and does everything expected except rotate to always the direction it is travelling. My current line of code to attempt to replace the PVector.heading2d( ) method from Processing is this.heading = Math.atan2(this.velocity.x, this.velocity.y);Which is followed up elsewhere with graphics.rotation = this.heading;I'll admit it's a reasonably blind attempt at hoping to stumble upon a working result as I don't truly understand how to rotate a primitive (filled triangle in my case) by the angle derived from the direction it is travelling. What happens when I run my steering example with the above two lines included is exceptionally erratic rotating - alternating between two rotations so fast in fact that it gives the appearance of there being two triangles. Is someone able to help me understand how to rotate a triangle primitive to be facing the direction it travels as seen in the quoted Processing code line? float theta = velocity.heading2D() + PI/2;I need to implement whatever calculation PVector.heading2D( ) does, but that is what I can't figure out. Many thanks!
  3. people i got this: this.sheep.forEachAlive(function({ nuevodiskette.x = b.body.x; nuevodiskette.y = b.body.y; nuevodiskette.angle = b.angle; b.angle++; }, this);why the two sprites rotates at same speed but in different x and y? they are supposed to be one on front of the other !!?? any idea?
  4. Hey GameDevs, I'm using TexturePacker to make a sprite atlas. When I use the 'MaxRects' setting it makes an optimized sprite sheet, rotating some of the images to tuck them all in nicely. But when I run my game I receive this message from the console: Phaser.Loader - textureatlas[spritesheet]: Texture Error: frame does not fit inside the base Texture dimensions [object Object]and each sprite appears as the whole sprite sheet. However, if I set Algorithm to 'Basic' instead of 'MaxRects' the resulting sheet contains all the images without rotation, and the sheet works perfectly in my game. But the sprite sheet image dimensions are way bigger than they need to be and there is a lot of wasted space. Has anyone come across this? Is there a line of code in Phaser I can use to get around this issue? Thanks for your help!
  5. Hi there, noob here. I'm looking for a way to make the FreeCamera rolling (rotating around Z axis) using keyboard, a key for clockwise rotation and another for reverse clockwise rotation. This way I can control for instance a spaceship in 1st or 3rd person POV in space. I've games like Wing Commander or Descent in mind. Sorry if it has already been answered, I've not been able to find it. Thanks in advance.
  6. Hey guys, I wanted to use the lookAt function and then get the rotation of the mesh. But it seems the rotation doesn't actually change when using lookAt. Why is that? And is there a way to get the new rotation somehow?
  7. goide

    Rotation Animation

    A question. I need to rotate an animation, in the direction of another object. Create a method that allows me to do this. but for a sprite, but when I try to type an object animation, but does not rotate. watch the video, which have two methods, which are angles to me to turn my animation, you work to perfection and the other not. Video: Look how the sprite with the same angle, pointing to my hero. and when I use the animation with the same angle and not pointing to it. and when I change the method by spinning according to the pointer, rotating smoothly. the animation changes its angle to the method I use for the angle of the pointer, but the method if it works, to change the angle for the sprite. but to change the angle of the animation is not working. why?
  8. Thanks to this amazing forum I have learn a lot of things, I have not found the function mesh.LookAt(mesh), does it exists? Im my demo I can move the text around the pivot but the text should be always looking at the point zero. How can I do that?. How to I get the normal of the plane?, UpVector, DownVector, etc.... ? Thanks
  9. Is there a way to make the arcRotateCamera snap to certain points? I want it to snap to areas of interest when its being spun around only on the Y-axis.
  10. Hello! For my project I want to re-arrange an interesting feature: the rotation of the object by clicking in the right direction (and of its movement) on the principle of moving the spacecraft to point and rotation to the desired degree. How can I make such a function? Example attached.
  11. Hi, yesterday i was struggling with rotation of an enemy. In my game you drive a spaceship and the enemies should rotate to your location in the nearest way (left or right), so they can follow you. This seems to be simple, but i find some problems in the rotation degrees. First i have to find the angle that the enemy should have, to point to my spaceship. I find two ways to do it. The first doesn't work: angle = game.physics.arcade.angleBetween( this , player ); // returns angles between something like 3.1 and -3.1// ( this = Enemy class )I don't know why. Maybe because i am using p2 physics and not arcade? The second works: angleRadians = Math.atan2(this.position.y - player.position.y, this.position.x - player.position.x);angle = Math.atan2(this.position.y - player.position.y, this.position.x - player.position.x) * 180 / Math.PI;// returns 180 to -180So i use that instead. Here I find something strange, the 0┬░ angle in the Enemy is on Top. But, the 0┬░ angle returned in the var angle is on the left. ( both ways in clockwise ) Finally i try doing something tricky like this, but doesn't work properly: if( this.body.angle+180 - angle-90 <= 180 && this.body.angle+180 - angle-90 >= 0 ){ this.body.angle += .6;}else{ this.body.angle -= .6;} May if I figure out why the degrees are different, i can get it work. Thanks!
  12. Greetings to all.I go straight to the point - I can not make the turn the ship according to the direction of flight. There is a lack of experience and knowledge. Please help.I laid out a project on their own domain and put the source code. Thanks in advance. And finally the question - who can help with the project by writing tips? Also, I can tell you about all those interested in the project through private messages.
  13. Hello, I try to make a shooter game with Phaser 2 but i encounter problems to rotate the player sprite and the player hitbox in the same time ... I simplidied my code to keep only the rotation of player : function create() { game.physics.startSystem(Phaser.Physics.ARCADE); player = game.add.sprite(200, 200, 'player'); game.physics.arcade.enable(player); player.anchor.set(0.5, 0.5);}function update() { // player rotation player.rotation = game.physics.arcade.angleToPointer(player); // hitbox rotation player.body.rotate = game.physics.arcade.angleToPointer(player); // player.body.rotation = game.physics.arcade.angleToPointer(player);}function render() { game.debug.body(player, "#9090ff", false);}Result : Init : player_rotate1.jpg And when i move the mouse : player_rotate2.jpg And What i try to make : player_rotate3.jpg Second question : Can i change hitbox type into a circle with Arcade library ? I made it with Box2D library : game.physics.box2d.enable(player);player.body.setCircle(14);but i don't want import two librarys ( and i can't rotate the player with this library ) Regards, Spalac
  14. Is it possible to change the default 0 point of a sprite's rotation? So when a sprite rotates to say 135*, 135* becomes the new 0 point? Help is greatly appreciated!
  15. Is it possible to change the default 0 point of a sprite's rotation? So when a sprite rotates to say 135*, 135* becomes the new 0 point? Help is greatly appreciated!
  16. I'm using Phaser 2.3.0 and I want to know the bounds of a rotated sprite. But when I change sprite.rotation, the values of sprite.getBounds() don't change: var sprite = game.add.sprite(0, 0, "sprite"); // game.load.spritesheet("sprite", "spritesheet.png", 32, 32);console.log(sprite.getBounds()); // Object { x: 0, y: 0, width: 32, height: 32, type: 22 }sprite.rotation = 0.52; // 30┬░console.log(sprite.getBounds()); // Object { x: 0, y: 0, width: 32, height: 32, type: 22 }What's wrong?How can I get the correct bounds?
  17. Stephen Persson


  18. Hi! Is it possible to render a rotated DisplayObject into a RenderTexture. Atm it looks like "RenderTexture.render" and "RenderTexture.renderXY" just ignores rotation on the object. My current solution is to use "BitmapData.draw" which works fine. But I'm still wondering why RenderTexture ignores the rotation? Cheers, Klaus
  19. Hello developers, I want to ask you a question ( it could be silly but I can't find anything that works in the forum or other articles ). I want to rotate one line around a circle and I will attach an image to understand me perfectly what i mean. So i searched a lot about rotation of sprites with Phaser but I can't find a working example or a working function that will do what I want. I'm pretty sure my thing is not a big deal so it should be available to be done. I hope you can help me, Nick.
  20. I have one sprite with shots I need to make array from texture and use them later. To make sprite I used TexturePacker and some frames was rotated. So I have the next code from json file exported by TexturePacker var frames = [{"filename": "11_protoss","frame": {"x":403,"y":387,"width":58,"height":37},"rotated": true},{"filename": "11_terran","frame": {"x":433,"y":377,"width":42,"height":6},"rotated": true}]To rotate texture I used DOC and generateTexture() texture = new PIXI.Texture(baseTexture, frames[i].frame);if (frames[i].rotated) { doc = new PIXI.DisplayObjectContainer(); sprite = new PIXI.Sprite(texture); sprite.rotation = - Math.PI / 2; doc.addChild(sprite); texture = doc.generateTexture();}Everything fine in Chrome, but all rotated in FF without transparency.
  21. Hi folks, here I am bothering you on this forum hahaha. I've tried, unsuccessfully, to rotate a tree so it can be perpendicular to the surface of an sphere at some point. You can see what I did at (I have use, without his permission, @Temechon trees, you can visit his tutorial here) The trees positions are genereted by using a random theta and phi angles: Here is a pic And heres is another Thanks in advances and sorry for my bad english
  22. Hey guys, I have noticed that when I rotate my sprite by altering the angle, the physical body of the sprite doesn't get rotated. Any ideas why? Here is my code: preload: function() { this.starShip = this.add.sprite(,, 'starShip'); this.starShip.anchor.setTo(0.5, 0.5); // Needed for the collision detection; }, update: function() { // Player turns left if (this.cursors.left.isDown) { this.starShip.angle -= 3; } // Player turns right else if (this.cursors.right.isDown) { this.starShip.angle += 3; } }, render: function() {; }And here is the result: Thanks
  23. Hi, I'm relatively new to Pixi. I have a problem similar to the one mentioned in this post: I used the code from the post and it worked seamlessly. However, when i began rotating the Sprites the offset became wrong, and the sprite jumps to another location when i begin dragging it. Do i have to use some trigonometric function to reverse the rotation? How can I do this? Here is a version with rotation: Here without rotation: Thanks in advance! Felix
  24. I am using some art of a player character for a top down game I am making - the art is here: The sprite is orientated so that the mage's face / front is facing upward (north). I'm having some issue with rotation, with both mouse movement and keyboard movement. For example, I have this "hack" that adds additional radians to a calculated angle in order to get the mage's "front" to face the pointer instead of the right shoulder: this.rotation =, pointer) + 1.57079633; Is there an easier way to handle this? I'm running in to the same issue attempting to use angular velocity for keyboard movements:, 300, this.body.velocity); The goal is to get wasd to rotate and move the character similar to the example here: What is the best way to get the front of the sprite to face the direction the sprite is moving? I will also be having objects that "shoot" out from the front of the sprite, which will have to be based on it's rotation so I'd rather calculate the offset a single time instead of all over the place... Let me know if this makes sense. Thank you!
  25. Hello, I am very very new to phaser and just started playing around with it. I am trying to find a way in which i can rotate (using rotation, angle or any other method can be advised) the world of a game in which the center point of rotation is the center of the camera, and not position 0,0 of the world itself. This means the center point for rotation is dynamic and based on the center point of the current camera. Is it possible to do with phaser? I believe I am looking for a way to offset the point of rotation for the world object of the game. Thanks in advance Eli