Search the Community

Showing results for tags 'stage'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Platform
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 38 results

  1. Hello to all pixi fans I have a problem, when i reorder a DisplayObjectContainer's children array, the mouse events are not reordered (so it seems atleast). Here is the fiddle: The MouseEvents are not dispatched to the correct Sprites. Sometimes am I dragging a sprite that is behind the on I clicked. Am I supposed to reorder the children array manually or should i only do it with the swapChildren method? Am I doing something wrong or is this a bug? Thanks in advance!
  2. Hi Phaser Devs, I'm having trouble with something in the game I am currently creating. The concept of the game is that circles randomly spawn on the screen and begin to grow in size, this I have achieved using a tween object to scale the sprite. However the game is about taping the circle to get points, the bigger the circle the more points you get, but if two circle collide then it's game over. The problem I'm having is checking to see if the space where the circle wants to spawn is free, otherwise it would spawn on an existing circle causing the game to just end even though the player had no chance of preventing the loss. I have a group created which contains 20 circle sprites. I then after a set amount of time get the first dead circle in the group set its scale to 0 and reset its x and y position to a random place on the screen, then starting the tween to make the circle grow. However I can't figure out how to make sure the x and y positions are not already filled with a circle and if it is then randomly create the x and y positions again. Is there any way to do this using phaser? I did think that maybe creating an array to keep a log of the circles on the screen as well as their x, y and scale them using custom maths to work out if the x and y position has been taken or would be by the time the circle has spawned. Although I thought that if phaser has a similar feature built in it might be a much faster method. Thanks everyone in advanced, this is really making me pull my hair out .
  3. So I am starting a loop at the beginning of the game... IF I click the NEW GAME text before the loop starts... then my loop starts on the next stage. Ive tried rearranging when the music gets started as opposed to the text mouse events but no go ... *** I CAN OVERCOME this by checking for the loop to be playing in the next stages UPDATE function and stopping it in there... but it just feels like I am doing something wrong....? <-- commented out the fix so you can see ... click 'Start Game' quickly to see what is happening. IF YOU WAIT for the music to start and THEN move on (start game OR high scores) the music stops appropriately. preload: function () {'loopGameStart', ['assets/GameStart.mp3', 'assets/GameStart.ogg']); game.load.image('logo', 'assets/BigBird.png'); }, create: function () { ='loopGameStart', 1, true);'', 0, 1, true);{ x: 1, y: 1 }, 2000, Phaser.Easing.Bounce.Out, true); this.mainMenuStart =, + 100, "Start Game", { font: "50px Arial", fill: "#000", align: "center" }); this.mainMenuStart.anchor.set(0.5); this.mainMenuStart.inputEnabled = true;, this);, this);, this); this.highScores =, + 150, "High Scores", { font: "50px Arial", fill: "#000", align: "center" }); this.highScores.anchor.set(0.5); this.highScores.inputEnabled = true;, this);, this);, this); }, down: function (item) { = false;; switch (item.text) { case 'Start Game': game.state.start('mainGameState'); break; case 'High Scores': game.state.start('highScoresState'); }
  4. I am wondering how to implement the stage cleanup when switching between 'Game' and 'GameOver' stage. Should I simply put this = null in the shutdown function or should I nullify all the objects created in the stage. I have alot of objects and vars created in my stage and I want to avoid memory leaks when switching stages. Game = function(game) { .... //hell of alot vars defined here};Game.prototype = { create: function() { this.obj1 = new Obj1(); this.obj2 = new Obj2(); .... }, gameOver: function() { // Switch to game over stage this.stage.start('GameOver'); }, shutdown: function() { }};
  5. newbie here. was wondering if it is possible to make the game.stage.background alpha so that the player can see through the phaser canvas to the background colour of the browser window? i.e. you can still see the buttons, and actors but the background of the game is transparent. I'm using leap.js to change the background colour of the browser window everytime the player gestures. thanks! - JW
  6. I've just started with phaser, and I'm wondering how I should center the canvas on the screen. I see that phaser can manage scaling, so I wonder if it could do the centering, or if I should mess with CSS myself, and how exactly.
  7. Greetings, developers! I have the following situation here: I'm not using any of Phaser tools to manage game stretch logics and I have a problem with Phaser buttons right now. Guess that Phaser don't know that touch coordinates are related to old canvas style while it was stretched. The resizing logic is following: function ResizeGame(){ var Ratio = 960 / 640; var NewWidth = window.innerWidth; var NewHeight = window.innerHeight; if (NewWidth > NewHeight) // LANDSCAPE { = NewHeight + "px"; = NewHeight + "px"; NewWidth = NewHeight * Ratio; = NewWidth + "px"; = NewWidth + "px"; //GameInstance.scale.width = (960 / (NewHeight * Ratio)); //GameInstance.scale.height = (960 / (NewHeight * Ratio)); } else //PORTRAIT { NewHeight = NewWidth / Ratio; = NewHeight + "px"; = NewHeight + "px"; = NewWidth + "px"; = NewWidth + "px"; //layer.scale = 960 / NewWidth; } = window.innerWidth * 0.5 - NewWidth * 0.5 + "px"; = window.innerHeight * 0.5 - NewHeight * 0.5 + "px";}The button boundaries are offset. I don't know what to do. Changing camera view boundaries not works. Changing world boundaries also has no effect. Tried using Phaser to do that stuff but not found the way how to do it. The next question is about locking mobile swipes and touches to prevent scrolling of the page while playing. The stretched game has some parts of document body visible. And when player's finger touches that region the browser scrolls content so url bar appears.. Its awful. Tried doing that: /* Locking mobile browser non-gaming manipulations */document.body.addEventListener("touchmove", function(e){ e.preventDefault(); return false;});document.body.addEventListener("touchstart", function(e){ e.preventDefault(); return false;});document.body.addEventListener("selectstart", function(e){ e.preventDefault(); return false;});document.body.addEventListener("dragstart", function(e){ e.preventDefault(); return false;});document.body.addEventListener("contextmenu", function(e){ e.preventDefault(); return false;});But it doesn't work.
  8. I'm new to Phaser and I like it. It has everything I need to make a new html5 game quickly but there is a problem: In the examples provided there is no any preloader example. All we know that preloader must have it's resources preloaded in order to display some kind of beautiful background or animation while loading the rest of data. I've tried adding onLoadComplete listener and then, when preloader resources got downloaded, there is no hope on loading the game data. GameInstance.loader just shuts down and never invokes even after reset(); I suppose there are some state changing mechanisms for that, but I would like to avoid those deeps. There is no documentation on that and I ask you to help me with that weird situation.
  9. Is there a way to convert window.clientX / window.clientY to PIXI stage? I have this scenario: container.touchmove = container.mousemove = function(data){ currentPlayer.drawTo(data.getLocalPosition(container).x, data.getLocalPosition(container).y);}but I need to listen and input mouse coords from the whole window, as when the user is dragging outside the stage, it stops drawing. this is what I need: $(window).on('mousemove', function(ev){ var point = windowPointToPIXI ???? getLocalPosition(container); where point.x and point.y would be the same as the one from previous: data.getLocalPosition(container) Then I can call: currentPlayer.drawTo(point.x, point.y);});
  10. create() { var grp = new Phaser.Group(,null); var txt = new Phaser.Text(, 0, 0, "boogaloo", {}); grp.add(txt); }Btw this is typescript. When I use the above code on a state, the text is added to the stage. But I would expect that only to happen when I add the group to the stage. I'm trying to make a popup by extending a Phaser.Group, but when I make it in the create function it just appears on stage, including the buttons on the popup. How do i prepare a popup (an extended group containing sprites,text and buttons) and add it to the stage when i want?
  11. I am wondering if/how it is possible to scale the stage, in order to get a zoom effect on the game world. I have tried a whole slew of things, I have looked over the source code, but I still can't figure it out. Any help would be greatly appreciated!
  12. On my screen I have 10 images and 6 texts. I know that every time you call "stage.update()" is redesigned view screen. I have only two objects that need constant "stage.update ()". The first is a chronometer that needs every second to update a text and the second is an image that can be dragged around the screen. How do I create a "stage.update ()" exclusively for the object? ---- attempts: 1) I made an array of "stage" for a single canvas: canvas = document.getElementsByTagName ('canvas') [0]; stage['full'] = new createjs.Stage(canvas); stage['chronometer'] = new createjs.Stage(canvas); The problem that when executed, one deleted another : stage ['full']. update (); stage ['chronometer']. update (); 2) I tried to create Container. containerTest = new createjs.Container(); stage.addChild(containerTest); Problem? Could not update only what is in the container.
  13. Heya, I'm working on a Box2D platform engine with Pixi as the renderer. I'd like to have the stage follow the hero as he wanders around. My first thought was just repositioning the PIXI.Stage element, but that didn't seem to have an effect. I guess I could have an offset for every individual object, but seems like it would be cleaner to be able to move an entire viewport at once if that was possible. What's the Right Way to do it? Thanks! -Charlie