Archipelago - Graphics Overhaul Completion!

The second part of the graphics overhaul completes the transition from CSS to Canvas and SVG. This change has allowed a separation of the graphics into layers, with more detailed lower levels that will be updated very infrequently, if at all, and piece movement and animation handled with overlays that can be updated more frequently.

The steps covered by the three pull requests for this contribution are:

• Mechanics of separation of the graphics into layers.
• Update of base and resource tiles to SVG format.
• Change of compass to SVG format and addition to the map.

The graphics overhaul is now complete!

---

For a full view of the current state of the game see my github-hosted page:
https://miniature-tiger.github.io/archipelago/

Background details of the project and a list of previous updates can be found at the end of this contribution post.

---

New Features covered by this Contribution

Mechanics of separation of the graphics into layers

Prior to this update the entire board and all tiles were deleted and redrawn with each graphics change (i.e. at the end of each move or on the activation of tiles). The separation of graphics into layers now means that the lower layers are not redrawn and only those graphics elements affected by a move are updated by that move.

The graphics layers are (at the end of all changes covered by this contribution):

• Board (with octagons) - Canvas (Should not need to be updated at all)
• Activation layer (Shows red tiles which can be moved to - updated for tile activation and deactivation)
• Compass (excluding needle) - SVG (Should not need to be updated at all)
• Tiles / compass needle on top level - SVG (individual tiles are moved around using transformations and can be updated individually).

There is not much to show graphically as this is a change in the underlying mechanics. The main code changes can be seen here:
https://github.com/miniature-tiger/archipelago/pull/29/files

---

Update of base and resource tiles to SVG format

Following up on the change to the ship tiles to SVG format, the next change was to update other existing tiles to the SVG format.

• Forest tile
• Fort tile
• Iron works tile

The new format allows the tiles to be positioned on the islands, more in keeping with the antique map feel. Tile details change colour based on the team holding the tiles.

---

_{New forest, fort and iron works tiles}

_{Old forest, fort and iron works tiles}

The code for designing and integrating the new tile graphics is covered here:
https://github.com/miniature-tiger/archipelago/pull/30/files

---

Change of compass to SVG format and addition to the board

The final change in the graphics overhaul was updating the compass to SVG format and including it in the map area rather than on the surround. The SVG format allows much greater detail to be added.

---

_{New compass in SVG format with needle which indicates wind direction}

_{Old compass in CSS format}

---

The file changes for the compass update can be seen here:
https://github.com/miniature-tiger/archipelago/pull/31/files

This represents the completion of overhauling the graphics!

That is all for this update. If you have any queries please drop them in the comments or contact me on discord.

---

Details of the Archipelago Project

What is the Project About?

Archipelago is a new project that I have been working on. The aim is to develop a seafaring and trading turn-based strategy game. Players will guide their ships around the islands, searching for goods to aid construction of ships and their bases, trading with the central market and each other, and avoiding hazards like pirates and whirlpools.

Technology Stack

The project is a browser based game:

• Mechanics: Javascript
• Visuals: HTML and CSS initially but now moved across to Canvas and SVG.

Roadmap

For the short term roadmap the first main goal of getting ships on the board and moving at different speeds under the influence of the compass is complete.

The interlude of overhauling the graphics is also now complete.

Work has already begun on the second stage which is land squares and goods discovery and delivery contracts including the player dashboards.

Work has also begun on adding pirates and conflicts.

Phase 1 - Board and ship movement: COMPLETE!!!

• Board set up - COMPLETE
• Basic ship creation: functionality and graphics - COMPLETE
• Manual ship movement and board updating - COMPLETE
• Basic compass creation: functionality and graphics - COMPLETE
• Turn based activity of ship movement - COMPLETE
• Logic of length of longer moves around obstacles - COMPLETE
• Chaining together transitions to allow graphics of longer moves - COMPLETE

Phase 2

Land Squares and Resources:

• Dashboard of player pieces and resources - COMPLETE
• Resource tiles (forest, iron, flax, gold etc) - in progress: forest and ironworks added
• Summaries of produce and populations and functioning for each Resource

Contracts for delivery:

• Semi-random (equitable) generation of trade delivery contracts
• Creation of trade settlements
• Dashboard for contracts
• Mechanics for contract sign-up
• Mechanics for contract delivery

The long term roadmap is still to be fully fleshed out but includes:

• Building: (recipes, times etc)
• Islands (naming: for describing location ot pieces, trading settlements)
• Central trading centre:
• Conflicts:
• Pirates:
• Scoring:

Contact / Contribute

You can get in touch with me on discord if you would like to contribute.

You can find the current state of the game here:
https://miniature-tiger.github.io/archipelago/

The repository for the project is here:
https://github.com/miniature-tiger/archipelago

Have fun!

---

Posted on Utopian.io - Rewarding Open Source Contributors

---