# Fog of War with Hexagons implementation advice

**URL:** <https://phaser.discourse.group/t/fog-of-war-with-hexagons-implementation-advice/4895>\
**Category:** Phaser 3\
**Created:** [January 15, 2020, 7:30pm UTC](https://phaser.discourse.group/t/fog-of-war-with-hexagons-implementation-advice/4895 "2020-01-15T19:30:22Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![cah-danmonroe](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/cah-danmonroe/32/2690_2.png) [@cah-danmonroe](https://phaser.discourse.group/u/cah-danmonroe)\
**Post date:** [January 15, 2020, 7:30pm UTC](https://phaser.discourse.group/t/fog-of-war-with-hexagons-implementation-advice/4895/1 "2020-01-15T19:30:22Z")

</div>

Hello everyone!

I’ve previously written a pure javascript implementation of a top down “RPG” using hexagons, fog of war, and path finding. Now I’m experimenting on replicating it with Phaser3. I’m looking for adviceon how you would implement this in Phaser3.

Here is a quick video of what I have now.

[https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/7/7218f5e13cc398ed7645395e59c8f6c46a1e034f.mov](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/7/7218f5e13cc398ed7645395e59c8f6c46a1e034f.mov)

I have a bottom layer of the background map image. On top of that, I have a hexagon grid drawn using polygons. Each polygon has an alpha value based on whether the player can see passed the tile or not. It also has slightly transparent values for hexes that the player has previously seen.

The game also prevents the player from moving over areas of the map that are impassable. (mountains, water, etc)

How could I do this in Phaser3? Can I still use one background image for the map and use some sort of DynamicTilemapLayer on top of that for visibility and movement restriction?

Thanks!

Dan

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [January 15, 2020, 8:34pm UTC](https://phaser.discourse.group/t/fog-of-war-with-hexagons-implementation-advice/4895/2 "2020-01-15T20:34:22Z")

</div>

I don’t think a Tilemap would work because it doesn’t allow overlapping tiles.

But you could use a [Blitter](https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Blitter.html) to draw the hex tiles pretty easily.

---

<div class="post-metadata">

**Author:** ![cah-danmonroe](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/cah-danmonroe/32/2690_2.png) [@cah-danmonroe](https://phaser.discourse.group/u/cah-danmonroe)\
**Post date:** [January 17, 2020, 6:41pm UTC](https://phaser.discourse.group/t/fog-of-war-with-hexagons-implementation-advice/4895/3 "2020-01-17T18:41:20Z")

</div>

Thanks @samme I’ll check into using Blitter objects.

In the meantime, I discovered @rexrainbow [phaser3-rex-plugins](https://www.npmjs.com/package/phaser3-rex-plugins). I’ve been trying to follow his examples on CodePen and have at least got my player (he calls it a Chess object ?) to move around with no restrictions.

Next is to add blockers and add his “Field of View”

Any suggestions @rexrainbow ?

[https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/9/9c484d2157c916c0bdb16501dd007e5de211f414.mov](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/9/9c484d2157c916c0bdb16501dd007e5de211f414.mov)

---

<div class="post-metadata">

**Author:** ![rexrainbow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rexrainbow/32/51_2.png) [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)\
**Post date:** [January 18, 2020, 1:47am UTC](https://phaser.discourse.group/t/fog-of-war-with-hexagons-implementation-advice/4895/4 "2020-01-18T01:47:13Z")

</div>

[Here](https://codepen.io/rexrainbow/pen/qvGLPd) is a demo of my field of view behavior, in my [board system](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/board-overview/).  
It might take lots of computingpower if searching FOV in a big map.

---

<div class="post-metadata">

**Author:** ![ldd](https://avatars.discourse-cdn.com/v4/letter/l/9de0a6/32.png) [@ldd](https://phaser.discourse.group/u/ldd)\
**Post date:** [January 18, 2020, 3:10am UTC](https://phaser.discourse.group/t/fog-of-war-with-hexagons-implementation-advice/4895/5 "2020-01-18T03:10:16Z")

</div>

Kind of not related, but you may find the answers to advent of code’s 2019 day 10 to be somewhat relevant to what you are trying to do

[https://adventofcode.com/2019/day/10](https://adventofcode.com/2019/day/10)

---

<div class="post-metadata">

**Author:** ![cah-danmonroe](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/cah-danmonroe/32/2690_2.png) [@cah-danmonroe](https://phaser.discourse.group/u/cah-danmonroe)\
**Post date:** [January 25, 2020, 1:33am UTC](https://phaser.discourse.group/t/fog-of-war-with-hexagons-implementation-advice/4895/6 "2020-01-25T01:33:56Z")

</div>

Thank you,

I’ve implemented your FOV and LOS into my sample app and it works well. Now I’m trying to figure out how to implement the opacity for each tile. I’ve initially tried to add a shape forEachTileXY with an initial alpha of 0 and when it came to findFOV, I was going to set the alpha to 1 but I haven’t been able to get that to work yet. Also, it prevented my player from moving because (I think) each tile has a blocker now. shrug.

[https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/d/df9375c67c3f2fa4a4d6b061aa18c252e6f4f003.mov](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/d/df9375c67c3f2fa4a4d6b061aa18c252e6f4f003.mov)

Is there a way to set a bitmap as a blocker for both FOV and moving? I want to give the player certain items that will grant abilities that will allow him to see/move past hexes. If so, is there a way to provide a custom hasBlocker method?

Thank you again. I think I can make it work, but might need some initial suggestions.

Dan

---

<div class="post-metadata">

**Author:** ![rexrainbow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rexrainbow/32/51_2.png) [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)\
**Post date:** [January 26, 2020, 1:39pm UTC](https://phaser.discourse.group/t/fog-of-war-with-hexagons-implementation-advice/4895/7 "2020-01-26T13:39:14Z")

</div>

Visible in FOV behavior could be controlled by `costCallback` property in [config](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/board-fieldofview/#create-instance) ( see this [demo](https://codepen.io/rexrainbow/pen/qvGLPd), line 34), without using blocker (`blockerTest`). Path finding also has `costCallback` property, too. (see this [demo](https://codepen.io/rexrainbow/pen/xeyvPx), line 105)  
Therefore you can design 2 cost functions for FOV and path-finding.

---

<div class="post-metadata">

**Author:** ![cah-danmonroe](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/cah-danmonroe/32/2690_2.png) [@cah-danmonroe](https://phaser.discourse.group/u/cah-danmonroe)\
**Post date:** [February 4, 2020, 3:53am UTC](https://phaser.discourse.group/t/fog-of-war-with-hexagons-implementation-advice/4895/8 "2020-02-04T03:53:50Z")

</div>

I’ve been able to implement FOV with a costCallback, thank you. Here’s a demo of what I have so far and I’m still getting 60 FPS.

I have a shape over each hex that originally have a fill color of BLACK and alpha of 1. During findFOV, I grab the visible hexes and set the alpha to 0 (make them visible).

```
const fovShape = board.tileXYToChessArray(tileXY.x, tileXY.y);

 if (fovShape && fovShape.length > 0) {
        fovShape[0].fillAlpha = Constants.ALPHA_HIDDEN;
 }

```

I keep the array of visible hexes until the next move and then compare the array of (now) visible hexes with the last move. The ones that are no longer visible, I set the alpha to 0.4 (PREVIOUSLY\_SEEN).

I do have a problem with that when trying to get a shape to set alpha to PREVIOUSLY\_SEEN, sometimes it can’t find the UID. It seems tileZToUIDs is null for some reason. Do the UIDs get cleaned up or removed each time?

```
(TileXYToChessArray)
var tileZToUIDs = this.boardData.getUID(tileX, tileY);

  if (tileZToUIDs == null) {
    return out; // why null?
  }

```

[https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/9/9376786a9b9f3dc7a91e9fb8ead51e99f3923321.mov](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/9/9376786a9b9f3dc7a91e9fb8ead51e99f3923321.mov)

---

<div class="post-metadata">

**Author:** ![rexrainbow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rexrainbow/32/51_2.png) [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)\
**Post date:** [February 4, 2020, 6:03am UTC](https://phaser.discourse.group/t/fog-of-war-with-hexagons-implementation-advice/4895/9 "2020-02-04T06:03:58Z")

</div>

Board position (tileX, tileY) might not have any chess, or (tileX, tileY) is not in board. Thus `tileZToUIDs` might be `undefined`.  
Could you provide a test code for this issue? It is better in 1 page js code. in codepen, for example.

---

<div class="post-metadata">

**Author:** ![cah-danmonroe](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/cah-danmonroe/32/2690_2.png) [@cah-danmonroe](https://phaser.discourse.group/u/cah-danmonroe)\
**Post date:** [February 4, 2020, 11:44pm UTC](https://phaser.discourse.group/t/fog-of-war-with-hexagons-implementation-advice/4895/10 "2020-02-04T23:44:46Z")

</div>

Hi,

I made a CodePen with my example. [EmberQuest Field Of View problem](https://codepen.io/DanMonroe/pen/ExjYmKo)

Move the player with the Q W S A D E keys.

I think my problem is with the black hole where the player chess is. I make all the obscuring shapes when I create the board at line 163. When I create the player, and add the chess at line 108, the AddChess method is kicking the shape out with

> var occupiedChess = this.tileXYZToChess(tileX, tileY, tileZ);
> 
> if (occupiedChess) {  
> this.emit(‘kickout’, gameObject, occupiedChess, curTileXYZ);  
> }
> 
> this.removeChess(gameObject);
> 
> if (occupiedChess) {  
> this.removeChess(occupiedChess, tileX, tileY, tileZ);  
> }

Is there a way to have the Shape AND the player chess occupy the same location?

I implement visiblePoints with the cost method (its hard to see through the trees). I would also like to do the same with movingPoints (it should be hard to walk through the trees too). Also, maybe set the player speed slower when walking through the trees.

Thanks again!

Dan

---

<div class="post-metadata">

**Author:** ![rexrainbow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rexrainbow/32/51_2.png) [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)\
**Post date:** [February 5, 2020, 1:34am UTC](https://phaser.discourse.group/t/fog-of-war-with-hexagons-implementation-advice/4895/11 "2020-02-05T01:34:12Z")

</div>

Chess and tile position :

- Any chess has a **(tileX, tileY, tileZ)** index
- Any (tileX, tileY, tileZ) index contains only **1** chess.
- (tileX, tileY) could have more then 1 chess with different tileZ index.
- tileZ is not equal to `depth` .

_tileZ_ could be treated as ‘layer’. So you can put fog shape object in ‘fog’ layer (set _tileZ_ to ‘fog’), and put player to ‘chess’ layer (set _tileZ_ to ‘chess’).

---

<div class="post-metadata">

**Author:** ![rexrainbow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rexrainbow/32/51_2.png) [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)\
**Post date:** [February 5, 2020, 1:42am UTC](https://phaser.discourse.group/t/fog-of-war-with-hexagons-implementation-advice/4895/12 "2020-02-05T01:42:01Z")

</div>

When using board plugin in a rpg world ( not a small board game like Bejeweled, or Color Linez ), super large amount of background tile sprites, or other objects like fog sprites, will be a performance issue. A possible solution is place background/fog in [blitter](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/blitter/) objects.

---

<div class="post-metadata">

**Author:** ![cah-danmonroe](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/cah-danmonroe/32/2690_2.png) [@cah-danmonroe](https://phaser.discourse.group/u/cah-danmonroe)\
**Post date:** [February 5, 2020, 3:03am UTC](https://phaser.discourse.group/t/fog-of-war-with-hexagons-implementation-advice/4895/13 "2020-02-05T03:03:42Z")

</div>

That’s great! That fixes the “hole” and the cleanup of the visited hexes. See the updated CodePen.

Thanks!

---

<div class="post-metadata">

**Author:** ![cah-danmonroe](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/cah-danmonroe/32/2690_2.png) [@cah-danmonroe](https://phaser.discourse.group/u/cah-danmonroe)\
**Post date:** [February 5, 2020, 3:04am UTC](https://phaser.discourse.group/t/fog-of-war-with-hexagons-implementation-advice/4895/14 "2020-02-05T03:04:38Z")

</div>

Thanks for the suggestion. I see if I can refactor what I have with blitter objects.

---

<div class="post-metadata">

**Author:** ![rexrainbow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rexrainbow/32/51_2.png) [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)\
**Post date:** [February 5, 2020, 3:08am UTC](https://phaser.discourse.group/t/fog-of-war-with-hexagons-implementation-advice/4895/15 "2020-02-05T03:08:25Z")

</div>

Now I found that it uses a single image as background tiles. Cool~ But is there any memory issue if loading a larger image asset?

---

<div class="post-metadata">

**Author:** ![cah-danmonroe](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/cah-danmonroe/32/2690_2.png) [@cah-danmonroe](https://phaser.discourse.group/u/cah-danmonroe)\
**Post date:** [February 5, 2020, 6:09pm UTC](https://phaser.discourse.group/t/fog-of-war-with-hexagons-implementation-advice/4895/16 "2020-02-05T18:09:09Z")

</div>

Yeah, I’m not using Tiled. I wrote a map editor that creates the big array of `sceneTiles` at the end of the CodePen and it uses one image for the background. I don’t think there should be any memory issues based on the one image; not that I have noticed anyways.

I have updated the CodePen example to now include speed costs for moving over rough terrain like forests, sand, snow, swamp, hills, mountains, etc.

Feel free to point people there if you want. I’ve just combined your examples into one.

Dan

---

<div class="post-metadata">

**Author:** ![cah-danmonroe](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/cah-danmonroe/32/2690_2.png) [@cah-danmonroe](https://phaser.discourse.group/u/cah-danmonroe)\
**Post date:** [February 7, 2020, 8:59pm UTC](https://phaser.discourse.group/t/fog-of-war-with-hexagons-implementation-advice/4895/17 "2020-02-07T20:59:21Z")

</div>

How do you detect chessA collisions? Getting around to adding other objects on the screen but can’t figure out how to get my player chess to detect when I move over another chess

---

<div class="post-metadata">

**Author:** ![cah-danmonroe](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/cah-danmonroe/32/2690_2.png) [@cah-danmonroe](https://phaser.discourse.group/u/cah-danmonroe)\
**Post date:** [February 8, 2020, 12:52am UTC](https://phaser.discourse.group/t/fog-of-war-with-hexagons-implementation-advice/4895/18 "2020-02-08T00:52:17Z")

</div>

Nevermind. I didn’t enable physics for my player. 🙂

---

<div class="post-metadata">

**Author:** ![rexrainbow](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rexrainbow/32/51_2.png) [@rexrainbow](https://phaser.discourse.group/u/rexrainbow)\
**Post date:** [February 8, 2020, 3:34am UTC](https://phaser.discourse.group/t/fog-of-war-with-hexagons-implementation-advice/4895/19 "2020-02-08T03:34:29Z")

</div>

[`Board.contains` method](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/board/#contains)

- Is (tileX, tileY) inside board?

```javascript
var isTileInBoard = board.contains(tileX, tileY);

```

- Does (tileX, tileY, tileZ) have chess?

```javascript
var isTileInBoard = board.contains(tileX, tileY, tileZ);

```