解決 Godot 如何開啟匯出的 html5 package

Tue, 03 Mar 2026 00:00:00 +0000

解決 Godot 如何開啟匯出的 html5 package

第一次嘗試透過 Godot 做遊戲 (目前使用的版本為 Godot 4.6)，想說先測試看看匯出成網頁。如果直接打開匯出的 .html 檔案，會遇到 load failed 的問題。這篇文章記錄了如何透過建立一個簡單的 Python 伺服器來解決這個狀況。

畫好簡單的地圖後，測試匯出 HTML5 package

直接打開 html 檔案

🛠️ 解決方法

這個問題主要是因為現代瀏覽器的安全性限制（特別是針對 SharedArrayBuffer 等跨來源隔離機制），導致本地端直接開啟檔案無法成功載入 Godot 的遊戲引擎環境。

參考官方的 Github Issue 討論：godotengine/godot#69020

要解決這個問題，我們需要建立一個提供 Cross-Origin-Opener-Policy 與 Cross-Origin-Embedder-Policy 的本地伺服器。具體步驟如下：

1. 建立伺服器腳本

在匯出的遊戲與 .html 檔案的同一層資料夾內，建立一個名為 server.py 的檔案。

2. 寫入 Python 程式碼

將以下內容貼入 server.py 當中，這會啟動一個簡單的 HTTP 伺服器，並幫我們補上跨網域資源共用 (CORS) 必要的 Headers：

import http.server
import socketserver

PORT = 8000

class MyHTTPRequestHandler(http.server.SimpleHTTPRequestHandler):
    def end_headers(self):
        self.send_header('Cross-Origin-Opener-Policy', 'same-origin')
        self.send_header('Cross-Origin-Embedder-Policy', 'require-corp')
        super().end_headers()

Handler = MyHTTPRequestHandler

with socketserver.TCPServer(("", PORT), Handler) as httpd:
    print(f"Serving at port {PORT}")
    httpd.serve_forever()

在網頁中打造微型世界：Playground 像素藝術與尋路實作

Thu, 26 Feb 2026 00:00:00 +0000

在網頁中打造微型世界：Playground 像素藝術與尋路實作

前陣子 coding 時看到 github 上面一個有趣的專案叫做 Pixel Agents，能夠把 AI coding 時，將 agent 模擬成像素風格的小人物，並把處理過程模擬成在辦公室工作的樣子，看起來很可愛😆，也因為我很喜歡像素風格，就想說能不能在自己的網站也呈現類似的感覺，於是就有了這個 Playground。

這篇文章將會分享這個小天地背後的實作細節，包含如何用 HTML5 Canvas 渲染出銳利的像素畫、角色狀態的設計，以及他們是如何在房間內找到路徑（BFS 尋路演算法）的。

場景素材則是來自 Modern Interiors。

🎨 核心架構設計：Canvas 與銳利的像素

整個 Playground 的基礎是建立在 HTML5 的 <canvas> 標籤上。為了忠實呈現早期遊戲機那種清晰的「顆粒感」，我們必須確保圖片放大後不會變得模糊。

在繪圖素材上，角色的單格尺寸其實非常小，僅有 16x32 像素（寬 16 像素，高 32 像素），而基礎的地磚區塊大小 (Tile Size) 則是 16x16 像素。

如果我們直接把畫布依原尺寸顯示在網頁上，由於現代螢幕解析度極高，使用者可能要拿放大鏡才看得到角色。因此，我們需要在 CSS 中把它放大：

#playgroundCanvas {
    width: 832px;     /* 原始寬度 416 放大了兩倍 */
    height: 480px;    /* 原始高度 240 放大了兩倍 */
    max-width: 100%;
    image-rendering: pixelated; /* 關鍵：保持像素銳利邊緣 */
    image-rendering: crisp-edges;
}

透過 image-rendering: pixelated;，瀏覽器在縮放 Canvas 時會使用最近鄰插值 (Nearest-neighbor interpolation)，從而保留了我們想要的 8-bit 復古感。

Game Dev on Wayne X.Y. Blog

解決 Godot 如何開啟匯出的 html5 package

解決 Godot 如何開啟匯出的 html5 package

🛠️ 解決方法

1. 建立伺服器腳本

2. 寫入 Python 程式碼

在網頁中打造微型世界：Playground 像素藝術與尋路實作

在網頁中打造微型世界：Playground 像素藝術與尋路實作

🎨 核心架構設計：Canvas 與銳利的像素