Search the Community

Showing results for tags 'coordinates'.

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 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 26 results

  1. Hi guys, I'm trying to make 2D-shapes / 2D-sprites in my Canvas2D (ScreenSpaceCanvas) follow some sprites which are placed in my 3d world. For this, I'm using the BABYLON.Vector3.Project function as followed: However, this is the result: I've checked each of the arguments and they all contain valid values at the time of being called. I've also stumbled across this topic, which uses another 4th argument in the call, but I've had no luck trying it with that one either. Any ideas? Thanks in advance!
  2. Getting sprites from spritesheet

    Hi! I'm completely new to Phaser, and I'm not sure how to add sprites from a spritesheet (e.g. a tileset, or just a .png that is filled with various objects), even after the tutorial - is it possible? I read and tried the texturepacker tool, but it seems I still need the images to be on their own before I assemble them in texturepacker? The coordinates are a bit confusing too since I'm used to having 4 coordinates for adding sprites (x,y,w,h). Thanks in advance!
  3. Hello, Evaluating Web Audio API, for 3D sound, mixed HowlerJS with BJS without realizing: Oh, Babylon.Sound ... ? Whylookathat, lots of sound! : ) Thanks to answer below, with links. I will head that way. Related question is around WebAudio API AudioContext and -> compressors, oscillators, reverb, etc. with JS! +1. That should all be available through the AudioContext in Web Audio API... if there is an example. If not. I'll dig down, figure it out, and put it here.... : ) Applying 3D Sound with BABYLON.Sound. : ) Cheers.
  4. Given position and rotation Vector3-s, how do you convert to cartesian? I've found a C++ solution, but I get strange results in BJS
  5. Hi, I've searched the forum, but most questions and answers that I found relate to the reverse: convert World to Screed coordinates. The reason I need this is to launch a projectile in the direction of mouse coordinates when a user clicks on a screen. I tried the ray picking approach, but 1) it's too cumbersome and it didn't work, and 2) there's nothing to pick with a ray! I wonder if anyone here had the same issue and managed to find a solution. Cheers!
  6. Hi, it is my first post in this forum because I have a question with no answer. I have to draw differents spheres which represent the location of some cities (coordinates UTM). Firstly I have done the conversion to x,y pixels on screen. However after apply the ecuations the sphere doesnt appear, so the question is: which is the reference system that BabylonJS uses? If I define the positon of sphere for example position.x=8, it appear in the limit of screen.What is the meaning of the value 8? Thanks, JuanMa.
  7. Hello everyone, I need to find out coordinates when clicking on the ground. Don't know is it correct directory for that question. I have the FollowCamera, so when got click, need to get coordinates on the ground, don't even imagine how to do that. Need a theory. //////////// added Ok, I got it, Im using the ray. var ray = new BABYLON.Ray(camera.position, camera.getTarget().subtract(camera.position)); When I'm clicking it shows me the target position on the ground. But how I can create the ray from the cursor position and camera direction? Is there some way to get cursor position relatively camera?
  8. Canvas vs Screen Coordinates

    What is the difference between canvas and screen coordinates? I notice that in some frameworks it is very important.
  9. Hey everyone! So I'm pretty new to Phaser and I'm having a hard time making the player's bullets stop at a certain point (e.g killing the projectile at around 30px after its original position, etc). I want the player to have a limited projectile range and I'm just wondering how you can implement that because all my attempts of trying to figure it out have failed so far, so I'm seeking help from you guys... Thanks for any advise!
  10. getBounds not world coordinates?

    It seems that Sprite.getBounds returns camera-relative coordinates. The docs say "Returns the bounds of the Sprite as a rectangle. The bounds calculation takes the worldTransform into account" which would indicate to me that they give world coordinates. However, looking at the code a bit, it seems that in a simple game you might have the hierarchy: Stage -> World -> Group -> Sprite And if the camera is at position (100,100), then that means the World's transform is at (-100, -100). Then, when getBounds is called on the sprite, it traverses its parents, accounting for all transforms, and thus the camera's (-100, -100) is included. Is this a bug? At least in the documentation? I can work around it easily enough (add the camera's coords to what getBounds returns), but it made me pull some hair out (: I'm using Phaser 2.4.4 Here's another forum post about the same issue, FYI:
  11. Hi! I'm trying to apply one filter to a large number (~256) of small (32x32 px) sprites. Within the filter, I'm using vTextureCoord to get the current sprite's coordinates, to draw borders on it. vTextureCoord breaks, apparently referring to the containing canvas's coordinates instead of the individual sprites' coordinates. BUT if I apply that same filter twice (two elements in .filters[] array), in one of the copies vTextureCoord actually does point to the sprite coordinates, and borders are drawn correctly. The other copy still points to the canvas coordinates, and the whole thing becomes laggy for some reason, and filters don't get removed when they should, too. Live version (hover over the individual sprites to apply filter second time): All the sprites are white-tinted because of the first filter invocation, with incorrect vTextureCoord coordinates. Code: Shader First filter application Second filter application Hover is just for the sake of illustration, if I apply filter twice statically to all sprites, the behavior is still the same. Thanks for your time!
  12. Hola hola, So I am working on a 2D basketball game. I am using 2 small sprites (with circular physics bodies) on each side of the basket rim for collision detection with the ball. I parented the 2 sprites to the backboard so I could move them all together (as shown in the child sprite example). I turned on the debug draw for the physics bodies and found the 2 bodies were not in the same position as the sprites. //Load net sprite =, 200, 'net');; //Add hoop children markers this.leftMarker =, 60, 'marker')); this.leftMarker.anchor.setTo(0.5); this.rightMarker =, 60, 'marker')); this.rightMarker.anchor.setTo(0.5); I parent them like so.. but my physics bodies don't act as if they are parented. They should be at the same position as the sprite, but instead they are (-66, 60) and (66, 60) from the top left corner (0, 0) instead of (-66, 60) and (66, 60) from the parents position (world center x, 200). You can see the attached image as an example. Is there something I am missing? Is this the way it's supposed to be? Can I somehow update the physics bodies to line up with the sprites easily?
  13. Good day, I have been struggeling with this issue for a few days, I am also quite new to Phaser, so please forgive me if this is a newbie question. I am currently working on a project regarding a destroyable map with p2 physics. I have been using Physics editor to capture the maps size in a JSON file and all that seems to be working fine, also I am creating the map as BitmapData object which also is working fine. But once a part of the map is being destroyed, it needs to recalculate the physics properties which obviously doesn't happen. The solution for me - I am going to get the boundaries of the map (its a small scrollable map not more than 1.5k pixels in width) and triangulate the smaller objects which create the shape myself, which means that if a part of the map is destroyed it will recalculate the physics properties. The issue here is that I simply can't get the boundary pixel positions of a map this size for the triangulation library, my browser simply crashes, for smaller objects it actually works fine and everything is working smooth! Only if I put larger pictures in the example, it crashes... I am using contour.js marching ants algorithm from D3 an example is demonstrated down below to get the contour. Maybe there is a better solution to detecting contour pixel positions of larger objects in Phaser? Why is this example not working with larger png objects? And yes.. I also need to detect the transparent area
  14. screen coordinates vs. world coordinates

    Hello, I'm quite new to pixi, so I'm wondering about the following: how can I specify the game world size independent of the screen container size? E. g. I want to transform my 20x16 tiles game from manual canvas drawing and scaling to pixi, for ultimate awesomeness ;-) and of course the screen container should be bigger than 20x16 pixels. How can I specify this? And, in addition, how can I specify sprite size in world units, not pixels?
  15. Hi! i have a scene with some meshes and a FreeCamera, i interact with meshes using a Leap Motion. The user hands are represented by two cursors (two spheres in the scene). I need to set the cursors position relative to the camera orientation too. At the moment i managed to do it relatively to camera translation, the cursors correctly follow the camera position in the scene. I can't set the correct cursors position if the camera rotates. This is the code: handCursorR.position.x = (camera._currentTarget.x) + frame.hands[0].palmPosition[0]/motionScaleFactor; handCursorR.position.y = (camera._currentTarget.y-10) + frame.hands[0].palmPosition[1]/motionScaleFactor; handCursorR.position.z = (camera._currentTarget.z+10) -frame.hands[0].palmPosition[2]/motionScaleFactor;
  16. Hello, I want to convert the coordinates from a mouse click to canvas coordinates. The coordinates generated by jQuery.PEP "pointerdown" event are apparently "world" (browser?) coordinates, they are not canvas coordinates. I am also using the "hit" testing, which is fine for "selecting" meshes. But now I want to engage the canvas for "missed" hits, and respond to those clicks as well. Where might there be a "simple" translation I can use that doesn't involve a "positive" hit? Thank you... Michael Powell
  17. I've spent several hours going through the API, the phaser.js code itself, and Googling as much as possible but I have not been able to find a clear answer: can the X or Y value of a tile be negative? For example, doing Doesn't seem to work. The rest of the tilemap (using positive coordinates) is displaying, but this negative one is not. I cannot tell if this is because Tilemaps ignore negative coordinate tiles, or if there is some aspect of the camera, stage, world bounds, camera bounds, that I am not aware of preventing it from rendering. I've tried changing the position of the TileMapLayer to be offset from the top left of the world but it didn't work. I've tried lots of different things with the camera to see if existed but just wasn't showing. My results are inconclusive to me, though. If I am going about this all wrong, please let me know. The basic premise is, I want a Tile with a coordinate of 0,0 to be the center of my world. I want it to expand in all four directions an indeterminate amount of tiles. This is because the game is multiplayer and would potentially need to scale much larger if the player base grew. The tile data is dynamic and is sent from the server to the client.
  18. 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
  19. Collision Coordinates Arcade Physics

    I have two arcade bodies that collide with each other. Is there any way to single out the XY coordinates of the collision that takes place? Thanks much!
  20. Scaling Matrix

    I read this blog post by OkijinGames: In the post, he explains how he handles scaling: Is there any way to do this in Phaser? The way I used to handle scaling was to apply a scaling factor to everything in the game, but OkijinGames' method seems much more convenient.
  21. Sprite Positioning Issue

    Hello guys, My player has a sprite that follows it everywhere. In order to follow it, I read I had to use body.velocity because if the x/y coordinates are used directly it will mess up the collision detection. So everything worked fine until I ran into a particular scenario. When my player jumps on top of a moving sprite and stands still, Phaser sees my player's velocity as zero. The player has zero velocity relative to the moving sprite because its on top of it, but relative to the screen it is still moving. That makes sense, but the sprite that follows the player stops following it completely since it reads the player's velocity as zero. They begin to drift apart as the player moves away on the moving sprite. Again, I would use the x/y coordinates but I cant do that since collision detection will not work. Is there a work around for this?
  22. Hello again. So as stated in the topic title i want to know if there is any alternative for getHeightAtCoordinates function. Here is the solution i thought of: I have a ground 3000x3000 loaded with createGroundFromHeightMap. The problem with getHeightAtCoordinates is that it is too slow. For instance if i have a set of 200 points and if i try to find out the y coordinate for each one using a for loop, the y is set to 0. One solution i thought of(knowing that the ground is not going to change) is to remember in an array all the y coordinates of all points (i know there are 9 000 000 y coordinates for the whole map) - or for the active part of the map; the first time i load up the map. My question would be, is there anyway i can compute the y coordinates, without relying on getHeightAtCoordinates? Thank you in advance. Note: I'm only interested in height where coordinates are whole numbers (ex: y where x=1.0 , z=2.0)
  23. I'm very new to Babylon.js and have spent a few days reading through the docs and forums, but I haven't been able to find a good answer for this. Let's say I have a rotating and scaled cube in my scene and I want to get the absolute position of each vertex. I found this topic for translating world coords to screen coords: but so far I can only figure out how to get the position of the mesh itself, not for its vertices. In fact, even after digging around in the mesh object, I can't even find where the vertices are stored. How do I get the coordinates of a mesh's vertices so that I can translate them to screen coords so I can draw debug lines on a canvas?
  24. I working on my first game in Phaser, a pirate baking sim, where the player controls two hands using mouse and keyboard and interacts with items on the kitchen bench. BUT I got stuck on a specific problem: I would like to be able to find a point under the 'hands' of the arms, so that I can use that to add items in the correct place in the gameworld, and I want to use the same point to identify what is under the 'hands', so that the user can interact with and pickup items. The x and y coordinates of righthand.getBounds() are close to correct, but I suspect that is not the correct approach. The arms are currently just plain sprites, fixed to the camera and anchored to rotate around the bottom center edge. // right armthis.rightHand = this.handsGroup.create( 1074, 800, 'righthand' );this.rightHand.scale.set(0.75 , 0.75 );this.rightHand.anchor.setTo(0.5, 1.0);this.rightHand.frame = 0;this.rightHand.rotation = this.arms.rotR;this.rightHand.fixedToCamera = true;Is there is an easy solution or am I modelling my game incorrectly? The (unfinished) pirate baking game with graphics, music. hookhands etc is here: I've attached a zip file with a cut down version of the code (feel free to use it to make yer own pirate arm waving game, arrrr! The attached code omits the heaving bench and sliding objects. Thanks, Marcel
  25. Hello! I have a code: w = window.innerWidth * window.devicePixelRatio, h = window.innerHeight * window.devicePixelRatio; holdLeft = game.add.button(w/2.892, h/1.3092, 'holdLeft', this.holdLeft, this); And I have problems setting coordinates to this sprite, for example, I don't know exactly where this one should be and I need to think out some coordinates but then I always need to change it again and again Maybe there is some another easier way to do it? Thank you in advance! I will really appreciate!