Search the Community

Showing results for tags 'world'.

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 54 results

  1. '' gives 0 at first

    So my problem is that I have a sprite that is giving me 0 for and (although it clearly isn't at 0,0). What's weird is that printing out the 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 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).
  2. '' gives 0 at first

    So my problem is that I have a sprite that is giving me 0 for and (although it clearly isn't at 0,0). What's weird is that printing out the 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 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)
  3. Make tilemap/world fit in game?

    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() { ='tilemap');'sewer', 'sewerTileset'); //Need to make this layer larger by a specified amount this.groundLayer ='Ground');, 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?
  4. 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.
  5. Changing world position

    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: = Math.floor(( - Global.SCALE * Global.WIDTH) / 2); = Math.floor(( - 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/ and still nothing changed. Any help?
  6. how to rotate pointer's X Y

    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, ; and Phaser.World.prototype.displayObjectUpdateTransform = function() { if(! { this.x = +; this.y =; this.rotation = Phaser.Math.degToRad(Phaser.Math.wrapAngle(90)); } else { this.x =; this.y =; this.rotation = 0; }; }; 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.
  7. Game world scale problem

    Hi. My game size is : var game = new Phaser.Game(640, 780, Phaser.CANVAS, 'game'); I have resized it to :, 10000); player position : this.player = this.add.sprite(320, 9952, 'player');; When I am using scaling, such as :,2); or gofull: function () { if ({; } else {, 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.
  8. 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.
  9. 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 0, 0, (14+2) * 64, (20+2) * 32);; = 14 * 32; = 20 * 32; // Set the Second world size 0, 0, (2 + 20) * 64, (2 + 8) * 32);; = 20 * 32; = 8 * 32; //Loop var oSprite = jogo.add.isoSprite(posX, posY, 0, imagemCarregada, qualSprite , group); oSprite.anchor.set(0.5); //hero, 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.
  10. Spherical voxels

    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 : And source code is available here : Have a nice day !
  11. Phaser Box2d Bounds are leaving a gap?

    Hi, Does anyone know what can be an issue? I am having a gap on the right and on the bottom with Phaser Box2d.
  12. 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(, 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 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?
  13. 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 :)!
  14. 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
  15. World not scaling with resizeWorld

    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 !
  16. How World Works ?

    Hello ! How world works in Phaser ? The elements of the world are in an array and the objects inside the camera are taken from the array and rendered ? Is the world divided in 'chunks' and some parts are rendered ? Thanks a lot.
  17. How Camera works ?

    Hello ! I'm currently making a custom engine in JavaScript (canvas). I already did sprites, particles, events (touch, keyboard, mouse) and a basic script to render tilemaps (no scrolling yet) I want to code the scrolling, camera and world system. If I create a game with a world of 30,000 pixels width and 15,000 pixels height, and my camera is in 800x and 800y for exemple; should I: -Call render and update functions for every element in the world (even if they are outside the canvas) -Get elements who are in the camera to update and render them. - Should I do something else ? What is the best thing to do ? Thanks
  18. onWorldBounds callback not firing

    Hello, I am trying to make a small basketball free-throw game similar to the emoji basketball game on Facebook. I was following along with an example from Phaser (World Bounds Event) to try to respawn the ball when it hit the edge of the screen. I've tried to implement that below (see code) but the respawn function never fires. Does anyone know what I'm doing wrong? Envirolympics.TestGame = function (game) { //Variables this.score = null; this.scoreText = null; this.ball = null; = null; this.leftMarker = null; this.rightMarker = null; this.launched = false; this.lastPointerPos = null; //Constants this.GRAVITY = 980; this.SHOOT_FORCE = 850; this.EDGE_CUSHION = 10; }; Envirolympics.TestGame.prototype = { create : function () { //Load net sprite =, 100, 'net');; //Add hoop children markers this.leftMarker =, 40, 'marker')); this.leftMarker.anchor.setTo(0.5); this.rightMarker =, 40, 'marker')); this.rightMarker.anchor.setTo(0.5); //Load ball sprite this.ball =, - 100, 'ball'); this.ball.anchor.setTo(0.5); //Setting up the physics environment; = this.GRAVITY; //Setting up the ball physics; this.ball.body.bounce.setTo(0.35); this.ball.body.moves = false; this.ball.body.velocity.setTo(0, 0); this.ball.body.allowGravity = false; this.ball.body.collideWorldBounds = true; this.ball.body.onWorldBounds = new Phaser.Signal(); this.ball.body.onWorldBounds.add(this.respawn, this); //Enable input this.ball.inputEnabled = true;, this);, this); //Initialize this.score = 0; this.scoreText =, 10, 'pixel', this.score, 36); this.lastPointerPos = new Phaser.Point(0, 0); //For mobile Phaser.Canvas.setTouchAction(, "auto"); = false; }, update : function () { //TO DO: //detect collision with net markers //determine if scored //respawn }, track : function () { //Update the last finger position this.lastPointerPos.x = this.input.x; this.lastPointerPos.y = this.input.y; //Set the ball physics to be still this.launched = true; this.ball.body.moves = false; this.ball.body.velocity.setTo(0, 0); this.ball.body.allowGravity = false; }, launch : function () { if (this.launched) { this.launched = false; this.ball.body.moves = true; this.ball.body.allowGravity = true; //Get the direction of finger swipe, normalize it, and apply a scalar to the velocity of the ball var direction = new Phaser.Point(this.input.x - this.lastPointerPos.x, this.input.y - this.lastPointerPos.y); direction.x =, 5); direction.y =, 5); Phaser.Point.normalize(direction, direction); if (direction.y < 0) { this.ball.body.velocity.setTo(direction.x * this.SHOOT_FORCE, direction.y * this.SHOOT_FORCE); } } }, respawn : function () { console.log("Does this function even run?"); //Set the ball physics to be still again this.ball.body.moves = false; this.ball.body.velocity.setTo(0, 0); this.ball.body.allowGravity = false; //Spawn the ball in a new, random location var ballSpawnX = + this.EDGE_CUSHION, - this.EDGE_CUSHION); ballSpawnX =, 10); //Make sure the ball is in the boundary we set if (ballSpawnX < this.ball.width + this.EDGE_CUSHION) { ballSpawnX = this.ball.width + this.EDGE_CUSHION; } else if (ballSpawnX > - this.EDGE_CUSHION) { ballSpawnX = - this.EDGE_CUSHION; } this.ball.x = ballSpawnX; } };
  19. Developing a persistant Game World

    Let's say I would want build a multiplayer game about build a tower (simple blocks) on a big game world that stayed updated based on players constructions. How would you go about to ensure that users stay in creations and runs well.
  20. 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
  21. I have a bouncing ball and I want to detect that the ball has "hit the floor" in my game. Is there any predefined method for detecting this?
  22. When tweening the Phaser.World, and adding an onComplete event, the listenerContext does not return itself. What happens instead, is that the world container gets returned.
  23. Multiple visual sub-outputs?

    Hi, I have a strange doubt. It's experimental anyways, so it doesn't matter too much if there's no a reasonable solution for this. Let me explain this in a simple way: I'm trying to make Phaser interact with other image-processing libraries, in the way that can "feed" multiple visual outputs. Here's a little example of what I'm trying to explain: To try to make that I came with the idea to use BitmapData to render the necessary stuff into it and take the canvas context. The results? Slow perfomance. Okay, so after that I switched to RenderTexture that is a lot much faster to render things, but yes: You need to handle with matrix transformation to do basic effects like transformations, any-anchor rotation, etc... And well... I concluded that I'm re-invent the wheel trying to implement basic features that there's already in Phaser, but that's not avaiable for the restrictions that BitmapData/RenderTexture has. Doing some FX to a sprite that takes 3-4 lines in normal-output Phaser, takes 30+ lines trying to render them in a one of those "alternative outputs". So I came with the idea... Practically I need a "Phaser that renders in another stuff that's not the main output". Something similar like this. At simple researching I saw there's no a direct way to do this (maybe I'm wrong?). Also, I looked for a possibility to run multiple instances of Phaser in a once, but that's really convenient in pefomance-cost talking? Maybe one-instance can handle all of this and I'm not noticed? Yes, it's kinda specific. Maybe the solution still relies in BitmapData's/RenderTextures, but I'm curious about this. Thanks in advance PD: The motivation of this is for try to "build" a mid-complex scene in Phaser that it renders in a "sub-output" in a Canvas to pass it to ThreeJS to put it in a Shape and renders it back to Phaser main output. Maybe there's more straighfoward manners to do that.
  24. Alright, I have racked my brain so hard over the past couple of hours. Why does my sprite position itself at a new position every time it is spawned? I am passing a pair of literal coordinates to the constructor for this Player class inherited from Phaser.Sprite. I have been looking at this issue too closely, and I think that I'm overlooking some really stupid mistake. My impression is that this issue might have something to do with the sprite scaling that I apply, but if I disable all of the scaling on the sprite, the issue seems to still persist. Additionally, I have suspicion that it might have to do with the this.spawnX variables being incorrectly set. I'm a JavaScript noob, I apologize. Here is the code for my FriarDude.Player class (sorry for the dump, but I honestly have no idea where in the code the issue lay): FriarDude.Player = function (game, x, y) { // Class variables this.facing = 'idle'; this.cursors = null; this.dead = false; this.invincible = true; this.lives = 3; this.restLevel = 1; this.toggleVisibilityTimerEvent = null; // Clone starting position this.spawnX = x; this.spawnY = y; // this.RUN_VELOCITY = 300; this.SPRITE_SCALE = 4; this.INVINCIBILITY_DURATION = 1000; // // Input this.cursors = game.input.keyboard.createCursorKeys(); // // Constructor, game, x, y, 'sprite_sheet', 'foreground/friar/2_simple/idle/0000'); game.physics.arcade.enable(this); this.body.bounce.y = .5; this.body.setSize(24,32,0,0); this.body.gravity.y = 300; this.animations.add('idle', [ 'foreground/friar/2_simple/idle/0000', 'foreground/friar/2_simple/idle/0001', 'foreground/friar/2_simple/idle/0002' ], 4, true, false); this.animations.add('run', [ 'foreground/friar/2_simple/run/0000', 'foreground/friar/2_simple/run/0001' ], 8, true, false); this.anchor.setTo(.5,.5); this.scale.setTo(this.SPRITE_SCALE); this.spawn(); return this; //};FriarDude.Player.prototype = Object.create(Phaser.Sprite.prototype);FriarDude.Player.prototype.constructor = FriarDude.Player;FriarDude.Player.prototype.update = function() { if (this.dead) return; this.body.velocity.x = 0; if (this.cursors.left.isDown) { this.body.velocity.x = -this.RUN_VELOCITY; if (this.facing != 'left') { this.scale.x = -this.scale.x; this.facing = 'left';'run'); } } else if (this.cursors.right.isDown) { this.body.velocity.x = this.RUN_VELOCITY; if (this.facing != 'right') { this.scale.x = this.scale.y; this.facing = 'right';'run'); } } else { if (this.facing != 'idle') {'idle'); this.facing = 'idle'; } }}FriarDude.Player.prototype.spawn = function() { // Resetting properties that can be affected by dying this.dead = false; this.body.collideWorldBounds = true;'idle'); // // Reset velocity this.body.velocity.x = 0; this.body.velocity.y = 0; // // Reset position this.x = this.spawnX; this.y = this.spawnY; // // Temporary invincibility this.invincible = true; this.toggleVisibilityTimerEvent =, this.toggleVisibility, this);, this.endInvincibility, this); //}FriarDude.Player.prototype.kill = function() { this.dead = true; this.lives--; this.body.collideWorldBounds = false; this.animations.stop(); this.frameName = 'foreground/friar/2_simple/die'; // Launch the Player this.body.velocity.setTo(, 150), -150); //}FriarDude.Player.prototype.endInvincibility = function() { this.invincible = false;;}FriarDude.Player.prototype.toggleVisibility = function() { if (this.alpha > 0) this.alpha = 0; else this.alpha = 1;}
  25. Circular World

    Need some help and hoping someone will know an answer. I'm trying to create a tilemap world where if the player continues to walk right, eventually they end up back at the beginning of the stage. Does anyone have any idea how this is accomplished?