Cities: Skylines 2 影像疊加層會在遊戲內地圖畫布正上方顯示一張透明的參考地圖——例如真實世界的城市計畫圖或衛星影像——讓你能夠對照真實地理來描繪高速公路、河流和區域。最快的準備方式是使用瀏覽器中的 Image Overlay 工具，將你的基礎參考影像與透明或浮水印圖層合併，然後匯出一張保持基礎影像原始像素尺寸的 PNG。由於該工具不會重新調整基礎影像大小，產生的 PNG 可以直接放入地圖模組資料夾，無需手動重新匯出。該工具接受每張最大 25 MiB 的 JPEG、PNG 和 WebP 輸入，支援從 10% 到 200% 的疊加縮放，以及 0% 到 100% 的不透明度，因此同一套流程既適用於微妙的規劃浮水印，也適用於全強度的描繪參考圖。在整個流程中，兩個來源檔案都保留在你的裝置上，而且不需要帳號，這點很重要，因為參考影像經常包含你不想上傳到任何地方的 GPS 座標或授權地圖圖磚。
CS2 模組相關頁面將社群疊加模組描述為一種在遊戲內地圖上顯示透明影像、快速切換多張影像，以及在遊戲中調整大小、位置和透明度的方式。你在影像端的工作是產出一個載入乾淨的單一 PNG：正確的像素大小、正確的透明度，以及你要建模的城市區域的正確可見範圍。
為什麼 Cities: Skylines 2 玩家會使用影像疊加
影像疊加是位於主要畫布上方的第二張影像。在 Cities: Skylines 2 中，這代表將參考地圖、衛星影像或分區草圖覆蓋在遊戲內地形上，並淡入直到你能同時看見兩者。原版 Cities: Skylines 社群使用這項技術來逐街區重建真實城市，CS2 則透過社群疊加模組沿用了相同的工作流程。
參考影像並不會取代 CS2 地形；它只是告訴你街道、河流、公園和外部連接應該放在哪裡。特別是在編輯器中，疊加層能讓你輕鬆將外部連接對齊到正確位置，因為你可以透過遊戲內畫布看到真實的道路網格。當你的城市與疊加圖吻合度足夠時，就可以降低不透明度、存檔，然後繼續建設。
玩家也會將疊加層用於與真實地理無關的任務：在繪圖程式中繪製的區域草圖、從地形工具匯出的高度圖，或是用於對齊 81 格大型工程的格子疊加層。無論哪種情況，相同的準備步驟都適用，因為疊加模組只會讀取你給它的檔案，而不在乎內容是什麼。
選擇正確的基礎與疊加檔案
在開啟任何工具之前，請先決定哪張影像是基礎、哪張是疊加。用 CS2 的術語來說，基礎是你希望模組以全強度保留的圖層——通常是參考地圖或衛星影像——而疊加則是較小、較透明的圖層，用於新增資訊，例如分區標籤、等高線或指北針。
三個規則能讓整個流程輕鬆無負擔：
- 讓基礎符合 CS2 畫布。匯出的 PNG 會保留基礎影像的原始寬度和高度，因此如果模組預期使用 1920×1080 的參考地圖，請準備一張 1920×1080 的基礎影像。例如 Image Resizer 等工具可以在你開始前將參考影像調整為正確的像素尺寸。
- 將每個檔案控制在 25 MiB 以下。Image Overlay 工具接受每張最大 25 MiB 的 JPEG、PNG 和 WebP。在解碼後，每張影像也會獨立限制為總計 40,000,000 像素，且任一邊不得超過 20,000 像素，因此即使是小型壓縮檔，如果解壓後展開成非常大的緩衝區仍可能會失敗。
- 如果疊加圖含有透明度，請使用 PNG。JPEG 無法儲存透明度，因此任何需要平滑淡入基礎的疊加都應使用具有 alpha 通道的 PNG 或 WebP。無論你使用的輸入格式為何，最終匯出檔案一律為 PNG。
隱私在這裡同樣重要。真實世界的參考影像經常包含 EXIF 中繼資料中的 GPS 座標、浮水印，或你不應重新散布的授權地圖圖磚。Image Overlay 工具會在本機解碼並合併兩個檔案，然後在你替換檔案或關閉分頁時撤銷暫時的 ObjectURL。下載的 PNG 並不保證會保留任一輸入檔的 EXIF、動畫或原始壓縮，因此輸出基本上是一個乾淨的合成影像。
逐步建立疊加 PNG
本逐步說明使用 Image Overlay 工具來產生一張可直接放入 CS2 疊加模組資料夾的單一 PNG。每個步驟對應介面中的一個控制項。
- 在瀏覽器中開啟 Image Overlay 工具，然後點擊基礎影像欄位。選擇你希望以原始大小保留的參考地圖或衛星影像。該工具會驗證檔案為 25 MiB 以下的 JPEG、PNG 或 WebP，然後進行解碼。
- 點擊疊加影像欄位，選擇第二張影像——通常是標籤、草圖或浮水印圖層。檔案會被獨立驗證，因此載入疊加影像不會使進行中的基礎解碼失效，反之亦然。
- 選擇位置：左上、右上、左下、右下或置中。這五個位置採用下一節所說明的固定座標運算，讓你能準確預測疊加圖將落在何處。
- 設定疊加縮放。100% 的值會以疊加本身的原始寬度和高度繪製；50% 會將兩個尺寸各縮減一半；200% 則會將兩個尺寸各放大一倍。縮放滑桿的範圍從 10% 到 200%，且僅套用於疊加影像。
- 將疊加不透明度設定為 0% 到 100%。零會使疊加完全透明，但仍會產生一張完整尺寸的 PNG；100 會原封不動地使用疊加本身的 alpha；中間的值則會將疊加貢獻度乘以所選的百分比。
- 點擊建立或下載控制項。轉譯器會清除畫布、以 alpha 1 完整繪製基礎影像、儲存繪圖狀態、套用所選的疊加 alpha、在預定座標繪製縮放後的疊加、還原狀態，然後將畫布匯出為 image/png。
- 檢查頁面上的預覽結果，然後下載產生的 PNG。編輯位置、縮放或不透明度會立即撤銷舊的結果並清除預覽，讓你能毫無混淆地反覆調整。
位置、縮放和不透明度的計算方式
Image Overlay 工具並非猜測第二張影像的位置。每一個選擇都會產生確定性的像素座標，且相同的輸入永遠會產生相同的結果——當 CS2 模組需要將檔案放在特定位置時，這正是你想要的。基礎影像的原始寬度（W）和高度（H）會定義輸出畫布，而疊加的原始寬度（Ow）和高度（Oh）則會乘以所選的縮放百分比。
下表顯示 1920×1080 基礎影像與 800×600 疊加影像在 50% 縮放下的精確座標運算。因此縮放後的疊加尺寸為 400×300，而每個位置都會為疊加產生一個已知的左上角座標。
| 位置 | X 公式 | Y 公式 | 本例結果 |
|---|---|---|---|
| 左上 | 0 | 0 | (0, 0) |
| 右上 | W − 縮放後寬度 | 0 | 1920 − 400 = 1520，0 |
| 左下 | 0 | H − 縮放後高度 | 0，1080 − 300 = 780 |
| 右下 | W − 縮放後寬度 | H − 縮放後高度 | 1520，780 |
| 置中 | (W − 縮放後寬度) / 2 | (H − 縮放後高度) / 2 | 760，390 |
對 CS2 工作而言有兩個重要的影響。第一，基礎永遠不會被重新調整大小，即使頁面預覽看起來比實際輸出小——CSS 預覽尺寸純粹是裝飾用途，並不會改變匯出結果。第二，如果縮放後的疊加大於基礎，其位置可能會產生負座標，且超出基礎畫布的任何部分都會被裁剪。這是刻意的、已公開說明的行為，而非隱藏的重新調整大小，因此 CS2 參考畫格會維持你所選的精確尺寸。
不透明度採用簡單的 0–100% 比例。零會產生一張僅含基礎的 PNG，沒有可見的疊加，這可作為健全性檢查。一百則會原封不動地使用疊加本身的 alpha 通道，這會保留已內建於 PNG 或 WebP 中的任何柔邊。中間的值會將疊加貢獻度乘以所選的全域 alpha，而來源 PNG 或 WebP 中既有的透明像素則會維持透明。
修正疊加對齊問題
大多數疊加問題都歸結於縮放、位置或基礎尺寸。透過三項檢查即可解決大多數情況。
疊加過大而消失在邊緣外。這種情況發生於疊加的原始尺寸乘以縮放百分比後，超過基礎的寬度或高度。工具會裁剪溢出的部分，而不是重新調整基礎大小，從而保留 CS2 畫布的尺寸。請調低縮放滑桿，或在重新匯入前使用影像調整大小工具來調整疊加來源。一個簡單的規則：如果你希望疊加佔基礎寬度的 40%，而基礎寬度為 1920 像素，則疊加的原始寬度應不超過 1920 × 0.40 / 縮放比例。
疊加位於錯誤的角落。五個位置預設都是確定性的，因此要落在自訂位置的唯一方法是從一張已包含正確構圖的來源影像開始，然後選擇能將疊加左上角放在你所需位置的預設。該工具不支援自由拖曳，因此任何自訂定位都必須在載入疊加之前於繪圖程式中完成。
置中位置看起來略微偏移。置中預設使用 (W − 縮放後寬度) / 2 和 (H − 縮放後高度) / 2。當差值為奇數像素時，結果會是半像素座標。轉譯器會讓疊加維持數學上的置中，而非傾向於某一側，因此在 100% 縮放時，由於瀏覽器插值的關係，你可能會看到輕微的模糊感。如果你需要像素級精準的角落對齊，請改用角落預設而非置中。
匯出檔案中沒有透明度。輸出永遠是 PNG，但若基礎是 JPEG，則它沒有 alpha 通道。匯出工具仍會產生 PNG，但透明的基礎在沒有任何來源貢獻色彩的區域仍會保持透明，因此任何應該透明的區域都應從 PNG 或 WebP 基礎開始。你也可以驗證轉譯後的 globalAlpha與你在界面中所設定的值相符，然後再進行匯入。
Verifying the Overlay Before Importing
Before you move the PNG into the CS2 mods folder, open it in any image viewer and check three things: the pixel dimensions match the base you intended, the overlay sits where the position math predicts, and the transparency is preserved. Because the tool does not promise to preserve EXIF metadata, animation, or original compression, treat the export as a clean composite rather than a faithful copy of either source.
For precision design work, keep both originals alongside the export. If you need the overlay to finish at a specific pixel width, calculate that width from the overlay's natural width and the selected percentage before exporting — an 800-pixel overlay at 25% scale finishes at 200 pixels wide, regardless of base size. With those checks done, the PNG can be loaded by the CS2 overlay mod and used to trace real geography, align outside connections, or sketch a megaproject tile by tile.
If you're weighing options, How to Convert PNG to JPG Without Losing Quality covers this in detail.
If you're weighing options, Convert SVG to PNG With a Transparent Background covers this in detail.