馬賽克畫布2D游戲中的Terrains Union

Question

我有一個由HTML 5 Canvas中的六邊形組成的鑲嵌圖。 我想做的是，當兩個不同的地形匯聚在一起時，它們會相互融合。 我想從圖片1轉到圖片2

圖片1

圖片2

Answer 1

在沒有太多背景信息的情況下：您總是可以使用自定義圖形創建一個六邊形，該圖形將程序的兩個外部合並，然后每當您檢測到兩個不同的地形時，將其更改為該自定義圖形。

如果您想探索一種更詳細的方法，則不妨考慮查看heightmaps 。 本文提供了一個不錯的描述和教程，您可以從中獲得自己的解決方案。 http://www.playfuljs.com/realistic-terrain-in-130-lines/

想法是：取一個正方形。 將其分成四個子正方形，然后將其中心點向上或向下移動一個隨機偏移量。 將每個分割成更多的子正方形並重復，每次減小隨機偏移的范圍，以便第一個選擇最重要，而后面的選擇則提供較小的細節。 -http://www.playfuljs.com/realistic-terrain-in-130-lines/

建議 ：創建更多不同的紋理，並使用高度圖來確定應在六邊形中顯示的圖形。

除此以外...

合並圖像 ： 畫布- 合並 兩個圖像，返回一個img html對象？

Answer 2

遮罩2D瓷磚貼圖的瓷磚過渡

復合操作

對於2D游戲，您可以使用遮罩混合不同的圖像。 遮罩只是具有Alpha通道值的圖像，該值確定將一個圖像中的多少添加到另一圖像中。

2D畫布上下文具有多種組合模式，可滿足所有類型的遮罩需求。 有關詳細信息，請參見MDN globalCompositeOperation 。

使用對稱性。

您可以通過編程方式來構建蒙版，也可以手動創建它們（手繪通常具有更好的外觀）。 您可以利用六邊形的對稱性，以便只需要2個遮罩即可在兩種類型的游戲圖塊之間進行過渡。

下一個圖像顯示了一個由6個三角形創建的單個六邊形（一個偏移量顯示了單個三角形的單位。

然后將這些三角形再次切成兩半，用於A和B，表示從水到沙子的過渡。 （抱歉，圖像有些大，我忘記了當時的分辨率）

使用這兩個部分並旋轉和鏡像它們（通過上下文轉換），您可以建立從一種瓦片類型到另一種瓦片類型的連接過渡。 實際上，您正在使用12個小三角形而不是一個大六邊形。

該圖像顯示顏色，但是您可以將它們用作遮罩，並根據需要將六邊形創建為圖像（分辨率，圖塊大小，圖塊計數和CPU時間量將決定如何構造圖塊。您可能必須在啟動並消耗一些內存，或者如果游戲的分辨率較低且簡單，則可以隨時進行操作）

上圖中的A是兩個As彼此相鄰，另一個是鏡子。

請記住，顏色代表的是蒙版，​​而不是實際的圖像內容，因此對於本例，您將有2個三角形（A，B）代表黃色，有2個（A，B）代表青色，另外兩個代表藍色，其中alpha值為0，而您沒有希望顯示關聯的紋理。

每個蒙版可以旋轉60度（PI / 3弧度）並鏡像以創建12個可能的角位置。

請注意，如果您的圖塊具有3種或更多不同類型的聯接，則必須創建更復雜的過渡。