Dylan Cristy

  • Content count

  • Joined

  • Last visited

  1. Bump. Some things I tried which did not work: On every update: setting the group's mask to null, then clearing and re drawing the rect, then reassigning the Phaser.Graphics object as the group's mask. On every update: killing, then clearing, then reviving the Phaser.Graphics object, and then re drawing the rect.
  2. @samme is right, you have to use scaleMode.RESIZE. I found that in a web browser, sometimes the resize callback didn't always get fired on the very last bit of resizing/moving, so here is how I implemented resizing/realigning: In my Boot state, set the scale mode for the game: this.game.scale.scaleMode = Phaser.ScaleManager.RESIZE; Then, in my other game states (levels), I set flags for whether things need to be realigned (or not), and in the resize callback, only set the flag, and I do all the actual resizing in update(), like this: create() { this.game.scale.setResizeCallback(this.alignLevel, this); this.resized = false; this.resizedDoubleCheck = false; } alignLevel() { this.resized = true; } update() { if (this.resized || this.resizedDoubleCheck) { // do all the realigning of things here } // set the flags to false, but ensure one final // realignment even if the setResizeCallback didn't fire if (this.resized) { this.resized = false; this.resizedDoubleCheck = true; } else if (this.resizedDoubleCheck) { this.resizedDoubleCheck = false; } }
  3. Similar to this post, I am applying a mask to a group, and then clearing and redrawing the mask each update after things are re positioned. It was working fine, but then I made some changes to some other code that shouldn't affect the masking, but now for some reason the masked area is not updating, even though the Phaser.Graphics.graphicsData.shape appears to be in the right place. Here's my update code: if (this.buttonMask) { this.buttonMask.clear(); this.buttonMask.beginFill(0xffffff); let buttonMaskWidth = // my calculations to figure out the width let buttonMaskLeft = // my calculations to ficure out the X coord this.buttonMask.drawRect(buttonMaskLeft, frameBottom, buttonMaskWidth, this.buttonsGroup.bottom - frameBottom + 2); } And, using the following debug code in render(): if (this.buttonMask.graphicsData) { this.buttonMask.graphicsData.forEach((gdata) => { this.game.debug.rectangle(gdata.shape, '#0f0', false); }); } I can see that the shape that should be used for the mask is in the right place, but the masking effect is still only occurring where the initial rectangle was drawn when the stage first loads. Here's the initial load with masking in the correct place (the green lines are the debug rectangle): And here is after resizing the browser window and re positioning elements. The green debug rectangle is in the correct place, and the buttons are in the correct place, but the masking effect has not moved: Any ideas as to what could be going wrong? I'm not seeing any errors in the console.
  4. Nice, that worked, thanks! I think it was the difference of game.scale.fullScreenTarget = document.body; and game.scale.fullScreenTarget = document.documentElement;
  5. Hmm, I tried this.game.stage.addChild(new Phaser.TileSprite(0, 0, this.game.width, this.game.height, 'MyTileName')); but that seems to add it in front of the World, meaning, I can't see my main menu title or buttons. I know the buttons are there though, because when I mouse over where they should be, the pointer changes to a hand. And then if I click the button to start the game in fullscreen mode, the tiling does not continue to fill the screen, it ends at what would have been the height set in the TileSprite constructor. Is there something I have to do to reset the tiling on resize? Also, how do I get it behind the World?
  6. Thanks for the suggestion, but nope, still not working.
  7. I am running my game as "transparent", directly in the body element, and setting a repeated tile background in the body through CSS. If I enter fullscreen mode through a button click that triggers this.game.scale.startFullScreen(), the background tiling disappears and there's just a black background. If I enter fullscreen mode "manually" (by physically pressing F11), the background remains. What am I missing about how to start fullscreen mode? How can I preserve the background?
  8. I have some sprites that are set to horizontal drag only. What I want to do is, if someone drags vertically up from one of those sprites, when they leave the bounds of that sprite (top edge), spawn a new sprite and be actively dragging that new sprite. The user should not have to release the mouse button, they should just instantly be dragging the new sprite. I can successfully calculate when the pointer is leaving the first sprite, and spawn a new sprite at that location, but I can't seem to transfer the drag control. I tried Pointer.swapTarget, but that doesn't seem to work - the new sprite is spawned, but just sits there and I have to release the mouse button and re-click on the new sprite in order to drag it. How can I make the transfer seamless?
  9. Gotcha. The hierarchy is Game > Stage > World. Interesting that you think the rendering problem is debug specific. It would certainly fit with what I have seen, which is that I have only noticed the problem with debug text and geometry.
  10. 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?