Search the Community

Hi guys, I have a problem when try to resize the world. This is the code: this.map = this.game.add.tilemap('test'); this.map.addTilesetImage('tile', 'tile'); this.layer = this.map.createLayer(0); this.map.setCollisionBetween(1, 100, true, 'blockedLayer'); this.layer.resizeWorld(); In the photos you can see that the world is not resizing, i dont know what is happening, any idea? i want to try to resolve this for myself XD

Hello everyone, When I display a sprite in front of a mesh that has emissiveTexture or emissiveColor, the mesh can be seen through the sprite. for example : https://www.babylonjs-playground.com/#4H81K3 Is there a way to occlude the emissive object with a sprite (prevent the emissive mesh to be seen through the sprite)?

Hi, I create a tilemap with 4 layers with one for collisions ( named : collisions ). The layer with pink tiles is my collisions layer, and the tile ID is 515. Then I add a player and active collisions. function preload() { game.load.tilemap('map', gamePath + 'assets/map.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('tiles', gamePath + 'assets/tiles.png'); game.load.spritesheet('cars', gamePath + 'assets/cars.png', 180 / 5, 73); } function create() { game.physics.startSystem(Phaser.Physics.P2JS); map = game.add.tilemap('map'); map.addTilesetImage('tiles'); layer = map.createLayer('collisions'); console.log(layer); layer.resizeWorld(); map.setCollision(515,true); game.physics.p2.convertTilemap(map, layer); player = game.add.sprite(1100, 800, 'cars'); game.physics.p2.enable(player,true); game.camera.follow(player); cursors = game.input.keyboard.createCursorKeys(); } I do not understant why there is not collisions between my player and my collisions layer. thx for your help.

Hi all, I've recently started a project that I gave myself to learn more about web based applications. I'm working on building character creation menu, (based on NITW by infinite fall), of which the design I had in mind would eventually look something like this: What I have so far is just a test of one of the sprites I put together: mae.mp4 The sprite is made using just one layer, at the moment. Essentially, while I don't think the concept is too difficult to put together, I'm having trouble finding examples of how to implement relevant sections of code using Phaser 3. If you might be able to give me some examples or resources to look into as to how I could build some of the features, I would greatly appreciate that. So, examples/tutorials/advice I'm looking for regards: -Building multiple menus of images, each accessible by clicking on relevant category titles. -Building one specific menu which gives options for choosing your starting sprite. (Will be cat/alligator/dog etc) -Clicking on images in a certain feature menu triggering that image to be layered onto the sprite. (Where only one of each category can be equipped at any one time) -How to tint the colour of the sprite and clothing objects. (I think layering of facial features may be necessary here, so I may have to restructure my sprite sheet? How does layering work in Phaser 3?) Thanks for having a look, hopefully gathering some examples in one place will help the next person trying to make a similar game too.

Hi all, Slowly making progress on my character creation game. I've layered multiple sprites, so that each sprite can be easily "tinted" to the user's preferred colour. The layers so far are added like so: Cat Body Pupil Face/Eye shape Each layer is animated. The pupil and the face are aligned, hence should be playing the same frame as each other to look correct. This works fine up until a point. The issue is, when the user selects the eye shape they desire, the two sprites go out of sync, and the animation looks something like this: This is the relevant code to trigger the event: facekey = 'catfacegoth'; create function; player = this.physics.add.sprite(200, 370, 'whitecat').setInteractive().setDataEnabled(); playereyes = this.physics.add.sprite(260, 350, 'cateyes').setInteractive().setDataEnabled(); playerface = this.physics.add.sprite(260,350,facekey).setInteractive(); normaleyeicon.on('pointerdown', function (pointer, normaleyeicon){ facekey = 'catface'; console.log('normal face'); }); gotheyeicon.on('pointerdown', function (pointer, gotheyeicon){ facekey = 'catfacegoth'; console.log('goth face selected');}); update function: player.anims.play('default', true); //body animation if(facekey == 'catfacegoth'){ playerface.anims.play('gothblink', true); // face/eye shape playereyes.anims.play('blink', true); //this is the pupil layer } if(facekey == 'catface'){ playerface.anims.play('faceblink', true); // face/eye shape playereyes.anims.play('blink', true); // pupil } My suspicion is that the pupil isn't restarting from frame 0 when the facekey variable is changed, but rather continues playing from the current frame. Is there a way to "reset" the current animation so that they both play from frame 0 when the facekey variable triggers the change?

Hello! I'm using BABYLON.Layer for a static background. Any way freeze/checkOnlyOnce/renderOnlyOnce Layer for performance? Simple PG: https://www.babylonjs-playground.com/#08A2BS Thank you!

Hi, This is probably a misunderstanding on my part, but how can I get the light to shine on either of the objects in the PG? Meshes work just like I thought, I can display either of them by changing the bitmask. http://www.babylonjs-playground.com/#XUH5GR

Hi, I want to display my webcam content on my scene. In order to do this, I tried to create a layer set in background on which I apply a video texture. I passed a video DOM element to this texture. This video has a stream for source that is obtained from the getUserMedia promise. It works but rapidly the FPS drop and I don't know why. Maybe the size of the video is too large, maybe I provided the wrong parameters to the texture. I don't have any idea but it causes an issue. Here is a PG for testing : https://www.babylonjs-playground.com/#FF3BPV Thanks,

Hi!, i use tiled for create a map, but when i try show the map in the game, this doesn't show correctly (the map in tiled) And the map in the game: The main file: class Main extends Phaser.State { create() { this.game.physics.startSystem(Phaser.Physics.ARCADE); this.game.add.sprite(0, 0, 'Sky'); this.map = this.game.add.tilemap('Tilemap'); this.map.addTilesetImage('Tiles', 'Tileset'); this.layer = this.map.createLayer('Platforms'); this.layer.resizeWorld(); this.wrap = true; this.cursors = this.game.input.keyboard.createCursorKeys(); } update() { if (this.cursors.left.isDown) { this.game.camera.x -= 8; } else if (this.cursors.right.isDown) { this.game.camera.x += 8; } if (this.cursors.up.isDown) { this.game.camera.y -= 8; } else if (this.cursors.down.isDown) { this.game.camera.y += 8; } } } export default Main; Any idea or solution?(sorry for my bad english)

Hi. I want to make a collision between character and tiles so that character couldn't go through the tiles, but nothing works. <script> var game = new Phaser.Game(800, 600, Phaser.AUTO); var player; var cursor; var map; var layer; var GameState = { preload: function() { this.load.image('character', 'assets/character.png'); this.load.tilemap('map', 'assets/tile_csv.csv', null, Phaser.Tilemap.CVS); this.load.image('tiles', 'assets/tile.png'); }, create: function() { game.physics.startSystem(Phaser.Physics.ARCADE); game.stage.backgroundColor = "#0000ff"; map = game.add.tilemap('map', 32, 32); map.addTilesetImage('tiles'); layer1 = map.createLayer(0); layer1.resizeWorld(); map.setCollision(2); player = game.add.sprite(50, game.world.height - 110, 'block'); game.physics.arcade.enable(player); player.anchor.setTo(0.5); player.scale.setTo(0.4); player.body.collideWorldBounds = true; cursors = game.input.keyboard.createCursorKeys(); game.camera.follow(player); }, update: function() { game.physics.arcade.collide(player, layer1); player.body.velocity.x = 0; player.body.velocity.y = 0; if (cursors.left.isDown) { player.body.velocity.x = -1500; } else if (cursors.right.isDown) { player.body.velocity.x = 1500; } if (cursors.up.isDown) { player.body.velocity.y = -1500; } else if (cursors.down.isDown) { player.body.velocity.y = 1500; } } }; game.state.add('GameState', GameState); game.state.start('GameState'); </script>

Very sorry if someone has asked this before, but I searched the internet for two days now and I have yet to find the answer to this. So, what I want to know is how can I tell the size (width, height) of the platform that a player/enemy is standing on, with platforms that are based on a tilemap/layer? Take for example this game phase example starstruck: https://phaser.io/examples/v2/games/starstruck How can I tell the size of that platform the mascot falls on first? Why do I want to know this? I want to know so that I can place enemies on the map, have them go back and worth without falling off a platform. I have seen this be done when platforms are created as a group, but not with platforms in a layer. Thank you very much for any help.

Hi, Im making a platformer in Phaser and have successfully loaded a tilemap but my player doesn't collide with the tilemap layer. Here's my code. var game = new Phaser.Game(304, 208, Phaser.AUTO, 'game', { preload: preload, create: create, update: update, render: render}); function preload() { this.game.load.atlas('player', 'assets/player/player_full.png', 'assets/player/player_full.json'); game.load.image('bg', 'assets/bg-LONG.jpg'); // TILEMAP game.load.tilemap('world', 'assets/tilemaps/world.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('world_tiles', 'assets/tilemaps/world.png'); } var player; var facing = 'right'; var map; var tileset; var layer; function create() { // START PHYSICS game.physics.startSystem(Phaser.Physics.ARCADE); // ADD SPRITES game.add.tileSprite(0, 0, 900, 200, 'bg'); game.world.setBounds(0, 0, 900, 200); // PLAYER player = game.add.sprite(10, 176, 'player'); player.animations.add('idle_right', ['idle_1_right.png', 'idle_1_right.png', 'idle_2_right.png', 'idle_3_right.png'], 4, true); player.animations.add('running_right', ['running_1_right.png', 'running_2_right.png', 'running_3_right.png', 'running_4_right.png', 'running_5_right.png', 'running_6_right.png'], 9.5, true); player.animations.add('idle_left', ['idle_1_left.png', 'idle_1_left.png', 'idle_2_left.png', 'idle_3_left.png'], 4, true); player.animations.add('running_left', ['running_1_left.png', 'running_2_left.png', 'running_3_left.png', 'running_4_left.png', 'running_5_left.png', 'running_6_left.png'], 9.5, true); player.animations.add('jump_right', ['jump_1_right.png', 'jump_2_right.png', 'jump_3_right.png', 'jump_4_right.png', 'jump_5_right.png', 'jump_6_right.png'], 7, true); player.animations.add('jump_left', ['jump_1_left.png', 'jump_2_left.png', 'jump_3_left.png', 'jump_4_left.png', 'jump_5_left.png'], 7, true); // WORLD game.physics.arcade.gravity.y = 600; game.physics.enable(player, Phaser.Physics.ARCADE); player.body.collideWorldBounds = true; player.body.height = 24; // OTHER game.camera.follow(player); // TILEMAP map = game.add.tilemap('world'); map.addTilesetImage('world', 'world_tiles'); layer = map.createLayer('Tile Layer 1'); layer.resizeWorld(); } function update() { player.body.velocity.x = 0; game.physics.arcade.collide(player, layer); if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) { facing = 'right'; player.body.velocity.x = 90; player.animations.play('running_right'); }else if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) { facing = 'left'; player.body.velocity.x = -90; player.animations.play('running_left'); } if (game.input.keyboard.isDown(Phaser.Keyboard.UP) && player.body.onFloor() && game.input.keyboard.addKey(Phaser.Keyboard.UP).downDuration(1)) { if (facing == 'right') { player.animations.play('jump_right'); player.body.velocity.y = -230; }else{ player.animations.play('jump_left'); player.body.velocity.y = -230; } } if (player.body.velocity.x == 0 && player.body.onFloor() && player.body.velocity.y == 0) { if (facing == 'right') { player.animations.play('idle_right'); }else{ player.animations.play('idle_left'); } } } function render(){ game.debug.spriteInfo(player, 10, 20); }

Did we change the Debug Layer to the ne Debug Layer the BabylonJS guys have been working on... If so... Has the API changed to test for visible and showing the debug layer... If not... i now all of sudden get an error when trying to bring up the debug layer (using latest dist preview release)... No message ... just a yellow exclamation sign. Any body else getting this with latest list preview (12/8/16) ???

Hi everyone! Is there any way in Babylon.js to combine multiple textures, or multiple materials on a single mesh? I know that it's possible to apply diffuseTexture and ambientTexture on a material at once, but if I have more than 2 textures? Like for example, it could be used for maps, having a satellite image as a base texture and then applying a layer with ambient pressure, and UV index, and wind direction, and whatnot

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 !

How can I create a PIXI.Container with a transparent background which I can render on top of my main stage container? My goal is it to have 4 layers which contain PIXI.Sprites and PIXI.Texts: layer 1 should be rendered beneath the player layer 2 should be rendered above layer 1 layer 3 should be rendered above the player and above layer 1 and layer 2 layer 4 should be rendered above everything else for debug information In case I can cannot use multiple PIXI.Container then how else could I achieve this effect?

Hello guys, I'm making a plaformer, and I use the tiledmap plugin (https://github.com/englercj/phaser-tiled) to have best performance on mobile(and it works). There's always a black space below my tilemap : And when I test it with mobile dimension, it looks like that : I wish I could fill my canvas full height with my tilemap with any device, without "y-axe scrolling" or black space. When I try to scale my layer : var winW = window.innerWidth; var winH = window.innerHeight; var height_of_game_in_pixels= 1536; //24tiles*64px var SCALE = winH / height_of_game_in_pixels; map = game.add.tiledmap('mario_niveau_1'); that.game.physics.p2.convertTiledCollisionObjects(map, 'essai1'); layer = map.layers[0]; layer.scale.setTo(SCALE,SCALE); layer.resizeWorld(); It's cropping like that... In addition, How can I scale my objects layer for my collision ? Tiled view of my layer : Any ideas ?

Hi everyone, I'm trying to make a platformer who can run on any smartphone. I have a tilemap with theses features : - 40 Tiles heights -100 Tiles widths - Each tiles is 64x64px. To calculate my scale I simply use that as reference : var SCALE = window.innerHeight/ 2560; //64*40 = 2560px, the height of my tilemap I already made a platformer with 16x16px tiles and every scale worked very well, so i just copy paste that simple code : map = that.game.add.tilemap('objects'); map.addTilesetImage('items', 'tiles'); map.setCollisionBetween(0, 16); that.game.scale.scaleMode = Phaser.ScaleManager.RESIZE; layer = map.createLayer('mario_niveau_1'); layer.debug = true; layer.setScale(SCALE,SCALE); layer.resizeWorld(); That's work when my SCALE is better than 1 but not when it's less. My collision are always good, but the map don't show up like you can see below Any ideas ?

Hi guys, this is my first post so if this is somewhere it's not suppose to be i'm really sorry. I created a layer with Tiled and want to set collision between the sprite and all the tiles in the layer but it doesn't seem to work. (The map showed up and everything) Here is my code var create = function(){ // Razor.game.add.sprite(0, 0, 'bg'); map = Razor.game.add.tilemap('gamemap', 16, 16); map.addTilesetImage('tileset','tiles'); layer = map.createLayer(0); layer.resizeWorld(); map.setCollisionBetween(0, 5049); Razor.game.world.setBounds(0, 0, 3200, 32280); Razor.keyboard = Razor.game.input.keyboard; Razor.game.physics.startSystem(Phaser.Physics.ARCADE); player = new Player(window.innerWidth/2, window.innerHeight/2); // Razor.game.camera.follow(player); } var update = function(){ Razor.game.physics.arcade.collide(player, layer);

I found this ^ for looping through all the map. However, I just want to count how many tiles are there at the moment. Any help will be helpful friends.

Hi guys, I've built one or two small, simple games with Phaser before but this is the first time I'm working with tilemaps. Hopefully someone can offer some advice. I'm working on a topdown game. I created a tilemap in Tiled with 3 layers. (floor, wall 1 and wall 2 ). The problem is I can get collisions to work on a single layer if I combine the wall layers into the same layer as the floor (so I just have one layer), but I can't get the player to collide with a second layer. TLDR: Is is possible to set up tilemap collisions with multiple layers? Thanks in advance. I've been stuck on this all day.

Hi there, I'm having an issue where a child sprite does not respect the depth of the parent's group. Meaning that other objects will render on top of the parent sprite as expected, but not the child sprite, which appears on top of both the parent (expected) AND other objects (unexpected). First, I am extending the sprite class: var Wall = function (game, x, y, width, height) { Phaser.Sprite.call(this, game, x, y, 'wall-border'); this.width = width; this.height = height; this.anchor.setTo(0, 1); game.physics.arcade.enable(this); this.body.immovable = true; var child = this.addChild(game.add.tileSprite(0,0,100,100,'wall-pattern')); // this.game.add.existing(child); // (THIS LINE IS THE PROBLEM) child.x = this.x + 10; child.y = this.y - 10; child.anchor.setTo(0, 1); child.width = this.width - 20; child.height = this.height - 20;}The problem is that the tileSprite created as a child does not appear in game unless the commented out line is added, but if so, it appears on top of all other objects (does not respect the parent's group ordering). Do I need to add the child to the same group as the parent or....? I know I'm doing something dumb, so any guidance is appreciated. Thank you!

When the game loads the player sprite falls to the bottom. Collides with the world fine but doesn't collide with the floor layer. I have tested the other layers both to see if they could be collided and by commenting them out to see if there was a multiple layer issue. No changes from doing either. Layers display fine and no errors appear in the console. debugger on player shows no collision except at world edges. var game = new Phaser.Game(1800, 1400, Phaser.AUTO, '', {preload: preload, create: create, update:update, render:render});var map;var layers = [];var player;function preload() { game.load.tilemap('LevelOne', 'TileMaps/Tutorial.json', null, Phaser.Tilemap.TILED_JSON); game.load.image('Background', 'Assets/Background.png'); game.load.image('InterImages', 'Assets/InterImages.png'); game.load.spritesheet('MainCharacter', 'Assets/MainCharacter.png', 60, 80, 33); game.load.spritesheet('StandardEnemyFull', 'Assets/StandardEnemyFull.png'); } function create() { //add tilemap, images and create layers, resize world map = game.add.tilemap('LevelOne'); map.addTilesetImage('Background', 'Background'); map.addTilesetImage('Interaction', 'InterImages'); layers[3] = map.createLayer('Scenery'); layers[2] = map.createLayer('Activates'); layers[1] = map.createLayer('Floor'); //call in physics and assigns gravity game.physics.startSystem(Phaser.Physics.ARCADE); game.physics.arcade.gravity.y = 900; //assign physics to the layer 'floor' game.physics.arcade.enable(layers[3]); map.setCollisionBetween(128,131, true, layers[3]); map.setCollisionBetween(148,151, true, layers[3]); map.setCollisionBetween(168,171, true, layers[3]); map.setCollisionBetween(188,191, true, layers[3]); map.setCollisionBetween(208,211, true, layers[3]); map.setCollisionBetween(228,231, true, layers[3]); map.setCollisionBetween(248,251, true, layers[3]); //add player and enable player physics. Ensure player collides with wall player = game.add.sprite(1040,1300,'MainCharacter'); player.anchor.x = player.anchor.y = 0.5; game.physics.arcade.enable(player); player.body.collideWorldBounds = true; } function update() { game.physics.arcade.collide(player, layers[3]); }Cheers in advance if anyone can help.

Hi! I want to start drawing my layers of a tilemap in a specific X position of the world, so I do: this.layer2 = mapa.createLayer('detalhes');this.layer2.fixedToCamera = false;this.layer2.scrollFactorX = 0;this.layer2.scrollFactorY = 0;this.layer2.position.set( MyXposition, 0);That's ok but when I do that, all the collisions get lost! (they work if I don't change the X position) How to handle or reposition the collisions? Thanks

Hi all, I've been trying to achieve a certain effect. I have two polygons, one of which is still while the other moves, and when they overlap, I want to have the still polygon on top. However, it always seems to be the moving polygon that remains on top. I've been trying to use groups following the example here, to no avail. Here is (most of) the offending code: var LayerTest = { preload: function () { }, create: function () { game.world.setBounds(-SIZE_X / 2, -SIZE_Y / 2, SIZE_X / 2, SIZE_Y / 2); var center_group = game.add.group(); center_group.z = 1; var center_hexagon_graphics = new Phaser.Graphics(game, 0, 0); var center_hexagon_poly = buildRegularPolygon(0, 0, 6, 40); center_hexagon_graphics.beginFill(CENTER_COLOR); center_hexagon_graphics.drawPolygon(center_hexagon_poly); center_hexagon_graphics.endFill(); center_group.add(center_hexagon_graphics); var moving_group = game.add.group(); moving_group.z = 0; moving_graphics = new Phaser.Graphics(game, 0, 0); moving_group.add(moving_graphics); }, update: function () { var moving_poly = new Phaser.Polygon([ new Phaser.Point(-SIZE_X / 2 + tick, -10), new Phaser.Point(-SIZE_X / 2 + tick, 10), new Phaser.Point(20 - SIZE_X / 2 + tick, 10), new Phaser.Point(20 - SIZE_X / 2 + tick, -10), ]); moving_graphics.clear(); moving_graphics.beginFill(ALT_COLOR); moving_graphics.drawPolygon(moving_poly); moving_graphics.endFill(); tick++; }};This particular example creates a regular hexagon around (0,0), and a small yellow square in the left side of the screen that then moves right and overlaps with the hexagon. Even though I set moving_group.z to 0 and center_group.z to 1, it always paints the small square on top. I also tried to do without the groups, setting the z indices on the graphics directly, but it didn't make a difference. Any help will be much appreciated. layer-test.zip