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

Found 48 results

  1. 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.
  2. 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.
  3. 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.
  4. 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 directly with, 0.5);Unfortunately, this scales around the top left of the screen. I've tried setting the anchor on the 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
  5. 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 !
  6. 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.
  7. Finding mouse position in world

    How can I find the pointer's x/y coordinates in the world? Can I convert between camera and world coordinates?
  8. 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?
  9. 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 :)!
  10. 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
  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!
  12. 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 !
  13. 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.
  14. 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
  15. 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; } };
  16. 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.
  17. 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
  18. 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?
  19. 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: but where you are moving by dragging with either the mouse or the touch instead of the arrow keys
  20. 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.
  21. 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.
  22. 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;}
  23. 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?
  24. Hey guys, I know I have been posting a lot recently but you guys have been helping me out so I appreciate it so much! So I have a map and on it are several sprites. I implemented a zoom features so that whenever you scroll up/down (mouse) it will zoom in/out. The problem I am having is that when I am fully zoomed out (based on a threshold I set), a black bar at the bottom appears. The way I am zooming in/out is simply done by altering the on scroll up/down. I also implemented a mouse pointer based scroll to move around when parts of the map aren't shown. Zoom in code which is in create() = mouseWheel; var t =,200); function mouseWheel(event) { if (event.wheelDelta > 0 && worldX<=1) { worldX += 0.1; worldY += 0.1; = worldX; = worldY; myPlayer.body.setSize(50*worldX,50*worldX,20*worldX,80*worldX); myHouse.body.setSize(150*worldX,50*worldX,20*worldX,240*worldX); myCharacter.body.setSize(110*worldX, 20*worldX, 0, 120*worldX);, 0, 5263*worldX, 2636*worldX); } else if (event.wheelDelta < 0 && worldX>=0.40) { worldX -= 0.1; worldY -= 0.1; } else { t.stop(); } = worldX; = worldY; myPlayer.body.setSize(50*worldX,50*worldX,20*worldX,80*worldX); myHouse.body.setSize(150*worldX,50*worldX,20*worldX,240*worldX); myCharacter.body.setSize(110*worldX, 20*worldX, 0, 120*worldX);, 0, 5263*worldX, 2636*worldY); }and here's the mouse pointer scroll that changes the camera which is in update() if( &&>this.current X){ -= 8; this.currentX =; } if( &&<this.current X){ += 8; this.currentX =; } if( &&>this.current Y){ -= 8; this.currentY =; } if( &&<this.current Y){ += 8; this.currentY =; }Note: I am setting the world bouds based on the map's width and height like this, 0,,;and here's a screenshot of what it looks like when fully zoomed out What do you think the problem is?
  25. Hey guys, I'm struggling with the following issue, I have a game world with bounds 720x3840 and I'm trying to figure out a way to show the whole world in the camera, like a zoom out thing but without any borders at the sides. I need to be able to return to the normal zoom at some point. Is there a way other than scaling the entire game? Thanks!