Search the Community

I've been looking through the examples, but there's nothing that does what I'm looking for. I have circular matter bodies with the texture of a ball. How do I put text on top of these balls while keeping the body round? I've looked into containers, but it only seems possible to have them in rectangular shape. I'm thinking whether generating my own sprites with the text already embedded there would be the best option. It's not that straightforward as the text/numbers/symbols I'll be presenting there will be fed by an API, so I can't generate the sprites beforehand.

Hello. I currently have a strange problem when drawing lines or a rectangle on a existing container. Containers Layout: ---------------------------------- - World : Container -> SceneManager -> GetActiveScene(): Container When the world get's created i get the ActiveScene from the scene manager. But when the graphics object is rendered it has a differant size then its container where it is placed in. Code Snippet: NewScene(sceneOptions: ISceneOptions): boolean { //this.ActiveScene.removeAllListeners(); //this.ActiveScene.destroy(); this.ActiveScene = new Scene(0xe3d8c3); this.ActiveScene.y = 110; this.ActiveScene.width = 900; this.ActiveScene.height = 400; var graphics = new Graphics(); graphics.beginFill(0xffffff); // draw a rectangle graphics.drawRect(0, 0, 900, this.ActiveScene.height - 25); //this.ActiveScene.addChild(Overlay.Instance.Overlay); this.logger.log('New Scene created!'); this.ActiveScene.addChild(graphics); return true; } Hope anyone can help.

Hello friends, I'm totally new to Pixi.js and canvas in general. I'm trying to develop my favorite board game Patchwork, where I have a scrollable container with patches from which player can select one. Above the canvas I have two buttons for controlling the scrolling direction. Each time player clicks on one of these buttons, the x coordinate of the container updates. I was wondering if there is any 'best practice' way to implement infinite scrolling of the container (such as creating an infinite image gallery)? I have a few ideas, but I wan't to hear other opinions before I really dive into implementing the solution to this problem. Here are some screenshots for reference: Thank you in advance!

Hey, I want to ask if there's a way to create render textures of displayObjects which aren't rendered/shown on screen? For example, let's say I have a container which has the sprites of normal maps, I want to create a render texture of this container which I could then maybe use in a shader. Now, I obviously wouldn't want this container to be visible at all, if I make it invisible, the renderTexture is going to be empty as well. So, the use case is that I have a container which is just used to create textures that could be used in a shader, and I dont want this container to be visible in the scene. Is there a way to achieve this?

I am trying to get all the children of a container displayed inside a zone. var container = this.add.container(200, 200); var sprite0 = this.add.sprite(0, 0, 'box'); var sprite1 = this.add.sprite(0, 100, 'box'); container.add([ sprite0, sprite1 ]); var graphics = this.add.graphics(); var color = 0x00ffff; var thickness = 2; var alpha = 1; graphics.lineStyle(thickness, color, alpha); graphics.strokeRect(32, 32, 256, 256); graphics.fillStyle(color, 0); graphics.fillRect(32, 32, 256, 256); container.mask = new Phaser.Display.Masks.GeometryMask(this, graphics); However when they are outside and overlapping is seems like they are blending on each other? How should I proceed?

I try to make my pixi.js scene to adjust its size to the window on resize. To do so I use the following: window.addEventListener("resize", () => { this.renderer.resize(window.innerWidth, window.innerHeight); }) It resizes the canvas, inspecting the element it shows the correct size, but somehow the scene is cut off. Both the text and image are pixi.js generated - all stored in several PIXI.Container()'s

Hi, I am starting my first little game with Phaser and it's not going entirely smooth :D. I need to display a button with a word (dynamic text and size) , center it, and make it draggable. What I liked about Phaser is that there were tons of shortcuts and lab examples to do things quickly. So I tried to keep my code so concise as possible. These three problems took most of my time. Center the text in a button ( which is a graphic ) Putting these in a container and centering the container. Dragging the container. I would love to solve the first two simply by using setOrigin, or Phaser.Display.Align. But that wasn't so simple, it didn't work or I did not understand it enough. So I manually calculated those now. I was hoping someone could explain why the other attempts didn't work. But the remaining problem is now that only the left side of the button is draggable. Is this a phaser bug, or have I implemented this wrong. I made a fiddle with all my attempts. I commented the failed attempts. https://jsfiddle.net/mrklein/5verkbfg/52/ I hope the rest of the game will take less time, hopefully can someone point me what I did wrong so I can learn from this. kind regards.

Hello, I am making a top down zombie shooter in Phaser 3. I am using the moveToObject function to make zombies follow the player. Now I want to make healthbars for the zombies. I have read that you can use containers to make the enemies and healthbars move together but I am having trouble to move the container with moveToObject. Is it possible to move a container with the moveToObject function or should I use something else instead?

I have an enemy with a health bar. I want the health bar to move with the enemy. To do this I have made a container like this: var container = scene.add.container(x, y, [enemy, healthBar]); This work just as expected, the problem is when I try to move the container with moveToObject like this: scene.physics.moveToObject(container, player, speed); This does not work at all. How do I solve this?

I've taken the SpaceInvaders example project and extended it - added different enemy types with animations, a different player, also with animations. I'm in the process of adding the three 'walls' or 'barriers' that were in the original game. I've set up each wall as a separate instance of a class that extends me.Container. Each container holds 4 rows of 12 images in a grid, similar to how the enemies are stored in a container with a grid. Currently all the walls are rendering properly, but it seems like the quad for each wall is offset to the midpoint of the wall (along the x axis). So when I fire, into visually what appears to be empty space, I'm actually hitting and removing a piece of the wall. See the attached gif to get an idea of what the issue is, I have debugging enabled so that you can see the boundaries for each piece of the wall and the walls themselves. The left edge of the collision quad for the wall container seems to be placed horizontally in the middle of the wall, instead of at the left edge. Am I missing something - a parameter for defining the left of the quad? Here's a snippet from play.js, the ScreenObject. onResetEvent: function() { ... var wallY = me.game.viewport.height - 140; console.log("Creating Left Wall"); this.leftWall = new game.Wall( 160, wallY, game.collisionTypes.LEFT_WALL ); this.leftWall.createWall(); me.game.world.addChild(this.leftWall, 2); console.log("Creating Middle Wall"); this.middleWall = new game.Wall( me.game.viewport.width / 2 - 16, wallY, game.collisionTypes.MIDDLE_WALL ); this.middleWall.createWall(); me.game.world.addChild(this.middleWall, 2); console.log("Creating Right Wall"); this.rightWall = new game.Wall( me.game.viewport.width - 192, wallY, game.collisionTypes.RIGHT_WALL ); ... } Here's the code for the Wall 'class': game.Wall = me.Container.extend({ init: function (left, top, collisionType) { // A Wall is composed of three sections, each representing // a different character. this.PREFIXES = ["wall_L_","wall_M_","wall_R_"]; // Each Character, or wall section, is cut up into a grid of // four rows and columns. this.COLS = 4; this.ROWS = 4; this.PIECE_WIDTH = 16; this.PIECE_HEIGHT = 16; // The width of an entire row (and the container itself), the width of each piece (cell) // or column in a wall section * the number of columns per wall section // * the number of wall sections this.wallWidth = this.PIECE_WIDTH * this.COLS * this.PREFIXES.length; this.wallHeight = this.PIECE_HEIGHT * this.ROWS; this._super(me.Container, "init", [left, top, this.wallWidth, this.wallHeight]); this.vel = 0; this.collisionType = collisionType; }, createWall: function () { // generate the entire wall, left to right, section by section, column by column for (var j = 0; j < this.ROWS; j++) { for (var c = 0; c < this.PREFIXES.length; c++ ) { for (var i = 0; i < this.COLS; i++) { // The name of the image var wallPiece = this.PREFIXES[c] + j + i; // The x and y coords for the wall piece var x = c * this.COLS * this.PIECE_WIDTH + i * this.PIECE_WIDTH; var y = j * this.PIECE_HEIGHT; // Add the piece as a child of the wall container. this.addChild(me.pool.pull("wall_piece", x, y, wallPiece, this.collisionType)); console.log("wall.createWall: (" + x + ", " + y + "); img: " + wallPiece); } } } this.updateChildBounds(); this.createdWall = true; }, onActivateEvent: function () { }, onDeactivateEvent: function () { }, removeChildNow: function (child) { this._super(me.Container, "removeChildNow", [child]); this.updateChildBounds(); }, update: function (dt) { this._super(me.Container, "update", [dt]); this.updateChildBounds(); } }); and, the onCollision method from laser.js (i've defined custom collision types) onCollision: function (res, other) { if (other.body.collisionType === me.collision.types.ENEMY_OBJECT) { me.game.world.removeChild(this); game.playScreen.enemyManager.removeChild(other); return false; } if (other.body.collisionType === game.collisionTypes.LEFT_WALL) { me.game.world.removeChild(this); game.playScreen.leftWall.removeChild(other); return false; } if (other.body.collisionType === game.collisionTypes.MIDDLE_WALL) { me.game.world.removeChild(this); game.playScreen.middleWall.removeChild(other); return false; } if (other.body.collisionType === game.collisionTypes.RIGHT_WALL) { me.game.world.removeChild(this); game.playScreen.rightWall.removeChild(other); return false; } }

Hi, I've added a particle manager to a container and created three emitters within it. The first emitter appears to inherit its position from the container as you'd expect, but the second and third emitters seem to be doing something weird in terms of positioning. I could try adding three managers each with one emitter, but was wondering if there was a reason why the three emitters in one manager doesn't work... Thanks, Gordon 'this' in the context below is the container. addEngines() { // create attached particle emitter this.particles = this.scene.add.particles('particleBlue') .setDepth(this.depth + 1); this.add(this.particles); this.emitterBottom = this.particles.createEmitter({ x: -19, y: 10, scale: { start: 0.5, end: 0 }, blendMode: 'ADD', frequency: 25, speed: 25, }); this.emitterTop = this.particles.createEmitter({ x: -19, y: -10, scale: { start: 0.5, end: 0 }, blendMode: 'ADD', frequency: 25, speed: 15, }); this.emitterFront = this.particles.createEmitter({ x: 20, y: -20, scale: { start: 0.5, end: 0 }, blendMode: 'ADD', frequency: 25, speed: 35, }); }

Hi, I'm new to Pixi and couldn't find anyone with the same problem so here I am. I have a container full of black squares (drawn with Graphics) to hide parts of the map, like a fog of war. Some have their alpha set to 0 to reveal what's underneath (I know there are a million better ways to do that but MVP first, optimizations later). The problem is when I set cacheAsBitmap = true on the container, a weird diagonal line appears. This container can be very big and doesn't change much so it makes sense to cache it. Is there something I'm missing or is this a bug? I am literally doing nothing else to it, it'a at 0,0 of the parent container (the stage) and just contains Graphics objects. I'll try to reproduce the issue in a Codepen, thanks to anyone who can help.

Hi, Can anyone tell me please what the best way to hide a "BETTING CONFIGURATION" container by clicking anywhere on the screen other than that container? Actually i'm detecting the mouse coordinates and comparing with the window / container coordinates, but it's good practice? public static isColliding(mouse: any, object: any): boolean { return !(mouse.x < object.x || mouse.x > (object.x + object.width) || mouse.y < object.y || mouse.y > (object.y + object.height)); } this.baseContainer.interactive = true; this.baseContainer.addListener('pointerdown', () => { if (Utils.isColliding(this.mouseCoord, betConfigUI)) { console.log('you are in window space'); } else { console.log('you are not in the window space'); } }) Thanks in advance!

Hi. I just started in Pixi js. Can someone explain to me if a container is used to create different levels of game? Thanks in advance

Hello everyone What is the most powerful and performance way to extends a PIXI class? Example from my side, I need the native PIXI.Container class but with more methods and properties, and here's how i proceed. PIXI.ContainerData = (function () { class ContainerData extends PIXI.Container { constructor() { super(); this.Sprites = {}; // others custom proprety for game obj }; get d() { return this.Sprites.d }; // return diffuse sprites get n() { return this.Sprites.n }; // return normals sprites //TODO: spine normal are arrays }; ContainerData.prototype.createJson = function(dataValues) { }; ContainerData.prototype.asignJson = function(dataValues) { }; //END return ContainerData; })(); I also know another way to extends functional prototyping. example: function ContainerData() { PIXI.Container.call(this); this.initialize(); }; ContainerData.prototype = Object.create(PIXI.Container.prototype); ContainerData.prototype.constructor = ContainerData; ContainerData.prototype.initialize = function () { this.Sprites = {}; }; I wondering about the cleanest and most efficient techniques to properly extend a class pixi? But especially on the most optimal way, knowing that JS need scan all the prototypes from the bottom to the top! The first technique worries me a little because in my console, Is look like that all the prototypes are cloned by reference and duplicate! So, i am interested in different techniques and advice. I am therefore looking for the most equitable approach between performance (speed) but also the readability for debugging. Thanks in advance.

Hey all, I want to resize an element but not as often as I currently do it. Right now I have a project with an html element that gets resized on every frame and it runs on every update. game.gui.TextArea = me.Renderable.extend({ init: function() { this.textarea = document.createElement('textarea'); this.textarea.id = 'textHistory'; this.textarea.readOnly = "true"; this.textarea.disabled = "true"; me.video.getWrapper().appendChild(this.textarea); }, update: function() { videoPos = me.video.getPos(); this.textarea.style = 'width:' + (window.innerWidth - videoPos.width) + 'px; height:' + videoPos.height + 'px;'; } }); I'm concerned about this, this code will run way more often than it needs. Not sure about the performance impact but it only needs to run when the window size is updated. Is there a way I can piggyback on any melonjs functions that resize the canvas and only run it then?

Hi guys, does anyone know how can I bring in front of all of my scene a container(popup) that was created in a previous scene? Is this possbile? Thanks.

Hi guys, I'm trying to make some windows(pop-ups) that I will use in my game, these are for game over, game won or showing different text tips. Will contain text, buttons, sprites. What is the best way to achieve this? If I use a container, how can I show/hide it? This environment is new for me so I'm open to suggestions and ideas. Thank you!

When I extend a class, as shown here: export class AbstractType extends Phaser.GameObjects.Sprite and try to add a subclass of that type(AbstractType) into a container, symbols.add(symbol) I get the following error: TypeError: gameObject.once is not a function at Container.addHandler (/Users/schwarzj/Desktop/symphonymathhtml5/node_modules/phaser/dist/phaser.js:57689:1) at Object.Add (/Users/schwarzj/Desktop/symphonymathhtml5/node_modules/phaser/dist/phaser.js:100986:1) at Container.add (/Users/schwarzj/Desktop/symphonymathhtml5/node_modules/phaser/dist/phaser.js:57790:1) at NumberBarController.addSymbol (/Users/schwarzj/Desktop/symphonymathhtml5/app/controllers/numberbar.controller.ts:807:12) at NumberBarController.layoutTask (/Users/schwarzj/Desktop/symphonymathhtml5/app/controllers/numberbar.controller.ts:481:12) at NumberBarController.onSoundsLoad (/Users/schwarzj/Desktop/symphonymathhtml5/app/controllers/numberbar.controller.ts:364:9) at EventEmitter.emit (/Users/schwarzj/Desktop/symphonymathhtml5/node_modules/phaser/dist/phaser.js:1960:1) at Function.AudioController.sendAudioLoadComplete (/Users/schwarzj/Desktop/symphonymathhtml5/app/controllers/audio.controller.ts:300:44) at EventEmitter.AudioController.onSoundsLoaded (/Users/schwarzj/Desktop/symphonymathhtml5/app/controllers/audio.controller.ts:250:25) at EventEmitter.emit (/Users/schwarzj/Desktop/symphonymathhtml5/node_modules/phaser/dist/phaser.js:1939:1) TypeError: child.setScrollFactor is not a function at ContainerWebGLRenderer [as renderWebGL] (/Users/schwarzj/Desktop/symphonymathhtml5/node_modules/phaser/dist/phaser.js:135801:1) at WebGLRenderer.render (/Users/schwarzj/Desktop/symphonymathhtml5/node_modules/phaser/dist/phaser.js:63279:1) at CameraManager.render (/Users/schwarzj/Desktop/symphonymathhtml5/node_modules/phaser/dist/phaser.js:110694:1) at Systems.render (/Users/schwarzj/Desktop/symphonymathhtml5/node_modules/phaser/dist/phaser.js:25617:1) at SceneManager.render (/Users/schwarzj/Desktop/symphonymathhtml5/node_modules/phaser/dist/phaser.js:43412:1) at Game.step (/Users/schwarzj/Desktop/symphonymathhtml5/node_modules/phaser/dist/phaser.js:105691:1) at TimeStep.step (/Users/schwarzj/Desktop/symphonymathhtml5/node_modules/phaser/dist/phaser.js:102205:1) at step (/Users/schwarzj/Desktop/symphonymathhtml5/node_modules/phaser/dist/phaser.js:64607:1) Any suggestions on how to move forward from here? Thank you!

Hello, I am making an arena shooter multiplayer game with destroyable obstacles. You can see a pre-alpha here: http://mechsgame.s3-website.eu-west-2.amazonaws.com I have encountered a problem I'm not sure on how to proceed on and I surprisingly couldn't find any information on similar issues. My game will have tall walls and other obstacles which can potentially cover the player's character. I would like to make an effect similar to RTS games, where an outline or a shadow of the player is visible on top of the obstacle. See the below picture to get an idea of what I mean. My player container contains several sprites. I have a few ideas on how to do this, but I do not think they are optimal. One is rendering the player container to a texture and using that a mask for potential overlapping obstacles, along with a filter. Secondly is just placing a simple GUI marker that shows where the player character is. In both cases, I am unsure on how to detect overlapping sprites. Is there an established solution for such cases? Thanks!

Hey guys, So I was fiddling around with Pixi's drag example on their website. I was wondering how can one drop the object in a container. For example I want to move and object and when it reaches near the container it attaches on top of it. I'm really scared of posting this since people might think I want someone to code it for me but I just want to understand the concept and the things I can use, so to say a guide. Would appreciate the help

Hi all, I am trying to clone an PIXI Container so that it will have no relationship with the original one, except that they both should share the same prototypes - DisplayObject, EventEmitter, Object. But somehow I loose the original Container, see demo:

Container and DisplayObject do not have their own size, its depends of its children, so If you add a Child and use anchor property and others properties related with size it will not work. What would be the best practice to do a simple layout like HEAD, BODY and FOOT? where I can define and limit the size of each "area" and all their children? I thinking in create a new class that inherit Container and overwrite the width and height properties to be static but I'm not sure it will be considered in the anchor logic. Any advice?, here an example how it does not work https://jsfiddle.net/fyt7zhvm/1/

I was wondering what is the best way to handle shadow for a "character". I made a character and i want to put a shadow at the bottom a kind of "circle" with opacity, for convenience let's say it's gonna be a transparent PNG. The way i can think of : - (1) Just add the sprite to the game, this leads to duplicated calculations in the update part cause i have to update both the "character" sprite and his shadow; - (2) Add the shadow as a child sprite of the "character", this leads to having the shadow on top of the sprite instead of back to it; - (3) Add the "character" sprite as a child of the shadow sprite, this seems not logical, but it works somehow; - (4) Create a group and add both the shadow and the sprite, (havn't test it but most likely) this leads to define specific property to the group for the size, the position and the overflow boundaries for collision relative to the "character" sprite and the shadow; - (5) Using a filter (Shader) applied on the hole game, with my character position as uniform to render the shadow directly on the "groundLayer". What do you think please ? Is there a better way that i am missing ? Thanks.

I'm fairly new to pixi.js and programming altogether. I am making a plugin that parses the xml save file of a sprite animation program and recreates the result in a game engine. The animation program uses bones for skeletal animations and the images (sprite parts) inherit the x, y, angle, scale_x, scale_y of the parent bone. The main idea would be to create sprites for the bones and the images, set up the bone inheritance to make the skeleton animation work correctly and then addChild the image sprites to the respective bone sprites. The only problem is that along with the aforementioned values, my image sprites also inherit the z_index of their container. The spriter does not limit the z hierarchy of the images to that of the parent bones, meaning that the user can change their z. I attempted to use worldTransform and worldAlpha for the parent bone values (keeping all the image sprites in a single container, thus controlling the z_index), but I am unable to get the parent bone's rotation. So, I either need to get all the values of the container and apply them correctly on the image sprites, or keep the image sprites inside the container and find a way to change their world z. Any suggestions would be appreciated and I thank you for your time.