Search the Community
Showing results for tags 'coordinates'.
-
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 this.net = this.game.add.sprite(this.game.world.centerX, 200, 'net'); this.net.anchor.setTo(0.5); //Add hoop children markers this.leftMarker = this.net.addChild(this.game.make.sprite(-66, 60, 'marker')); this.leftMarker.anchor.setTo(0.5); this.rightMarker = this.net.addChild(this.game.make.sprite(66, 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?
-
Guys, hi, spent couple hours to figure out how to combine local and global coordinates. The issue: I have a stage, there is a gameboadr on this stage, the gameboard holds many elements with coordinates related to this gameboard. Then I add element on game stage. It is animated effect. So when I click on element on the gameboard. It passes itself as parametr to that animation and trigger it. But, animation is displayed in a wrong place (it just need to be on the stage, not on gameboard). What I try to do is simply display that effect on top of the element. The gameboard scale is 0.5, the element is scaled to 0.9, the effect scale is 1, the anchor for all objects is 0.5. The relation as follows: app.view (pixi app/canvas)->> Game.stage (where effect is placed) ->>Gameboard->> Elements I did as follows: Animations.rocketRun = function (elementOnBoard) { let frames = []; for (let i = 0; i < 25; ++i) { frames.push(PIXI.Texture.fromImage(picture_' + i + '.png')); } let anim = new PIXI.extras.AnimatedSprite(frames); //anim is my effect should be put on top of elementOnBoard,so actually cover it, only of X axis //anim.x = -319 + CELL_SIZE + SPACE; manual calculation, bad approach //anim.x = Game.stage.toGlobal(elementOnBoard.position).x;// wrong //anim.x = Game.stage.board.toGlobal(elementOnBoard.position).x;//wrong //anim.x = elementOnBoard.parent.toGlobal(elementOnBoard.position).x); //like on tutorial, but got Cannot read property 'toGlobal' of null, on tutorial is says: "And it will work even if you don't know what the cat's parent container currently is." anim.x = elementOnBoard.getGlobalPosition().x; // finally supposed to be the best one, but... Game.stage.addChild(anim); anim.anchor.set(0.5); anim.animationSpeed = 0.1; anim.loop = false; anim.play(); }; P.S. I found a solution during making this post. The problem was, I think scale. I simply adjusted the coordinates calculation of my effect as below (multiply on scale, and deducted one of my constant - manual adjusment points). Indeed there is some inaccuracy, not sure why, but I adjusted by adding custom number. Could you explain why? Thanks, anim.x = elementOnBoard.getGlobalPosition().x * 0.5 - SPACE-19;
-
There is a way to move the game stage or it's permanently locked to 0,0? I would like to be able to set its x,y like this... var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, 'test', { preload: preload, create: create }); game.x = 10; game.y = 10; Is this possible? PS: I tested the above and obviously it didn't work. I checked documentation and see that there is no x,y properties available for Game class but I was wondering if there is any hack. I can recalculate all my assets coordinates to achieve the result but it would be too much simpler if I could just move the game stage around... Thanks!
-
Hello phaser.io community. Here are two addresses for the same phaser.io example. One is hosted on the official site, and the other by me: https://phaser.io/examples/v2/input/game-scale http://olli.wtf/battleground3/scale.html Their javascript content should be identical, but the trouble is that I'm seeing inconsistent behavior on the example hosted by me. Steps to reproduce: 1. Open Chrome desktop browser (I'm on Windows 7 64-bit Home Premium, Chrome 64.0.3282.140 (Official Build) (64-bit)) 2. Activate Chrome's developer tools (pressing F12) 3. Toggle device toolbar on and select iPad from the toolbar, so that a touch device can be emulated 4. Open the example page: https://phaser.io/examples/v2/input/game-scale 5. When the example has loaded, click on one of the melon sprites in the right side of the screen, and take note of the "World X" coordinate in the debug panel 6. Using the keyboard arrow keys, scroll the camera enough to the right so that the melon sprite that was originally clicked is now on the left side of the screen 7. Click the same melon sprite again and take note of the "World X" coordinate again 8. Compare the two "World X" coordinates. They should match, and at this point they do. 9. Repeat steps 1-8, but in step 4 open the same example that is hosted by me: http://olli.wtf/battleground3/scale.html. Result of step 8 then is that the "World X" coordinates do not match. Since the javascript content should be the same in both examples, tackling this is a little difficult. Is there maybe some deployment process I'm missing that would add extra javascript/css etc?
-
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!
-
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!
-
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 replies
-
- 1
-
-
- coordinates
- solved
- (and 3 more)
-
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
-
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!
-
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.
-
What is the difference between canvas and screen coordinates? I notice that in some frameworks it is very important.
-
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?
-
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!
-
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:
-
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): http://uoowuo.github.io/cellulata/ All the sprites are white-tinted because of the first filter invocation, with incorrect vTextureCoord coordinates. Code: Shader https://github.com/uoowuo/cellulata/blob/master/src/classes/shaders.js#L48 First filter application https://github.com/uoowuo/cellulata/blob/master/src/classes/cell.js#L42 Second filter application https://github.com/uoowuo/cellulata/blob/master/src/classes/cell.js#L83 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! -
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.
-
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. http://stackoverflow.com/questions/28207232/draw-border-around-nontransparent-part-of-image-on-canvas 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 -
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?
-
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;
-
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 -
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
-
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)
-
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!
-
I read this blog post by OkijinGames: http://okijin.com/blog/index.php/responsive-and-device-independent-html5-games/ 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.
-
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?
