I am trying to create a game where when a player enters a room, it goes black, and the player has limited vision, similar to the example here: examples/public/src/tilemap/collision/tilemap spotlight.js at master · phaserjs/examples · GitHub
However, in my game, I don’t want the render texture to be placed over the entire screen, just one portion of the map. When I try and change the fill function to specify the area that I want to fill in, it no longer fills it in. I have also tried changing the size of the render texture to be the area of the room I am trying to fill in, but I got the same result. I have a feeling I am not understanding something about how the coordinate system works in phaser. Does anyone have any advice?
If the render texture has origin 0 0 and scroll factor 0 0 like in the example, the fill coordinates also need to be in game canvas space. And make sure that you pass alpha 1.
I think I have done both of these things. For the coordinates in fill, can the coordinates be off of the screen when the player first joins the game?
Technically yes but in that case I don’t think you would see anything filled, if the fill x or y is greater than the render texture dimensions.
If you’re imitating the example then I think you would subtract the camera scroll coordinates from the shadow region’s coordinates to get the fill coordinates.
Can you show your code in create and update?
I am creating the render texture the way it is created in the example, like: this._rt = this.add.renderTexture(0, 0, this.scale.width, this.scale.height) in the crate function();
I am calling fill in update like this: this._rt?.fill(0x000000, 1, room2.x, room2.y, room2.width, room2.height), where room2 is a tilemap object. when the player spawns into the game, room2 is out of sight.
Like this.
this.rt.fill(0, 1, 384 - cam.scrollX, 160 - cam.scrollY, 288, 160);
this seemed to work. I didn’t want the texture to scroll, but I was able to get it right by manipulating the numbers a little bit