Search the Community

So I have loaded an array of images and added one to my stage. Basically I want to click through the image sprites that I have loaded with the left and right arrow keys. I thought about adding them all to the stage on top of each other and using z-index, but I feel like there would be a better way of filtering though all my loaded images. Plus I read through this documentation and was pretty confused implementing it. Here is my code so far. Its not much as I am new to pixi and still learning, but any information would be helpful. <script type="text/javascript"> let type = "WebGL" if(!PIXI.utils.isWebGLSupported()){ type = "canvas" } PIXI.utils.sayHello(type) // Aliases let Application = PIXI.Application, loader = PIXI.loader, resources = PIXI.loader.resources, Sprite = PIXI.Sprite; //Create a pixi application let app = new PIXI.Application({ width: 2000, height: 2000, transparent: false, antialias: true, resolution: 1 }) //Add the canvas that Pixi automatically created for you to the html document document.body.appendChild(app.view); loader .add([ "lib/book1.png", "lib/book2.png", "lib/book3.png", "lib/book4.png", "lib/book5.png" ]) .load(setup); //Define any variables that are used in more than one function let cam; // Setup function function setup() { // Creating cam sprite from image cam = new Sprite(resources["lib/book1.png"].texture ); cam.width = 400; cam.height = 300; app.stage.addChild(cam) </script>

Hello, Currently I'm working on my game environment. So I found and bought low poly but quite large forest scene. Almost everything works fine except that when moving camera around some trees are rendered in wrong order. I actually don't have a clue what could be wrong. Is it a model? or maybe some properties of the mesh or whole scene is set wrong? Adding a screenshot of the scene and the bug.

Is there any easy way to specify drawing order and/or the z-index of sprites in a Container? The order of adding elements seems to have no influence. My basic problem is that my background image renders over _some_ of the foreground sprites. I tried to use pixi-display.js, but I seem not to be able to import it correctly. I just created a <script> tag linking to pixi-display.js after the <script> tag that loads pixi.min.js (v4 from GitHub), but it keeps telling me "DisplayGroup is not a constructor" or "DisplayGroup is not a function". I thought using display lists and groups was a nice thing, but I'm open for a simple hack, too ;-)

As shown in this topic: It seems, separate groups are interleaved. How do they function with the z-index between each other? If I create group1 first and group2, group1 is below group2 right? What if I add element1 first to group2 and then element2 to group1 will element1 be above element2 since group2 was created later or its vice versa? Can somebody explain me how Phaser groups work?

The PIXI.sprite, which is underneath a PIXI.particles.Emitter, has some bound mouse events - mouseover and click... but they are being blocked by the particles. When mousing over the sprite or clicking on it, the event is not fired. I found someone having the same issue, and his solution was to set the containing PIXI.container's interactive property to false: https://github.com/pixijs/pixi.js/issues/1725 However, in my situation, I require that the container be interactive for dragging and zooming the map. How can I allow the sprite's mouse events to be fired, regardless of whether a particles emitter (or even another non-interactive sprite) is overlaid on top of it in respect to the z-axis - while still keeping the container's interactive=true?

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!

Hey guys, I'm building a top-down view racing game and I'm hitting a road block (pun unintended) when I try to place the players (the cars) above the map. What I'm trying to do is create two groups (game.add.group()), one for the map and one for the players. I am able to add the players to the player group (z-index of 2), but I can't add the map to the map group (z-index of 1). As you can see in the screen shot, the car is below the road. Could someone please explain how one goes about changing the z-index of TileMaps? How does one do it if there are multiple maps and needs to have the player in between them? Thanks in advance! Racer.Game = function(game){};Racer.Game.prototype = { create: function() { GAME.players = []; GAME.physics.startSystem(Phaser.Physics.P2JS); this.mapLayer = this.add.group(); this.mapLayer.z = 1; this.carLayer = this.add.group(); this.carLayer.z = 2; // Setup the Map/Level var map = new Phaser.Tilemap(GAME, 'level1'); map.addTilesetImage('Tile Sheet', 'tiles'); map.createLayer('track'); // this.mapLayer.add(map); // THIS DOESN"T WORK?! // Setup the Players var p1_keys = GAME.input.keyboard.createCursorKeys(); player1 = new Car(200, 200, 'carYellow', p1_keys, this.carLayer); }, update: function() { for (var player in GAME.players) { GAME.players[player].update(); } } };var Car = function(x, y, colour, keys, layer) { this.turn_speed = 4; this.current_speed = 0; this.acceleration = 15; this.ground_friction = 0.98; this.key_input = keys; var car = new Phaser.Sprite(GAME, x, y, colour); car.anchor.setTo(0.5, 0.5); layer.add(car); GAME.physics.p2.enable(car, false); this.car = car; GAME.players.push(this);};Car.prototype.update = function() { this.current_speed *= this.ground_friction; if (this.key_input.up.isDown) { this.current_speed += this.acceleration; } if (this.key_input.down.isDown) { this.current_speed -= this.acceleration; } if(this.key_input.left.isDown) { this.car.body.angle -= this.turn_speed; } if(this.key_input.right.isDown) { this.car.body.angle += this.turn_speed; } this.car.body.moveForward(this.current_speed);}

Hi, I am using bGUI extension to create a nice User Interface. It has several panels made of .png images with transparency. Everything works perfect, but when bGUI panels are on-top of each others, the rendering order looks random : some images are on top of others, some are behind, without logic. Those bGUIPanel acts as buttons, and using "guiposition()" z position allows to control the hierarchy of z "touchability", but the way they are displayed doesn't match "graphically". Is there a way I can control the z order of images ? I've tried to add bGUIPanel.mesh.position.z = 2; after "bGUIPanel.guiposition()" but this doesn't seem to change ... Thx for your advice !

Hello! I'm creating a game. There are a lot of interface elements, planets sprites, ships sprites of mobs and other players and so on. Now I have faced with such a problem: z-index problem. A lot of elements hover each other and that makes me nervous because the last loaded element is the element on the top. And sometimes ships are under the planets, interface elements are under sprites of ships and planets and so on. I understand that I need to create a group and use "bringtToTop()" method but how can union all elements when they are all in different files? Should I create a lot of groups for each file and then union them into another big one or what should I do? Thank you for your answer in advance! I will really appreciate that) Good luck!

I want a sprite always in the front. Setting z to max didn't do it. What is needed?

Hello I am new in phaser, i tried the following, but not works (i cant change display order)!! 1. variables var group; var player; var player2; 2. function create() group = game.add.group(); player = game.add.sprite(400, 350, 'player'); player2 = game.add.sprite(400, 350, 'player'); game.physics.enable(player, Phaser.Physics.ARCADE); game.physics.enable(player2, Phaser.Physics.ARCADE); player.add(group); player2.add(group); group.sort(); 3. and at function update() section: i change sprite x,y coordinates by mouse, or velocity and then: group.sort('y', Phaser.Group.SORT_ASCENDING); I want to change the display of sprites (bigger y coordinates, more front like in phaser group examples)... but not works! I manually change z depth of sprite: player.z=10; but no change. I have a lot of sprites, how can i change display order, what did i missed? thanks

Hi guys, First thanks for the awesome engine and especially great documentation. I'm currently working on a top down runner. After playing around for a while now I have some assumptions I would like to verify if I'm right: Tilemap layers visibility are always rendered in the same row as they are created. There is no way I can adjust their z-index with layer.z = X. The only way to push a certain layer at the top is to use the bringToTop() function, which basically reorders the display list. My main question: Is there any possibility that when I have a player sprite, that is not part of the tile map, I can put between 2 tilemap layers? (from my trying it seems I can only affect the display list order within the tilemap or within sprites outside of the tilemap, but I can't mix them) Thank you and keep up the good work, Clemens

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!

Hello So this is pretty much my very first post in the forums. I do have a question. It's: is there a z-index (which is used in CSS) implementation in Phaser for a tileSprite ? For example if I have two sprites in the same position and how to programatically decide which one I want to be in the front.. I'm still learning Pahser's API and quite a beginner so please bear with me

Hi, I've played around with tilemaps and I faced some overlapping/Collison issues. What I want to achieve is a RPG-Style Map where some elements could be overlapped (e.g. trees, a bush or a house) and some of them should overlap the character. My first Idea is to render in a specific order and give the characters a z-Index to track when I have to paint them at rendering. Now my question: Could I overwrite/manipulate the render method to keep track when and what is being rendered? Maybe tile-wise or at least tile layer/player-wise. Thank you in advance! Carsten