Search the Community

Hi, Is there a trick (or standard way) to put tiles of the same layer to the different depths? Currently I can call layer.setDepth(1) to modify the whole layer. But is there a way to have only one layer where some tiles have depth "1" and others have "0" ?

Hello! I've created a tilemap layer this way: layer = map.createStaticLayer('ground', tiles, 0, 0).setDepth(1); After that added a particles emitter this way: particl = scene.add.particles('imagename').createEmitter({ lifespan: 300, alpha: { start: 1, end: 0 }, on: false }); Although the emitter is created after the layer - in the application particles are behind the layer's tiles, so partly not visible. How do I set the depth of the emitter to make it always visible? Any other way to bring it in front of the layer is also good. Thanks!

Hello, I have to control depth of meshes with alphaIndex in my situation. but when meshes are over 10, rendering gets strange. https://www.babylonjs-playground.com/#BTU1J7#1 need your help. thanks.

I have some doubt about the depth shader. The output seems not to be the depth value in NDC space, nor the value like gl_FragCoord.z. So what it is about? Please correct me if I am wrong. gl_Position = viewProjection * finalWorld * vec4(position, 1.0); vDepthMetric = ((gl_Position.z + depthValues.x) / (depthValues.y));

Hi there, Is there any kind of renderer.sortObjects() or renderer.depthTest() like other frameworks have? I have several transparent objects (alpha < 1.0) on the scene and sometimes renderer behaves glitchy (please see attachment). Theoretically, could write a function for sorting meshes by a distance to camera and set .alphaIndex, but it doesn't solve the problem with self-intersection like frame does c) & b). Babylon.JS 3.01, materials are PBRMaterial() with .disableDepthWrite = false and .alphaMode = 2. Any ideas? Thanks in advance!

I have two groups of sprites, one containing trees, and another one containing characters. I want to sort them with the group.sort() function, but in order to do that I would need to put them in other, bigger group. However, I can't do that with the approach taken in the example of "sub groups", because when I do it that way, the _container has other containers as its children, instead of the actual sprites. What is the best/easiest way to accomplish this, without losing the flexibility of having separate groups for trees and characters?

I created these four groups: underlayer_group = game.add.group(); npc_group = game.add.group(); overlayer_group = game.add.group(); transtions_group = game.add.group(); I set these depth factor to help me sorting them: underlayer_group.depth = 1; npc_group.depth = 2; overlayer_group.depth = 3; transtions_group.depth = 4; The problem is: In some moments of the game, I use removeAll() method from the groups underlayer_group and overlayer_group to remove their children, so I can add new children. Here is how I add them: this.map_sprite = game.add.tilemap(this.key_name); this.map_sprite.addTilesetImage(this.tileset_name, this.key_name); for(var i = 0; i < this.sprite.layers.length; i++){ var layer = this.sprite.createLayer(this.sprite.layers[i].name); layer.resizeWorld(); overlayer_group.addChild(layer); } I was hoping that only creating the groups in that initial order, I would not have problems with their z order. But I'm having. New layers come over transitions_group. So I created the depth property to help me sort after children insertion like this: game.world.sort('depth', Phaser.Group.SORT_ASCENDING); But this is also not working. What can I do to sort my groups properly? ---------- EDIT It seems that only the group with a graphic sprite (rectangle) is not working properly...

I'm looking for the depth information (per pixel) of a camera's view on the scene: distance position: x,y,z Currently I'm using the scene pick functionality for each pixel: for x = 0 to maxX for y = 0 to maxY scene.pick(x,y,null,false,camera) Then use the returned PickingInfo's distance and pickedPoint. Is there a better/faster way to get the depth information, because the above mentioned code takes several seconds. Maybe via a shader?

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?

Hi guys ! I just spotted what I think is a bug (or rather a compatibility issue). Here is a *very* simple PG : http://www.babylonjs-playground.com/#27DV4V#6 It only prints the depth map on a plane. Here is a screenshot of the PG with Chrome 52 on Windows 7 : Here is a screenshot of the PG with Safari on an Ipad (iOS 9.2.1) : As you can see, no depth map with Apple, the plane is totally black (or gray with the light here). Maybe are you aware of this issue ? (do I hope too much ? ) Is there a WebGL restriction I don't know with Apple ? I had the chance to run the PG on different Macs and iPhones (different versions also), and the issue appears on every Apple device. I don't own any Apple devices but I can make tests at work if you need them. I would be glad to help if I can. PS: I make some tests and it looks like a simple render target texture with a shader material which computes the depth could work. And it seems like the RTT of the depthRenderer has a lot of different properties than the basic RTT I made.

I'm trying to create simple isometric game using @lewster32's iso plugin, where player needs to transport his/her hero from point A to point B in simple city. Nothing special there. However, some buildings start flickering and I can't figure how to stop it. Only solution I came up with, is that I place them in air but that's not very good because small character can go below them. It seem that the issue is with body.immovable = true and body.moves = false commands. If I give those for the field itself, flickering starts. My code: var kentta; var house; var cube; var game = new Phaser.Game(1280, 800, Phaser.AUTO, 'test', null, true, false); var BasicGame = function (game) { }; BasicGame.Boot = function (game) { }; var isoGroup, player; BasicGame.Boot.prototype = { preload: function () { game.load.image('cube', 'police_dep.png'); game.load.image('kentta', 'kentta1.png'); game.load.image('house1', 'house1.png'); game.load.image('house2', 'house2.png'); game.load.image('house3', 'house3.png'); game.load.image('house5', 'house5.png'); game.load.image('house6', 'house6.png'); game.load.image('park', 'park.png'); game.load.image('factory', 'factory.png'); game.time.advancedTiming = true; // Add and enable the plug-in. game.plugins.add(new Phaser.Plugin.Isometric(game)); // Start the IsoArcade physics system. game.physics.startSystem(Phaser.Plugin.Isometric.ISOARCADE); // This is used to set a game canvas-based offset for the 0, 0, 0 isometric coordinate - by default // this point would be at screen coordinates 0, 0 (top left) which is usually undesirable. game.iso.anchor.setTo(0.5, 0.5); }, create: function () { // Create a group for our tiles, so we can use Group.sort isoGroup = game.add.group(); isoGroup.enableBody = true; isoGroup.physicsBodyType = Phaser.Plugin.Isometric.ISOARCADE; // Set the global gravity for IsoArcade. game.physics.isoArcade.gravity.setTo(0, 0, -500); kentta = game.add.isoSprite(200,0,20,'kentta',0,isoGroup); kentta.anchor.setTo(0.5,0); game.physics.isoArcade.enable(kentta); kentta.body.immovable = true; kentta.moves = false; house = game.add.isoSprite(410,70,0,'house1',0,isoGroup); house.anchor.setTo(0.5); house2 = game.add.isoSprite(440,180,100,'house2',0,isoGroup); house2.anchor.setTo(0.5); house3 = game.add.isoSprite(440,250,100,'house2',0,isoGroup); house3.anchor.setTo(0.5); house4 = game.add.isoSprite(340,275,100,'house3',0,isoGroup); house4.anchor.setTo(0.5); house5 = game.add.isoSprite(500,275,100,'house5',0,isoGroup); house5.anchor.setTo(0.5); house6 = game.add.isoSprite(475,90,100,'house6',0,isoGroup); house6.anchor.setTo(0.5); park = game.add.isoSprite(330,140,80,'park',0,isoGroup); park.anchor.setTo(0.5); factory = game.add.isoSprite(240,270,80,'factory',0,isoGroup); factory.anchor.setTo(0.5); // Create another cube as our 'player', and set it up just like the cubes above. player = game.add.isoSprite(200, 0, 100, 'cube', 0, isoGroup); player.tint = 0x86bfda; player.anchor.set(0.5); game.physics.isoArcade.enable(house); game.physics.isoArcade.enable(house2); game.physics.isoArcade.enable(house3); game.physics.isoArcade.enable(house4); game.physics.isoArcade.enable(house5); game.physics.isoArcade.enable(house6); game.physics.isoArcade.enable(park); game.physics.isoArcade.enable(player); park.body.moves = false; park.body.immovable = true; factory.body.moves = false; factory.body.immovable = true; park.scale.setTo((game.width/kentta.width)*0.5); /*kentta.body.setSize(kentta.body.widthX*1.5,kentta.body.widthY,kentta.body.height*0.5);*/ player.body.collideWorldBounds = true; kentta.body.collideWorldBounds = true; house.body.collideWorldBounds = true; house2.body.collideWorldBounds = true; kentta.scale.setTo((game.width/kentta.width)*0.5); house.scale.setTo((game.width/kentta.width)*0.15); house2.scale.setTo((game.width/kentta.width)*0.15); house3.scale.setTo((game.width/kentta.width)*0.15); house4.scale.setTo((game.width/kentta.width)*0.15); house5.scale.setTo((game.width/kentta.width)*0.15); house6.scale.setTo((game.width/kentta.width)*0.15); factory.scale.setTo((game.width/kentta.width)*0.15); // Set up our controls. this.cursors = game.input.keyboard.createCursorKeys(); this.game.input.keyboard.addKeyCapture([ Phaser.Keyboard.LEFT, Phaser.Keyboard.RIGHT, Phaser.Keyboard.UP, Phaser.Keyboard.DOWN, Phaser.Keyboard.SPACEBAR ]); var space = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); space.onDown.add(function () { player.body.velocity.z = 300; }, this); game.iso.projectionAngle = 0.575; //init once after endering is done setTimeout(function(){ /*kentta.body.setSize(1400,1400,60); kentta.pivot.y = -150;*/ house2.body.moves = false; house2.body.immovable = true; house3.body.moves = false; house3.body.immovable = true; house4.body.moves = false; house4.body.immovable = true; house5.body.moves = false; house5.body.immovable = true; house6.body.moves = false; house6.body.immovable = true; /* park.body.moves = false; park.body.immovable = true; house.body.moves = false; house.body.immovable = true;*/ house4.body.setSize(house4.body.widthX/0.3,house4.body.widthY/0.3*1.25,house4.body.height/0.3,0,-10); house5.body.setSize(house5.body.widthX/0.3,house5.body.widthY/0.3*1.25,house5.body.height/0.3,-5,-10); park.body.setSize(park.body.widthX/0.3*1.2,park.body.widthY/0.3*1.5,park.body.height/0.3*1.5,-15,-27); },1000); }, update: function () { // Move the player at this speed. var speed = 100; if (this.cursors.up.isDown) { player.body.velocity.y = -speed; } else if (this.cursors.down.isDown) { player.body.velocity.y = speed; } else { player.body.velocity.y = 0; } if (this.cursors.left.isDown) { player.body.velocity.x = -speed; } else if (this.cursors.right.isDown) { player.body.velocity.x = speed; } else { player.body.velocity.x = 0; } // Our collision and sorting code again. game.physics.isoArcade.collide(isoGroup); game.iso.topologicalSort(isoGroup); }, render: function () { game.debug.text("Move with cursors, jump with space!", 2, 36, "#ffffff"); game.debug.text(game.time.fps || '--', 2, 14, "#a7aebe"); isoGroup.forEach(function (tile) { game.debug.body(tile, 'rgba(189, 221, 235, 0.6)', false); }); } }; game.state.add('Boot', BasicGame.Boot); game.state.start('Boot'); If you're wondering why there is a stupid timeout function, that's because all buildings flickered if those where defined in create function. I have no idea why. kentta variable is the field. Here is the picture of my game, body of field is rather off, I know, I know.

hi, I'm trying to create a game like "flick kick" (https://play.google.com/store/apps/details?id=com.pikpok.fkff), where the player needs to shoot a ball to the goal which is in front of her (no need for side view, just straight-front). Shooting the ball will be done by a swipe gesture. During the flight of the ball towards the goal, it needs to hit some targets. Can you please advise on what is the best approach for that? I need some kind of 3d collision mechanism to detect if the ball collides with the targets, or with the goal itself. I thought that maybe one of the built-in physics engines can help me with that, but I can't find how exactly. I also saw there's an isometric plugin that can place objects in a z-position. Maybe this is the right solution... Has anyone got any experience with this type of problem and can share with me? Thanks!

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!

I'm working on a 2D game with Phaser that uses a TileMap with a Tileset image for each of the block types. The game renders like this at the moment: http://screencast.com/t/pwZNnIeWjsAs But I'd like to be able to give some fake depth to the blocks so that it has the appearance of depth like "BattleBlock Theatre" or "Blocks That Matter": http://bluelinegamestudios.com/docs/images/b/b7/Battleblock_View_Style.jpg If there is a way to have a tile's RENDERED image be larger than the size of the tile (eg: a 96 pixel rendering of a tile that only has collision on 64x64pixels of itself... where I could cram these tiles next to each other every 64px) then I could do this rendering automatically with z-indexes*, but I don't see a way to pull that off in TileMaps. Is there any way to achieve this with Phaser TileMaps? Thanks! * by having the z-index increase as we go from left to right and bottom to top

Hello, I work on a project using @lewster32's isometric plugin. By the way, thank you very much lewster32 for this, it's really a huge add-on to Phaser . I have an issue with the topological sort: as you can see on the screenshot, the robot sprite should be drawn on top of the switch. I don't know what I'm doing wrong, could anyone help me? All the sprites used here are from separate pictures and the sprites edges are the same as the pictures (I mean there is no blank area in the pictures except in the corners). Thanks! The code: window.onload = function() { var game = new Phaser.Game(480, 260, Phaser.AUTO, 'test', null, true, false); var BasicGame = function (game) { }; BasicGame.Boot = function (game) { }; var isoGroup, isoGroup2, tilesMap, tilesMap2; var TILE_SIZE = 33; BasicGame.Boot.prototype = { preload: function () { game.load.image('tile_floor', 'assets/rust-sprites/tile_floor.png'); game.load.image('alt_robot', 'assets/rust-sprites/enemy_resized.png'); game.load.image('switch', 'assets/rust-sprites/tile_power_supply.png'); game.load.image('block', 'assets/rust-sprites/tile_block.png'); game.time.advancedTiming = true; game.plugins.add(new Phaser.Plugin.Isometric(game)); game.iso.anchor.setTo(0.5, 0.25); }, create: function () { // the floor isoGroup = game.add.group(); this.spawnTiles(); // elements on top of the floor (red switch, blue blocks and the bot) isoGroup2 = game.add.group(); this.spawnTiles2(); // -26 is to center the bot in the middle of a floor tile this.bot = game.add.isoSprite( TILE_SIZE * 3 - 26, TILE_SIZE * 5 - 26, 0, 'alt_robot', 0, isoGroup2 ); this.bot.anchor.set(0.5, 1); game.iso.topologicalSort(isoGroup2); }, update: function () { game.iso.topologicalSort(isoGroup2); }, render: function () { game.debug.text(game.time.fps || '--', 2, 14, "#a7aebe"); }, spawnTiles: function () { tilesMap = [ [0,0,0,0,0,0], [0,0,0,0,0,0], [0,0,0,0,0,0], [0,0,0,0,0,0], [0,0,0,0,0,0], [0,0,0,0,0,0], ]; var tile; for (var j = 0; j < tilesMap.length; j++) { for (var i = 0; i < tilesMap[j].length; i++) { if(tilesMap[j][i] == 0) { tile = game.add.isoSprite(i * TILE_SIZE, j * TILE_SIZE, 0, 'tile_floor', 0, isoGroup); } tile.anchor.set(0.5, 1); } } }, spawnTiles2: function () { // 2nd layer, on top of the first one (height +16px) var HEIGHT = 16; tilesMap2 = [ [0,0,0,0,0,0], [0,5,0,6,0,0], [0,5,0,0,0,0], [0,5,5,5,5,0], [0,0,0,0,0,0], [0,0,5,0,0,0], ]; var tile; for (var j = 0; j < tilesMap2.length; j++) { for (var i = 0; i < tilesMap2[j].length; i++) { if(tilesMap2[j][i] == 5) { tile = game.add.isoSprite(i * TILE_SIZE, j * TILE_SIZE, HEIGHT, 'switch', 0, isoGroup2); } if(tilesMap2[j][i] == 6) { tile = game.add.isoSprite(i * TILE_SIZE, j * TILE_SIZE, HEIGHT, 'block', 0, isoGroup2); } if(tile) tile.anchor.set(0.5, 1); } } }, }; game.state.add('Boot', BasicGame.Boot); game.state.start('Boot');};

Has anybody any idea about what I'm doing wrong? I'm using Cannon.js and the positions of the elements seem correctly placed, but the rendering order is false. In the attached Image, the number 4 should be rendered before than 2 and 3. Renderer: //Creates the renderer this.renderer = new THREE.WebGLRenderer(); this.renderer.setClearColor(0xff00ff); if (window.devicePixelRatio) { this.renderer.setPixelRatio(window.devicePixelRatio); } this.renderer.setSize(this.width, this.height); this.$wrapper.append(this.renderer.domElement);Textures (I also tried with another kind of materials and the result was the same): Balls: this.ballTexture = THREE.ImageUtils.loadTexture(this.path + "ball.jpg"); this.ballGeometry = new THREE.SphereGeometry(0.11, 32, 32); this.ballMaterial = new THREE.MeshPhongMaterial({ map: this.ballTexture, bumpMap: this.ballTexture, bumpScale: 0.01 }); var ball = new THREE.Mesh(this.ballGeometry, this.ballMaterial); this.scene.add(ball);

I tried to change the z by sprite.z. It displays the value as being changed but it doesn't actually move the sprite's depth based on the other sprites. I want a user to hit a button and pop the sprite to the front of the screen. How can I achieve this. Thanks in advance.

Hi I've been trying to get a greyscale texture of the depth buffer to be able to use it to create a "depth of field" post process, however I can't figure out the best way to go about it. The result i'm after is like this To my understanding it seems a material has to be made with a custom vertex and fragment shader that converts (and linearises) values from gl_FragCoord.z into values in gl_FragColor, and this has to be done outside of creating a post process because post processes can't use vertex shaders. I'm wondering if there is a simple way to achieve this in babylon.js or if anyone has got it working so far? Any help or hints in the right direction would be greatly appreciated

I'm working on a soft particle shader, which of course needs a depth texture for the scene. Is there any way to generate that easily with babylon so it can be passed as a texture to a shader?

Hello everyone, Fairly new to Phaser and have hit an initial 'bump' as it were. I'm attempting to simulate a feeling of z-depth on a tree in an isometric sort of style game, where in that if you walk around the back of the tree, the character appears behind it, but when you come round to the front, the character will then appear to be over the top of it (such as the players head and shoulders). So far I've looked in to setting the z-indexing on a group, and also so far have fathomed that the players y value in comparison to the trees y value will determine what the players z-depth is. I've yet to test this theory, but wanted to see if it could be achieved by easier means. Hope this makes sense, it's quite late, so my skills in finding an accurate explanation are faltering a bit... Thanks very much!