Gamehelpseasofhavoc

2026-10-02T17:46:59Z

Sumpfork: Initial

= Seas of Havoc – Quick Reference =

'''Goal:''' Have the most '''Infamy''' when the game ends. You earn it in combat, from Market cards in your deck, and from active upgrades.

== Round structure ==
The game alternates '''Island Phase → Sea Phase''' until the game ends.

== Island Phase ==
# '''Send out Skiffs.''' Starting with the First Player, go clockwise and place '''1 Skiff per turn''' (3 each) until all are placed. Only one Skiff can be on each slot or card.
#* '''Board slots''' resolve '''immediately'''.
#* '''Market cards''' are only ''claimed'' when you place a Skiff. You pay for them after all Skiffs are out.
# '''Buy claimed cards''' in turn order. Pay the cost shown top-left and the card goes '''straight into your hand'''.
# '''Clean up.''' Take back your Skiffs and refill the Market to 5 cards.

{| class="wikitable"
! Location !! Effect
|-
| Sail Maker / Blacksmith / Bank || Gain sails / cannonballs / coins
|-
| Capitol || Take the '''First Player token''' now, plus 1 resource
|-
| Trading Post || Exchange up to 2 resources
|-
| Workshop || Pay the cost to '''activate a ship upgrade''', which is permanent and worth Infamy
|-
| Deep Cove || Scrap up to 2 cards from your hand or discard pile and gain their cost in resources
|-
| Flag slots || Take a flag. You can use it later (optional)
|-
| Market || Claim a card. ''Before'' placing, you may scrap all unclaimed cards and restock, but then you must claim one of the new cards
|}

'''Flags''' (keep them; you may use a flag's action when a card or effect lets you):
* '''Red – Shipwright:''' scrap 1 card and gain its cost
* '''Tan – Bosun:''' draw 1 card
* '''Green – Purser:''' gain 1 resource of your choice
* '''Blue – Sailor:''' take another turn (one more Skiff, or one more card in the Sea Phase)

== Sea Phase ==
* Starting with the First Player and going clockwise, each player '''must play 1 card''' if they have any. Resolve it (or pass, but you still play the card), then discard it.
* '''Movement:''' follow the card's arrows and your ship changes heading as shown. You can pay sails for an '''extended maneuver''', but only if the main maneuver had '''no collision'''.
* '''Board wraps:''' ships and shots leaving one edge come back on the opposite edge.
* Once every hand is empty, everyone '''draws 4 cards''' and you go back to the Island Phase. If your deck runs out, shuffle your discard pile to make a new one.

=== Collisions ===
* Your ship stops in the space '''before''' the obstacle. You may then pivot 90°.
* The player who caused the collision '''discards 1 card''' (nothing if their hand is empty).
* '''Rock:''' you take a Damage card.
* '''Ramming a ship:''' you score '''+1 Infamy''' and the rammed ship takes a Damage card.
* '''Whirlpool:''' forced 90° pivot. '''Gust:''' pushed 1 space without changing heading. A gust collision counts as yours, so it can score a ram.

=== Cannon fire ===
Fire from either side of your ship, up to the range printed on the card. A shot hits the '''first thing in its path'''. If it hits a ship, that ship takes a Damage card and you score:
* '''Broadside''' (hits the ship's side): '''+2 Infamy'''
* '''Raking shot''' (hits bow or stern): '''+3 Infamy'''
With multiple shots, each one scores separately. You get no Infamy for hitting your own ship.

=== Shipwrecks ===
Sail onto a shipwreck to collect it as a booty token. You can hold '''only 1''' at a time. You can use the resources on it anytime you need to spend resources, but you lose the whole booty token.

== Game end and scoring ==
* The game ends '''at the end of the Sea Phase in which the Damage deck runs out'''. Use spare damage cards to finish that phase.
* '''Final Infamy''' = Infamy gained during the game + active upgrades + Market cards you own (deck, hand and discard) − Damage cards.
* '''Ties:''' most resources wins, then fewest Damage cards.

Game art: img directory

2025-10-21T16:57:33Z

Sumpfork: /* Image Manipulation Tools */ - add 'community provided' section with link to card sprite generation python script

{{Studio_Framework_Navigation}}

__TOC__

== Metadata images ==

Game metadata images are images of game box, banner, title, etc. These images are no longer stored in project directory.

Metadata images are managed through the [[Game_metadata_manager|Game Metadata Manager]]. After you go there select the link to the game you want to upload images for.

== Game art ==

You must upload in img directory all images of your game interface.

=== Images naming constraints ===

To be correctly deployed your images file names should not contain spaces or parentheses.

=== Images loading ===

'''Be careful''': by default, ALL images of your img directory are loaded on a player's browser when he loads the game. For this reason, don't publish images that are not useful in your img, or it will slow down the game load.

Note that you can tune the way images are loaded with Javascript method "dontPreloadImage" (see [[Game_interface_logic:_yourgamename.js|Game Interface Logic]]).

General recommendation it to have no more than dozen of image files, 2Mb max each. However if there is heavy game resources specific to a player (i.e. player board of specific color or set of cards) it is better to separate them and "don't pre-load" since in any given game only some of them will be used.

=== Images format ===

You can use these image formats while building your game interface:
;jpg images

should be used for non-transparent images. Jpg are usually lighter than pngs, so please choose Jpg for big pictures (ex: game board, cards) when you don't need transparency to accelerate game load. You don't need transparency for rounded card corners, it can be done using css.

;png images

should be used for images with transparency, such as non-square tokens, meeples, etc (combined into sprite).

;gif images

can be used for animated images. This is not recommended to use gif animated images as they can upset players, but for some specific interface element this could be useful.

;svg images

svg images can be really efficient for icons or abstract images. Note: consider also using font awesome for icons instead of separate asset file.

=== Webp ===
png and jpg images are automatically converted to webp during deployment. Webp's are lighter weight.

When requesting a png/jpg file, many modern browsers will specify a preference for webp in their Accept header, and our CDN will comply with this request serving the converted webp image instead of the original png you uploaded. You can confirm which format your browser requests by checking request and response headers for the image in the network tab of your browser's developer tools.

In rare cases, this can cause a problem because the conversion is lossy.

If and only if this does cause a problem, then you can capitalise the first letter of your image's extension, <code>.Png</code> or <code>.Jpg</code>, and reference <code>image.Png</code> instead of <code>image.png</code> in the CSS. This will bypass the webp conversion and ensure you use the original image. This should not be done unless it is required.

=== Use background-size ===

In order to allow for players to use the browser zoom without your images becoming pixelated, it's recommended to use higher resolution images than needed for the normal display of your interface, and to use the css property '''background-size''' to fit the image to the size you need for your interface.

=== Use CSS Sprites ===

To limit the number of images load and make the game load faster, you must use CSS sprites, i.e. you must gather several images in a single one. However, there are limitations. Do not make any CSS image sprite with dimensions that exceed 4096x4096 pixels or it will not work on mobile devices (Android max texture size is 4096 pixels, test your own browser at [http://webglreport.com/ WebGL Report]).

To learn more on CSS Sprites:
* [http://www.w3schools.com/css/css_image_sprites.asp CSS sprites (W3C documentation)].
* [[Game interface stylesheet: yourgamename.css]]

'''Important:''' the maximum image size should be 4096x4096 (otherwise, some devices may not display parts of the image, see https://stackoverflow.com/questions/34682482/what-is-the-maximum-sprite-sheet-size-i-can-use-for-android-devices)

Tools:
* Sprite Generator https://www.toptal.com/developers/css/sprite-generator/
* Another Sprite Generator https://www.finalparsec.com/tools/sprite_sheet_maker

=== Shrink images ===

If you get high resolution images from publisher you need to shrink them since web display requires much lower resolution than printing.

* Shrink images size without visible loss of quality
** Offline tool for PNG: https://pngquant.org/
** Online tools for PNG/JPG: https://tinypng.com/ or http://www.iloveimg.com/ or https://squoosh.app/
** Online tool for SVG: https://jakearchibald.github.io/svgomg/

== Image Manipulation Tools ==

You have no choice but to use one of the image manipulating tools to create a successful game adaptation, you would have to
deal with
* Converting to supported formats
* Adding transparency
* Stitching
* Shrinking with no quality loss
* Resizing

For that you need a good tools, recommended tools (if you know more add them here)
* Gimp (all platforms) - general GUI image editor
* Paint.net (Windows) - general GUI image editor
* ImageMagic (All platforms) - https://www.imagemagick.org/script/download.php - command line image editor, great for mass manipulations and scripting

AI tools are very good at editing photos with minimal prompting too.
=== Examples ===

PDF to png convertion (linux)
gs -sDEVICE=pngalpha -o output.png -r600 -dDownScaleFactor=3 input.pdf

PDF to jpg using image magic and cropping page
montage -colorspace sRGB -density 300 -geometry 452x+0+0 -tile 5 -crop 82x87%+130+126 input.pdf output.jpg

PSD Extraction (image magic - CMYK to sRBG - one layer per file)
for i in *.psd; do convert $i -profile /usr/share/color/icc/colord/sRGB.icc `basename $i .psd`.png; done;

Tiling - The order of the images will match the 'ls' order. If needed change the filenames if you need a specific order.

montage -colorspace sRGB -density 300 *.png -tile 6 -background transparent ../tokens.png

PDF scrabber (linux) - extract all graphics file from pdf
pdfimages my.pdf prefix-

=== Online tools ===

PSD extraction (adobe file format)

https://www.photopea.com/

Seamless background (for tiled background wallpaper)

https://www.imgonline.com.ua/eng/make-seamless-texture.php

Download game assets from tabletop simulator

https://www.npmjs.com/package/ttsbackup

=== Community Provided ===

* [https://github.com/sumpfork/seas_of_havoc_boardgamearena/tree/main/misc/tools/extract_cards This python script] shows how to make card sprite images for BGA from a one-card-per-page pdf:
** reads the pages from a pdf document
** crops each pages to exclude bleed etc.
** removes duplicate images based on a difference in histograms
** converts to a target resolution
** assembles the resulting images into a single one given a number of rows and columns
** saves as any format that Pillow supports (e.g. jpg or png)

[[Category:Studio]]

Board Game Arena - User contributions [en]

Gamehelpseasofhavoc

Game art: img directory