TileSprite as SpriteImpl?

[Val]

Hello,

Thank you for ExcaliburJS, I'm creating an online rogue-like game with real-time and turn-based modes and so far I really like this engine.

I've been using TileSprites for my TileMap but I want to create "fog of war" and darken tiles which are out of my player's view range. Unfortunately I've found out that TileSprite is not a Sprite. It seems like it's just a reference with an id for a sprite sheet.

So why is TileSprite not an IDrawable like a Sprite : SpriteImpl?

Is there some other way to darken my TileSprites? Or do I have to create a virtual copy of each sprite in my sprite sheet, darken it and push it back into my sprite sheet ?

-Valentyn

[Val]

Sharing my current solution:

I have added a postdraw event which will fill rectangles out of my FoV:

        this.on('postdraw', (e: ex.Events.PostDrawEvent) =>{

           if(!this.fogOfWarRects) return;

            let context: CanvasRenderingContext2D = e.ctx;

           context.fillStyle = "rgba(0, 0, 0, 0.6)";

           this.fogOfWarRects.forEach(r => {

               context.fillRect(r.x, r.y, r.width, r.height);

           });

       });

Those rectangles are calculated and set when server sends visible area after a player has moved.

[James McGeorge]

Heya Val!

I'm making something very similar and I use a separate TileMap that I layered on top to draw the fog tiles.

Essentially the main game level tiles are in engine.currentScene.tileMaps[0] and the fog tiles are in engine.currentScene.tileMaps[1].

Below is how I do the initial fog tiles when the player loads up the map or I do a debug disable/enable of the fog

public calcFogInitial() {

this.loadPlayerFog();

this.clearFog();

if (this.isDisabled) {

return;

} else {

const playerCell = this.engine.currentScene.tileMaps[0].getCellByPoint(this.player.x, this.player.y);

this.calcFOV(playerCell);

for (let i = 0; i < this.fogCells.length; i++) {

if (!this.seenCells[i]) {

const newts = new ex.TileSprite('fog', 1);

this.engine.currentScene.tileMaps[1].getCellByIndex(i).pushSprite(newts);

}

if (this.fogCells[i]) {

const newts = new ex.TileSprite('fog', 0);

this.engine.currentScene.tileMaps[1].getCellByIndex(i).pushSprite(newts);

}

}

this.savePlayerFog();

}

}

I'm not entirely sure this would makes sense just looking at it, lol, but this.seenCells is a boolean array of the tiles the player has seen and this.fogCells is a boolean array of the tiles the player has seen but currently cannot so I just plop on the secondary tileMap the black tileSprite or the partially transparent black tileSprite.

I hope that gives you some sort of idea of another way to do it! =)

James

--
You received this message because you are subscribed to the Google Groups "excaliburjs" group.
To unsubscribe from this group and stop receiving emails from it, send an email to excaliburjs+unsubscribe@googlegroups.com.
To post to this group, send email to excal...@googlegroups.com.
Visit this group at https://groups.google.com/group/excaliburjs.
To view this discussion on the web visit https://groups.google.com/d/msgid/excaliburjs/a4d8aa06-0892-4f4e-a4c2-6f2e1f350f2b%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Val]

Oh right, I could also use a semi transparent dark tile... that’s a good one and you don’t need two tilemaps for this. You can simply put a TileSprite reference at index 1 in cell.sprites array and you will have same effect.

My solution is the best possible performance-wise though. I only fill 4 rectangles instead of each fog tile and it’s every pixel.

Op ma 18 jun. 2018 om 05:20 schreef James McGeorge <jim...@gmail.com>

To unsubscribe from this group and stop receiving emails from it, send an email to excaliburjs...@googlegroups.com.

To post to this group, send email to excal...@googlegroups.com.
Visit this group at https://groups.google.com/group/excaliburjs.

[Erik Onarheim]

Hello Val,

Thanks for using Excalibur! 

The naming is confusing, we may be able to make it an IDrawable, give it some of it's features, or expose the underlying sprite for manipulation. Currently TileSprite's only function as a lookup into a registered SpriteSheet. I've added an issue where we can have some discussion about this https://github.com/excaliburjs/Excalibur/issues/1012