Search the Community

What I'm trying to accomplish is to basically write all my game logic in world units and use camera to see part of it rendered on the screen. Let's say my world is an infinite plane and I want to add a sprite, which will have dimensions of one unit in x axis and one unit in y axis. Then, I define a camera with dimensions of 4 units on x axis and 2 units on y axis. Visualization below. To get close to my desired result I followed the example in this blog post and used RenderTextureSystem to actually define source canvas dimensions equal to my world dimensions and target dimensions to the browser window size. Here is the code class WorldContainer extends DisplayObject { sortDirty: boolean; public content: Container; public camWidth = 4; public camHeight = 2; public camOffsetX = 0; public camOffsetY = 0; constructor() { super(); this.content = new Container(); } calculateBounds(): void { return this.content._calculateCachedBounds(); } removeChild(child: DisplayObject): void { this.content.removeChild(child); } removeChildren(): DisplayObject[] { return this.content.removeChildren(); } addChild(child: DisplayObject): DisplayObject { return this.content.addChild(child); } render(renderer: Renderer) { const targetWidth = renderer.view.width; const targetHeight = renderer.view.height; const targetRatio = targetWidth / targetHeight; const sourceWidth = this.camWidth; const sourceHeight = this.camHeight; const sourceRatio = sourceWidth / sourceHeight; let requiredWidth = 0; let requiredHeight = 0; if (sourceRatio >= targetRatio) { // source is wider than target in proportion requiredWidth = targetWidth; requiredHeight = requiredWidth / sourceRatio; } else { // source is higher than target in proportion requiredHeight = targetHeight; requiredWidth = requiredHeight * sourceRatio; } renderer.renderTexture.bind( null, new Rectangle(this.camOffsetX - this.camWidth / 2, -this.camOffsetY + this.camHeight / 2, this.camWidth, this.camHeight), new Rectangle((targetWidth - requiredWidth) / 2, (targetHeight - requiredHeight) / 2, requiredWidth, requiredHeight), ); this.content.render(renderer); renderer.batch.flush(); renderer.renderTexture.bind(null); } updateTransform() { super.updateTransform(); const { _tempDisplayObjectParent: tempDisplayObjectParent } = this.content; this.content.parent = tempDisplayObjectParent as Container; this.content.updateTransform(); this.content.parent = null; } } I have done some extra work to preserve aspect ratio of camera, when drawing to canvas, so it won't get stretched and will just fit the screen. However, real issue comes when I try to make sprites, because when I give it a texture and let's say dimensions of my texture are 64x64 pixels, then my sprite is huge filling the whole screen. That's when I thought just setting width and height of the sprite should be enough. For example to recreate the example in the picture above, I would make the sprite like this and add it to the content of world container. const sprite: Sprite = Sprite.from('sadge.png'); sprite.anchor.set(0.5); sprite.x = 1.5; sprite.y = 1.5; sprite.width = 1; sprite.height = 1; worldContainer.content.addChild(sprite); Now, what I don't like about this solution is, that when I add child sprite to that previous sprite and give it's x to be equal to 1, y to be equal to 0, I expect it to appear on second row and third column. However, not only the child sprite is not in my expected position, it's also not visible. After, hours of debugging I found out, that when setting width and height for parent sprite, under the hood pixi modifies scale and it ruins everything for child sprite. If, I set sprite's width height to be 1x1, it sets scale for sprite to be ( 4 / canvas_w, 2 / canvas_h), which is very tiny and because that scale is also applied to its children, they get so small that they are not visible. I know that I can manually multiply by inverse of the scale ratio for every child and cancel that effect, but to be frank it is very ugly solution. I was wondering if you could help me to fix this issue, or give me a directing advice on how to approach it. If feels like I am solving this whole world unit issue in a very wrong way and there is far simpler and neater solution. I've been struggling with this thing for weeks now and would really appreciate any help.

In many strategy games it's common that the world is larger than what you see on the screen, and the user will "drag" themself around the level to move around the world. How can I implement this in Phaser? I've seen examples to drag sprites within a level, but not to drag basically the camera view itself. Something like this example: http://examples.phaser.io/_site/view_full.html?d=world&f=fixed+to+camera.js&t=fixed%20to%20camera but where you are moving by dragging with either the mouse or the touch instead of the arrow keys

Hello everybody! Hope everyone is going well in the Babylon community ! My issue is simple : I use the mesh.rotate() function in order to rotate a mesh in the BABYLON.Space.WORLD. The function works great and my mesh rotate exactly how I want. The mesh.rotate() function use quaternion and so the rotation attribute is set to Vector0. But when the rotation is hover I would like to have the euler rotation back! To do so I use the mesh.rotationQuaternion.toEulerAngles() function But if I set the mesh.rotation = mesh.rotationQuaternion.toEulerAngles(); Then the mesh is rotating again on my screen like if the euler angles I get from the quaternion wasn't right. There is a lot of topics in this forum concerning this toEulerAngles function but after hours of reading and testing (even changing ZYX, YXZ orders), nothing is working! Is there an other way to get the euler rotation vector back from the quaternion? Or maybe a simplier way to rotate mesh around a world axis? Thanks for your help!

Is there a way (I'm sure there is) of expanding the world bounds and setting their coordinates and width and height properties? Otherwise the bounds stay the size of the view-port and I need them bigger. Thanks in advance.

Hello, i have this script which is based on the tutorial: i want the player to navigate through the world, but it's constrained to a 800x600 box, (as this is the world WxH), the "game" world is a GIF 4096x3500. maybe this is not the correct way, could you please lead me into the correct way? this is the code: http://cypunkdb.net/t/phaser/tut1b/part7.html thanks

Hi I have a newbie question that I feel silly asking but I couldn't find an example that demonstrated this yet. I have set the size of the canvas using the following code: var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'new-phaser-game', { preload: preload, create: create, update: update, render: render }); I have added a sprite that sits at the bottom of the screen full width (as expected) using the following: shapeMenu = game.add.sprite(0, 500, 'shapeMenu'); Now I would like to resize the world so that it sits inside this area with a margin around it (but inside the canvas). I have done this, but the world is sitting in the top left corner: game.world.setBounds(0, 0, 400, 400); Could any one advise on how I move this to the center of the screen (without moving the shapeMenu sprite as well)? Thanks!

Hi, I am trying to modify the 'Pick Up Object' phaser example: https://phaser.io/examples/v2/p2-physics/pick-up-object How it should work is that when a user clicks on one of the shapes at the bottom of the screen it should generate a new shape inside the yellow containing block. I want the shapes to restricted inside the yellow box so that they cannot pass outside. Here is my demo version: http://towerofconfidence.stage.pixeledeggs.com/test/index4.html I have tried the following code - but I am not sure what is going wrong with the boundaries - any help/suggestions would be much appreciated! var game = new Phaser.Game(640, 1139, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); // set the world bounds to match the yellow container game.world.setBounds(167, 0, 306, 500); // center camera game.camera.bounds.setTo(0, 0, 640, 1139); // load the background - this is larger than the screen var mainBG = game.add.sprite(0, -3622, 'mainBG'); // add shapes/buttons to the shapeMenu button1 = game.add.button(80, 760, 'button1', actionOnClickButton, this, 2, 1, 0); button2 = game.add.button(254, 800, 'button2', actionOnClickButton, this, 2, 1, 0); button3 = game.add.button(486, 770, 'button3', actionOnClickButton, this, 2, 1, 0); Then the logic for placing the shapes follows the 'Pick Up Object' example - using PS physics ands boundsCollisionGroup... Thanks!

So my problem is that I have a sprite that is giving me 0 for sprite.world.x and sprite.world.y (although it clearly isn't at 0,0). What's weird is that printing out the sprite.world.x gives 0 at first but adding a delay of 50ms it gives me the correct position (in case you're wondering nothing is happening during the delay) Below is the code snippet that i am using (just to be 100% sure). Basically I have a group (located at a certain position) with a specific rotation that has a sprite (the one I'm having issues with) at a certain location. The first printed out value is 300 (which obviously isn't true). I added a delay of 50 ms after the last line then printed out newR.world.x and got the correct value (813). The provided code snippet is the last thing I have in my create function (and the update function is empty). As stated previously nothing is happening by the time the delay starts till it ends (I am only left with the preload function).

So my problem is that I have a sprite that is giving me 0 for sprite.world.x and sprite.world.y (although it clearly isn't at 0,0). What's weird is that printing out the sprite.world.x gives 0 at first but adding a delay of 50ms it gives me the correct position (in case you're wondering nothing is happening during the delay) Below is the code snippet that i am using (just to be 100% sure). Basically I have a group (located at a certain position) with a specific rotation that has a sprite (the one I'm having issues with) at a certain location. The first printed out value is 300 (which obviously isn't true). I added a delay of 50 ms after the last line then printed out newR.world.x and got the correct value (813). The provided code snippet is the last thing I have in my create function (and the update function is empty). As stated previously nothing is happening by the time the delay starts till it ends (I am only left with the preload function). Note: I accidentally posted my question twice please ignore the duplicate. ( I couldn't find a delete button for my duplicate post)

Hi all, Hopefully, this is just something quick I'm missing... I have initialized my game with the resolution of 500x800 and SCALE_MODE is set to RESIZE; In portrait orientation, the game is the correct size of 500x800, however, when I rotate the device and would expect the game to now be 800x500 it is actually 500x313. I'm thinking I'm just missing something that I need to manually resize or update or something, but I'm having trouble finding what I need by searching around. Anyone know how to accomplish what I'm expecting? Thanks.

Hi, I just learned some basics of using tilemaps. I created a tilemap using Tiled, containing 32x32px tiles. The problem is, I can't resize the entire tilemap to fit the entire canvas. I need the layer in the tilemap or the world itself to fit the canvas. scale.setTo() works, but that's relative and I want to set the width and height to that of the game's canvas. Changing displayWidth and width doesn't seem to have any effects. The tilemap still appears small in the upper left corner of the canvas. Any suggestions guys? Code: var playLevel = { create: function() { this.map = this.game.add.tilemap('tilemap'); this.map.addTilesetImage('sewer', 'sewerTileset'); //Need to make this layer larger by a specified amount this.groundLayer = this.map.createLayer('Ground'); this.map.setCollisionBetween(1, 200, true, 'Ground'); this.groundLayer.resizeWorld(); }, update: function() { } } EDIT: I just found out that changing width and height DOES work. But for some reason, instead of the tilemap's width being 32 * 20 = 640, it returned 940, which is the width of the canvas. But the tilemap itself looks to be 640 pixels wide, so I don't know why the width and height properties don't correspond to the actual ones. So I guess I can't use it?

Hello everyone, I am trying to make the screen scale automatically based on the browser window. So I used the scale variable in world to scale it. I was trying to center it so I used the following code: this.world.x = Math.floor((this.game.width - Global.SCALE * Global.WIDTH) / 2); this.world.y = Math.floor((this.game.height - Global.SCALE * Global.HEIGHT) / 2); which didn't work nothing on the screen moved, I tried world.position.x/world.position.y and world.left/world.top and still nothing changed. Any help?

Hi all, Currently I try to rotate the game 90 degree to meet the portrait mode for my [landscape] game, I used other's solution to rotate all display object by this.game.scale.setGameSize(, ; and Phaser.World.prototype.displayObjectUpdateTransform = function() { if(!this.game.scale.correct) { this.x = this.game.camera.y + this.game.width; this.y = -this.game.camera.x; this.rotation = Phaser.Math.degToRad(Phaser.Math.wrapAngle(90)); } else { this.x = -this.game.camera.x; this.y = -this.game.camera.y; this.rotation = 0; } PIXI.DisplayObject.prototype.updateTransform.call(this); }; now all display object are rotated, but the pointer are not rotate, so when I want to do something with activePointer like: calculation with the mouse position drag and drop logic the x, y are reversed. So I want to know is there any good solution to switch the x, y of the pointer, thx.

Hi. My game size is : var game = new Phaser.Game(640, 780, Phaser.CANVAS, 'game'); I have resized it to : this.world.resize(640, 10000); player position : this.player = this.add.sprite(320, 9952, 'player'); this.camera.follow(this.player); When I am using scaling, such as : this.game.world.scale.set(2,2); or gofull: function () { if (this.game.scale.isFullScreen){ this.game.scale.stopFullScreen(); } else { this.game.scale.startFullScreen(false, false); } }, it set my player and camera position 0, 0 ( at the top of the game ), when using gofull() function it only changes position when fire stopFullScreen(), with startFullScreen() there is no problem I'm probably wrong to use resized world and scale.

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.

I made two maps with Tiled, start with Isometric then I have changed to Ortogonal and set the width to 32 pixels. I have a Javaascript function to read the JSON map and use "game.add.isoSprite" to show the sprites in Browser. When did I make maps with diferent sizes it didn't work in the same way. First town map (Stade 1): widh: 14 pixels height: 20 pixels this.hero.anchor.setTo( 0.5 ); Second town map Stade 2: widh: 20 pixels height: 8 pixels this.hero.anchor.setTo( 1.1 ); I set up the anchor with diferent value and then then hero walk over the map. // Set the First world size this.game.world.setBounds( 0, 0, (14+2) * 64, (20+2) * 32); this.game.physics.startSystem(Phaser.Plugin.Isometric.ISOARCADE); this.game.physics.isoArcade.bounds.widthX = 14 * 32; this.game.physics.isoArcade.bounds.widthY = 20 * 32; // Set the Second world size this.game.world.setBounds( 0, 0, (2 + 20) * 64, (2 + 8) * 32); this.game.physics.startSystem(Phaser.Plugin.Isometric.ISOARCADE); this.game.physics.isoArcade.bounds.widthX = 20 * 32; this.game.physics.isoArcade.bounds.widthY = 8 * 32; //Loop var oSprite = jogo.add.isoSprite(posX, posY, 0, imagemCarregada, qualSprite , group); oSprite.anchor.set(0.5); //hero this.hero.game.add.isoSprite(x, y, 0, loadImage, imagem , grupo); //In the First Map this.hero.anchor.setTo( 0.5 ); //In the Second Map this.hero.anchor.setTo( 1.1 ); I use a lot of values and didn't work equality in two maps. My englsh isn't good.

Hi there, I'm trying to zoom out the entire game world from the center.. unfortunately I see no method for the camera for zooming out so I'm scaling the game.world directly with this.game.world.scale.setTo(0.5, 0.5);Unfortunately, this scales around the top left of the screen. I've tried setting the anchor on the game.world as well as the pivot to the center of the world or the center of the stage to no avail. Is it possible to achieve what I'm trying to do? Thanks for any thoughts - Nick

Hi everyone, Here's my last BabylonJS project. It's a port of a previous one I had made with Unity. The concept is about Spherical Voxels. A sphere is divided in degenerated-squares, allowing to create a minecraft-like voxel terrain on it. You may try it here : http://svenfrankson.github.io/PlanetBuilderWeb/index.html And source code is available here : https://github.com/SvenFrankson/planet-builder-web Have a nice day !

Hi, Does anyone know what can be an issue? I am having a gap on the right and on the bottom with Phaser Box2d.

How can I find the pointer's x/y coordinates in the world? Can I convert between camera and world coordinates?

Hi, new to Phaser. I am having a little difficulty understanding the concepts of the Stage vs the World, which one controls what is rendered, and why they apparently don't match my Game dimensions. I am using Phaser 2.6.2. I create a Game with width 607 and height 1080 (16:9 portrait, would be pixel-perfect in fullscreen), and in my boot script I set scale mode to SHOW_ALL and set pageAlignHorizontally to true. In my first level, I set the game.stage.backgroundColor, and I create a group of buttons, and I set the buttonGroup.alignIn(this.game.world.bounds, Phaser.BOTTOM_CENTER). As expected, I see what appears to be the correctly sized rectangle, scaled down slightly to fit within my non-fullscreen browser window, with a row of buttons at the bottom. However, I noticed that there seems to be an "edge" in my game where rendering stops. I added a debug rectangle set to the bounds of my button group, and I didn't see it. I then set the y value to be bounds.y -100, to push it "up", and this is what I see: You can't see the pointer, but you can see the pointer debug location, the y value is 919, and the pointer is a the bottom edge of the visible part of the green debug rectangle (that should be the height of the buttons). And you can also see that rendering is getting cut off on the right, before the right edge of the Game (as seen by the background color). But yet - the buttons are still visible, and they are below the point where the rendering seems to be getting cut off? I then did some logging, and found out that the bounds of the World and the Stage do not match the dimensions of the Game (these are numbers for game.world.getBounds() and game.stage.getBounds()): world x: -156 world y: 0.5 world height: 75 world width: 920 stage x: -156 stage y: 0 stage height: 920 stage width: 920 Now, the 920 height of the Stage seems to match where the rendering is getting cut off at y = 920 in the screenshot. The World numbers make no sense to me at all, and I can't figure out what corresponds to the right side edge of the rendering. I was under the impression that without explicitly resizing the World, it would be the same dimensions as my Game? So my questions are: What is causing the rendering to cut off where it is? Does the World bounds define what gets rendered, or does the Stage bounds define what gets rendered? Why aren't my Stage and World dimensions the same as my Game, considering I did not explicitly size or resize either one? Why are the buttons still visible even though they appear below the line where rendering is getting cut off? If the Stage bounds do not match the dimensions of my Game, why did game.stage.backgroundColor appear to correctly color in the the background of what I expected the Game dimensions to be? Bonus question: The answer here: Says that you can put UI elements in the Stage.. should I be adding my buttons to the Stage? How exactly do you do that? I had added them by adding a group to the Game, then adding the Button objects to the group. Does that mean they live in the World? Or the Stage?

I am trying to implement a zoom/drag functionality with some menus over the map. Think of Age o Empires 3, you basically have a map on which you can do zoom and drag, but you also have som menus that are always over the screen. Check this for clarity. So far. I have implemented the zoom/drag by modyfing the x, y and scale attributes of game.scale. But this work pretty good when the scale is big enough to cover the whole screen. But what I need is some kind of viewport that is smaller than the screen (like in Age of Empires) where all the zoom/drag works. The remaining parts of the screen that are not part of the viewport are filled by the UI menus. So far I have put the menus outside the world like I posted here. I attached an image with what I mean by viewport and menus in case is not clear Thanks :)!

I have a complex modular character. The character has a parent (Anchor) mesh and many child meshes. I want to target FollowCamera on one of the child meshes (Head). When I assign Head to FollowCamera.lockedTarget the behavior is not desired. The camera points at coordinates that match the Anchor element. The camera appears to follow the local position of Head and not the expected world position. Check this play ground http://www.babylonjs-playground.com/#ZXP4M#11

Good day to all! I have a question on Phaser's world-to-screen transformations, and I've googled almost nothing on it Is there a way to transform a sprite's world coordinates into the screen space (and visa versa)? It is a very useful feature and I can't beleave nobody still interested in it! I found poor documented Sprite.worldTransform.tx, Sprite.worldTransform.ty,but I'm not sure these fields always work properly (to be honest, I am sure they don't). Thank you!

Hello, I can't seem to understand why this is happening: Here, I just want to load a tilemap made in Tiled, it's a 35*15 tile map, each tile is 64*64px as are the tile in my tilesheet (2240*960 in total). So I followed this example from Phaser (apparently some of them are not accurate...) and the layer doesn't resize. I get that on the browser the map is displayed with the total width and height inside the game element which has the size I want, and that's my problem !