Most of the work since last time has focused on revamping a bit the world map and adding functionalities to it. In addition, the environment and the possible interactions with it have improved a bit. Read all about it below!
Fog of war
A brand new mechanic that makes its appearance is the fog of war. The full world map used to be visible when you opened the world map menu. From now on, most of it will be dark – except for the areas inhabited and explored by the players. See example below.
If you are interested in the technical aspect of this, have a look at the last section of this dev log where I elaborate a bit on that!
This may not seem like it brings a lot to the game, but this mechanic actually ties in to the core pillar of the game: collaboration. If one player explores an area of the world, it will (temporarily) dissipate the fog of war on the corresponding section of the world map for all players, in real-time. Where exploration used to be a primarily solo endeavor, it can now be useful to everyone. Especially since the world map is now starting to display actually useful information, as explained in the next section.
Resource and building markers
Every building built by a player is now displayed on the map as a blue dot (and contributes to dissipate the fog of war). This will be useful once buildings start having a real utility, for example when looking for a shop or a workshop.
In addition, markers are now displayed to indicate where some plants grow (this is the first incarnation of the broader class of “resource markers”). This will now help players to know where to go to find specific plants to use for crafting purposes. And that’s where the collaborative aspect of exploration starts to show already, since resource markers will only be visible for areas where the fog of war has been dissipated. Therefore, if one player goes around exploring a bit and discovers a location where Butterflowers grow, this information will be visible to everyone on the map and may help players acquire that ingredient.
Interactive environment
Speaking of picking up flowers, the way items used to be scattered on the map wasn’t so great in the past. Now, plants and flowers need to be plucked from bushes that are part of the environment. Other pickable items such as rocks and wood now also have a better appearance that make them blend in the environment and contribute to it.
In addition, items don’t spawn at random anymore. Plants grow in bushes around trees, in specific locations determined when the world is created (and marked on the map by resource markers). Wood also comes from the proximity of trees. Stones are still a bit random but that’s ok. And in the future, all additional ingredients that can be found in the wild will follow more natural rules in terms of where they appear, hopefully making the experience of harvesting them a bit more interesting. It also makes the environment more pretty I think, judge for yourself below:
Finally, these plants clusters constitute a very basic first form of “biomes”, in the sense that specific species grow in specific places. In the future, temporal dynamics will be added, for example depletion if the players abuse a specific biome. This idea will also be extended to wildlife. More on that in future dev logs.
Automatic world map
Finally, another improvement is the world map itself. It is now generated fully automatically when the world is created, and each tile of the world maps 1-to-1 to a square of 4 pixels on the map. After the map is created, a nice median blur effect is applied (again, automatically) to make it look better. It’s extremely convenient for me, and I also find that it looks better than before. It also represents the location of the player and buildings more accurately.
Technical challenge of the fog of war
The fog of war effect wasn’t trivial to achieve, due to the following constraints:
– A mask is already applied to the map to ensure that it doesn’t spill out from the background scroll, and it’s only possible to apply only one mask to an image with Phaser. Therefore, using a mask for the fog of war wasn’t an option.
– Even if it was, I’m not sure how I could have dynamically generated masks with the right gradient effect as seen in the screenshot.
– In the end, the solution was to create a custom shader that is applied to the world map, which only displays rectangular areas computed based on information received from the server. Due to the gradient effect, the end result is not rectangular anymore, but looks like something a bit more natural. I’m glad I recently did a tutorial on shaders in Phaser as it really helped me understand these things better and allowed me to apply them for this use case.
The world map is starting to become a nice combination of several technical challenges, so I think that in the coming months I’ll write a series of tutorials on that which should hopefully be of interest to some of you!
What’s next
Now that it’s easier to find both buildings and resources, it’s time for the two to really come together. To make that happen, my next target is to design much more complete interfaces for both trading and crafting. I’m hoping to deliver that for the next dev log!
Jerome Renaux
I'm an independent game developer, working mainly on browser-based multiplayer online game (HTML5 & Javascript). I love to discuss about all aspects of game development so don't hesitate to get in touch!
Follow Me:
