• Content Count

  • Joined

  • Last visited

Everything posted by cseibert

  1. cseibert

    Render Depth

    Is it possible to set a z-index or depth on images or sprites? I have an issue where I am dynamically generating sprites and they are overlaying on top of other things I don't want them to. Using sendToBack or bringToTop isn't an option due to I still need stuff as background and always on top. Right now i'm calling sendToBack and bringToTop on my background and foreground objects every time I create my new sprites. It would be nice if I could just do this.background.zIndex = 0, this.scoreText.zIndex = 100, and make everything else zIndex of like 50.
  2. cseibert

    Text Groups?

    Is it possible to create a group of "text" objects? I've managed to create a group of multiple arcade objects like so: this.players = this.add.systems.arcadePhysics.add.group(); this.players.createMultiple({ key: 'player_handgun', active: false, visible: false, repeat: 49, max: 50, }); But I can't find an example or solution to have a group of text which I can recycle through. Any suggestions? I've tried this but it doesn't seem to work when I call getFirstDead() on the group, nor does that group have 50 text objects like the approach above generates: this.nicknames = this.add.group(); this.nicknames.createMultiple({ classType: Phaser.GameObjects.Text, active: false, visible: false, repeat: 49, max: 50, });
  3. Final update... I managed to get most of this working as desired. Inside my update method I loop through all my player objects, and render the flashlight at the player's location: // somewhere inside update const context = this.lights.context; context.clearRect(0, 0, 1600, 1600); for (const player of state.serverState.players) { const positionX = player.x - this.player.x + 800; const positionY = player.y - this.player.y + 800; context.save(); context.translate( positionX, positionY, ); context.rotate(player.rotation); context.drawImage(window.flashlight, -800, -800); context.restore(); } this.lights.refresh();
  4. Thanks for the help. I changed the light to be white like you recommended, and that seemed to have fixed it! Note, I also had to do the following approach in order to get multiple flashlights on the same scene: I created a texture called 'lights' set the context operation to 'lighter' (same as add) draw my flashlight images create a new phaser3 image based on that texture key 'lights' set the blend mode to multiply Question: the context.drawImage needs an html DOM image, but I wasn't sure if a phaser3 images would work or not. Is there a better way to do what I did? // There has to be a better way to load the HTML dom image in phaser3 instead // of this approach: window.flashlight = new Image(); window.flashlight.src = '../assets/flashlight2.png'; window.flashlight.addEventListener('load', () => { const game = new Phaser.Game(config); }); // inside my create function this.lights = this.textures.createCanvas('lights', 1600, 1600); const context = this.lights.context; context.globalCompositeOperation = 'lighter'; context.drawImage(window.flashlight, 0, 0); context.drawImage(window.flashlight, 0, 200); context.drawImage(window.flashlight, 0, 100); this.lights.refresh(); this.lightsImage = this.add.image(0, 0, 'lights'); this.lightsImage.blendMode = Phaser.BlendModes.MULTIPLY;
  5. I read something that I should somehow combine all my light images together using an "additive blend mode", and then draw it on top of my scene using a "multiply blend mode".... I have no clue how to combine those light images together into a single images with phaser3 =(
  6. The issue is I'm not sure how to achieve it. If I combine them both, I get a darker scene.
  7. Hey again, I'm trying to create a basic lighting system in my game. Currently, I have a transparent PNG with blank pixels for places the player can't see through, and transparent for the flashlight. This works pretty good, but I'm going to run into an issue when I have multiple players' flashlights on the screen at once. Is there an easy way to take all of these transparent PNGs and merge them together to create a single png for my lighting? I read a tutorial related to using bitmasks, but it was for phaser2. What is the best way to achieve multiple flashlights? I saw that phaser3 has a lighting system, but I wasn't sure how complicated it would be to setup without having to define bump masks for all my sprites / tiles.
  8. I'm trying to create a multiplayer game using phaser3 for both the client and server. When I attempt to run phaser3 as a node process, it crashes because "window is not defined". Is there an easy way to run the phaser3 engine as a "server" mode where it doesn't try to render anything? I don't care to rewrite my own tilemap and physics engine just to have an authoritative server be able to check if players are out of bounds, etc.
  9. Thanks for the different approaches, I'll try to figure out which one is a best fit for my goals. This community is really helpful!
  10. so I have a tilemap with tiles that make up a bridge (see attached image). I'm trying to figure out if there is a way I can customize the bounds of the tiles to have the player collide only where the water starts on the tile. I'm trying to read through the phaser3 code, but I'm not sure where it calculates the tile x, y, width, height for collision. Is it possible for me to manually change the bounds x, y, width, height for certain tiles? Is there a different approach I should be using to handle these collisions (separate collision layer? modify my tiles to have the bridge almost be full width?). One thing I have tried is just treating the tiles as 16x16 so that I can declare the water tiles with setCollision, but it seems hacky..
  11. cseibert

    Making a Zone

    Thank you, I appreciate this example you made! Makes sense now.
  12. cseibert

    Making a Zone

    Thanks, I guess the Zone class is for something different then? Can you explain with more examples what you mean by "add an Arcade Physics body to a zone"?
  13. cseibert

    Making a Zone

    Does anyone have a good example of how to create a zone which invokes a callback function when a player enters / leaves the zone? I am just trying to display some extra text when a player enters a zone, but I can't find any good examples using the Phaser3 Zone class. I found a work around using the Rectangle object manually, but I'm assuming (hoping) there is an easier way to use the Zone class to setup this same functionality using enter / leave callbacks? This is what I have done so far: // create this.zone = new Phaser.Geom.Rectangle(this.box.x - 25, this.box.y - 25, 50, 50); this.player = this.physics.add.sprite(800, 600, 'player_handgun'); this.text = this.add.text(this.box.x + 20, this.box.y, "use", { font: "18px Arial", fill: "#ff0000", align: "center", backgroundColor: "#00ffff" }); this.text.setOrigin(0.5, 0.5); this.text.setVisible(false); // update if (Phaser.Geom.Rectangle.Overlaps(this.player.getBounds(), this.zone)) { this.text.setVisible(true); } else { this.text.setVisible(false); } Again, ^ this approach works, but I rather find a way to use the Phaser's Zone class. Some issues I have with this approach is I can't set the origin(0.5, 0.5) on the rectangle, so I have to calculate the zone offset manually.