Search the Community

I created an app using PixiJS. I set height and width for the PIXI.Application. I added containers which are having the graphics relevant to my application. When I draw those graphics some of them are go beyond the boundary limit of the application. When I render the application it's totally fine. Only the application area get rendered without the graphics which drew beyond the boundary limit of the app. Though when I get an image from the application using the following code, the graphics which drew beyond the boundary limit of the application are also available in that image. this.pixiApp.renderer.plugins.extract.image(this.pixiApp.stage, 'image/jpge', 1) How can I download an image only containing the graphics which are available within the app boundary limit.

How can I remove child from a group but I don't want it deleted or killed from stage? I keep all my screen objects in a group called screenObject for fading in. Then I have another group called cardGroup which keeps only the card sprites. I want to remove just two specific card sprites from cardGroup. I do this cardGroup.remove(card1, false); cardGroup.remove(card2, false); But it removes the object from stage as well. What do I do wrong? Or what to do?

There is a way to move the game stage or it's permanently locked to 0,0? I would like to be able to set its x,y like this... var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, 'test', { preload: preload, create: create }); game.x = 10; game.y = 10; Is this possible? PS: I tested the above and obviously it didn't work. I checked documentation and see that there is no x,y properties available for Game class but I was wondering if there is any hack. I can recalculate all my assets coordinates to achieve the result but it would be too much simpler if I could just move the game stage around... Thanks!

I am trying to test out persistence of objects--at the moment an image, but eventually a group that will be a UI component. Right now, my image that I want to persist ("persist") goes from State1 to State2 just fine, but when I go back to State1, it disappears and I get an error ("uncaught typeError: cannot read property 'compressionAlgorithm of null in Phaser.js" and then points to a bunch of pixi.webgl render locations) Why is the item disappearing if it's been added to the stage, and how do I overcome this problem? Here is the code for State1: var state1 = { preload: function () { this.load.image('persist', 'persist.png'); this.load.image('btn', 'btn.png'); }, create: function () { this.persist = game.add.image(this.world.centerX, this.world.centerY, 'persist'); this.game.stage.addChild(this.persist); this.btn = this.add.image(200, 200, 'btn'); this.btn.inputEnabled = true; this.btn.events.onInputDown.add(this.changeState, this); }, changeState: function() { this.state.start("state2"); } And then State 2 is just taking us back to state1 on clicking the button var state2 ={ preload: function(){ this.load.image('btn', 'inventory/btn.png'); }, create: function(){ this.btn = this.add.image(200, 200, 'btn'); this.btn.inputEnabled = true; this.btn.events.onInputDown.add(this.changeState, this); }, changeState: function(){ this.state.start("state1"); } }; Thanks in advance

Hi, I am trying to modify the 'Pick Up Object' phaser example: https://phaser.io/examples/v2/p2-physics/pick-up-object How it should work is that when a user clicks on one of the shapes at the bottom of the screen it should generate a new shape inside the yellow containing block. I want the shapes to restricted inside the yellow box so that they cannot pass outside. Here is my demo version: http://towerofconfidence.stage.pixeledeggs.com/test/index4.html I have tried the following code - but I am not sure what is going wrong with the boundaries - any help/suggestions would be much appreciated! var game = new Phaser.Game(640, 1139, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); // set the world bounds to match the yellow container game.world.setBounds(167, 0, 306, 500); // center camera game.camera.bounds.setTo(0, 0, 640, 1139); // load the background - this is larger than the screen var mainBG = game.add.sprite(0, -3622, 'mainBG'); // add shapes/buttons to the shapeMenu button1 = game.add.button(80, 760, 'button1', actionOnClickButton, this, 2, 1, 0); button2 = game.add.button(254, 800, 'button2', actionOnClickButton, this, 2, 1, 0); button3 = game.add.button(486, 770, 'button3', actionOnClickButton, this, 2, 1, 0); Then the logic for placing the shapes follows the 'Pick Up Object' example - using PS physics ands boundsCollisionGroup... Thanks!

I have on stage special "workspace" pixi container - I use it to allow user to draw on it. It works perfect if I set hitArea dimensions to renderer width and height but the problem is that user can move this layer or zoom in/out. I think result is obvious, after move/zoom it is not possible to draw on canvas because hitArea "run" out from the screen or it is too small. My question is what is the best actual solution for this (pixi v4)? I was thinking about setting Infinite hitArea but this is not possible. I could set hitArea Rectangle to be like 999999px so it should not be possible to go out of drawing area but is it ok? Can setting very big hitArea slow down interaction manager? Also another option was to replace hitArea (make it bigger) after move/zoom but this is proably not the best idea. Is there any elegant solution to cover this case easly?

Hey everyone, I want to center an element (in this case a graphics element) in the center of the screen. https://jsfiddle.net/user/adnanchang/fiddles/ As you can see from my code, I am changing the position of the graphics and bringing it to the center of the screen. I don't want that. I want to actually move the pivot/position of the stage in such a manner that the graphics then looks like it is to the center of the screen. Also, would it be possible to save the original position of the stage?

I'm wondering how to create stages and how to change between them. It seems like there's only 1 stage per application and you just add and remove children from them. I saw the removeChildren() method and I tried invoking it. It does remove the container but it also generates a heap of WebGL errors with INVALID_OPERATION. So I'm wondering how I should be approaching this.

Hey there, i am new to JS and PIXI and tried to rebuild a pong game in PIXI.JS to make it responsive. (https://robots.thoughtbot.com/pong-clone-in-javascript) It seems to work but i run into the issue that all elements have a trail on movement, do i have to rerender the stage to avoid the trail or am i missing something? https://jsfiddle.net/02utycqq/ // define gamne variables const appWidth = window.innerWidth; const appHeight = window.innerHeight; const paddleWidth = 50; const paddleHeight = 10; const ballSize = 5; const appWidthHalf = appWidth / 2; const appHeightHalf = appHeight / 2; const paddleWidthHalf = paddleWidth / 2; const pongColor = 0x57dfbf; const computerPositionX = appWidthHalf - paddleWidthHalf; const computerPositionY = 50; const playerPositionX = computerPositionX; const playerPositionY = appHeight - computerPositionY - paddleHeight; const ballPositionX = appWidthHalf; const ballPositionY = appHeightHalf; const playerSpeed = 4; const computerSpeed = 4; const ballSpeed = 3; // Setup the ticker and the root stage PIXI.Container. const app = new PIXI.Application(appWidth, appHeight, { antialias: false, transparent: false, resolution: 1, }); function Paddle(x, y, width, height) { this.x = x; this.y = y; this.width = width; this.height = height; this.x_speed = 0; this.y_speed = 0; } Paddle.prototype.render = function renderPaddle() { this.graphics = new PIXI.Graphics(); this.graphics.beginFill(pongColor); this.graphics.drawRect(this.x, this.y, this.width, this.height); this.graphics.endFill(); app.stage.addChild(this.graphics); }; Paddle.prototype.move = function (x, y) { this.x += x; this.y += y; this.x_speed = x; this.y_speed = y; if (this.x < 0) { this.x = 0; this.x_speed = 0; } else if (this.x + this.width > appWidth) { this.x = appWidth - this.width; this.x_speed = 0; } }; function Player() { this.paddle = new Paddle(playerPositionX, playerPositionY, paddleWidth, paddleHeight); } Player.prototype.render = function renderPlayer() { this.paddle.render(); }; Player.prototype.update = function () { for (const key in keysDown) { const value = Number(key); if (value === 37) { this.paddle.move(-playerSpeed, 0); } else if (value === 39) { this.paddle.move(playerSpeed, 0); } else { this.paddle.move(0, 0); } } }; function Computer() { this.paddle = new Paddle(computerPositionX, computerPositionY, paddleWidth, paddleHeight); } Computer.prototype.render = function renderComputer() { this.paddle.render(); }; Computer.prototype.update = function (ball) { const x_pos = ball.x; // eslint-disable-next-line let diff = -(this.paddle.x + this.paddle.width / 2 - x_pos); if (diff < 0 && diff < -computerSpeed) { diff = -ballSize; } else if (diff > 0 && diff > computerSpeed) { diff = ballSize; } this.paddle.move(diff, 0); if (this.paddle.x < 0) { this.paddle.x = 0; } else if (this.paddle.x + this.paddle.width > appWidth) { this.paddle.x = appWidth - this.paddle.width; } }; function Ball(x, y) { this.x = x; this.y = y; this.width = ballSize; this.height = ballSize; this.x_speed = 0; this.y_speed = ballSpeed; } Ball.prototype.render = function renderBall() { this.graphics = new PIXI.Graphics(); this.graphics.beginFill(pongColor); this.graphics.drawRect(this.x, this.y, this.width, this.height); this.graphics.endFill(); app.stage.addChild(this.graphics); }; Ball.prototype.update = function (paddle1, paddle2) { this.x += this.x_speed; this.y += this.y_speed; const top_x = this.x - ballSize; const top_y = this.y - ballSize; const bottom_x = this.x + ballSize; const bottom_y = this.y + ballSize; if (this.x - ballSize < 0) { this.x = ballSize; this.x_speed = -this.x_speed; } else if (this.x + ballSize > appWidth) { this.x = appWidth - ballSize; this.x_speed = -this.x_speed; } if (this.y < 0 || this.y > appHeight) { this.x_speed = 0; this.y_speed = ballSpeed; this.x = appWidthHalf; this.y = appHeightHalf; } if (top_y > appHeightHalf) { if ( top_y < paddle1.y + paddle1.height && bottom_y > paddle1.y && top_x < paddle1.x + paddle1.width && bottom_x > paddle1.x ) { this.y_speed = -ballSpeed; this.x_speed += paddle1.x_speed / 2; this.y += this.y_speed; } } else if ( top_y < paddle2.y + paddle2.height && bottom_y > paddle2.y && top_x < paddle2.x + paddle2.width && bottom_x > paddle2.x ) { this.y_speed = ballSpeed; this.x_speed += paddle2.x_speed / 2; this.y += this.y_speed; } }; const player = new Player(); const computer = new Computer(); const ball = new Ball(ballPositionX, ballPositionY); function render() { player.render(); computer.render(); ball.render(); } function update() { player.update(); computer.update(ball); ball.update(player.paddle, computer.paddle); } function step() { update(); render(); // app.ticker.update(step); } document.body.appendChild(app.view); app.ticker.add(step); // Controls const keysDown = {}; window.addEventListener('keydown', (event) => { keysDown[event.keyCode] = true; }); window.addEventListener('keyup', (event) => { delete keysDown[event.keyCode]; }); // resize function for app function resize() { app.view.style.position = 'absolute'; app.view.style.width = `${window.innerWidth}px`; app.view.style.height = `${window.innerHeight}px`; app.view.style.display = 'block'; } window.onresize = () => { app.ticker.add(resize); }; Thanks a lot.

Hello there, I'm trying without success to find all stages and renderers that PIXI has in memory, so I can call destroy on them and their children. I'm sure there is a way to have that so I don't have to keep track on my application. It is a React website and therefore the component that had that reference is unmounted and then mounted again later on. When I instantiate a new stage and renderer, I can see them piling up and using a lot of memory as I go from one part of my website to another. How could I find all instances so I destroy them before creating new ones? I have the global PIXI object on window... Thanks a lot!

Hi there, first i'm more or less new to JS and Pixi (comming from php), so please be patient if i ask strange questions i want to write an relative huge game/app with many locations and animations (spine maybe) and want to realize it in an one page app. To keep the memory usage low i try to write an stage/container management class that only initialize the elements (sprites/animations/dom elements) on demand and dispose them afterwards. My question is now is there allready an solution for this hidden in pixi? Or does a best practise exist for this? Or does there exist maybe even a tutorial for such a thing? Like mentioned i tried allready to write an class, but this works only for better management, but not for less memory usage or performance (app.js) And till now only adding (dom)elements and displaying them works (with resize! ) but destroying or adding the sprites in the container wont work. so any suggestions or guiding directions how to solve the many locations issue?

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(this.game.world.bounds, 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 game.world.getBounds() 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?

I am trying to leave the game on even if the game is out of focus with stage.disableVisibilityChange = true; However it seems to not work and I wonder if it is because my sprites aren't on the stage. I have followed tutorials that tell to add sprites into the game with game.add.sprite(x,y, 'name');. However it seems there is another way, something like stage.addChild(); if I am correct. What is the difference between these two. Should I use the second one and why? Is it the reason it is not working or something else. Currently I initialize the game and stage like this: game = new Phaser.Game(1000,600, Phaser.AUTO, 'gameCanvas', {preload: preload, create: create, update: update}, false, false); game.stage = new Phaser.Stage(game); game.stage.disableVisibilityChange = true;

Is there anything like "Stage Width and Height"... I am asking because i am getting some weird scaling where the X scale looks like it "real skinny" ONLY when i change the #renderCanvas to try and make 600 x 900 canvas center in page... Centers and looks great but my models look "SQEEZED": For now i get by by just adding a little KLUDGE to the scaling.x by giving it an offset... Should look more like this: Is there some kind of stage width and height and or scaling options we have to set when not using a canvas at 100% Here my my #css: #cvs { position: absolute; width: 600px; height: 900px; margin: auto; top: 0; left: 0; right: 0; bottom: 0; padding: 0; opacity: 0; z-index: 0; outline: none; touch-action: none; -ms-touch-action: none; background-color: #000000; } Anyone Got Any Ideas On This One ???

Hi Community, I want to make an Game Over screen for my Top Down Test Game. My Code is in states. I did load the state with "game.state.add('gameover'), gameoverState);" on my play.js gameover: function () { if (sprite.body.y > 700) { game.state.start('gameover'); } gameover.js var gameoverState = { create: function () { var gameoverLabel = stateText = game.add.text(game.world.centerX, game.world.centerY, ' ', {font: '84px Arial', fill: '#F2F2F2'}); stateText.anchor.setTo(1.1, 0.2); }, update: function () { game.world.removeAll(); stateText.text = " GAME OVER \n Click to restart"; stateText.visible = true; //the "click to restart" handler game.input.onTap.addOnce(function () { game.state.restart();}, this.start); }, start: function () { game.state.start('menu'); } }; Everytime I die this will pop up, no text just all the obj and layer resize in 16x16 or 32x32. Regards, ITpaolo btw. Sorry, i'm nooby in Phaser. :-P EDIT: I know now that this was the problem for it: play.js /* if (sprite.body.x < -30) { sprite.body.x = this.game._width - 30; } if (sprite.body.x > 650) { sprite.body.x = this.game._width - 650; } if (sprite.body.y < -50) { sprite.body.y = this.game._height - 50; } if (sprite.body.y > 660) { sprite.body.y = this.game._height - 650; } */ But now Idk how to do the Game Over screen, any help? EDIT2: Did now: play.js if (sprite.body.y > 650) { stateText.text = " GAME OVER \n Click to restart"; stateText.visible = true; //the "click to restart" handler game.input.onTap.addOnce(function () { game.state.restart(this.start);}); } }, start: function () { game.state.start('menu'); } Its now restarting the 'play.js', if I click "restart" but I want that he start the "menu.js" state, any help 2.0? ^^ EDIT3: I fixed it, hope I can help anyone. play.js if (sprite.body.y > 650) { stateText.text = " GAME OVER \n Click to restart"; stateText.visible = true; //the "click to restart" handler game.input.onTap.addOnce(function () { game.state.start('menu');}); } }, start: function () { game.state.start('menu'); } EDIT4: The last edit, now I fixed it really, he now start the 'gameover.js' when the sprite die.^^ play.js if (sprite.body.y > 650) { game.state.start('gameover'); } gameover.js var gameoverState = { create: function () { var gameoverLabel = stateText = game.add.text(500, 300, ' ', {font: '50px Arial', fill: '#F2F2F2'}); stateText.anchor.setTo(1.1, 0.2); }, update: function () { if (sprite.body.y > 650) { stateText.text = " GAME OVER \n Click to restart"; stateText.visible = true; //the "click to restart" handler game.input.onTap.addOnce(function () { game.state.start('menu');}); } } };

I was wondering is there function in Phaser that will allow me to generate pixel data object from current Phaser Scene (cover the whole canvas or part of it) and pass this object in I don't know which form to the second Phaser Stage and display it as it is at certain position? Something like this: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas Or I just fall back to plain Canvas API and use ImageData object?

Hello guys, I have been a long-time lurker on this forum. Most of my time spent here I wasn't even logged in but I have always enjoyed a ton of great answers here and even more interesting questions asked. Anyways, I don't want to waste your time with introducing myself and will allow myself to ask a question for the first time! I am confused by the usage of "this." vs. "this.game". It seems that I can use both interchangeably without any errors popping up in the console and the same results on the screen. Here is an example: var MyGame = {}; MyGame.game = new Phaser.Game(800, 600, Phaser.AUTO, ''); MyGame.Boot = function() {}; MyGame.Boot.prototype = { preload: function() {}, create: function() { this.game.stage.backgroundColor = '#FFFFFF'; this.game.physics.startSystem(Phaser.Physics.ARCADE); this.state.start('Preload'); }, update: function() {} }; The three lines in the "create" method can all be written beginning with "this.game" or just "this." For example: this.game.stage.backgroundColor = '#FFFFFF'; this.stage.backgroundColor = '#FFFFFF'; this.game.physics.startSystem(Phaser.Physics.ARCADE); this.physics.startSystem(Phaser.Physics.ARCADE); this.game.state.start('Preload'); this.state.start('Preload'); They work just fine in both ways. How come that is so? When do I use "this.game" and when only "this."? I have been following along these tutorials which is also where I got the above code snippets from: SpaceHipster Tutorial: https://gamedevacademy.org/html5-phaser-tutorial-spacehipster-a-space-exploration-game/ BunnyDefender YT Series: link

In this tutorial about game states, there is a part where the author says: this.game.state.start("GameOver",true,false,score); "This is the first time I am calling the state with all its arguments, so let’s have a look at them: GameOver is the name of the state to start. The second argument is called clearWorld, default at true, and clears the World display list fully (but not the Stage, so if you’ve added your own objects to the Stage they will need managing directly)." What is this "Stage" she talks about? And how would I add my "own" objects to this "Stage", in a way that the clearWorld won't clear these objects and I'll have to manage them directly?

Hi, This is my codepen : http://codepen.io/WW/pen/LGzpVv what i wanna do is trying click on stage and get the mouse position value, but, there's nothing happens while clickiing on stage. the official example looks working great : http://pixijs.github.io/examples/index.html?s=demos&f=graphics-demo.js&title=Graphics but mine isn't. so, anyone any idea? thanks for help. PS : i guess the problem might because the stage width & height isn't fit to the renderer. just guess, still trying....

Hi everyone, I'm developing a simple game where objects visually approach the screen and you have to click on them before they visually reach the screen. However, I was getting mad when trying to add tweening to the sprites representing the approaching objects. They should fade out and in when hit to give a visual feedback to the player that they've been hit. I tested tweens in an extra stage and everything worked fine, so I adapted those three lines of code to the hit callback in the gameplay stage of the game. The tween wouldn't start at all. Before the first time the tween's start function was invoked, its startTime attribute was set to null, after that it changed to 0, but visually, nothing happened. So I wondered if I missed something, commented out all the stuff that could interfere like the content of the update function, where the scale of each approaching object is adjusted and so on. In the end, I had an object with a hit function, a click callback and a sprite, still standing. And still - nothing happened. So just before I wrote this post right here, I tried commenting out the whole update function, including its declaration, from the stage and voilà. The tween works like a charm. So to sum up, tweening a sprite doesn't work when an update function is present in the stage to which the sprite belongs. Is this behaviour intended? Is it to fix in a coming release? What is the best practice so far? Greetings, Roberto

Hi! I am making a tower defense game. I need to check if a the "enemy" sprite is on the stage,how do I do that? Thanks

Hello all! The only thread on this topic seems to be this one, and I cannot get any of the suggestions to work for me. Can anyone give me a way to center my game? Thank you!

Hello I need help with total destroy pixi.js for restart it, like reload page. I didn't find API for this, what i should remove/stop, mb someone already did it? Thank you

Want to ask the authors - if you create multiple scenes at once, it does not violate the ideology pixi.js? I'm doing an application in which the page several canvases, each of which is a stage. Do not break this "something inside"? Although I assume this is normal, but still want to ask...

I wanted to make the stage fill the browser window, it to have no elements added, and for it to be clickable. I was having trouble doing so, so to hack a way to do it I implemented this and the stage was then clickable. this.bgCover = new PIXI.Sprite.fromImage('img/bgCover.png'); this.bgCover.interactive = true; this.bgCover.anchor.set(0.5,0.5); this.bgCover.x = this.width/2; this.bgCover.y = this.height/2; this.bgCover.width = this.width; this.bgCover.height = this.height; this.stage.addChild(this.bgCover);bgCover is a 1px,1px transparent png. I am sure there is a way to do this without my hack. Can anyone enlighten me? Cheers, Jon