Archipelago - Increasing robustness, adding developer tools, squishing bugs.
Introduction
With the ends of both phases 2 and 3 of game development in sight, this seemed like a good moment for some code spring cleaning.
I've grouped lots of changes in this contribution - all under the same umbrella theme of clean-up. The changes include increasing code robustness, adding tools to detect and understand bugs, and removing some bugs found to date.
The full list of new features are:
- Developer tools settings panel and icon
- Robustness of transitions
- Removal of event listeners during transitions
- Adding board border
There bugs removed were:
- Reworking screen resolution
- Land discovery error correction
- Removal of off-board click error
Phases 2 (Resources, Goods, Building, and Trade Contracts) and 3 (Conflicts) of Archipelago development are now well underway.
For a full view of the current state of the game development see my github-hosted page.
https://miniature-tiger.github.io/archipelago/
Please note that the game is not yet complete - you can see current progress and test functionality but you will have to wait a little longer to play!
Background details of the project can be found at the end of this contribution post.
Repository
The repository for Archipelago can be found here:
https://github.com/miniature-tiger/archipelago
New Features covered by this Contribution
Developer tools settings panel and icon
Finding the reason behind the game not running as expected has often proved difficult. To remedy this I've added some developer / debugging tools - something which has been on my wish-list for a while.
A developer panel has been added to the settings cog and can be launched by clicking on the new spanner icon. Currently there are two options: the first allows the work flow of the game to be monitored in the console.log, the second provides very detailed comments of the piece transition and tile movements. These have brought a lot of clarity to the code running and should show where methods are overlapping or running out of the desired order.
The code changes for the above new feature can be found here:
https://github.com/miniature-tiger/archipelago/pull/65/files
Robustness of transitions
I've been wanting to improve the robustness of the code for a while with the aim of making sure everything runs smoothly before computer opponents are added to an already complex mix.
The area most at risk of errors is code running while the transitions are being completed. Previously setTimeout delays were used to force the code to wait for the requisite amount of time. In the new version transitionend event listeners have been applied to recognise the completion of board piece transitions and the game work flow has been reorganised to only proceed once the transitions are complete. This should make the automation of movement more robust and prevent data slippages corrupting play.
The code changes for the above features can be found here:
https://github.com/miniature-tiger/archipelago/pull/59/files
Removal of event listeners during transitions
Along similar lines to the above, all event listeners are now disabled while transitions are on-going. This prevents a new move being applied or a new turn being commenced while an existing transition is still underway.
The code changes for the above features can be found here:
https://github.com/miniature-tiger/archipelago/pull/61
Adding board border
In a broadly unrelated change I've added a border around the edge of the game board. Well, it looks kind of cleaner, no?
The code changes for the above features can be found here:
https://github.com/miniature-tiger/archipelago/pull/64/files
Bug extermination covered by this Contribution
Reworking screen resolution
There were a few issues with the layout on different size displays, including the footer commentary overlay blocking the end turn button (thanks to @amosbastian for raising this problem!)
Changes were made to the following areas to make sure they scaled correctly on different sized screens.
- Surround sizes
- Archipelago logo
- Font size in dashboards and on commentary
- Drawing of tiles (their width and gaps around them)
- Next turn button
Hopefully that captures everything!
The code changes for the above correction can be found here:
https://github.com/miniature-tiger/archipelago/pull/60/files
Land discovery error correction
The land discovery method was causing errors at the edge of the board due to incorrect boundaries on valid tile numbers when searching for land. This has now been corrected.
The code changes for the above correction can be found here:
https://github.com/miniature-tiger/archipelago/pull/63/files
Removal of off-board click error
Clicking on the board node but not on the tile area was creating errors as movement.js tried to process moves to invalid tiles (i.e those above row/col or those less than zero). Now corrected.
The code changes for the above correction can be found here:
https://github.com/miniature-tiger/archipelago/pull/62/files
Proof of Work Carried Out
This is the full url to my github account:
https://github.com/miniature-tiger
All a little on the dull side but on to more exciting things next time!
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 Kingdom settlements 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
Phase 1 - the first main goal of getting ships on the board and moving at different speeds under the influence of the compass is complete.
The graphics overhaul is also now complete.
Work is now ongoing on Phase 2 which is resource discovery, goods production, building and the trade contracts that underlie the game.
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
- Separation of board layers (Canvas base layer, Canvas activation layer overlay, SVG piece overlays) - COMPLETE
Phase 2 - Resources, Goods, Building and Trade Contracts
Resources
- Add Resource tiles (forest, ironworks, flax, gold etc) - in progress: forest, ironworks, quarry, plantation added
- Discovery of resource tiles - COMPLETE
- Claiming of resource tiles - COMPLETE
- Dashboard of player pieces - COMPLETE
Goods
- Creation of new goods each turn - COMPLETE
- Loading, unloading and transportation of goods - COMPLETE
- Dashboard of goods pieces - COMPLETE
- Goods icons - COMPLETE
- Variable quantity of goods to be loaded / unloaded - COMPLETE
Contracts for delivery:
- Semi-random (equitable) generation of trade delivery contracts - COMPLETE
- Creation of trade settlements - COMPLETE
- Dashboard for contracts - COMPLETE
- Mechanics for contract sign-up - COMPLETE
- Mechanics for contract delivery - COMPLETE
- Island naming: for describing location of trading settlements - COMPLETE
- Graphics of trade routes - COMPLETE
- Continuance of contracts over time
- Breaking of contracts due to interference
Building (On hold - decide if necessary once contracts implemented)
- Recipes, time to implement, graphics etc
Scoring:
- Work out scoring mechanism (linked to contracts)
- Add score dashboard
Phase 3 - Conflicts
Pirates
- Add pirate ships - COMPLETE
- Automate pirate ship movements (basic movement with wind and search for cargo ships) - COMPLETE
- Search - telescope range of 5 tiles for stronger search for ships - COMPLETE
- Consider separate cargo and war ships for teams
Forts
- Add fort icons - COMPLETE
- Create safe harbour from pirate ships - COMPLETE
Conflicts
- Attack - Develop conflict method between ships - COMPLETE
- Stealing of cargo - COMPLETE
- Limping back to harbour - COMPLETE
- Ship repair - COMPLETE
Phase 4 - Game Management and Settings
Settings
- Settings pop up box created - COMPLETE
- Options added - In progress - game speed added, developer tools added
- Local options (player name etc)
- Game saving and replay
Phase 5 - Central trading centre
- Develop central market allowing players without resources to trade and fulfill contracts
Phase 6 - One player version development
Artificial Intelligence levels for computer players
Phase 7 - Rules, roll-out, documentation, testing etc
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!
Thanks for the contribution!
Sorry for the delay, not sure why it wasn't added to the spreadsheet. If you want to make sure the contribution is in our spreadsheet you can check here https://utopian.rocks/ (hopefully it won't happen again).
Very cool that you added developer tools, should definitely help you out a lot. Nice update once again, keep up the great work!
Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.
To view those questions and the relevant answers related to your post, click here.
Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]
Thanks Amos!
No problem on the delay; it was a good chance for me to test out the ticketing system for the first time. I'll confirm it was all very prompt and straightforward! I'll be sure to check utopian.rocks also in future.
Congratulations! Your post has been selected as a daily Steemit truffle! It is listed on rank 1 of all contributions awarded today. You can find the TOP DAILY TRUFFLE PICKS HERE.
I upvoted your contribution because to my mind your post is at least 47 SBD worth and should receive 70 votes. It's now up to the lovely Steemit community to make this come true.
I am
TrufflePig, an Artificial Intelligence Bot that helps minnows and content curators using Machine Learning. If you are curious how I select content, you can find an explanation here!Have a nice day and sincerely yours,
TrufflePigYeah, its a nice touch to add borders. I wanted to mention that in your previous update of the game and so far so good, its coming out well.
Perhaps you could also add something like a key(found in maps) to make it easier for users to know what the icons mean faster. This key could be kinda transparent(transluscent?) and placed at the bottom of the page. What do you think?
Hey @belemo.
The key is a nice idea, thanks! I definitely need to add more on the 'help' side to make it easier to understand. The surrounds give some clues and clicking on the tiles brings up information but it's true that it's visually quite complex. And a key would be fitting for the map.
The biggest issue is one of space! I've tried to keep the top and bottom of the screen clear and use sliders because of the scrolling of the board - so to try to keep as much of the board uncovered as possible. I have a few more Resources and Goods to add too so I'll have to think of something. Maybe I'll do something with :hover ...
Ah yes, I thought about the hover too but I believe making the program as simple as possible will make it easier to play.
Considering there will be two types of users; frequent players and then those that play once in a while, the key will be very helpful. Perhaps making it smaller and shoehorning it outside the border or expanding the border to "fit screen" and then putting it at the bottom right or something. Just a thought though.
Cool looks interesting love these kinda games I'll keep an ear out!
very cool article @miniature-tiger I've read all the articles mas.sudah vote please visit my blog se times when there is time @miniature-tiger
Hey @miniature-tiger
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!
Contributing on Utopian
Learn how to contribute on our website or by watching this tutorial on Youtube.
Want to chat? Join us on Discord https://discord.gg/h52nFrV.
Vote for Utopian Witness!