很讚的遊戲編輯器

窮人的 AI：自動漫畫分鏡切割

noreply@blogger.com (Waync Cheng) — Tue, 03 Feb 2026 13:34:00 +0000

(試試看)

在手機上看漫畫時，有一個體驗上的問題：

漫畫原本是「整頁設計」
手機最適合的是「一格一格往下滑」

與其強迫使用者縮放、拖曳、放大，更直覺的做法是：

直接把一頁漫畫自動切成多個分鏡，轉成瀑布流閱讀。

這篇文章分享一個不靠深度學習、完全在前端完成的實作方式：

使用 OpenCV.js 做分鏡偵測
輸出 rect list
再用全畫面 Canvas 把每個分鏡當成一個「閱讀單位」

整個系統可以拆成三層：

漫畫圖片
   ↓
影像處理（找出 rects）
   ↓
排序後的 rect list
   ↓
全畫面 Canvas 逐格呈現（瀑布流）

Step 1：灰階化

漫畫的資訊 90% 都在線條上，顏色反而是干擾。

cv.cvtColor(src, grayImage, cv.COLOR_RGBA2GRAY);

灰階化的好處：

降低維度
對邊緣偵測更穩定
對黑白漫畫特別有效

Step 2：邊緣偵測，抓出「分鏡的邊」

接下來用最經典、也最夠用的 Canny Edge Detection：

cv.Canny(grayImage, edges, 50, 150);

在漫畫中，分鏡外框通常就是最明顯的邊界。

Step 3：形態學操作，把破碎邊框「補起來」

真實漫畫的線條並不完美，常常有斷線、陰影、留白。

所以要做一個很重要的步驟：膨脹（Dilation）

const kernel = cv.Mat.ones(5, 5, cv.CV_8U);
cv.dilate(edges, dilatedEdges, kernel);

直覺理解就是：

把細線「抹粗一點」，讓本來斷掉的邊界連成封閉區域。

這一步直接決定後面能不能成功抓到「一整格分鏡」。

Step 4：找輪廓，轉成矩形框（rect）

有了封閉區域之後，就可以找輪廓：

cv.findContours(
  dilatedEdges,
  contours,
  hierarchy,
  cv.RETR_EXTERNAL,
  cv.CHAIN_APPROX_SIMPLE
);

每一個 contour，代表一個「可能的分鏡區塊」。

接著轉成矩形：

const rect = cv.boundingRect(contour);
rects.push([rect.x, rect.y, rect.width, rect.height]);

並用面積過濾掉雜訊：

if (cv.contourArea(contour) > 5000) { ... }

Step 5：移除「被完全包住」的多餘 rect

實務上你一定會遇到這種情況：同一格分鏡，被抓出「一個大框 + 一個小框」。

這時不需要聰明演算法，只要幾何判斷：

function isFullyOverlapped(small, large) {
  return (
    x1 >= x2 &&
    y1 >= y2 &&
    x1 + w1 <= x2 + w2 &&
    y1 + h1 <= y2 + h2
  );
}

完全被包住的，直接丟掉。

Step 6：排序 rect，讓它「像是在看漫畫」

這一步非常關鍵，也非常不完美，但夠用。

rects.sort((a, b) => a[1] - b[1] || b[0] - a[0]);

意思是：

先由上到下
同一排由右到左

⚠️ 這不一定符合所有漫畫的分鏡語法，但在手機瀑布流閱讀中：

「大致合理」比「絕對正確」重要得多

到這一步，我們已經有：

[
  [x, y, w, h],
  [x, y, w, h],
  ...
]

每一個 rect，本質上就是一個「閱讀單位」

現在可以拿來作顯示了。

全畫面 Canvas 的好處，如果你把每個 rect：

裁切成獨立圖片
或在 Canvas 中單獨 render
一個 rect = 一個 viewport

你會得到幾個好處：

✅ 天然支援瀑布流：使用者只需要滑，不需要縮放。

✅ 對不同螢幕尺寸友善Canvas：可以等比縮放到全寬。

✅ 分鏡順序錯一點也沒關係：因為使用者是「連續閱讀」，不是在解析作者構圖。

✅ 非常適合手機：這點真的差很多。

這套方法有一個很重要的前提：

我們只試圖改善呈現方式。

所以它：

❌ 不用深度學習

❌ 不用標註資料

❌ 不追求 100% 正確分鏡語法

✅ 快

✅ 可解釋

✅ 前端即可跑

對很多產品來說，這其實是更好的工程解法。

很多人一提到「漫畫分析」，就直覺想到 AI / Model / Training。

但實際上，只要簡單的影像處理就能作到90分，讓手機看漫畫更舒服。

這就是低科技，窮人的 AI 應用 ><

(試試看)

Python的Package和Module

noreply@blogger.com (Waync Cheng) — Mon, 20 Oct 2025 03:10:00 +0000

最近有時會使用Python作些簡單的後端或工具的開發，這對許多人來說可能很熟悉了，不過在此就讓我這個不熟的新手作些基本觀念的記錄。

在Python中，Package(包)和Module(模組)是用來管理程式碼的結構。

1. 模組 Module

Module是包含Python程式碼的檔案，簡單來說就是一個.py的Source Code檔案，裡面可以包含函數、變數、類別等等。或者是一個己經編譯過的.pyc檔案也是一個Module。

如下定義一個a.py的模組。

# a.py
a=1

在其它的Python程式碼檔案裡面可以使用import語句來使用a.py這個模組內定義的函數、變數、類別等等。

如下測試引用a.py裡定義的a。

D:\temp\test>python
Python 3.12.3 (tags/v3.12.3:f6650f9, Apr  9 2024, 14:05:25) [MSC v.1938 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license" for more information.
>>> dir()
['__annotations__', '__builtins__', '__doc__', '__loader__', '__name__', '__package__', '__spec__']
>>> import a
>>> dir()
['__annotations__', '__builtins__', '__doc__', '__loader__', '__name__', '__package__', '__spec__', 'a']
>>> a
<module 'a' from 'D:\\temp\\test\\a.py'>
>>> a.a
1
>>>

注意：一個Module被import的時候，如果存在.pyc就會載入它。如果.py比較新就會先編譯成.pyc再載入。

2. 包 Package

Package其實就是一個目錄，裡面可以包含多個.py也就是多個Module。前提是這個目錄裡面必須有一個__init__.py檔案，這個目錄才會被Python視為一個Package。(不過Python3.3以後這個限制就不在了，__init__.py變成可有可無，但如果要作Package初始化還是需要它。)

因為是目錄，所以也能夠作巢狀管理。如a.b.c，就是目錄[a]下面的目錄[b]下面的c模組。

現在建立一個目錄[b]，在目錄[b]裡面建立一個c.py。

# b/c.py
c='ccc'

D:\temp\test>python
Python 3.12.3 (tags/v3.12.3:f6650f9, Apr  9 2024, 14:05:25) [MSC v.1938 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license" for more information.
>>> dir()
['__annotations__', '__builtins__', '__doc__', '__loader__', '__name__', '__package__', '__spec__']
>>> import b
>>> b
<module 'b' (namespace) from ['D:\\temp\\test\\b']>
>>> b.c
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
AttributeError: module 'b' has no attribute 'c'
>>> import b.c
>>> b.c
<module 'b.c' from 'D:\\temp\\test\\b\\c.py'>
>>> b.c.c
'ccc'
>>>

3. 導入模組或包 import

Python的import語句有幾種用法。

#直接import Module a
import a

#import Package b裡面的Module c
import b.c

#從Package b裡面import Module c
from b import c

D:\temp\test>python
Python 3.12.3 (tags/v3.12.3:f6650f9, Apr  9 2024, 14:05:25) [MSC v.1938 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license" for more information.
>>> dir()
['__annotations__', '__builtins__', '__doc__', '__loader__', '__name__', '__package__', '__spec__']
>>> import a
>>> dir()
['__annotations__', '__builtins__', '__doc__', '__loader__', '__name__', '__package__', '__spec__', 'a']
>>> a
<module 'a' from 'D:\\temp\\test\\a.py'>
>>> import b.c
>>> dir()
['__annotations__', '__builtins__', '__doc__', '__loader__', '__name__', '__package__', '__spec__', 'a', 'b']
>>> b
<module 'b' (namespace) from ['D:\\temp\\test\\b']>
>>> b.c
<module 'b.c' from 'D:\\temp\\test\\b\\c.py'>
>>> from b import c
>>> dir()
['__annotations__', '__builtins__', '__doc__', '__loader__', '__name__', '__package__', '__spec__', 'a', 'b', 'c']
>>> c
<module 'b.c' from 'D:\\temp\\test\\b\\c.py'>
>>> c.c
'ccc'
>>>

4. 別名 as

import as的用法是在導入模組時給它一個別名，可以使程式碼更簡潔易讀。

如下是常見的範例，用np或pd来替代numpy或pandas。

import numpy as np                      # 導入 numpy 模組並給它起别名 np
import pandas as pd                     # 導入 pandas 模組並給它起别名 pd

結合from import as可以替模組內的特定部份取別名。

如下面的範例，from a import a as aaa用a裡面的a取了一個aaa的別名。

D:\temp\test>python
Python 3.12.3 (tags/v3.12.3:f6650f9, Apr  9 2024, 14:05:25) [MSC v.1938 64 bit (AMD64)] on win32
Type "help", "copyright", "credits" or "license" for more information.
>>> dir()
['__annotations__', '__builtins__', '__doc__', '__loader__', '__name__', '__package__', '__spec__']
>>> import a
>>> dir()
['__annotations__', '__builtins__', '__doc__', '__loader__', '__name__', '__package__', '__spec__', 'a']
>>> a
<module 'a' from 'D:\\temp\\test\\a.py'>
>>> a.a
1
>>> from a import a as aaa
>>> dir()
['__annotations__', '__builtins__', '__doc__', '__loader__', '__name__', '__package__', '__spec__', 'a', 'aaa']
>>> aaa
1
>>>

照片轉Pixel Art動畫影片 PixAnim

noreply@blogger.com (Waync Cheng) — Thu, 28 Aug 2025 14:28:00 +0000

[試試]

某天突然想到，我也可以利用之前作過的繪文字填圖EmojiPaint的演算法，作一個簡單的像素風動畫，然後可以存成GIF或者影片方便分享。

EmojiPaint裡面己經有一個叫作pixelart的函式，可以把一個己經畫好圖的canvas的內容，轉成像素風格。每一個像素根據指定tile大小(cw*ch)，它的顏色就是這塊tile裡所有pixel的顏色平均值。這就是pixelart的原理，最簡單的作法。

現在，要作成動畫，只要從最大的tile開始，也就是整張圖的大小(縮放調整至400*400)，不斷的呼叫pixelart。作完後再把tile縮小一半，也就是200*200，再作一次pixelart。一直持續這個過程，直到tile為1*1之前停止，因為1*1太多點要畫了。

經過修改的pixelart，會先把此次所有tile都計算好顏色和位置，儲存在一個陣列。接著才是畫圖階段，一個一個把tile畫出來。但是tile愈小的時候，數量就愈多，畫一個tile的時間也要跟著縮短，才不會讓人覺得過程太過冗長。其實，除了隨著tile縮小，畫tile的時間跟著縮短之外。每一個draw處理中畫的tile數量也會跟著增加，這都是為了減少動畫過程太冗長，提高觀看的人的體驗。

底下是關鍵的pixelart和drawblock函式。

function pixelart(id, cw, ch) {
  var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  var col = Math.floor(canvas.width / cw);
  var row = Math.floor(canvas.height / ch);
  var blocks = [];
  for (var i = 0; i < col; i++) {
    for (var j = 0; j < row; j++) {
      var x = cw * i;
      var y = ch * j;
      var rgb = calcRgbSum(imgData.data, x, y, cw, ch);
      blocks.push([x, y, rgb]);
    }
  }
  var canvas2 = document.getElementById(id);
  var ctx2 = canvas2.getContext('2d');
  displayBlocks(ctx2, blocks, cw, ch);
}

function displayBlock(ctx, blocks, index, cw, ch) {
  if (blocks.length <= index) {
    return;
  }
  const b = blocks[index];
  ctx.fillStyle = 'rgb(' + b[2][0] + ',' + b[2][1] + ',' + b[2][2] + ')';
  ctx.fillRect(b[0], b[1], cw, ch);
  progress += 1;
  ctx.fillStyle = 'blue';
  const px = Math.floor(canvas.width * (progress / total_progress));
  ctx.fillRect(0, canvas.height - 2, px, 2);
}

再來是如何把動畫過程製作影片？

非常簡單！我們可以利用瀏覽器內建的MediaRecorder撘配canvas.captureStream就能作到把canvas的變化內容作為串流輸入一個錄製器，輸出成WebM格式的影片。

底下為主要的相關程式碼。

function startRecAnim() {
  const canvas2 = document.getElementById('canvas2');
  const stream = canvas2.captureStream(25); // 25 FPS
  recorder = new MediaRecorder(stream);
  let chunks = [];
  recorder.ondataavailable = e => chunks.push(e.data);
  recorder.onstop = e => {
    const blob = new Blob(chunks, {type: "video/webm"});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = getWebmFileName();
    a.click();
    recorder = null;
  }
  recorder.start();
}

另外，錄製結束時，只要呼叫recorder.stop()即可停止，並觸發onstop事件。在此事件中，將錄製完成的影片存檔。

最後再利用AI作些畫面美化，就完成了。前後大概只花不到一天。

生成小鎮1010 - 用 Ollama 製作一個在本機執行的生成式文字冒險小遊戲

noreply@blogger.com (Waync Cheng) — Fri, 13 Jun 2025 10:56:00 +0000

生成小鎮 1010是一個利用在本機執行的大語言模型，動態的生成遊戲地圖及根據玩家互動生成故事劇情及任務內容的文字冒險小遊戲。

完成環境建置後，就可以到 Ollama 官網下載模型，在本機開始測試遊戲。

處理器(CPU) 13th Gen Intel(R) Core(TM) i5-13500H 2.60 GHz
記憶體(RAM) 40.0 GB
顯示卡 Intel(R) Iris(R) Xe Graphics 128 M
系統 Windows 11 家用版 24H2

這是我的筆電規格。在我的筆電上跑 gemma3:4b-it-q4_K_M 模型，勉強可以玩。如果你有更強的硬體，就能夠利用更大的模型，得到更好的遊戲內容體驗。

gemma 是 Google 的開放的整合了視覺理解能力多模態大語言模型。4b: 是模型參數大小，表示 40 憶個參數。q4_K_M: 是一種減少模型大小和提高效率的技術，它涉及到將模型中的數值精度降低，並減少了對記憶體和計算資源的需求。

你也可以根據自己的需要或喜好，選擇下載不同模型。

[GitHub]

1. 準備工作

1.1 什麼是 Ollama

Ollama 是一個可以在本機運行大型語言模型（LLM）如 LLaMA、Mistral、Gemma 等的開源工具。它的目的是讓開發者和使用者可以更輕鬆地在自己的電腦上執行和使用這些 AI 模型，而不需要依賴雲端服務。Ollama 的特點是：

本地運行模型 你可以直接在 Windows、macOS 或 Linux 上下載並運行語言模型，無需連網使用 API。
簡單的 CLI 工具 安裝後只需要輸入像 ollama run llama3 這樣的指令就可以開始對話。
支援多種模型 包含 Meta 的 LLaMA、Mistral、Gemma、Deepseek 等模型，也可以自訂模型。
開發整合容易 提供簡單的 API（RESTful），方便整合到你自己的應用程式、網頁或手機 App 中。
節省成本與提高隱私 不用連接 OpenAI、Anthropic 或其他雲端 LLM，降低使用成本，也不會洩漏資料。

1.2 安裝 Ollama

訪問 Ollama 官網，根據你的作業系統作安裝。安裝完成後，您可以使用以下命令來驗證 Ollama 是否安裝成功：

ollama --version

1.3 CLI 基本操作

Ollama 的 CLI 提供了一些基本操作，讓用戶能夠輕鬆管理模型。以下是一些常用的命令：

1.3.1 下載模型

ollama pull <model_name>

這個命令會從 Ollama 的模型庫中下載指定的模型。

1.3.2 運行模型

ollama run <model_name>

使用此命令可以啟動指定的模型並開始進行推理。

1.3.3 列出已安裝的模型

ollama list

此命令會顯示您系統中已安裝的所有模型。

1.3.4 刪除模型

ollama rm <model_name>

使用此命令可以刪除不再需要的模型。

其餘的命令可以由 ollama help 得到。

2. 串接 API 簡介

Ollama 提供了一個 RESTful API，讓開發者能夠輕鬆地與模型進行互動。以下是一些常用的 API 請求範例。

2.1 獲取版本

curl http://localhost:11434/api/version

這個請求將返回 API 的版本號，幫助您確認正在使用的 Ollama 版本。這個請求也可以用來確認本機上的 Ollama 正確安裝並在執行中。

2.2 生成聊天（串流）

curl http://localhost:11434/api/chat -d '{
  "model": "llama3.2",
  "messages": [
    {
      "role": "user",
      "content": "why is the sky blue?"
    }
  ]
}'

這個請求將使用指定的模型生成對於提示 "Why is the sky blue?" 的回應，並以串流的方式返回結果。沒有特別指定的話，串流模式是預設模式。

串流和非串流的差別是串流模式會把模型生成的內容逐步輸出給你，就像我們在網頁或 APP 上使用 ChatGPT 時，它的回答是逐字逐句跳出來的，這有助於提高使用者體驗。而不必像非串流模式要等待較長時間，等到全部結果生成後再一次整個跳出來。

我們在遊戲中生成對話內容時，會使用串流模式。

2.3 生成聊天（非串流）

curl http://localhost:11434/api/chat -d '{
  "model": "llama3.2",
  "messages": [
    {
      "role": "user",
      "content": "why is the sky blue?"
    }
  ],
  "stream": false
}'

這個請求將返回完整的生成結果，而不是逐步輸出。我們在遊戲中生成初始化地圖時，會使用非串流模式。

2.4 生成有前後文的聊天

你可以將多輪的歷史聊天訊息一起輸入，產生帶有前後文的聊天訊息。

curl http://localhost:11434/api/chat -d '{
  "model": "llama3.2",
  "messages": [
    {
      "role": "user",
      "content": "why is the sky blue?"
    },
    {
      "role": "assistant",
      "content": "due to rayleigh scattering."
    },
    {
      "role": "user",
      "content": "how is that different than mie scattering?"
    }
  ]
}'

後面我們會利用這個功能，把遊戲歷史記錄餵給 AI 作為輸入資料。

2.5 生成結構化輸出

為了有效控制模型的輸出資料格式，便於讓我們可以在程式裡面作後續的串接和處理，有必要控制生成資料的結構。

我們在網頁或 APP 上使用 ChatGPT 時，如果只靠提示來指令模型生成結構化資料的話，通常結果是不能保證的。而如果模型最後生出不符合我們需要的格式的資料的話，最終程式就會出錯。好在我們現在是直接串接 API，可以用更直接的方式控制輸出格式。

如下需要生成結構化的輸出，可以使用以下命令：

curl -X POST http://localhost:11434/api/chat -H "Content-Type: application/json" -d '{
  "model": "llama3.1",
  "messages": [
    {
      "role": "user",
      "content": "Ollama is 22 years old and busy saving the world. Return a JSON object with the age and availability."
    }
  ],
  "stream": false,
  "format": {
    "type": "object",
    "properties": {
      "age": {
        "type": "integer"
      },
      "available": {
        "type": "boolean"
      }
    },
    "required": [
      "age",
      "available"
    ]
  },
  "options": {
    "temperature": 0
  }
}'

這個請求將生成一個包含年齡和可用性狀態的 JSON 物件，並確保返回的結果符合指定的結構。

3. 關於角色 role 的定位及作用

在串接 API 時，role 指的是訊息在對話中扮演的角色，它決定了 AI 如何理解並回應你的提示。理解 role 的定位和作用對於構建有效的對話至關重要。

3.1 System (系統角色)

System 角色是整個對話的起始點，定義了 AI 的行為、風格、知識範圍和任務目標。你可以把它看作是「指令稿」。

3.1.1 作用

設定 AI 的行為: 你可以在 System 角色中明確告知 AI 要扮演的角色，例如「你是一個友善的客戶服務代表」、「你是一個專業的編程助手」、「你是一個精通歷史的老師」。
設定 AI 的風格: 你可以規定 AI 的回答應該是正式的、非正式的、幽默的、簡潔的等等。
設定知識範圍: 你可以限制 AI 的知識範圍，例如「你只知道 2021 年之前的資訊」、「你只知道關於 Python 程式設計的知識」。
設定任務目標: 你可以明確告訴 AI 要完成的任務，例如「你的任務是幫我整理一份旅遊行程」、「你的任務是幫我撰寫一篇產品描述」。
提示的初始設定: System 角色通常是整個對話的初始提示，它為後續的 User 和 Assistant 角色奠定基礎。

3.1.2 範例

{
  "role": "system",
  "content": "你是一個優秀的程式設計師，專注於 Python。請用簡潔明瞭的方式回答問題。"
}

3.2 User (使用者角色)

User 角色代表你的提問、指令或輸入。

3.2.1 作用

這是你與 AI 互動的直接方式。你的 User 訊息會觸發 AI 生成 Assistant 角色中的回應。

3.2.2 範例

{
  "role": "user",
  "content": "如何用 Python 讀取 CSV 檔案？"
}

3.3 Assistant (助理角色)

Assistant 角色代表 AI 生成的回應。

3.3.1 作用

AI 的回應: AI 會根據 System 和 User 角色中的訊息，生成 Assistant 角色中的回應。
對話流程: 透過交替的 User 和 Assistant 角色，AI 能夠模擬自然的對話流程。

3.3.2 範例

{
  "role": "assistant",
  "content": "你可以使用 `csv` 模組來讀取 CSV 檔案。以下是一個範例：\n\nimport csv\n\nwith open('your_file.csv', 'r') as file:\n    reader = csv.reader(file)\n    for row in reader:\n        print(row)\n"
}

3.4 要點總結

System 角色設定 AI 的背景和行為。
User 角色代表你的輸入。
Assistant 角色代表 AI 的輸出。
正確使用 role 能夠更好地控制 AI 的行為，提高對話的品質。

4. 生成地圖

現在我們要開始利用 AI 來生成遊戲地圖。基本概念是：我們要利用提示工程對 AI 下指令，讓它輸出我所期望的資料，也就是遊戲地圖。格式是一定要按照我的要求，至於內容則由 AI 自由發揮。

要生成地圖可以使用 generate 指令也能用 chat 指令，這裡我們使用的是 chat 指令，指定了兩條訊息。一條訊息的角色是 System，用來作模型角色定位。另一條訊息角色是 User，用來指示模型怎麼生成地圖。

4.1 生成地圖的提示工程

最初的提示如下:

const create_town_system_prompt = `你是一個專業的遊戲設計師,你的任務是設計一個10x10的遊戲村莊.`;

const create_town_prompt =
`生成一個遊戲小鎮初始的建築物列表.村莊包含如下資料:
- name 村莊名稱
- description 村莊的說明
- buildings 建物列表

村莊裡有如下的建物:
- 一家旅店
- 一家雜貨店
- 可有可無的武器防具店
- 2、3家民房

每一個建物包含如下屬性:
- id 一個唯一數字
- name 建物的名稱
- description 一個簡介說明
- emoji 代表此建物的emoji
- x 建物的水平座標(0<=x<10)
- y 建物的垂直座標(0<=y<10)
`;

const create_town_messages = [
  {"role": "system", "content": create_town_system_prompt},
  {"role": "user", "content": create_town_prompt}
];

為了控制模型輸出資料格式，需要設定指令回應 format。

const create_town_format = {
    "type": "object",
    "properties": {
        "name": {
            "type": "string"
        },
        "description": {
            "type": "string"
        },
        "buildings": {
            "type": "array",
            "building": {
                "type": "object",
                "properties": {
                    "id": { "type": "integer" },
                    "name": { "type": "string" },
                    "description": { "type": "string" },
                    "emoji": { "type": "string" },
                    "x": { "type": "integer" },
                    "y": { "type": "integer" }
                },
                "required": ["id", "name", "description", "emoji", "x", "y"]
            }
        }
    },
    "required": ["name", "description", "buildings"]
}

最後再整個串接起來，就可以生出地圖來。

const input_data = {
    "model": model,
    "messages": create_town_messages,
    "format": create_town_format,
    "stream": false
};

fetch(`${api_base}/api/chat`, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(input_data)
})
.then(response => response.json())
.then(data => {
  // Draw village.
})
.catch(error => {
  // Handle error.
});

注意這裡不用串流模式，所以 fetch 會等到模型一次把完整的資料傳來。得到的其中一個地圖資料如下:

const villageData = `{
  "name": "橡木谷村 (Oakwood Hollow)",
  "description": "橡木谷村是位於繁茂森林邊緣的一個寧靜村莊，居民以農業和簡單的生活為生。在這裡，你可以品嚐到新鮮的農產品，感受淳樸的民風，但也要小心潛伏在森林中的危險。",
  "buildings": [
    {
      "id": 1,
      "name": "橡木旅店 (The Oakwood Inn)",
      "description": "村莊唯一的旅店，提供舒適的客房和美味的食物。老闆娘艾米莉亞是一位熱情好客的女士。",
      "emoji": "🏠",
      "x": 2,
      "y": 5
    },
    {
      "id": 2,
      "name": "好運雜貨店 (Lucky's General Goods)",
      "description": "村莊的雜貨店，出售各種必需品和一些稀有物品。老闆老約翰知道很多關於森林的故事。",
      "emoji": "🛒",
      "x": 7,
      "y": 2
    },
    {
      "id": 3,
      "name": "鐵匠鋪 (Blacksmith's Forge)",
      "description": "村裡的鐵匠巴克正在努力打造武器和防具，但資源匱乏，需要玩家協助。",
      "emoji": "🔨",
      "x": 9,
      "y": 7
    },
    {
      "id": 4,
      "name": "民房 - 艾倫一家 (Allen's Home)",
      "description": "艾倫一家是橡木谷村的居民，以種植蔬菜維生。他們友善而勤勞。",
      "emoji": "🏡",
      "x": 1,
      "y": 1
    },
    {
      "id": 5,
      "name": "民房 - 貝克一家 (Baker's Home)",
      "description": "貝克一家以烘焙美味的麵包和糕點而聞名。他們的香氣經常瀰漫在村莊的上空。",
      "emoji": "🏡",
      "x": 4,
      "y": 3
    },
    {
      "id": 6,
      "name": "民房 - 蓋洛德一家 (Gallord's Home)",
      "description": "蓋洛德一家是一群木匠，擅長製作家具和工具。他們在村莊中十分受人尊敬。",
      "emoji": "🏡",
      "x": 6,
      "y": 8
    },
    {
      "id": 7,
      "name": "民房 - 霍普金斯一家 (Hopkins' Home)",
      "description": "霍普金斯一家是村裡唯一的奶酪製造者，他們的奶酪在周圍地區都非常有名。",
      "emoji": "🏡",
      "x": 3,
      "y": 8
    },
    {
      "id": 8,
      "name": "民房 - 羅伯斯一家 (Roberts' Home)",
      "description": "羅伯斯一家是新搬到村裡的一家人，似乎在隱瞞著什麼...",
      "emoji": "🏡",
      "x": 8,
      "y": 4
    }
  ]
}`;

存起來後，就可以根據這個資料畫地圖了。

4.2 讓 AI 幫忙完善生成地圖的提示

雖然第一版的提示己經可以生成地圖了，但是還有改進空間。怎麼改進？這種事情就讓 AI 來作。再加上一些手動微調，最後得到的結果如下:

const create_town_system_prompt = 
`你是一位經驗豐富的遊戲世界設計師，專長於創建引人入勝的 2D 遊戲地圖。
你的任務是設計一個 10x10 的遊戲村莊，它是一個"奇幻"風格的村莊。
地圖應考慮地形的變化和視覺層次的變化，使玩家在探索時有新鮮感。`;

const create_town_prompt = 
`根據系統指示，生成一個 10x10 遊戲村莊的初始建築物列表。
村莊包含以下資料：

- **村莊名稱:** （例如：晨曦村莊）
- **村莊說明:** （簡要描述村莊的背景和特色）
- **建物列表:** 至少包含一家旅店、一家雜貨店、1-3 家民房和一個武器店等等。

請確保：
- 所有建物不得重疊。
- 民房應分散在村莊的不同區域。
- 武器店應靠近村莊的入口。
- 旅店和雜貨店應位於村莊的中心。

每個建物包含以下屬性：
- **id:** 一個唯一的數字 (從 1 開始)
- **name:** 建物的名稱
- **description:** 一個簡要的說明, 可能包含裡面人物的簡介
- **emoji:** 代表此建物的 emoji (例如: 🏠, ⚔️, 🍺, 🕳)
- **x:** 建物的水平座標 (0 <= x < 10)
- **y:** 建物的垂直座標 (0 <= y < 10)

請注意，部分建物可能直接建造在山或山洞中。

**請確保：**
- 所有建物不得重疊。
- 民房應分散在村莊的不同區域。
- 武器店應靠近村莊的入口。
- 旅店和雜貨店應位於村莊的中心。
`;

const create_town_format = {
  "type": "object",
  "properties": {
    "name": { "type": "string" },
    "description": { "type": "string" },
    "buildings": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "id": { "type": "integer" },
          "name": { "type": "string" },
          "description": { "type": "string" },
          "emoji": { "type": "string" },
          "x": { "type": "integer" },
          "y": { "type": "integer" }
        },
        "required": ["id", "name", "description", "emoji", "x", "y"]
      }
    }
  },
  "required": ["name", "description", "buildings"]
};

這裡面有個重點，用到一個叫作 In-context 的學習方式。這是一種提示工程的方法，即在提示中加入足夠多的背景知識或任務描述，以便進行預測。

通過提供上下文信息，模型可以更好地理解問題的內容，並生成更加合適的答案。這種方法能夠提高模型在特定任務上的表現，並減少誤差。

Zero-shot：沒有給出任何範例參考，直接進行詢問。
user>翻譯以下文字成英文: 蘋果 =>

One-shot：提供一個範例。
user>翻譯以下文字成英文: 香蕉 => banana, 蘋果 =>

Few-shot：提供多個範例。
user>翻譯以下文字成英文: 香蕉 => banana, 橘子 => orange, 蘋果 =>

透過這種引導方式，我們可以在大型模型上獲得驚人的效果（小型模型則無法達到這種效果）。

5. 遊戲互動

處理玩家和遊戲互動推進遊戲的基本概念是：當玩家點擊地圖上的某建物時，就產生一條"拜訪某某某"的聊天訊息，串接在遊戲互動的系統提示及前面己進行的遊戲歷史記錄之下，讓 AI 接著生成回應。

5.1 遊戲互動的提示工程

第一個版本的提示工程如下:

const game_system_prompt =
`你是一個專業的遊戲設計師,你的任務是設計在一個10x10的遊戲村莊裡的遊戲劇情及任務:
- 你會根據遊戲歷史記錄動態創造新的劇情及任務
- 你會根據遊戲小鎮裡的風土人物創造合適的劇情及任務
`;

const play_game_prompt = 
`遊戲進行方式是:
- user要求跟某人對話,你產生對應的結果.說明當前故事、劇情、任務或提示user下一步該怎麼作,應該找誰.
- 如果user要求跟某人對話,此人是下一個正確的人則推進劇情,否則繼續下一個故事、劇情、任務或提示user下一步該怎麼作.
`;

const play_game_format = {
    "type": "object",
    "properties": {
        "name": { "type": "string" },
        "response": { "type": "string" }
    },
    "required": ["name", "response"]
};

function constructPlayGameInputData(npc) {
  const play_game_messages = [
    {"role": "system", "content": game_system_prompt},
    {"role": "assistant", "content": play_game_prompt}
  ];
  return {
    "model": model,
    "messages": play_game_messages.concat(game_history),
    "format": play_game_format,
    "stream": false};
}

點擊地圖上的建物時，呼叫 talkToNpc 就能根據目前遊戲狀態讓模型產生合適的回應推進遊戲。

function talkToNpc(npc) {
  appendHistoryItem({'role':'user','content':`talkToNpc:${npc}`});
  const inputData = constructPlayGameInputData(npc);
  fetch(`${api_base}/api/chat`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(inputData)
  })
  .then(response => response.json())
  .then(data => {
    appendHistoryItem({'role':'assistant','content':data.message.content});
  })
  .catch(error => {
    // Handle error.
  });
}

5.2 改良模型回應

回應裡面應包含關於"拜訪某某某"所產生的反應結果，以及一組建議玩家的下一步行作或操作。

第一步先把 talkToNpc 改為 performAction，預留為以後作為更通用的執行動作。

function performAction(action) {
  appendHistoryItem({'role':'user','content':`Your action: ${action}`});
  // 以下同上面的 talkToNpc 內容.
}

遊戲互動的模型回傳格式改成如下，新增 next_actions。

const play_game_format = {
    "type": "object",
    "properties": {
        "action": { "type": "string" },
        "result": { "type": "string" },
        "next_actions": {
            "type": "array",
            "next_action": { "type": "string" }
        }
    },
    "required": ["action", "result", "next_actions"]
}
};

next_actions 是一個陣列，所以模型可能傳回多個下一步操作。收到回應後，就能把 next_actions 作為一個選單選項都顯示出來，讓玩家作選擇。當玩家選取某一選項時，則呼叫 performAction 推進模型產生下一步回應。

5.3 處理串流回應提高使用者體驗

如果串 API 是為了作在背景執行的工具或服務，那麼就不必管使用者體驗的問題。

但若作為一個有使用者介面的應用的背景服務，如果每次使用者下個指令，就要等待一段較長時間後整個結果才跳出來。跟每次下完指令後等待一段較短時間後，結果就不斷的一個一個跳出來。這兩種處理方式，帶給使用者的體驗就完全不同。

所以接下來，我們要作的是把遊戲互動的回應改為串流模式，以增加使用者體驗。要作到這件事，有兩個地方要修改。

第一個很簡單，把 constructPlayGameInputData 裡面的 "stream": false 拿掉即可變為串流模式。第二個修改較麻煩，要修改 performAction 為可以處理串流回應。

串流模式回傳的資料結果可能如下:

{"model":"gemma3:4b-it-q4_K_M","created_at":"2025-06-13T01:01:46.2135619Z","message":{"role":"assistant","content":"Okay"},"done":false}
{"model":"gemma3:4b-it-q4_K_M","created_at":"2025-06-13T01:01:46.3280286Z","message":{"role":"assistant","content":","},"done":false}
{"model":"gemma3:4b-it-q4_K_M","created_at":"2025-06-13T01:01:46.4407359Z","message":{"role":"assistant","content":" let"},"done":false}
{"model":"gemma3:4b-it-q4_K_M","create

他是由許多個小塊的回應組成，每一小塊回應都是一個 JSON 格式的資料，我要需要把裡面的 content 都抓出來組成一個大塊的完整資料。

每處理一小塊的 content 時，就可以同時把這一小塊的 content 顯示到畫面上，這樣就能讓使用者不斷的看到畫面變化，減少長時間等待的不適感。

const reader = response.body.getReader();
const decoder = new TextDecoder();
let done = false;
let textChunk = '';

while (!done) {

  ...

  textChunk += decoder.decode(value);

  // 假設各別的 JSON 物件是以 '\n' 分隔.
  const matches = textChunk.split('\n');

  let part_content = '';
  for (let i = 0; i < matches.length; i++) {
    try {
      const json_response = JSON.parse(matches[i]);
      const this_content = json_response.message.content;
      part_content += this_content;
      if (json_response.done) {
        done = true;
        break;
      }
    } catch (error) {
      // Handle error.
    }
  }

  // Output part_content.

  ...
}

上面的處理作了一個假設，它假設回傳的許多個各別的 JSON 物件是以 '\n' 分隔開的。因為作了這個假設的處理比較簡單，目前這樣的處理是可以的。正確的作法是要解析 textChunk 並找出每一塊 JSON 物件來，才能保證未來不會出錯。

另一個作法是，把整塊 textChunk 丟給模型去分塊，充分利用模型的文字解析能力。當然，這會有額外開銷。

5.4 讓 AI 幫忙完善遊戲互動的提示

最後一樣讓 AI 幫忙完善一下遊戲互動的提示。加上一些手動微調後的結果如下:

const game_system_prompt =
`你是一位經驗豐富的遊戲劇情設計師，專注於創建引人入勝的 2D 遊戲劇情。
你的任務是動態創造新的劇情及任務，確保劇情與歷史記錄和村莊資訊相符。
請注重劇情的可玩性和沉浸感。
`;

const play_game_prompt = 
`遊戲進行方式是:
- User 要求與某人對話。
- 你必須根據當前的遊戲歷史、村莊資訊和對話目標，產生合適的回應。
- 回應內容應包含當前故事、劇情、任務或提示 User 下一步該怎麼作，應該找誰。
- 如果 User 要求與某人對話，且此人是推進劇情所必需，則推進劇情；否則，繼續設計新的故事、劇情、任務或提示 User 下一步該怎麼作。

你的回應 JSON 格式應該如下：
{"result": "你的回應", "next_actions": ["下一個動作1", ...]}
`;

6. 總結

這是一個利用大語言模型的生成能力作出來的小遊戲，還有很多改進空間。例如:

完善建築物及 NPC 的屬性，加上'角色定位'、'目前任務'、'關係屬性'等等，會讓模型的生成結果有更微妙的不同。
加入背包系統，可以讓遊戲更多互動變化。
前面提到的 performAction 的串流處理的改進。

經由這個小遊戲，對於怎麼串接大語言模型 API 來製作應用，相信對大家有一個更明確的概念。

從頭實作一個 WIN32 Source Level 除錯器

noreply@blogger.com (Waync Cheng) — Sun, 09 Feb 2025 15:50:00 +0000

很久以前寫過一篇關於debugger的文，但只起個頭就沒有繼續了，現在才把這件事再拿起來作。

1. WIN32 除錯事件及迴圈

1.1 最小的 WIN32 除錯器

Windows 提供 WIN32 API 支援除錯器 (Debugger) 的實作，以下是一個最小的 WIN32 環境底下的除錯器。主要分為兩個部份。一、啟動被除錯的程式 (Debuggee)，二、除錯事件迴圈 (Debug Event Loop)。

#include <windows.h>

void main()
{
  CreateProcess(..., DEBUG_ONLY_THIS_PROCESS ,...);
  while (WaitForDebugEvent(...)) {
    if (EXIT_PROCESS) {
      break;
    }
    ContinueDebugEvent(...);
  }
}

以上幾行程式碼雖然不能作什麼事，但已經是一個最小的 WIN32 除錯器了。接下來我們會一步一步建立出一個 Source Level Debugger 的各個主要功能。

1.2 啟動被除錯的程式

使用 CreateProcess 啟動被除錯程式，被除錯程式會作為除錯器的子行程。當除錯器關閉時，被除錯程式的行程也會隨之終止。除錯器呼叫的 CreateProcess 必須加上 DEBUG_ONLY_THIS_PROCESS 參數，才能對子行程除錯。加上 CREATE_NEW_CONSOLE 參數開啟新的文字視窗，以避免被除錯程式和除錯器的輸出混雜在一起。若被除錯程式或除錯器是有 GUI 的視窗程式，則此參數是否有加上則無影響。

STARTUPINFO si = { 0 };
si.cb = sizeof(si);

if (!CreateProcess(DEBUGEE_FILE_NAME, NULL, NULL, NULL, FALSE, DEBUG_ONLY_THIS_PROCESS | CREATE_NEW_CONSOLE, NULL, NULL, &si, &g_piDbgee)) {
  printf("CreateProcess failed: %u\n", GetLastError());
  return -1;
}

1.3 DEBUG_EVENT 結構

除錯事件 (Debug Event) 和除錯主迴圈 (Debug Main Loop) 依靠一個 DEBUG_EVENT 結構作中介，DEBUG_EVENT 結構定義在 WinBase.h，如下。

typedef struct _DEBUG_EVENT {
  DWORD dwDebugEventCode;
  DWORD dwProcessId;
  DWORD dwThreadId;
  union {
    EXCEPTION_DEBUG_INFO Exception;
    CREATE_THREAD_DEBUG_INFO CreateThread;
    CREATE_PROCESS_DEBUG_INFO CreateProcessInfo;
    EXIT_THREAD_DEBUG_INFO ExitThread;
    EXIT_PROCESS_DEBUG_INFO ExitProcess;
    LOAD_DLL_DEBUG_INFO LoadDll;
    UNLOAD_DLL_DEBUG_INFO UnloadDll;
    OUTPUT_DEBUG_STRING_INFO DebugString;
    RIP_INFO RipInfo;
  } u;
} DEBUG_EVENT

根據 DEBUG_EVENT 結構的 dwDebugEventCode 欄位的不同值，再對應 union 結構 u 裡的相應子結構可得到更詳盡的事件訊息。

dwDebugEventCode 欄位的可能值如下：

CREATE_PROCESS_DEBUG_EVENT 被除程式行程建立時。
CREATE_THREAD_DEBUG_EVENT 新建一執行緒時。
EXCEPTION_DEBUG_EVENT 異常發生時。
EXIT_PROCESS_DEBUG_EVENT 被除錯程式行程結束時。
EXIT_THREAD_DEBUG_EVENT 執行緒結束時。
LOAD_DLL_DEBUG_EVENT 載入一DLL時。
OUTPUT_DEBUG_STRING_EVENT 呼叫 OutputDebugString 輸出除錯訊息時。
RIP_EVENT 系統發生錯誤時。
UNLOAD_DLL_DEBUG_EVENT 卸載一 DLL 時。

1.3.1 CREATE_PROCESS_DEBUG_EVENT

當被除錯程式以 CreateProcess 啟動後，即收到此事件。因為行程只會被建立一次，因此此事件也只會產生一次。這是行程建立後觸發的事件，因此可在此事件中作必要的初始化動作。比如載入模組除錯資訊、設定初始中斷點等。

1.3.2 EXIT_PROCESS_DEBUG_EVENT

當被除錯程式的行程結束時，即收到此事件。此事件對應 CREATE_PROCESS_DEBUG_EVENT 事件，且只會觸發一次。可在此事件中處理釋放資源等動作，比如釋放在除錯過程中所配置的資源等。

1.3.3 LOAD_DLL_DEBUG_EVENT

動態載入的 DLL，每載入一個 DLL 就會產生一個 LOAD_DLL_DEBUG_EVENT 事件。

1.3.4 UNLOAD_DLL_DEBUG_EVENT

對應於 LOAD_DLL_DEBUG_EVENT 事件，動態載入的 DLL 卸載時產生一個 UNLOAD_DLL_DEBUG_EVENT 事件。

1.3.5 CREATE_THREAD_DEBUG_EVENT

每創建一個執行緒時，會產生一個 CREATE_THREAD_DEBUG_EVENT 事件。除錯器以 CreateProcess 啟動創建一個被除錯程式子行程，並且由系統創建一個主執行緒，但並不會產生一個對應的 CREATE_THREAD_DEBUG_EVENT 事件。

1.3.6 EXIT_THREAD_DEBUG_EVENT

對應於 CREATE_THREAD_DEBUG_EVENT 事件，執行緒結束時時會產生一個 EXIT_THREAD_DEBUG_EVENT 事件。

1.3.7 OUTPUT_DEBUG_STRING_EVENT

在程式中使用 OutputDebugString 輸出的訊息會觸發此事件。

有一點要注意的是，OutputDebugStringW 是 Windows 提供的寬字元版本，其內部實作會依照當前編碼環境將字串轉換為 ASCII 格式，並呼叫 OutputDebugStringA 進行處理。然而，這僅在某些環境或編碼設置下會發生，具體情況依賴系統的字串處理設定。所以底下我們在實作 OUTPUT_DEBUG_STRING_EVENT 事件處理時，都是以 ASCII 字串處理。如果除錯器想要取得 UNICODE 字串，除錯器事件迴圈必需以 WaitForDebugEventEx 來等待並處理除錯事件。

1.3.8 RIP_EVENT

系統發生錯誤時，產生此事件。

1.3.9 EXCEPTION_DEBUG_EVENT

程式發生異常時，會觸發此事件。中斷異常，也就是程式裡的中斷點 (Break Point) 就是以此事件處理。中斷異常有兩類，一、程式斷點造成的異常，二、CPU 單步 (Single Step) 執行造成的異常。

1.4 除錯事件迴圈

除錯事件迴圈就好比是視窗訊息迴圈，是用來驅動除錯器核心功能。主要透過 WaitForDebugEvent 等待除錯事件發生的迴圈，事件發生時再依據 DEBUG_EVENT 結構的 dwDebugEventCode 欄位的值作分發處理。正常情況下，每處理完一個除錯事件後，再呼叫 ContinueDebugEvent 傳入 DBG_CONTINUE 參數表示己處理完畢此除錯事件，讓程式繼續執行，並等待下一個除錯事件的發生。

DEBUG_EVENT debugEvent;
while (WaitForDebugEvent(&debugEvent, INFINITE)) {
  if (DispatchDebugEvent(debugEvent)) {
    ContinueDebugEvent(debugEvent.dwProcessId, debugEvent.dwThreadId, DBG_CONTINUE);
  } else {
    break;
  }
}

2. Dispatch Debug Event

底下是簡單的 DispatchDebugEvent 實作，依據 DEBUG_EVENT 結構的 dwDebugEventCode 欄位的值，分發到不同事件處理函式作進一步處理。此函數若回傳 false，則會終止當前事件處理並結束當前事件循環，但並不會直接結束整個除錯過程，除非程式內部有額外邏輯處理來停止整體除錯器的運行。否則會呼叫 ContinueDebugEvent 以 DBG_CONTINUE 參數，讓被除錯程式繼續執行，並等待下一個除錯事件。

bool DispatchDebugEvent(const DEBUG_EVENT &debugEvent)
{
  switch (debugEvent.dwDebugEventCode) {
    case CREATE_PROCESS_DEBUG_EVENT:
      return OnProcessCreated(debugEvent.u.CreateProcessInfo);

    case CREATE_THREAD_DEBUG_EVENT:
      return OnThreadCreated(debugEvent.u.CreateThread);

    case EXCEPTION_DEBUG_EVENT:
      return OnException(debugEvent.u.Exception);

    case EXIT_PROCESS_DEBUG_EVENT:
      return OnProcessExited(debugEvent.u.ExitProcess);

    case EXIT_THREAD_DEBUG_EVENT:
      return OnThreadExited(debugEvent.u.ExitThread);

    case LOAD_DLL_DEBUG_EVENT:
      return OnDllLoaded(debugEvent.u.LoadDll);

    case UNLOAD_DLL_DEBUG_EVENT:
      return OnDllUnloaded(debugEvent.u.UnloadDll);

    case OUTPUT_DEBUG_STRING_EVENT:
      return OnOutputDebugString(debugEvent.u.DebugString);

    case RIP_EVENT:
      return OnRipEvent(debugEvent.u.RipInfo);

    default:
      printf("Unknown debug event.\n");
      return false;
  }
}

底下就主要幾個除錯事件作出處理器的骨架，後面會持續完善功能。

2.1 OnProcessCreated

被除錯程式行建立時觸發此事件。後面講到中斷時，會再此加入除錯資訊的相關初始化，以及建立初始軟體中斷。目前只把沒有使用到的 HANDLE 都關閉。

bool OnProcessCreated(const CREATE_PROCESS_DEBUG_INFO* pi)
{
  printf("CREATE_PROCESS_DEBUG_EVENT\n");
  CloseHandle(pi->hFile);
  CloseHandle(pi->hThread);
  CloseHandle(pi->hProcess);
  return true;
}

2.2 OnProcessExited

被除錯程式行程結束時，關閉 CreateProcess 記錄的 HANDLE。OnProcessExited 回傳 false 的原因是，此回傳值一直往上層傳遞到達除錯事件迴圈時，會讓除錯事件迴圈跳出並最終結束除錯器的執行。

bool OnProcessExited(const EXIT_PROCESS_DEBUG_INFO*)
{
  printf("EXIT_PROCESS_DEBUG_EVENT\n");
  CloseHandle(g_piDbgee.hThread);
  CloseHandle(g_piDbgee.hProcess);
  memset(&g_piDbgee, 0, sizeof(g_piDbgee));
  return false;
}

2.3 OnThreadCreated

關閉沒有使用到的 HANDLE。

bool OnThreadCreated(const CREATE_THREAD_DEBUG_INFO* pi)
{
  printf("CREATE_THREAD_DEBUG_EVENT\n");
  CloseHandle(pi->hThread);
  return true;
}

2.4 OnDllLoaded

此處只關閉沒有使用到的 HANDLE，之後會添加除錯資訊的載入。

bool OnDllLoaded(const LOAD_DLL_DEBUG_INFO* pi)
{
  printf("LOAD_DLL_DEBUG_EVENT\n");
  CloseHandle(pi->hFile);
  return true;
}

2.5 OnOutputDebugString

因為很簡單，在這裡直接實作 OnOutputDebugString 事件處理器，顯示 OutputDebugString 的輸入字串。因為除錯器行程是被除錯程式行程的父行程，所以可以合法的透過 ReadProcessMemory 從被除錯程式行程讀取放在記憶體中的 OutputDebugString 的字串資料。

bool OnOutputDebugString(const OUTPUT_DEBUG_STRING_INFO* pi)
{
  BYTE* pBuffer = (BYTE*)malloc(pi->nDebugStringLength);
  ReadProcessMemory(g_piDbgee.hProcess, pi->lpDebugStringData, pBuffer, pi->nDebugStringLength, NULL);
  printf("OUTPUT_DEBUG_STRING_EVENT: '%s'\n", pBuffer);
  free(pBuffer);
  return true;
}

3. 使用者指令交互模式

當被除錯程式執行過程中，遇到一個中斷點而停下來時，除錯器進入與使用者的指令交互模式，等待使用者輸入除錯指令。

3.1 Debugger Event Loop

首先稍微重整一下程式，新增一個 DebugEventLoop。DebugEventLoop 是除錯事件迴圈的包裝。

void DebugEventLoop()
{
  DEBUG_EVENT debugEvent;
  while (WaitForDebugEvent(&debugEvent, INFINITE)) {
    if (DispatchDebugEvent(debugEvent)) {
      ContinueDebugEvent(debugEvent.dwProcessId, debugEvent.dwThreadId, DBG_CONTINUE);
    } else {
      break;
    }
  }
}

3.2 除錯器狀態機

建立一個簡單的除錯器狀態機，用來表示當前除錯器狀態。底下定義 DEBUGGER_STATE：

enum DEBUGGER_STATE {
  DBGS_NONE = 0,
  DBGS_BREAK,
  DBGS_EXIT_PROCESS = 100
};

DBGS_BREAK 表示中斷狀態，可以接收使用者指令。
DBGS_EXIT_PROCESS OnProcessExited 事件發生時進入此狀態，跳出並結束除錯事件迴圈。

以後陸續添加其它狀態。

3.3 Debugger Main Loop

這個除錯器主迴圈很單純，當進入中斷模式時，允許使用者輸入指令作交互，例如顯示暫存器內容、檢視記憶體內容、設定軟體中斷或繼續執行等。如果是 DBGS_EXIT_PROCESS 狀態，則表示被除錯程式己結束，所以直接跳出並結束除錯器程式執行。其它的狀態都是進入除錯事件迴圈 DebugEventLoop，等待並處理除錯事件。

void DebuggerMainLoop()
{
  while (true) {
    switch (g_dbgState) {
      case DBGS_BREAK:
        HandleUserCommand();
        break;
      case DBGS_EXIT_PROCESS:
        return;
      default:
        DebugEventLoop();
        break;
    }
  }
}

3.4 Handle User Command

處理使用者輸入，並執行輸入的指令。

void HandleUserCommand()
{
  printf("-");
  char buff[256];
  if (!fgets(buff , sizeof(buff), stdin)) {
    return;
  }

  std::string str(buff);
  str.erase(0, str.find_first_not_of(" \t\r\n")); // Trim space.
  str.erase(str.find_last_not_of(" \t\r\n") + 1);
  if (str.empty()) {
    return;
  }

  switch (str[0]) {
    case 'g': case 'G':
      Go();
      break;
  }
}

目前只簡單加一個繼續執行的 Go 的指令，以後再陸續添加其它指令。

3.5 Go

Go 很簡單，就是將除錯器狀態回復為 DBGS_NONE，並且呼叫 ContinueDebugEvent 讓被除錯程式可以繼續往下執行，並等待下一個除錯事件發生。

將除錯器狀態設為 DBGS_NONE 的原因是，這樣下一輪 DebuggerMainLoop 執行時，才能再進入除錯器事件迴圈，讓 DebugEventLoop 處理相關事件。

void Go()
{
  g_dbgState = DBGS_NONE;
  ContinueDebugEvent(g_debugEvent.dwProcessId, g_debugEvent.dwThreadId, DBG_CONTINUE);
}

3.6 OnException

在 OnException 裡判斷 ExceptionRecord.ExceptionCode 是否為一個 EXCEPTION_BREAKPOINT 造成的中斷，若是則進入 DBGS_BREAK 模式，等待使用者輸入指令。

除錯器狀態設為 DBGS_BREAK 並且回傳 false 的原因是，如此 DebugEventLoop 才能跳出，並在 DebuggerMainLoop 裡進入等待使用者輸入交互指令的循環。

bool OnException(const EXCEPTION_DEBUG_INFO &pi)
{
  printf("EXCEPTION_DEBUG_EVENT. Code: 0x%x, Addr: 0x%x ", pi.ExceptionRecord.ExceptionCode, pi.ExceptionRecord.ExceptionAddress);
  if (EXCEPTION_BREAKPOINT == pi.ExceptionRecord.ExceptionCode) {
    g_dbgState = DBGS_BREAK;
    return false;
  }
  return true;
}

4. 測試用的被除錯程式

4.1 測試程式

這是一個很簡單的用來測試用的被除錯程式，檔名叫作 test.c，是一個 WIN32 Console 程式。

#include <stdio.h>
#include <windows.h>

int add(int a, int b)
{
  int c = a + b;
  return c;
}

int main()
{
  printf("Hello world!\n");
  OutputDebugStringA("hello world!");
  __debugbreak();
  int sum = add(2, 3);
  printf("%d\n", sum);
  return 0;
}

因為我們還沒有實作動態設置軟體中斷點的處理，這裡先使用 __debugbreak 的呼叫。等到實作了軟體中斷之後，就可以把這個 __debugbreak 拿掉。在使用者交互模式中，可以透過除錯器動態增減中斷點，這樣可以在程式執行時根據需要來控制程式的執行流程。

__debugbreak 是 Visual Studio 提供的一個函數，用於在程式中插入中斷點。當執行到此函數時，會觸發中斷並暫停程式的執行。需要注意的是，這個方法主要在 Microsoft 編譯器中有效，其他編譯器可能會使用不同的方法來觸發斷點。除了以 __debugbreak 在程式內插入一個中斷點外，也能用內嵌組合語言 __asm {int 3} 的方式插入一個int 3，也就是 0xcc 的指令。

4.2 除錯測試程式

修改除錯器的 CreateProcess，直接寫死測試用被除錯程式的路徑檔名。以後功能更完善後，則可將要被除錯的程式作為參數導入除錯器。

...
if (!CreateProcess(TEXT("D:\\testc\\bin\\Debug\\testc.exe"), ...)) {
  printf("CreateProcess failed: %u\n", GetLastError());
  return -1;
}
...

4.3 執行除錯器測試

重新編譯除錯器及測試程式後，執行除錯器，可以看到如下結果。

CREATE_PROCESS_DEBUG_EVENT
LOAD_DLL_DEBUG_EVENT
LOAD_DLL_DEBUG_EVENT
LOAD_DLL_DEBUG_EVENT
EXCEPTION_DEBUG_EVENT. Code: 0x80000003, Addr: 0x77b157f8 (First chance)
>g
EXCEPTION_DEBUG_EVENT. Code: 0x406d1388, Addr: 0x76f99e14 (First chance)
OUTPUT_DEBUG_STRING_EVENT: 'hello world!'
EXCEPTION_DEBUG_EVENT. Code: 0x80000003, Addr: 0x443d7c (First chance)
>g
EXIT_PROCESS_DEBUG_EVENT. Code: 0

第一個 EXCEPTION_DEBUG_EVENT 是 WIN32 自動替被除錯程式加上的中斷點。第二個 EXCEPTION_DEBUG_EVENT 是 OutputDebugString 內部實作產生的事件，緊接其後可看到 OUTPUT_DEBUG_STRING_EVENT 事件及其輸出。第三個 EXCEPTION_DEBUG_EVENT 才是我們測試程式裡加上的 __debugbreak 呼叫所產生的中斷點。

每次遇到一個 EXCEPTION_DEBUG_EVENT 中斷下來時，我們就按一下 'g' 讓程式繼續執行下去。

5. 異常

5.1 異常種類

錯誤異常恢復執行時是從發生異常的那條指令繼續執行，而陷阱異常恢復執行時是從發生異常的那條指令的下一條指令繼續執行。

以下是 WinBase.h 中的定義。

EXCEPTION_ACCESS_VIOLATION 0xC0000005
EXCEPTION_ARRAY_BOUNDS_EXCEEDED 0xC000008C
EXCEPTION_BREAKPOINT 0x80000003
EXCEPTION_DATATYPE_MISALIGNMENT 0x80000002
EXCEPTION_FLT_DENORMAL_OPERAND 0xC000008D
EXCEPTION_FLT_DIVIDE_BY_ZERO 0xC000008E
EXCEPTION_FLT_INEXACT_RESULT 0xC000008F
EXCEPTION_FLT_INVALID_OPERATION 0xC0000090
EXCEPTION_FLT_OVERFLOW 0xC0000091
EXCEPTION_FLT_STACK_CHECK 0xC0000092
EXCEPTION_FLT_UNDERFLOW 0xC0000093
EXCEPTION_ILLEGAL_INSTRUCTION 0xC000001D
EXCEPTION_IN_PAGE_ERROR 0xC0000006
EXCEPTION_INT_DIVIDE_BY_ZERO 0xC0000094
EXCEPTION_INT_OVERFLOW 0xC0000095
EXCEPTION_INVALID_DISPOSITION 0xC0000026
EXCEPTION_NONCONTINUABLE_EXCEPTION 0xC0000025
EXCEPTION_PRIV_INSTRUCTION 0xC0000096
EXCEPTION_SINGLE_STEP 0x80000004
EXCEPTION_STACK_OVERFLOW 0xC00000FD

前面處理的 EXCEPTION_DEBUG_EVENT 除錯事件，其實就是因為觸發了一個 EXCEPTION_BREAKPOINT 異常，以及之後實作單步執行等功能時的 EXCEPTION_SINGLE_STEP 異常。當然還有其它種類異常可能發生，但是除錯器主要關心的就是這二種。

5.2 異常的處理

程式發生異常時，被 Windows 捕獲進入內核態。
Windows 檢查此程式是否正被除錯中，若是則發出一個 EXCEPTION_DEBUG_EVENT 事件給除錯器，否則到 4。這是除錯器第一次收到該事件 (First Chance)。
除錯器收到 EXCEPTION_DEBUG_EVENT 事件，最後如果以 DBG_CONTINUE 參數呼叫 ContinueDebugEvent，表示除錯器己處理此異常，程式繼續執行。如果是以 DBG_EXCEPTION_NOT_HANDLED 參數呼叫 ContinueDebugEvent，表示沒有處理此異常。
Windows 回到用戶態，尋找可處理該異常的處理器。如果找到了並處理完畢，則程式繼續執行，否則到 5。
Windows 回到內核態，檢查此程式是否正被除錯中，若是再發出一個 EXCEPTION_DEBUG_EVENT 事件給除錯器，否則到 7。這是除錯器第二次收到該事件 (Second Chance)。
除錯器收到 EXCEPTION_DEBUG_EVENT 事件，最後如果以 DBG_CONTINUE 參數呼叫 ContinueDebugEvent，表示除錯器己處理此異常，程式繼續執行。如果是以 DBG_EXCEPTION_NOT_HANDLED 參數呼叫 ContinueDebugEvent，表示沒有處理此異常。
異常沒有被處理，程式以應用程式錯誤結束執行。

First Chance 例外是指程式首次遇到異常時，除錯器有機會介入進行處理。如果除錯器選擇不處理，則該異常會被視為 Second Chance 例外，並觸發進一步的錯誤處理或終止程式。

5.3 OutputDebugString

前面'執行除錯器測試'一節的執行結果中，總共看到三個 EXCEPTION_DEBUG_EVENT。第一個是 Windows 送給除錯器的第一個初始化 EXCEPTION_DEBUG_EVENT 事件，第三個是我們在測試程式中加上的 __debugbreak 所產生的 EXCEPTION_DEBUG_EVENT 事件。而第二個 EXCEPTION_DEBUG_EVENT 事件則是 OutputDebugString 底層利用異常機制來實作 OUTPUT_DEBUG_STRING_EVENT 事件所產生出來的。

6. 除錯符號資訊

除錯器在除錯程式時，要顯示程式中斷處的程式碼、顯示變數型別及內容值等功能及操作，都需要除錯符號資訊的支援才能作到。

6.1 PDB 格式

除錯符號資訊有很多種格式，Visual Studio 預設使用PDB格式。

6.2 使用除錯資訊

Windows 提供 DbgHelp (Debug Help Library) 及 DIA (Debug Interface Access) 用來讀取除錯資訊。DIA 是基於 COM 的 API，DbgHelp 則像是一般 WIN32 API 的形式。底下所有內容都是以 DbgHelp 的 API 的方式讀取除錯資訊。

6.3 載入除錯資訊

每一個被除錯的程式行程都對應一個DbgHelp符號處理器，在使用前使用 SymInitialize 初始化。如下，修改前面定義的 OnProcessCreated 函數，添加載入行程模組的除錯資訊。

bool OnProcessCreated(const CREATE_PROCESS_DEBUG_INFO &pi)
{
...
  if (SymInitialize(g_piDbgee.hProcess, NULL, FALSE)) {
    printf("\tSymInitialize ok.\n");
    DWORD64 moduleAddress = SymLoadModule64(g_piDbgee.hProcess, pi.hFile, NULL, NULL, (DWORD64)pi.lpBaseOfImage, 0);
    if (0 != moduleAddress) {
      printf("\tSymLoadModule64 0x%x ok.\n", pi.lpBaseOfImage);
    } else {
      printf("\tSymLoadModule64 failed.\n");
    }
  } else {
    printf("\tSymInitialize failed.\n");
  }
...
}

SymInitialize 第一個參數 hProcess 是 CreateProcess 時儲存的被除錯程式行程的 HANDLE。第三個參數 fInvadeProcess 為 FALSE 時，表示 hProcess 不一定要是一個有效的 HANDLE，只要是能表示一個唯一的數即可。第二個參數 UserSearchPath 為 NULL，表示下面我們會自己以 SymLoadModule64 載入需要的模組除錯資訊。

在 OnProcessCreated 中，SymInitialize 初始化後，即以 SymLoadModule64 載入行程除錯資訊。底下在 OnDllLoaded 中，再各別載入 DLL 模組的除錯資訊。

bool OnDllLoaded(const LOAD_DLL_DEBUG_INFO &pi)
{
...
  DWORD64 moduleAddress = SymLoadModule64(g_piDbgee.hProcess, pi.hFile, NULL, NULL, (DWORD64)pi.lpBaseOfDll, 0);
  if (0 != moduleAddress) {
    printf("\tSymLoadModule64 0x%0x ok.\n", pi.lpBaseOfDll);
  } else {
    printf("\tSymLoadModule64 failed.\n");
  }
...
}

7. 顯示中斷點原始碼

7.1 以中斷點位址取得原始碼檔名及行號

在 OnException 中，如果異常是一個軟體中斷點 (EXCEPTION_BREAKPOINT) 或是單步執行中斷 (EXCEPTION_SINGLE_STEP)，則我們就嘗試以中斷點位址取得對應的原始碼檔名及行號。這樣每次程式中斷時，就能把中斷位置的程式碼顯示出來。

以中斷點位址取得原始碼檔名及行號是透過 SymGetLineFromAddr64 這個 API 作到。第一個參數是被除錯程式的行程 HANDLE，第二個參數是中斷點位址。第三個參數是徧移量，如果成功取得指定位址的原始碼檔名及行號，此欄位回傳此行程式碼從指定位址開始共佔多少 BYTE 指令。第四個參數是 IMAGEHLP_LINE64 結構，用來接收 API 回傳的資訊。

如果呼叫失敗，以 GetLastError 的回傳值用來判斷失敗原因。如果 GetLastError 回傳 126，表示目前模組的除錯資訊並沒有載入。如果 GetLastError 回傳 487，表示找不到指定的除錯資訊。

bool OnException(const EXCEPTION_DEBUG_INFO &pi)
{
...
  if (EXCEPTION_BREAKPOINT == pi.ExceptionRecord.ExceptionCode || EXCEPTION_SINGLE_STEP == pi.ExceptionRecord.ExceptionCode) {
    IMAGEHLP_LINE64 lineInfo = { 0 };
    lineInfo.SizeOfStruct = sizeof(lineInfo);
    DWORD displacement = 0;
    if (SymGetLineFromAddr64(g_piDbgee.hProcess, (DWORD64)pi.ExceptionRecord.ExceptionAddress, &displacement, &lineInfo)) {
      printf(" at %s:%d\n", lineInfo.FileName, lineInfo.LineNumber);
    } else {
      DWORD ec = GetLastError();
      switch (ec) {
        case 126:
          printf("Debug info in current module has not loaded.\n");
          break;
        case 487:
          printf("No debug info in current module.\n");
          break;
        default:
          printf("SymGetLineFromAddr64 failed. LastError: %d\n", ec);
          break;
      }
    }
  }
...
}

7.2 顯示中斷點前後幾行程式碼

有了上一節以中斷點位址取得原始碼檔名及行號的資訊，就能夠把中斷點前後幾行的程式碼都顯示出來，增加除錯的便利性。每一行程式碼除了顯示原始碼文字外，再加上行號以及位址，便於後續要切換軟體中斷點之用。

EXCEPTION_DEBUG_EVENT. Code: 0x80000003, Addr: 0x443d7c (First chance)
        EXCEPTION_BREAKPOINT.
0x443d4d   7   return c;
0x443d50   8 }
0x443d50   9
0x443d50  10 int main()
0x443d60  11 {
0x443d64  12     printf("Hello world!\n");
0x443d71  13     OutputDebugStringA("hello world!");
0x443d7c  14     __debugbreak();
0x443d7d *15     int sum = add(2, 3);
0x443d8c  16     printf("%d\n", sum);
0x443d9d  17     return 0;
0x443d9f  18 }
>

8. 顯示暫存器狀態

8.1 取得並顯示暫存器狀態

取得目前執行緒的暫存器的狀態是使用 GetThreadContext 這個 API，傳入的執行緒 HANDLE 是 CreateProcess 時儲存下來的。在使用 GetThreadContext 函數獲取執行緒的暫存器狀態時，請注意該執行緒必須處於暫停狀態 (例如被除錯器中斷)。若執行緒處於執行狀態，則無法獲取其暫存器狀態。為了正確使用此函數，需先確保執行緒已經停止執行。

GetThreadContext 傳入的參數除了指定要讀取暫存器狀態的執行緒 HANDLE，第二個參數 CONTEXT 的 ContextFlags 欄位必須事先指定要讀取的暫存器類型。根據 winnt.h 的註釋內容，ContextFlags 有如下幾種定義在 WinNT.h 中的旗標。

CONTEXT_FULL 所有暫存器。
CONTEXT_CONTROL SegSs, Rsp, SegCs, Rip, and EFlags。
CONTEXT_INTEGER Rax, Rcx, Rdx, Rbx, Rbp, Rsi, Rdi, and R8-R15。
CONTEXT_SEGMENTS SegDs, SegEs, SegFs, and SegGs。
CONTEXT_DEBUG_REGISTERS Dr0-Dr3 and Dr6-Dr7。
CONTEXT_MMX_REGISTERS Mm0/St0-Mm7/St7 and Xmm0-Xmm15。

DumpRegisters 實作如下。

void DumpRegisters()
{
  CONTEXT ctx;
  ctx.ContextFlags = CONTEXT_INTEGER | CONTEXT_CONTROL;
  GetThreadContext(g_piDbgee.hThread, &ctx);
  printf("EAX = 0x%08x, EBX = 0x%08x, ECX = 0x%08x, EDX = 0x%08x, ESI = 0x%08x, EDI = 0x%08x\n", ctx.Eax, ctx.Ebx, ctx.Ecx, ctx.Edx, ctx.Esi, ctx.Edi);
  printf("EIP = 0x%08x, EBP = 0x%08x, ESP = 0x%08x, EFlags = 0x%08x\n", ctx.Eip, ctx.Ebp, ctx.Esp, ctx.EFlags);
}

8.2 修改 HandleUserCommand 支援 Dump Registers

把 DumpRegisters 添加入 HandleUserCommand，修改如下。

void HandleUserCommand()
{
...
    case 'r': case 'R':
      DumpRegisters();
      break;
...
}

根據顯示的中斷點的原始程式碼，再配合顯示目前暫存器狀態，已經可以讓我們觀察中斷時的程式狀態。底下是一個測試的結果。

EXCEPTION_DEBUG_EVENT. Code: 0x80000003, Addr: 0x443d7c (First chance)
        EXCEPTION_BREAKPOINT.
0x443d4d   7   return c;
0x443d50   8 }
0x443d50   9
0x443d50  10 int main()
0x443d60  11 {
0x443d64  12     printf("Hello world!\n");
0x443d71  13     OutputDebugStringA("hello world!");
0x443d7c  14     __debugbreak();
0x443d7d *15     int sum = add(2, 3);
0x443d8c  16     printf("%d\n", sum);
0x443d9d  17     return 0;
0x443d9f  18 }
>r
EAX = 0x00000000, EBX = 0x00223000, ECX = 0xe4b5bfcd, EDX = 0x00000000, ESI = 0x004012c0, EDI = 0x004012c0
EIP = 0x00443d7d, EBP = 0x0019ff08, ESP = 0x0019ff04, EFlags = 0x00000246
>

9. Step Into

9.1 Step Into 原理

Source Level Debugger 必備的三大程式追蹤功能中，Step Into 是最簡單的。實作 Step Into 並不需要擁有軟體中斷的功能，只需要用到目前為止我們所知道的知識及己實作的功能就夠了。

Step Info 就是從目前的原始程式碼行號執行到下一行號，如果目前這一行的程式碼是一個函式呼叫，則執行進入此函式內部。簡單講就是直接執行，直到目前的原始碼檔名或行號不同為止。

整理如下。

把目前的原始碼檔名及行號記錄下來。
開啟 CPU 單步執行旗標。
繼續執行。
觸發單步執行中斷 (EXCEPTION_SINGLE_STEP) 時，檢查目前原始碼檔名及行號是否和 1 不同。若是則結束 Step Into，等待使用者下一個指令，否則到 2。

因為每次單步執行中斷後，CPU 會自己清除單步執行旗標，所以才會每次跳到 2 再重開旗標，之後再繼續執行 Step Into 流程。

void StepInto()
{
  SaveCurrSourceLine();
  SetCpuSingleStepFlag();
  Continue();
  g_dbgState = DBGS_STEP_INTO;
}

新增一個除錯器狀態 DBGS_STEP_INTO。

enum DEBUGGER_STATE {
  DBGS_NONE = 0,
  DBGS_BREAK,
  DBGS_STEP_INTO,
  ...
};

9.2 在 OnException 中處理 Step Into 單步執行

修改在 OnException 裡關於 EXCEPTION_SINGLE_STEP 的中斷情況。

bool OnException(const EXCEPTION_DEBUG_INFO &pi)
{
  if (EXCEPTION_SINGLE_STEP == pi.ExceptionRecord.ExceptionCode && DBGS_STEP_INTO == g_dbgState && HandleStepIntoSingleStep()) {
    return true;
  }
...
}

HandleStepIntoSingleStep 實作也很簡單。如果目前的原始碼檔名或行號沒變化，就再作一次 Step Into。持續這個動作，直到目前的原始碼檔名或行號變化為止。

bool HandleStepIntoSingleStep()
{
  std::string fn;
  int LineNumber = 0;
  if (!IsCurrSourceLineChanged(fn, LineNumber)) {
    StepInto();
    return true;
  }
  return false;
}

9.3 修改 HandleUserCommand 支援 Step Into

最後修改 HandleUserCommand，加入 Step Into 指令的支援。

void HandleUserCommand()
{
...
    case 't': case 'T':
      StepInto();
      break;
...
}

測試結果如下。

EXCEPTION_DEBUG_EVENT. Code: 0x80000003, Addr: 0x443d7c (First chance)
        EXCEPTION_BREAKPOINT. at d:\vs.net\testc2\main.cpp:15
0x443d4d   7   return c;
0x443d50   8 }
0x443d50   9
0x443d50  10 int main()
0x443d60  11 {
0x443d64  12     printf("Hello world!\n");
0x443d71  13     OutputDebugStringA("hello world!");
0x443d7c  14     __debugbreak();
0x443d7d *15     int sum = add(2, 3);
0x443d8c  16     printf("%d\n", sum);
0x443d9d  17     return 0;
0x443d9f  18 }
>t
No debug info in current module.
EXCEPTION_DEBUG_EVENT. Code: 0x80000004, Addr: 0x443d40 (First chance)
        EXCEPTION_SINGLE_STEP. at d:\vs.net\testc2\main.cpp:5
0x443d40   1 #include <stdio.h>
0x443d40   2 #include <windows.h>
0x443d40   3
0x443d40   4 int add(int a, int b)
0x443d40 * 5 {
0x443d44   6   int c = a + b;
0x443d4d   7   return c;
0x443d50   8 }
0x443d50   9
0x443d50  10 int main()
0x443d60  11 {
0x443d64  12     printf("Hello world!\n");
>

10. 顯示記憶體內容

10.1 Dump Memory

顯示記憶體內容是將使用 ReadProcessMemeory 讀取到的被除錯程式的記錄體內容呈現出來，協助除錯程式。

void DumpMemory(unsigned int addr, unsigned int count)
{
  // 略
}

10.2 修改 HandleUserCommand 支援 Dump Memory

修改 HandleUserCommand，加入 Dump Memory 指令的支援。

void HandleUserCommand()
{
...
    case 'd': case 'D':                 // Dump memory.
      {
        unsigned int addr = 0, count = 128;
        sscanf(str.c_str() + 1, "%x %d", &addr, &count);
        DumpMemory(addr, count);
      }
      break;
...
}

測試結果如下。

>d 400000
00400000  4D 5A 90 00 03 00 00 00-04 00 00 00 FF FF 00 00  MZ..............
00400010  B8 00 00 00 00 00 00 00-40 00 00 00 00 00 00 00  ........@.......
00400020  00 00 00 00 00 00 00 00-00 00 00 00 00 00 00 00  ................
00400030  00 00 00 00 00 00 00 00-00 00 00 00 D8 00 00 00  ................
00400040  0E 1F BA 0E 00 B4 09 CD-21 B8 01 4C CD 21 54 68  ........!..L.!Th
00400050  69 73 20 70 72 6F 67 72-61 6D 20 63 61 6E 6E 6F  is program canno
00400060  74 20 62 65 20 72 75 6E-20 69 6E 20 44 4F 53 20  t be run in DOS
00400070  6D 6F 64 65 2E 0D 0D 0A-24 00 00 00 00 00 00 00  mode....$.......

11. 設置軟體中斷

11.1 新增軟體中斷

底下定義一個軟體中斷結構，以及用來儲存所有軟體中斷的列表。

struct BREAK_POINT
{
  std::string fn;
  int LineNumber;                       // 1-based.
  DWORD64 address;
  unsigned char saveCode;
};

std::vector<BREAK_POINT> g_bp;          // Save all break points.

前面在講測試程式時提到在程式裡呼叫 __debugbreak，也就是插入一個 0xcc，也就是插入一個軟體中斷 int 3。新增一個軟體中斷就是動態在一個指定原始碼檔案及行號的位置 (位址) 填入一個 0xcc。問題是如果直接在指定位址填入一個 0xcc 把原來的那個 BYTE 蓋掉，那麼當程式中斷下來執行完這條 0xcc 指令之後再繼續執行時，就有可能造成後續的程式全都產生嚴重錯誤。因為原來被蓋掉的那個 BYTE 也是一個需要被執行的指令或較長指令的一部份，少執行了這個 BYTE 就會發生問題。所以在寫入 0xcc 之前，要先把原來的那個 BYTE 存起來，以備後續恢復執行。

新增一個軟體中斷是以指定的原始碼檔名加行號，內部透過 SymGetLineFromName64 取得此原始碼檔名加行號的位址，並從此位址把原指令 BYTE 備份起來後再寫入一個 0xcc 去替換原指令 BYTE，即完成一個軟體中斷的設置。

bool AddBreakPoint(const std::string &fn, int LineNumber)
{
  LONG displacement;
  IMAGEHLP_LINE64 li = { 0 };
  li.SizeOfStruct = sizeof(li);
  if (SymGetLineFromName64(g_piDbgee.hProcess, NULL, (PSTR)fn.c_str(), LineNumber, &displacement, &li)) {
    BREAK_POINT bp;
    bp.fn = fn;
    bp.LineNumber = LineNumber;
    bp.address = li.Address;
    ReadProcessMemory(g_piDbgee.hProcess, (LPVOID)li.Address, &bp.saveCode, 1, NULL);
    g_bp.push_back(bp);
    unsigned char cc = 0xcc;
    WriteProcessMemory(g_piDbgee.hProcess, (LPVOID)li.Address, &cc, 1, NULL); // Write 0xcc to bp address.
    printf("Add breakpoint at %s:%d(%x)\n", fn.c_str(), LineNumber, (unsigned int)li.Address);
    return true;
  }
  return false;
}

11.2 移除軟體中斷

移除一個軟體中斷的動作只需和新增的動作相反，而且更簡單，只要把事先記錄的指令 BYTE 寫回原來的位址，再把此軟體中斷的記錄清除即可。

bool RemoveBreakPoint(const std::string &fn, int LineNumber)
{
  for (size_t i = 0; i < g_bp.size(); i++) {
    const BREAK_POINT &bp = g_bp[i];
    if (bp.LineNumber == LineNumber && bp.fn == fn) {
      WriteProcessMemory(g_piDbgee.hProcess, (LPVOID)bp.address, &bp.saveCode, 1, NULL); // Write back saved OP code.
      printf("Remove breakpoint at %s:%d(%x)\n", fn.c_str(), LineNumber, (unsigned int)bp.address);
      g_bp.erase(g_bp.begin() + i);
      return true;
    }
  }
 return false;
}

11.3 EXCEPTION_BREAKPOINT 中斷處理

軟體中斷 (int 3) 的處理分為兩部份。一、當 OnException 以 EXCEPTION_BREAKPOINT 中斷時的處理，二、當 OnException 以 EXCEPTION_SINGLE_STEP 中斷時的處理。

當 OnException 以 EXCEPTION_BREAKPOINT 中斷時，表示 CPU 執行到一個 0xcc，也就是 int 3 指令。我們要先判斷這個軟體中斷是我們動態以上面的 AddBreakPoint 加入的，還是使用者在程式裡以 __debugbreak 或 __asm {int 3} 內嵌等方式插入的。如果是後者，我們就不作特別處理。如果是前者，也就是這個中斷是我們動態加入的，就必需要作額外的處理。

整理如下。

首先要把事先記錄的指令 BYTE 寫回原位址。
IP 要減 1。因為 CPU 執行了 0xcc 這條指令後 IP 就自動加 1 了，若要再執行 1 所寫回的原始指令 BYTE，IP 要退回。
設定 CPU 單步執行旗標。這樣，下次單步執行中斷後，我們才有機會作第二部份的處理。
繼續執行。

bool HandleSoftBreak(const BREAK_POINT* bp)
{
  WriteProcessMemory(g_piDbgee.hProcess, (LPVOID)bp->address, &bp->saveCode, 1, NULL);
  SetCurrIp(GetCurrIp() - 1);
  SetCpuSingleStepFlag();

  return true;
}

SetCurrIp 的實作如下。

void SetCurrIp(DWORD64 ip)
{
  CONTEXT ctx;
  ctx.ContextFlags = CONTEXT_CONTROL;
  GetThreadContext(g_piDbgee.hThread, &ctx);
  ctx.Eip = ip;
  SetThreadContext(g_piDbgee.hThread, &ctx);
}

11.4 EXCEPTION_SINGLE_STEP 中斷處理

單步執行中斷時，我們一樣要先判斷目前是否是上一步驟處理我們動態加入的軟體中斷後所觸發的單步執行，或者是因為 Step Into 或其它情況觸發的單步執行中斷。如果是後者，則不作額外的處理。如果是前者，也就是這個中斷是我們動態加入的，就必需要作額外的處理。

處理其實很簡單，就是再把 0xcc 寫到軟體中斷位址。因為在上一步驟，事先記錄的指令 BYTE 的寫回去後已經執行過了。再把 0xcc 寫到軟體中斷位址一次，這樣當下次程式再執行到這此處時，才可以再中斷一次。

bool HandleSoftBreakSingleStep(const BREAK_POINT* bp)
{
  unsigned char cc = 0xcc;
  WriteProcessMemory(g_piDbgee.hProcess, (LPVOID)bp->address, &cc, 1, NULL);
  return true;
}

11.5 修改 OnException 支援軟體中斷

bool OnException(const EXCEPTION_DEBUG_INFO &pi)
{
...
  if (EXCEPTION_BREAKPOINT == pi.ExceptionRecord.ExceptionCode || EXCEPTION_SINGLE_STEP == pi.ExceptionRecord.ExceptionCode) {
    if (EXCEPTION_BREAKPOINT == pi.ExceptionRecord.ExceptionCode) {
      printf("\tEXCEPTION_BREAKPOINT. ");
      const BREAK_POINT *bp = FindBreakPoint((DWORD64)pi.ExceptionRecord.ExceptionAddress);
      if (bp && HandleSoftBreak(bp)) {
        return OnBreakPoint();
      }
    } else {
      printf("\tEXCEPTION_SINGLE_STEP. ");
      const BREAK_POINT *bp = FindBreakPoint((DWORD64)pi.ExceptionRecord.ExceptionAddress);
      if (bp) {
        HandleSoftBreakSingleStep(bp);
      }
    }
    return OnBreakPoint();
  }
...
}

OnBreakPoint 是把顯示原始碼等操作的一個重整包裝。

bool OnBreakPoint()
{
  std::string fn;
  int LineNumber = 0;
  DWORD displacement = 0;
  if (GetSourceLineByAddr(GetCurrIp(), fn, LineNumber, displacement)) {
    printf("at %s:%d\n", fn.c_str(), LineNumber);
    DisplaySourceLines(fn, LineNumber);
    g_dbgState = DBGS_BREAK;
    return false;
  }
  return true;
}

11.6 修改 HandleUserCommand 支援軟體中斷

修改 HandleUserCommand，加入切換軟體中斷的支援。

void HandleUserCommand()
{
...
    case 'b': case 'B':                 // Toggle break point.
      {
        char fn[MAX_PATH];
        int lineno = -1;
        if (3 == sscanf(str.c_str(), "%1s %99s %d", key, fn, &addr)) {
          ToggleBreakPoint(fn, addr);
        } else if (2 == sscanf(str.c_str(), "%1s %x", key, &addr)) {
          ToggleBreakPoint(addr);
        } else if (2 == sscanf(str.c_str(), "%1s %99s", key, fn)) {
          ToggleBreakPoint(fn);
        }
      }
      break;
...
}

這裡支援三種方式設置軟體中斷。一、以原始碼檔名及行號，二、以指定位址，三、以函數名稱。另外使用 ToggleBreakPoint 的方式切換軟體中斷設置，如果指定位置沒有設置軟體中斷就以 AddBreakPoint 新增一個，否則就以 RemoveBreakPoint 移除它。

bool ToggleBreakPoint(const std::string &fn, int LineNumber)
{
  if (FindBreakPoint(fn, LineNumber)) {
    return RemoveBreakPoint(fn, LineNumber);
  } else {
    return AddBreakPoint(fn, LineNumber);
  }
}

底下為測試結果。

EXCEPTION_DEBUG_EVENT. Code: 0x80000003, Addr: 0x443d60 (First chance)
        EXCEPTION_BREAKPOINT. at d:\vs.net\testc2\main.cpp:11
0x443d40   3
0x443d40   4 int add(int a, int b)
0x443d40   5 {
0x443d44   6   int c = a + b;
0x443d4d   7   return c;
0x443d50   8 }
0x443d50   9
0x443d50  10 int main()
0x443d60 *11 {
0x443d64  12   printf("Hello world!\n");
0x443d71  13   OutputDebugStringA("hello world!");
0x443d7c  14   int sum = add(2, 3);
0x443d8b  15   printf("%d\n", sum);
0x443d9c  16   return 0;
0x443d9e  17 }
>b 443d7c
Add breakpoint at d:\vs.net\testc2\main.cpp:14(443d7c)
>g
EXCEPTION_DEBUG_EVENT. Code: 0x406d1388, Addr: 0x76f99e14 (First chance)
OUTPUT_DEBUG_STRING_EVENT: 'hello world!'
EXCEPTION_DEBUG_EVENT. Code: 0x80000003, Addr: 0x443d7c (First chance)
        EXCEPTION_BREAKPOINT. at d:\vs.net\testc2\main.cpp:14
0x443d44   6   int c = a + b;
0x443d4d   7   return c;
0x443d50   8 }
0x443d50   9
0x443d50  10 int main()
0x443d60  11 {
0x443d64  12   printf("Hello world!\n");
0x443d71  13   OutputDebugStringA("hello world!");
0x443d7c *14   int sum = add(2, 3);
0x443d8b  15   printf("%d\n", sum);
0x443d9c  16   return 0;
0x443d9e  17 }
>b 443d7c
Remove breakpoint at d:\vs.net\testc2\main.cpp:14(443d7c)
>

12. 程式啟動時在 main 中斷

12.1 程式啟動時在 main 中斷

現在我們已經實作了可以隨時切換軟體中斷的功能，因此測試程式裡的 __debugbreak 可以移除了。

但是現在又有個問題。如果把測試程式裡的 __debugbreak 拿掉後，程式一開始執行就會停不下來，直到程式結束。所以這裡要作個小修改，讓被除錯程式啟動時，自動斷在進入點 main。這樣我們就有機會在這個時候設置其它中斷點。

在 Windows 之下的程式的進入點總共有四種名稱，分別是：

main
wmain
WinMain
wWinMain

ToggleBreakPointAtEntryPoint 以 SymFromName 一個一個檢查是否能找到符號，若是則在此符號的位址設置一個軟體中斷。

bool ToggleBreakPointAtEntryPoint()
{
  static const char* names[] = {"main", "wmain", "WinMain", "wWinMain"};
  SYMBOL_INFO sym = {0};
  sym.SizeOfStruct = sizeof(sym);
  for (size_t i = 0; i < sizeof(names)/sizeof(names[0]); i++) {
    if (SymFromName(g_piDbgee.hProcess, (LPSTR)names[i], &sym)) {
      return ToggleBreakPoint(sym.Address);
    }
  }
  return false;
}

12.2 修改 OnProcessCreate 在程式進入點插入中斷

bool OnProcessCreated(const CREATE_PROCESS_DEBUG_INFO &pi)
{
...
  if (SymInitialize(g_piDbgee.hProcess, NULL, FALSE)) {
    ...
    ToggleBreakPointAtEntryPoint();
    ...
  }
...
}

底下是執行結果。

CREATE_PROCESS_DEBUG_EVENT
        SymInitialize ok.
        SymLoadModule64 0x400000 ok.
Add breakpoint at d:\vs.net\testc2\main.cpp:11(443d60)
LOAD_DLL_DEBUG_EVENT
        SymLoadModule64 0x77a00000 ok.
LOAD_DLL_DEBUG_EVENT
        SymLoadModule64 0x767d0000 ok.
LOAD_DLL_DEBUG_EVENT
        SymLoadModule64 0x76e40000 ok.
EXCEPTION_DEBUG_EVENT. Code: 0x80000003, Addr: 0x77b157f8 (First chance)
        EXCEPTION_BREAKPOINT. No debug info in current module.
EXCEPTION_DEBUG_EVENT. Code: 0x80000003, Addr: 0x443d60 (First chance)
        EXCEPTION_BREAKPOINT. at d:\vs.net\testc2\main.cpp:11
0x443d40   3
0x443d40   4 int add(int a, int b)
0x443d40   5 {
0x443d44   6   int c = a + b;
0x443d4d   7   return c;
0x443d50   8 }
0x443d50   9
0x443d50  10 int main()
0x443d60 *11 {
0x443d64  12     printf("Hello world!\n");
0x443d71  13     OutputDebugStringA("hello world!");
0x443d7c  14     int sum = add(2, 3);
0x443d8b  15     printf("%d\n", sum);
0x443d9c  16     return 0;
0x443d9e  17 }
>

13. Step Out

13.1 Step Out 原理

Step Out 可以結合軟體中斷和 Step Into 作出來。

原理如下。

以當前 IP 找到目前所在 FUNCTION。
設置一個暫時的軟體中斷在 FUNCTION 尾巴，也就是 RET 指令的位置。
繼續執行。
觸發 EXCEPTION_BREAKPOINT 中斷時，照原來的方式處理。
移除暫時的軟體中斷。
作一次 Step Into，執行到下一行。

實作如下。

bool StepOut()
{
  SYMBOL_INFO si = {0};
  si.SizeOfStruct = sizeof(si);

  DWORD64 displacement = 0;
  if (!SymFromAddr(g_piDbgee.hProcess, GetCurrIp(), &displacement, &si)) {
    printf("StepOut: SymFromAddr failed. LastError %d\n", GetLastError());
    return false;
  }

  g_tmpBpAddr = si.Address + si.Size - 1;
  if (!AddTempBreakPoint(g_tmpBpAddr)) {
    return false;
  }

  Go();
  g_dbgState = DBGS_STEP_OUT;

  return true;
}

注意這裡用一個變數 g_tmpBpAddr，把暫時的軟體中斷位址記錄下來，以便觸發暫時的軟體中斷並處理完畢後，再把它移除。

13.2 修改 OnException 支援 Step Out

如下修改，在開頭檢查是否是 DBGS_STEP_OUT 狀態，若是則以 HandleStepOut 處理。

bool OnException(const EXCEPTION_DEBUG_INFO &pi)
{
...
  if (EXCEPTION_BREAKPOINT == pi.ExceptionRecord.ExceptionCode) {
    const BREAK_POINT *bp = FindBreakPoint((DWORD64)pi.ExceptionRecord.ExceptionAddress);
    if (DBGS_STEP_OUT == g_dbgState && HandleStepOutBreak(bp)) {
      return true;
    }
  }
...
}

HandleStepOutBreak 的前半部如軟體中斷的處理相同，完成後再把暫時的軟體中斷移除，並作一次 Step Into。實作如下。

bool HandleStepOutBreak(const BREAK_POINT *bp)
{
  if (bp && HandleSoftBreak(bp)) {
    RemoveTempBreakPoint(g_tmpBpAddr);
    StepInto();
    return true;
  }
  return false;
}

13.3 修改 HandleUserCommand 支援 Step Out

修改 HandleUserCommand，加入 Step Out 指令的支援。

void HandleUserCommand()
{
...
    case 'o': case 'O':
      StepOut();
      break;
...
}

測試結果如下。

>t
EXCEPTION_DEBUG_EVENT. Code: 0x80000004, Addr: 0x443d64 (First chance)
        EXCEPTION_SINGLE_STEP. at d:\vs.net\testc2\main.cpp:12
0x443d40   4 int add(int a, int b)
0x443d40   5 {
0x443d44   6   int c = a + b;
0x443d4d   7   return c;
0x443d50   8 }
0x443d50   9
0x443d50  10 int main()
0x443d60  11 {
0x443d64 *12     printf("Hello world!\n");
0x443d71  13     OutputDebugStringA("hello world!");
0x443d7c  14     int sum = add(2, 3);
0x443d8b  15     printf("%d\n", sum);
0x443d9c  16     return 0;
0x443d9e  17 }
>t
EXCEPTION_DEBUG_EVENT. Code: 0x80000004, Addr: 0x401040 (First chance)
        EXCEPTION_SINGLE_STEP. at f:\rtm\vctools\crt_bld\self_x86\crt\src\printf.c:49
>o
EXCEPTION_DEBUG_EVENT. Code: 0x406d1388, Addr: 0x76f99e14 (First chance)
EXCEPTION_DEBUG_EVENT. Code: 0x80000004, Addr: 0x443d6e (First chance)
        EXCEPTION_SINGLE_STEP. at d:\vs.net\testc2\main.cpp:12
0x443d40   4 int add(int a, int b)
0x443d40   5 {
0x443d44   6   int c = a + b;
0x443d4d   7   return c;
0x443d50   8 }
0x443d50   9
0x443d50  10 int main()
0x443d60  11 {
0x443d64 *12     printf("Hello world!\n");
0x443d71  13     OutputDebugStringA("hello world!");
0x443d7c  14     int sum = add(2, 3);
0x443d8b  15     printf("%d\n", sum);
0x443d9c  16     return 0;
0x443d9e  17 }
>

14. Step Over

14.1 Step Over 原理

Step Over 一次執行一行程式碼，和 Step Into 很像，只在遇到一個函式呼叫時的處理不同。Step Into 遇到一個函式呼叫時進入函式執行，Step Over 遇到函式時不會進入執行，而是把函式當成一條語句執行過去，不管這一行的程式碼有多少個函式呼叫。這也是 Step Over 會比 Step Into 及 Step Out 稍微複雜的原因。

以下是 Step Over 的原理。

把目前的原始碼檔名及行號記錄下來。
如果當前指令是一個函式呼叫，則在函式呼叫指令的最後插入一個暫時的軟體中斷，跳到 4。
設定 CPU 單步執行旗標。
繼續執行。
觸發 EXCEPTION_BREAKPOINT 中斷時，照原來的方式處理。移除暫時的軟體中斷。
觸發單步執行中斷 (EXCEPTION_SINGLE_STEP) 時，檢查目前原始碼檔名及行號是否和1不同。若是則結束 Step Over，等待使用者下一個指令。否則到 2。

void StepOver()
{
  SaveCurrSourceLine();
  DoStepOver();
}

DoStepOver 實作如下。

void DoStepOver()
{
  int Length = 0;                       // Length of the call instructions.
  if (IsCallInstruction(GetCurrIp(), Length)) {
    g_tmpBpAddr = GetCurrIp() + Length;
    AddTempBreakPoint(g_tmpBpAddr);
  } else {
    SetCpuSingleStepFlag();
  }

  Continue();
  g_dbgState = DBGS_STEP_OVER;
}

此處新增一個除錯器狀態 DBGS_STEP_OVER。

enum DEBUGGER_STATE {
  ...
  DBGS_STEP_OUT,
  DBGS_STEP_OVER,
  ...
};

14.2 檢查 CALL 指令

檢查指令是否為一個函式呼叫，就是在檢查是否為一個 CALL 指令。CALL 指令有很多種形式，我們把所有可能的呼叫形式都找出來建表。用笨方法只要一個一個比對檢查，就能判斷當前指令是否為一個函式呼叫。

bool IsCallInstruction(DWORD64 addr, int &Length)
{
  static const unsigned char CALL_INST[] = {
    0x9A, 0x00, 7,  // CALL FAR seg16:abs32
    0xE8, 0x00, 5,  // CALL rel32
    0xFF, 0x10, 2,  // CALL dword ptr [EAX]
    0xFF, 0x11, 2,  // CALL dword ptr [ECX]
    0xFF, 0x12, 2,  // CALL dword ptr [EDX]
    0xFF, 0x13, 2,  // CALL dword ptr [EBX]
    0xFF, 0x14, 3,  // CALL dword ptr [REG * SCALE + BASE]
    0xFF, 0x15, 6,  // CALL dword ptr [abs32]
    0xFF, 0x16, 2,  // CALL dword ptr [ESI]
    0xFF, 0x17, 2,  // CALL dword ptr [EDI]
    0xFF, 0x50, 3,  // CALL dword ptr [EAX + off8]
    0xFF, 0x51, 3,  // CALL dword ptr [ECX + off8]
    0xFF, 0x52, 3,  // CALL dword ptr [EDX + off8]
    0xFF, 0x53, 3,  // CALL dword ptr [EBX + off8]
    0xFF, 0x54, 4,  // CALL dword ptr [REG * SCALE + BASE + off8]
    0xFF, 0x55, 3,  // CALL dword ptr [EBP + off8]
    0xFF, 0x56, 3,  // CALL dword ptr [ESI + off8]
    0xFF, 0x57, 3,  // CALL dword ptr [EDI + off8]
    0xFF, 0x90, 6,  // CALL dword ptr [EAX + off32]
    0xFF, 0x91, 6,  // CALL dword ptr [ECX + off32]
    0xFF, 0x92, 6,  // CALL dword ptr [EDX + off32]
    0xFF, 0x93, 6,  // CALL dword ptr [EBX + off32]
    0xFF, 0x94, 7,  // CALL dword ptr [REG * SCALE + BASE + off32]
    0xFF, 0x95, 6,  // CALL dword ptr [EBP + off32]
    0xFF, 0x96, 6,  // CALL dword ptr [ESI + off32]
    0xFF, 0x97, 6,  // CALL dword ptr [EDI + off32]
    0xFF, 0xD0, 2,  // CALL EAX
    0xFF, 0xD1, 2,  // CALL ECX
    0xFF, 0xD2, 2,  // CALL EDX
    0xFF, 0xD3, 2,  // CALL EBX
    0xFF, 0xD4, 2,  // CALL ESP
    0xFF, 0xD5, 2,  // CALL EBP
    0xFF, 0xD6, 2,  // CALL ESI
    0xFF, 0xD7, 2   // CALL EDI
  };

  unsigned char code[2];
  ReadProcessMemory(g_piDbgee.hProcess, (LPVOID)addr, code, 2, NULL);

  for (int i = 0; i < sizeof(CALL_INST) / 3; i++) {
    unsigned char OP1 = CALL_INST[3 * i + 0];
    unsigned char OP2 = CALL_INST[3 * i + 1];
    if (OP1 == code[0] && (0 == OP2 || OP2 == code[1])) {
      Length = CALL_INST[3 * i + 2];
      return true;
    }
  }

  return false;
}

14.3 修改 OnException 支援 Step Over

Step Over 有用到暫時的軟體中斷及以單步執行中斷，所以必須針對兩種不同中斷處理。

bool OnException(const EXCEPTION_DEBUG_INFO &pi)
{
  if (EXCEPTION_SINGLE_STEP == pi.ExceptionRecord.ExceptionCode) {
    if (DBGS_STEP_OVER == g_dbgState && HandleStepOverSingleStep()) {
      return true;
    }
  }
  if (EXCEPTION_BREAKPOINT == pi.ExceptionRecord.ExceptionCode) {
    const BREAK_POINT *bp = FindBreakPoint((DWORD64)pi.ExceptionRecord.ExceptionAddress);
    ...
    if (DBGS_STEP_OVER == g_dbgState && HandleStepOverBreak(bp)) {
      return true;
    }
  }
...
}

單步中斷的處理如下。

bool HandleStepOverSingleStep()
{
  std::string fn;
  int LineNumber = 0;
  if (!IsCurrSourceLineChanged(fn, LineNumber)) {
    DoStepOver();
    return true;                        // Return true to continue.
  }

  return false;
}

軟體中斷的處理如下。

bool HandleStepOverBreak(const BREAK_POINT *bp)
{
  if (bp && HandleSoftBreak(bp)) {
    RemoveTempBreakPoint(g_tmpBpAddr);
    return HandleStepOverSingleStep();
  }
  return false;
}

14.4 修改 HandleUserCommand 支援 Step Over

最後修改 HandleUserCommand，加入 Step Over 指令的支援。

void HandleUserCommand()
{
...
    case 'p': case 'P':
      StepOver();
      break;
...
}

底下為測試結果。

EXCEPTION_DEBUG_EVENT. Code: 0x80000004, Addr: 0x443d64 (First chance)
        EXCEPTION_SINGLE_STEP. at d:\vs.net\testc2\main.cpp:12
0x443d40   4 int add(int a, int b)
0x443d40   5 {
0x443d44   6   int c = a + b;
0x443d4d   7   return c;
0x443d50   8 }
0x443d50   9
0x443d50  10 int main()
0x443d60  11 {
0x443d64 *12   printf("Hello world!\n");
0x443d71  13   OutputDebugStringA("hello world!");
0x443d7c  14   int sum = add(2, 3);
0x443d8b  15   printf("%d\n", sum);
0x443d9c  16   return 0;
0x443d9e  17 }
>p
EXCEPTION_DEBUG_EVENT. Code: 0x406d1388, Addr: 0x76f99e14 (First chance)
EXCEPTION_DEBUG_EVENT. Code: 0x80000004, Addr: 0x443d71 (First chance)
        EXCEPTION_SINGLE_STEP. at d:\vs.net\testc2\main.cpp:13
0x443d40   5 {
0x443d44   6   int c = a + b;
0x443d4d   7   return c;
0x443d50   8 }
0x443d50   9
0x443d50  10 int main()
0x443d60  11 {
0x443d64  12   printf("Hello world!\n");
0x443d71 *13   OutputDebugStringA("hello world!");
0x443d7c  14   int sum = add(2, 3);
0x443d8b  15   printf("%d\n", sum);
0x443d9c  16   return 0;
0x443d9e  17 }
>

15. Set Next Statement

15.1 Set Next Statement 原理

除了 Step Into、Step Out 及 Step Over 之外，Set Next Statement 也是一個好用的除錯指令。Set Next Statement 的使用方法和設置一個軟體中斷完全一樣，差別在於 Set Next Statement 是直接把程式 IP 強制設定為指定的位址。因此 Set Next Statement 是一個有副作用的指令，因為它直接跳過所有中間過程，直接把 IP 改成指定的位址。所以在使用時你必須知道你自己正在作什麼，因為強制改變 IP，很有可能造成程式狀態錯誤。雖然如此，有時候 Set Next Statement 還是一個有用的指令。因為可以讓你很暴力的改變程式流程，直接跳到你想要的地方繼續執行。

Set Next Statement 的實作排常直接，找到目的位址後，以 SetCurrIp 把 IP 設為此位址即可。最後再把此位址的程式碼檔案行號顯示出來。

bool SetNextStatement(DWORD64 addr)
{
  std::string fn;
  int LineNumber = 0;
  DWORD displacement = 0;
  if (GetSourceLineByAddr(addr, fn, LineNumber, displacement)) {
    return SetNextStatement(fn, LineNumber);
  }
  return false;
}

bool SetNextStatement(const std::string &func)
{
  SYMBOL_INFO sym = {0};
  sym.SizeOfStruct = sizeof(sym);
  if (SymFromName(g_piDbgee.hProcess, (LPSTR)func.c_str(), &sym)) {
    return SetNextStatement(sym.Address);
  }
  return false;
}

bool SetNextStatement(const std::string &fn, int LineNumber)
{
  LONG displacement;
  IMAGEHLP_LINE64 li = { 0 };
  li.SizeOfStruct = sizeof(li);
  if (SymGetLineFromName64(g_piDbgee.hProcess, NULL, (PSTR)fn.c_str(), LineNumber, &displacement, &li)) {
    SetCurrIp(li.Address);
    printf("Set next statement at %s:%d(%x)\n", fn.c_str(), LineNumber, (unsigned int)li.Address);
    DisplaySourceLines(fn, LineNumber);
    return true;
  }
  return false;
}

15.2 修改 HandleUserCommand 支援 Set Next Statement

修改 HandleUserCommand，加入 Set Next Statement 指令的支援。

void HandleUserCommand()
{
...
    case 's': case 'S':                 // Set next statement.
      {
        char key[2];
        char fn[MAX_PATH];
        unsigned int addr;
        if (3 == sscanf(str.c_str(), "%1s %99s %d", key, fn, &addr)) {
          SetNextStatement(fn, addr);
        } else if (2 == sscanf(str.c_str(), "%1s %x", key, &addr)) {
          SetNextStatement(addr);
        } else if (2 == sscanf(str.c_str(), "%1s %99s", key, fn)) {
          SetNextStatement(fn);
        } else {
          printf("invalid s cmd\n");
        }
      }
      break;
...
}

底下是執行結果。

EXCEPTION_DEBUG_EVENT. Code: 0x80000003, Addr: 0x443d60 (First chance)
        EXCEPTION_BREAKPOINT. at d:\vs.net\testc2\main.cpp:11
0x443d40   3
0x443d40   4 int add(int a, int b)
0x443d40   5 {
0x443d44   6   int c = a + b;
0x443d4d   7   return c;
0x443d50   8 }
0x443d50   9
0x443d50  10 int main()
0x443d60 *11 {
0x443d64  12   printf("Hello world!\n");
0x443d71  13   OutputDebugStringA("hello world!");
0x443d7c  14   int sum = add(2, 3);
0x443d8b  15   printf("%d\n", sum);
0x443d9c  16   return 0;
0x443d9e  17 }
>s 443d71
Set next statement at d:\vs.net\testc2\main.cpp:13(443d71)
0x443d40   5 {
0x443d44   6   int c = a + b;
0x443d4d   7   return c;
0x443d50   8 }
0x443d50   9
0x443d50  10 int main()
0x443d60  11 {
0x443d64  12   printf("Hello world!\n");
0x443d71 *13   OutputDebugStringA("hello world!");
0x443d7c  14   int sum = add(2, 3);
0x443d8b  15   printf("%d\n", sum);
0x443d9c  16   return 0;
0x443d9e  17 }
>s d:\vs.net\testc2\main.cpp 5
Set next statement at d:\vs.net\testc2\main.cpp:5(443d40)
0x443d40   1 #include <stdio.h>
0x443d40   2 #include <windows.h>
0x443d40   3
0x443d40   4 int add(int a, int b)
0x443d40 * 5 {
0x443d44   6   int c = a + b;
0x443d4d   7   return c;
0x443d50   8 }
0x443d50   9
0x443d50  10 int main()
0x443d60  11 {
0x443d64  12   printf("Hello world!\n");
>s printf
Set next statement at f:\rtm\vctools\crt_bld\self_x86\crt\src\printf.c:49(401040)
>

16. 顯示函式呼叫堆疊

程式在斷點停下來時，若可以知道程式呼叫函式的執行過程，有時對於除錯過程會很有幫助。

16.1 堆疊

堆疊 (Stack) 是一種先進後出 (First In Last Out) 的資料結構，在組合語言程式裡是用來作為資料暫存、函式的參數傳遞及作為函式區域變數等用途。

主要有二個操作：

PUSH ESP 減少，將資料壓入堆疊。若 ESP 為 0，當資料要寫入位址為 0 的記憶體時，會觸發異常。
POP 將資料從堆疊彈出，ESP 增加。同樣的，若 ESP 為 0，執行 POP 指令會引發錯誤，導致程序異常結束。

底下是個簡單的例子。一開始堆疊為空，接著推入 2，再推入 3。接著彈出 3 至 EAX，再彈出 2 到 EBX。最後堆疊又回到空的狀態。

+---+   初始狀態
|   |

+---+   PUSH 2
| 2 |

+---+   PUSH 3
| 2 |
| 3 |

+---+   POP EAX
| 2 |

+---+   POP EBX
|   |

16.2 函式呼叫的過程

要了解如何解析 Call Stacks，需先了解 C/C++ 的函式呼叫是怎麼作。

底下是一個簡單的 C 語言程式。定義一個簡單的函式 add，以呼叫 add 的語句。

int add(int a, int b) {
  int c = a + b;
  return c;
}

int main() {
  ...
  int sum = add(2, 3);
  ...
}

呼叫 add 的程式碼初編譯成如下組合語言。

push 3
push 2
call _add
add esp, 8

可以看到 3 和 2 這兩個參數初推入堆疊，再以 CALL 指令呼叫 _add。請注意參數是從右往左推入堆疊，所以是先 PUSH 3，再 PUSH 2。函式呼叫完成後，下一條指令給 ESP 加 8，回復回狀。這裡加 8 是假設資料是 32 位元，所以作了兩次 PUSH，共佔 64 位元，也就是 8 個 BYTES。

編譯成組合語言後，函式 add 的樣子大概如下。

_add:
  push ebp
  move ebp, esp
  sub esp, 4
  ...
  mov esp, ebp
  pop ebp
  ret

一開頭先作一個把當前 EBP 推入堆疊儲存起來的動作，因為接下來就要把當前的 ESP 的值賦給 EBP 的動作。為什麼這麼作？因為我們的函式參數及區域變數都放在堆疊裡面，需要靠 EBP 來存取。為什麼不透過 ESP 存取參數及區域變數呢？因為函式執行過程中還是有可能對堆疊作任意操作而改變了 ESP 的值。而 EBP 的值一直到函式呼叫結束都不會再變化了，所以我們可以放心的以 EBP (也就是當初進入函式時的 ESP 的值) 來存取參數及區域變數。

下一條指令作了 ESP 減 4 的動作。這 4 個 BYTES 是保留變區域變數 c 的。

最後一點補充。當以 CALL 指令呼叫 add 時，CPU 會自動把 CALL 指令的下一條指令的位址 push 到堆疊。這樣當 add 執行到最後的 RET 要返回時，CPU 就可以再從堆疊裡把這個返回位址取出，賦給 EIP 後繼續執行。

高位址
+-----+
|  3  | b
|  2  | a
| ret |
| ebp | <--- ebp 
|  c  | <--- esp
低位址

以上的堆疊狀態就是從傳遞參數，到呼叫 add，進入 add 後完成 Stack Frame 的整個初始化後的狀態。

16.3 Stack Frame

上面根據從傳遞參數，到呼叫 add，進入 add 後完成的 Stack Frame，只要透過 EBP 就能存取參數及區域變數。

例如要把參數 a 的值取出賦給 eax。因為參數 a 在 EBP 之上的兩個單位，所以以 EBP 加 8 為索引，即可從堆疊取出參數 a 的值。

mov eax, [ebp + 8]  ; Read a

例如要把區域參數 c 的值取出賦給 EBX。因為區域參數 c 在 EBP 之下的一個單位，所以以 EBP 減 4 為索引，即可從堆疊取出區域參數 c 的值。

mov ebx, [ebp - 4]  ; Read c

16.4 Dump Call Stacks 的原理

根據前面的了解，如果進入呼叫的函式裡後，能夠取得 EBP 的值，就能夠存取到函式的參數及區域變數。同樣的，假如可以取得上一層被呼叫函式的 EBP，也就能存取到上一層被呼叫函式的參數及區域變數。事實上這些都能作到，因為一進入函式，第一條指令作的就是把 EBP 存起來。也就是說，只要順著這條路徑回朔，就能作到Dump Call Stacks，以及能夠存取到每一層呼叫函式的參數及區域變數。

在 WIN32 之下可以透過 dbghelp 的 StackWalk 來實作此功能。只需要事先填好 STACKFRAME 結構中的 EIP、ESP 及 EBP，接著以一個迴圈不斷的呼叫 StackWalk 即可一路回朔 Call Stacks。

實作如下。

void DumpCallStacks()
{
  CONTEXT ctx;
  ctx.ContextFlags = CONTEXT_FULL;
  GetThreadContext(g_piDbgee.hThread, &ctx);

  STACKFRAME sf = {0};
  sf.AddrPC.Offset = ctx.Eip;
  sf.AddrPC.Mode = AddrModeFlat;
  sf.AddrStack.Offset = ctx.Esp;
  sf.AddrStack.Mode = AddrModeFlat;
  sf.AddrFrame.Offset = ctx.Ebp;
  sf.AddrFrame.Mode = AddrModeFlat;

  while (true) {
    if (!StackWalk(IMAGE_FILE_MACHINE_I386, g_piDbgee.hProcess, g_piDbgee.hThread, &sf, &ctx, 0, SymFunctionTableAccess, SymGetModuleBase, 0)) {
      break;
    }

    if (0 == sf.AddrFrame.Offset) {
      break;
    }

    DWORD displacement;
    IMAGEHLP_LINE64 li = {0};
    li.SizeOfStruct = sizeof(li);

    if (!SymGetLineFromAddr64(g_piDbgee.hProcess, sf.AddrPC.Offset, &displacement, &li)) {
      printf("0x%x\n", (unsigned int)sf.AddrPC.Offset);
    } else {
      char buff[sizeof(SYMBOL_INFO) + 256] = {0};
      SYMBOL_INFO *psi = (SYMBOL_INFO*)buff;
      psi->SizeOfStruct = sizeof(SYMBOL_INFO);
      psi->MaxNameLen = 256;
      DWORD64 displacement2 = 0;
      if (!SymFromAddr(g_piDbgee.hProcess, sf.AddrPC.Offset, &displacement2, psi)) {
        printf("%s:%d\n", li.FileName, li.LineNumber);
      } else {
        printf("%s:%d!%s\n", li.FileName, li.LineNumber, psi->Name);
      }
    }
  }
}

16.5 修改 HandleUserCommand 支援 Dump Call Stacks

修改 HandleUserCommand，加入 Dump Call Stacks 指令的支援。

void HandleUserCommand()
{
...
    case 'c': case 'C':
      DumpCallStacks();
      break;
...
}

測試結果如下。

EXCEPTION_DEBUG_EVENT. Code: 0x80000003, Addr: 0x401040 (First chance)
        EXCEPTION_BREAKPOINT. at d:\vs.net\testc2\main.cpp:11
0x401020   3
0x401020   4 int add(int a, int b)
0x401020   5 {
0x401024   6   int c = a + b;
0x40102d   7   return c;
0x401030   8 }
0x401030   9
0x401030  10 int main()
0x401040 *11 {
0x401044  12   printf("Hello world!\n");
0x401051  13   OutputDebugStringA("hello world!");
0x40105c  14   int sum = add(2, 3);
0x40106b  15   printf("%d\n", sum);
0x40107c  16   return 0;
0x40107e  17 }
>c
d:\vs.net\testc2\main.cpp:11!main
f:\rtm\vctools\crt_bld\self_x86\crt\src\crt0.c:318!__tmainCRTStartup
f:\rtm\vctools\crt_bld\self_x86\crt\src\crt0.c:187!mainCRTStartup
0x76325d49
0x777acdeb
0x777acd71
>

17. 顯示區域變數型別及內容

17.1 SYMBOL_INFO 結構

在除錯器裡要顯示區域變數及全域變數的型別及其內容等，必須要有除錯符號資訊才行，除錯符號資訊記錄了這些變數的名稱、型別、位址、長度等資訊。透過這些資料就可以在除錯程式時，動態顯示當前變數的狀態。

符號資訊是由定義在 dbghelp.h 中的 SYMBOL_INFO 結構得到。

typedef struct _SYMBOL_INFO {
  ULONG   SizeOfStruct;
  ULONG   TypeIndex;
  ULONG64 Reserved[2];
  ULONG   Index;
  ULONG   Size;
  ULONG64 ModBase;
  ULONG   Flags;
  ULONG64 Value;
  ULONG64 Address;
  ULONG   Register;
  ULONG   Scope;
  ULONG   Tag;
  ULONG   NameLen;
  ULONG   MaxNameLen;
  CHAR    Name[1];
} SYMBOL_INFO, *PSYMBOL_INFO;

17.2 列出區域變數

透過 API SymEnumSymbols 的幫助，可以找到目前可見的區域變數。呼叫時傳入一個 EnumSymbolsCallback，SymEnumSymbols 會把區域變數一個一個透過這個 Callback 函式通知我們。因為 SymEnumSymbols 會連函式都一起找出來，所以在 StaticEnumLocals 裡面，我們多作一個檢查，檢查此符號是否為一個資料類別，以此過濾掉其它的符號。

static BOOL CALLBACK StaticEnumLocals(PSYMBOL_INFO pSymInfo, ULONG SymbolSize, PVOID UserContext)
{
  if (SymTagData == pSymInfo->Tag) {
    printf("%08x %4u %s\n", (unsigned int)pSymInfo->Address, SymbolSize, pSymInfo->Name);
  }
  return TRUE;
}

void DumpLocals()
{
  IMAGEHLP_STACK_FRAME sf = {0};
  sf.InstructionOffset = GetCurrIp();
  SymSetContext(g_piDbgee.hProcess, &sf, NULL);
  SymEnumSymbols(g_piDbgee.hProcess, 0, NULL, StaticEnumLocals, NULL);
}

17.3 讀取區域變數記憶體內容

在 StaticEnumLocals 裡，我們可以透過 pSymInfo 傳遞來的資訊取得區域變數的位址資訊。得到位址後，就能透過 ReadProcessMemeory 讀取區域變數的記憶體內容。

前面說明過，函式參數及區域變數都是存放在堆疊中，且都是相對於 EBP。其實這句話只對了一半，正確來講是在 32-bits 模式下，函式參數及區域變數都是存放在堆疊中，且都是相對於 EBP。如果是在 64-bits 模式下，函式參數及區域變數還是存放在堆疊中，只不過不是相對於 EBP，而是要看 pSymInfo->Register 這個欄位告訴我們是那個暫存器。

ULONG64 GetVariableAddress(PSYMBOL_INFO pSymInfo)
{
  if (pSymInfo->Flags & SYMFLAG_REGREL) {
    CONTEXT ctx;
    ctx.ContextFlags = CONTEXT_CONTROL;
    GetThreadContext(g_piDbgee.hThread, &ctx);
    return ctx.Ebp + pSymInfo->Address; // In 32-bits mode, variable address is related to EBP.
  } else {
    return pSymInfo->Address;
  }
}

17.4 取得區域變數資料型別

要取得區域變數資料型別是一件很瑣碎複雜的工作，主要透過 SymGetTypeInfo 這個 API，函式原型如下。

BOOL
IMAGEAPI
SymGetTypeInfo(
    IN  HANDLE          hProcess,
    IN  DWORD64         ModBase,
    IN  ULONG           TypeId,
    IN  IMAGEHLP_SYMBOL_TYPE_INFO GetType,
    OUT PVOID           pInfo
    );

hProcess 同上面一樣是被除錯程式的 HANDLE。ModeBase 使用 pSymInfo->ModeBase 欄位，TypeId 使用 pSymInfo->TypeIndex 欄位。GetType 參數可以是如下定義的數值之一。不同的 GetType 參數，可以讀取不同的符號資訊。pInfo 的返回值及返回值的型別會根據我們傳入的 GetType 不同而不同。IMAGEHLP_SYMBOL_TYPE_INFO 定義於 dbghelp.h，如下。

typedef enum _IMAGEHLP_SYMBOL_TYPE_INFO {
    TI_GET_SYMTAG,
    TI_GET_SYMNAME,
    TI_GET_LENGTH,
    TI_GET_TYPE,
    TI_GET_TYPEID,
    TI_GET_BASETYPE,
    TI_GET_ARRAYINDEXTYPEID,
    TI_FINDCHILDREN,
    TI_GET_DATAKIND,
    TI_GET_ADDRESSOFFSET,
    TI_GET_OFFSET,
    TI_GET_VALUE,
    TI_GET_COUNT,
    TI_GET_CHILDRENCOUNT,
    TI_GET_BITPOSITION,
    TI_GET_VIRTUALBASECLASS,
    TI_GET_VIRTUALTABLESHAPEID,
    TI_GET_VIRTUALBASEPOINTEROFFSET,
    TI_GET_CLASSPARENTID,
    TI_GET_NESTED,
    TI_GET_SYMINDEX,
    TI_GET_LEXICALPARENT,
    TI_GET_ADDRESS,
    TI_GET_THISADJUST,
    TI_GET_UDTKIND,
    TI_IS_EQUIV_TO,
    TI_GET_CALLING_CONVENTION,
} IMAGEHLP_SYMBOL_TYPE_INFO;

這裡我們只會使用到下面這幾種，後面使用到時會再陸續說明。

TI_GET_SYMTAG 符號 Tag，回傳資料型別 DWORD。
TI_GET_SYMNAME 符號名稱，回傳資料型別 WCHAR*。
TI_GET_BASETYPE 符號基礎型別，回傳資料型別 DWORD。
TI_GET_LENGTH 符號長度，回傳資料型別 ULONG64。
TI_GET_TYPEID 符號 Type Index，回傳資料型別 DWORD。
TI_GET_COUNT Array 的元素個數，回傳資料型別 DWORD。

17.5 TI_GET_SYMTAG

首先以 TI_GET_SYMTAG 取得變數的符號的 Tag，得到符號 Tag 後我們就能得知變數的類型。同樣的符號的 Tag 種類也非常多，由以下於 cvconst.h 中的 SymTagEnum 定義。

enum SymTagEnum {
    SymTagNull,
    SymTagExe,
    SymTagCompiland,
    SymTagCompilandDetails,
    SymTagCompilandEnv,
    SymTagFunction,
    SymTagBlock,
    SymTagData,
    SymTagAnnotation,
    SymTagLabel,
    SymTagPublicSymbol,
    SymTagUDT,
    SymTagEnum,
    SymTagFunctionType,
    SymTagPointerType,
    SymTagArrayType,
    SymTagBaseType,
    SymTagTypedef,
    SymTagBaseClass,
    SymTagFriend,
    SymTagFunctionArgType,
    SymTagFuncDebugStart,
    SymTagFuncDebugEnd,
    SymTagUsingNamespace,
    SymTagVTableShape,
    SymTagVTable,
    SymTagCustom,
    SymTagThunk,
    SymTagCustomType,
    SymTagManagedType,
    SymTagDimension,
    SymTagCallSite,
    SymTagInlineSite,
    SymTagBaseInterface,
    SymTagVectorType,
    SymTagMatrixType,
    SymTagHLSLType,
    SymTagCaller,
    SymTagCallee,
    SymTagExport,
    SymTagHeapAllocationSite,
    SymTagCoffGroup,
    SymTagInlinee,
    SymTagTaggedUnionCase,
};

同樣的我們也只會使用到下面這幾種，其餘的我們都當作 unknown 型別不于處理。

SymTagBaseType 基礎型別，如 int、long、float 等。
SymTagFunctionType 函數型別。
SymTagPointerType 指標型別。
SymTagArrayType 陣列型別。
SymTagUDT 使用者自訂義型別 (User Defined Type)。
SymTagEnum Enum 型別。

底下我們定義 GetVariableTypeName 以一指定變數的 typeIndex 取得其對應的 C/C++ 型別名稱。

std::string GetVariableTypeName(ULONG typeIndex, PSYMBOL_INFO pSymInfo)
{
  DWORD symTag;
  SymGetTypeInfo(g_piDbgee.hProcess, pSymInfo->ModBase, typeIndex, TI_GET_SYMTAG, &symTag);
  switch (symTag) {
    case SymTagUDT:
    case SymTagEnum:
      return GetUdtTypeName(typeIndex, pSymInfo);
    case SymTagFunctionType:
      return "<func>";
    case SymTagPointerType:
      return GetPointTypeName(typeIndex, pSymInfo);
    case SymTagArrayType:
      return GetArrayTypeName(typeIndex, pSymInfo);
    case SymTagBaseType:
      return GetBaseTypeName(typeIndex, pSymInfo);
  }
  return "<unknown>";
}

SymTagFunctionType 類型的變數型別名稱我們簡單的顯示 <func>，其它的以下進一步說明。

17.6 讀取 SymTagBaseType 型別名稱

讀取 SymTagBaseType 的型別名稱是透用使用 TI_GET_BASETYPE 參數呼叫 SymGetTypeInfo，回傳的內容由 cvconst.h 中的 BasicType 定義。

enum BasicType {
    btNoType   = 0,
    btVoid     = 1,
    btChar     = 2,
    btWChar    = 3,
    btInt      = 6,
    btUInt     = 7,
    btFloat    = 8,
    btBCD      = 9,
    btBool     = 10,
    btLong     = 13,
    btULong    = 14,
    btCurrency = 25,
    btDate     = 26,
    btVariant  = 27,
    btComplex  = 28,
    btBit      = 29,
    btBSTR     = 30,
    btHresult  = 31,
    btChar16   = 32,  // char16_t
    btChar32   = 33,  // char32_t
    btChar8    = 34   // char8_t
};

同樣的我們只處理一般 C/C++ 程式會出現的型別類型。底下列出我們有處理的類型及 C/C++ 對應的型別。

btVoid void。
btChar char。
btWChar wchar_t。
btBool bool。
btLong long。
btULong unsigned long。

下面三個型別類型需再配合變數的長度資訊才能作正確判斷。變數資料長度由 TI_GET_LENGTH 參數呼叫 SymGetTypeInfo 取得。

btInt 長度 2 時為 short，長度 4 時為 int，長度 8 時為 long long。
btUInt 長度 1 時為 unsigned char，長度 2 時為 unsigned short，長度 4 時為 unsigned int，長度 8 時為 unsigned long long。
btFloat 長度 4 時為 float，長度 8 時為 double。

17.7 讀取 SymTagPointerType 型別名稱

SymTagPointerType 類型的指標型別變數，需要再以 TI_GET_TYPEID 參數取得指標內含的真正的資料型別 typeIndex，再以這個 typeIndex 呼叫 GetVariableTypeName 並在最後加上一個 * 號，表示此是一個指標型別變數。

std::string GetPointTypeName(ULONG typeIndex, PSYMBOL_INFO pSymInfo)
{
  DWORD containTypeIndex;
  SymGetTypeInfo(g_piDbgee.hProcess, pSymInfo->ModBase, typeIndex, TI_GET_TYPEID, &containTypeIndex);
  std::string typeName = GetVariableTypeName(containTypeIndex, pSymInfo);
  return typeName + "*";
}

17.8 讀取 SymTagArrayType 型別名稱

同樣的 SymTagArrayType 類型的陣列型別變數，也需要以 TI_GET_TYPEID 參數取得陣列元素的真正型別，以及以 TI_GET_COUNT 參數取得陣列素個數。

std::string GetArrayTypeName(ULONG typeIndex, PSYMBOL_INFO pSymInfo)
{
  DWORD containTypeIndex;
  SymGetTypeInfo(g_piDbgee.hProcess, pSymInfo->ModBase, typeIndex, TI_GET_TYPEID, &containTypeIndex);
  DWORD count;
  SymGetTypeInfo(g_piDbgee.hProcess, pSymInfo->ModBase, typeIndex, TI_GET_COUNT, &count);
  std::string typeName = GetVariableTypeName(containTypeIndex, pSymInfo);
  char buff[64];
  sprintf(buff, "%u", (unsigned int)count);
  return typeName + "[" + buff + "]";
}

17.9 讀取 SymTagUDT 及 SymTagEnum 型別名稱

SymTagUDT 及 SymTagEnum 類型的變數，都是以 TI_GET_SYMNAME 取得符號名稱。

std::string GetUdtTypeName(ULONG typeIndex, PSYMBOL_INFO pSymInfo)
{
  WCHAR *pName;
  SymGetTypeInfo(g_piDbgee.hProcess, pSymInfo->ModBase, typeIndex, TI_GET_SYMNAME, &pName);
  int NeedLen = WideCharToMultiByte(CP_ACP, 0, pName, -1, NULL, 0, NULL, NULL);
  std::string buff;
  buff.resize(NeedLen);
  WideCharToMultiByte(CP_ACP, 0, pName, -1, (char*)buff.c_str(), NeedLen, NULL, NULL);
  LocalFree(pName);
  return buff;
}

17.10 顯示變數內容

GetVariableValue 的實作很類似 GetVariableTypeName，差別在於回傳變數型別名稱的地方修改成根據變數型別格式化變數的記憶體內容。為簡化起見，這裡只處理 SymTagBaseType 類型的變數內容顯示，以及 SymTagPointerType 類型的變數內容只顯示指標指向的位址。其餘的類型，一律以 16 進制顯示。

std::string GetBaseTypeValue(ULONG typeIndex, PSYMBOL_INFO pSymInfo, const char *pData)
{
  // 略
}

std::string GetVariableValue(ULONG typeIndex, PSYMBOL_INFO pSymInfo, const std::string &data)
{
  DWORD symTag;
  SymGetTypeInfo(g_piDbgee.hProcess, pSymInfo->ModBase, typeIndex, TI_GET_SYMTAG, &symTag);
  char buff[32];
  switch (symTag) {
    case SymTagBaseType:
      return GetBaseTypeValue(typeIndex, pSymInfo, data.data());
    case SymTagPointerType:
      sprintf(buff, "0x%x", *(unsigned int*)data.data());
      return buff;
  }
  std::string value;
  for (size_t i = 0; i < data.size(); i++) {
    sprintf(buff, "%02x ", (unsigned char)data[i]);
    value += buff;
  }
  return value;
}

17.11 修改 StaticEnumLocals

StaticEnumLocals 修改如下。

static BOOL CALLBACK StaticEnumLocals(PSYMBOL_INFO pSymInfo, ULONG SymbolSize, PVOID UserContext)
{
  if (SymTagData == pSymInfo->Tag) {
    ULONG64 addr = GetVariableAddress(pSymInfo);
    std::string mem;
    mem.resize(SymbolSize);
    ReadProcessMemory(g_piDbgee.hProcess, (LPCVOID)addr, (LPVOID)mem.data(), SymbolSize, NULL);
    std::string value = GetVariableValue(pSymInfo->TypeIndex, pSymInfo, mem);
    std::string type = GetVariableTypeName(pSymInfo->TypeIndex, pSymInfo);
    printf("%08x %s %s %s\n", (unsigned int)addr, type.c_str(), pSymInfo->Name, value.c_str());
  }
  return TRUE;
}

17.12 修改 HandleUserCommand 支援 DumpLocals

最後修改 HandleUserCommand，加入 DumpLocals 指令的支援。

void HandleUserCommand()
{
...
    case 'l': case 'L':
      DumpLocals();
      break;
...
}

底下是測試結果。

0x449010   4 int add(int a, int b)
0x449010   5 {
0x449014   6   int c = a + b;
0x44901d   7   return c;
0x449020   8 }
0x449020   9
0x449020  10 int main(int argc, char** argv)
0x449030  11 {
0x449034 *12   printf("Hello world!\n");
0x449041  13   OutputDebugStringA("hello world!");
0x44904c  14   int sum = add(2, 3);
0x44905b  15   printf("%d\n", sum);
0x44906c  16   return 0;
0x44906e  17 }
>l
0019ff10 int argc 1
0019ff14 char** argv 0x9c18b0
0019ff04 int sum 10229936
>d 9c18b0
009C18B0  B8 18 9C 00 00 00 00 00-44 3A 5C 76 73 2E 6E 65  ........D:\vs.ne
009C18C0  74 5C 74 65 73 74 63 32-5C 62 69 6E 5C 44 65 62  t\testc2\bin\Deb
009C18D0  75 67 5C 74 65 73 74 63-32 2E 65 78 65 00 FD FD  ug\testc2.exe...
009C18E0  FD FD AB AB AB AB AB AB-AB AB EE FE EE FE EE FE  ................
009C18F0  00 00 00 00 00 00 00 00-D7 C9 74 E7 55 69 00 18  ..........t.Ui..
009C1900  90 18 9C 00 E8 19 9C 00-FC 01 46 00 75 00 00 00  ..........F.u...
009C1910  AC 00 00 00 02 00 00 00-0B 00 00 00 FD FD FD FD  ................
009C1920  08 1A 9C 00 68 1A 9C 00-D0 1A 9C 00 48 1B 9C 00  ....h.......H...
>

18. 顯示全域變數型別及內容

以前面完成的顯示區域變數型別及內容的功能為基礎，要顯示全域變數型別及內容，只需作一個小小的改動。這個改動就是：當呼叫 SymEnumSymbols 時，BaseOfDll 傳入模組的基底位址。而模組的基底位址，可以透過 SymGetModuleBase64 取得。

void DumpGlobals()
{
  DWORD64 BaseMod = SymGetModuleBase64(g_piDbgee.hProcess, GetCurrIp());
  SymEnumSymbols(g_piDbgee.hProcess, BaseMod, NULL, StaticEnumLocals, NULL);
}

其餘部份的修改都和 DumpLocals 類似，這裡就不再贅述。

任務檢測器

noreply@blogger.com (Waync Cheng) — Thu, 04 Apr 2024 08:20:00 +0000

翻到一個古董，再把資料檔案翻出來，還可以執行！這是第一份工作時製作的小工具之一，功能是用來檢視及測試編輯好的任務。設計的這個Script實際上就好像是在寫組合語言一樣，只不過到後來企劃也訓練的會寫組合語言了...

(單步/執行結果)

(玩家屬性)

(任務原始碼)

(字串表)

千字文射擊 BreakShoot

noreply@blogger.com (Waync Cheng) — Thu, 04 Jan 2024 15:24:00 +0000

[GitHub][Play]

兒子小學低年級時，學校要求他們背弟子規，所以我想如果他們也能學習千字文應該很不錯。千字文總共一千個字，每個字都不同，是古代的兒童課本。學習千字文可以了解古代社會的規範、歷史常識和禮節禮儀等。平常只要有機會我就會想辨法引導他們去讀讀千字文，這也是製作這個小遊戲的用意。

動態點陣字標題

遊戲的標題是由'BREAKSHOOT'這幾個字元構成，每一個字元的畫素又以千字文裡的一個中文字取代。進入標題畫面時，可以看到有約1秒鐘的動畫，每一個點陣字的中文字畫素隨機打散至畫面四周，然後再飛入重組。

點陣字的畫素取得是先透過Graphics.GenCanvas生成一個大小9x18的虛擬畫布，然後每次從'BREAKSHOOT'裡面取出一個個字元出來，以Graphics.DrawText畫到這個畫布上。之後再以Graphics.GetPixel取出畫布上的每個點，如果不是0就生一個中文字出來。

點陣字的動畫則是把上面的步驟裡生出來的中文字由STGE腳本來控制移動。為了實現這個功能，新增了一條API：Stge.LoadScript，可以在Runtime建立新的腳本。整個動作結合起來，如下面程式所示：

local function LoadStgeCharScript(c, W, H, script_name, ch)
  Graphics.FillRect(c, 0, 0, W, H, 0)
  Graphics.DrawText(c, 0, 0, ch, 1)
  local script = 'script ' .. script_name
  for x= 0, W-1 do
    for y= 0, H-1 do
      local p = Graphics.GetPixel(c, x, y)
      if (0 ~= p) then
        script = script .. string.format(' fire(title_char,$1+%d,$2+%d)', CW * x, CH * y)
      end
    end
  end
  script = script .. ' end'
  Stge.LoadScript(script)
end

每次呼叫一次LoadStgeCharScript就可以動態產生一段STGE腳本對應到'BREAKSHOOT'裡面的一個字元，腳本的名稱是char_1~char_10。之後會再一個個呼叫它們，讓每個字元動起來，如下所示：

local function LoadStgeTitleScript(c, W, H, script_name, text)
  for i = 1, #text do
    LoadStgeCharScript(c, W, H, 'char_' .. i, string.sub(text,i,i))
  end
  local script = string.format('script %s sleep(0.2)', script_name)
  local offsetx = (SW - #text * W * CW) / 2 + CW/2
  for i = 1, #text do
    local x = math.floor(offsetx + (i - 1) * W * CW - SW/2)
    script = script .. string.format(' fork(char_%d,%d,%d)', i, x, -100)
  end
  script = script .. ' sleep(1) userdata(1) fire(title_hint) end'
  Stge.LoadScript(script)
end

每一個字元裡的畫素是以title_char來控制關聯中文字的位置，先是隨機飛到畫面周邊，然後再飛回它的定位。每一個點陣字的畫素的定位座標，是在LoadStgeCharScript裡面就己經事先指定好。title_char的定義如下：

script title_char
  changex(rand(0.2,0.4),rand(-$w/2,$w/2))
  changey(rand(0.2,0.4),rand(-$h/2,$h/2))
  sleep(0.4)
  changex(rand(0.1,0.5),$1)
  changey(rand(0.1,0.5),$2)
  sleep(0.5)
end

標題畫面初始化時會以Stge.RunScript執行以上腳本來產生動態點陣字，若是無法執行則表示是第一次初始化需要動態產生腳本。如下所示：

local script_name = 'title_text'
if (-1 == Stge.RunScript(script_name)) then
  local CW5x8,CH5x8 = 5,8
  local c = Graphics.GenCanvas(CW5x8, CH5x8)
  Graphics.SetFont(Graphics.FIXED_FONT)
  LoadStgeTitleScript(c, CW5x8, CH5x8, script_name, 'BREAKSHOOT')
  Graphics.KillCanvas(c)
  Graphics.SetFont(Graphics.SYSTEM_FONT)
  Stge.RunScript(script_name)
end

最後再建立每一個畫素粒子和中文字的關聯就完成了。

多層星空的產生及捲動

遊戲中每一個畫面都以簡單的星空作背景，在純黑色的背景疊上3層星星，點上2x2的小白點作為星星，越遠的星星顏色越淡，畫面捲動時也移動的越慢。

3層星星是以STGE腳本生成的。如下：

script star
  repeat(32)
    userdata(3,0.9,0.9,0.9)
    fire(star_a)
    userdata(2,0.5,0.5,0.5)
    fire(star_a)
    userdata(1,0.3,0.3,0.3)
    fire(star_a)
  end
end

script star_a
  changex(0,rand(-$w/2,$w/2))
  changey(0,rand(-$h/2,$h/2))
end

可以看到star裡的repeat迴圈在每一層星空裡共生出32個星星，userdata的第一個參數用來控制這是第幾層的星星，後面3個參數是用來指定星星的RGB值，至於star_a只是用來隨機設定星星的位置。

當畫面捲動時，以Lua函式MoveStars來捲動3層星空。如下：

function MoveStars(stars, x)
  local offset = (x - SCR_W/2) / SCR_W
  for i = 1, #stars do
    Good.SetPos(stars[i], 8 * i * offset, 0)
  end
end

stars是事先己經根據不同層(userdata第一個參數)儲存好的3層星星群的父物件。x是目前的畫面捲動位置，依據畫面的x座標相對於畫面中心計算出偏移值，再由這個偏移值去移動所有星星。迴圈的i就是第幾層的星空索引，x8可以讓不同層的星星移動速度有所區別。這樣就作到越遠的星星動的慢，越近的星星動的快。

顯示注音

之前看到老婆在幫女兒作上小學前的注音預習，當時突然想到或許可以寫個小工具讓她使用，可以幫忙生出簡單的注音小測驗題。所以那時候利用小麥注音輸入法的國字和注音的對照表寫了一個國字轉注音的小測試程式，但後來就沒有繼續往下作。因為我沒有處理詞彙，所以會把一字多音都列出來。如下圖：

注音小工具的HTML網頁原始碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {font-family:Helvetica, Arial, "黑體-繁", "微軟正黑體", sans-serif}
</style>
</head>
<body>
<input type="text" id="inp">
<input type="button" value="國字轉注音" onclick="doParse()">
<div id="res"></div>
<script>
var dict = [];

fetch('BPMFBase.txt').then(function(response) {
  if (response.ok) {
    return response.text();
  } else {
    throw Error(response.statusText);
  }
}).then(function(text) {
  var lines = text.split("\n");
  lines.map(function(line) {
    var parts = line.split(' ');
    if (2 <= parts.length) {
      var c = parts[0], zhuyin = parts[1];
      var a = dict[c];
      if (null != a) {
        a.push(zhuyin);
      } else {
        dict[c] = [zhuyin];
      }
    }
  });
}).catch(function(error) {
  alert(error);
});

function doParse() {
  var s = document.getElementById('inp').value;
  var chars = s.split('');
  var html = '';
  for (var i = 0; i < chars.length; i++) {
    var ch = chars[i];
    html += ch;
    var a = dict[ch];
    if (null != a) {
      html += ' ' + a;
    }
    html += '<br>';
  }
  document.getElementById('res').innerHTML = html;
}
</script>
</body>

製作千字文射擊時利用這個小工具，把一千個字輸入，再把輸出結果存檔為zhuyin.txt。zhuyin.txt的內容是一行一個字和它的注音，如下：

天 ㄊㄧㄢ
地 ㄉㄧˋ
玄 ㄒㄩㄢˊ
...

手工把一字多音的部份都處理好後，就可以把注音對照表輸入到Lua程式裡使用了。如下：

local STR1000 = '天地玄...'
local STR1000_ZHUYIN = {[1]='ㄊㄧㄢ',[2]='ㄉㄧˋ',[3]='ㄒㄩㄢˊ',...

STR1000_ZHUYIN總共有一千組注音，當然不是用手工一個一個輸入，而是用一小段PHP來作，如下：

<?php
$lines = explode("\r\n", file_get_contents('zhuyin.txt'));
$no = 1;
foreach ($lines as $line) {
  echo "[$no]='".explode(' ', $line)[1]."',";
  $no += 1;
}

前置作業都準備好後，剩下的就是在遊戲裡面把注音畫出來，這裡就不再贅述了。

Escape from Planet Delta by Russell Wallace 文字冒險遊戲

noreply@blogger.com (Waync Cheng) — Tue, 27 Jun 2023 04:17:00 +0000

Escape from Planet Delta是以OASYS系統製作的文字冒險遊戲，OASIS是一個用於製作文字冒險遊戲的物件導向的系統。最早Escape是在1980年代中期在Commodore64上以The Quill製作的，在1991年時移植至OASYS系統。Escape發佈於public domain，可以任意複制和散佈source和可執行檔。

OASYS是Object-Oriented Adventure System的縮寫，它的作者是Russell Wallace，在1992年於comp.binaries.ibm.pc發佈的，並且可以在各大FTP站取得。下載的zip包包含一個說明文件檔、二個範例(其中一個是escape)、反組譯器、編譯器及解譯器的C的source、以及MS-DOS的反組譯器、編譯器及解譯器的可執行檔。原始的zip包裡的source缺少include檔不過不難移植到非MS-DOS的平台。

[Play] / [Github]

1. 編譯程式碼及執行

OASYS製作的遊戲是先以OASYS程式語言撰寫好程式碼後，再以oac編譯器編譯為物件碼，再透過oai解譯器執行。

1.1 OAC

首先你需要使用一個文字編輯器編輯你的遊戲原始碼，一般附屬檔名為s，例如test.s。接著使用oac編譯器把你的遊戲原始碼編譯為物件碼。

請執行以下命令編譯原始碼

oac test.s

或者省略附屬檔名

oac test

編譯成功的話會輸出同檔名的物件檔，不包含附屬檔名。如編譯test.s成功後，產生名為test的物件檔。

編譯過程如果有任何錯誤，則會輸出錯誤訊息。請再根據錯誤訊息，修正程式錯誤，並再重複以上的編譯命令及修正錯誤的流程，直到成功編譯出物件檔。

1.2 OAI

編譯成功的物件檔，可透過oai解譯器執行。

請執行以下命令執行物件檔

oai test

載入並成功啟動遊戲的話，可以看的遊戲輸出的訊息，以及接受文字命令的輸入提示符號。透過文字命令進行遊戲，quit離開。

2. OASYS程式語言 Language

底下介紹基本的OASYS程式語言語法規則，更詳細的說明請參數OASYS說明文件。

2.1 大小寫 Case

雖然底下的範例都是以大寫字母作示範，但OASYS程式語言不區分大小寫英文字母。

2.2 空白字元 Spaces

空白字元包含space、tab及換行字元。多個空白字元都會被合併視為一個單一空白字元。

2.3 識別字 Identifiers

跟所有其他程式語言的識別字一樣，識別字由英文字母及數字組成，但必需以英文字母或底線字元作為開頭第一個字元。

如以下範例都是有效的識別字

ROOM
SATURNS
HYDRUGONBOMB

以下是不合法的識別字的例子

9TO5

2.4 註解 Comments

註解有兩種形式，一是單行註解，另一是多行註解。

... // 這是單行註解

/* 這是一個
    多行註解  */

2.5 宣告的次序 Order of definitions

基於效率的考量，OASYS在解析編譯程式碼的時候只會掃描一遍。這表示說，在程式碼中的任何參考都必須事先宣告。

2.6 類別及物件 Classes and objects

OASYS是基於物件的系統，像是位置或玩家都是物件。當遊戲開始時並沒有任何物件，必須在開始時建立並初始化後才能使用。等到物件不再使用了，物件則被刪除。

物件是基於類別來建立的，所以第一步就是定義類別。

例如

CLASS PLAYER {{ME} {SELF} {MYSELF}}
CLASS ROOM {}
CLASS MACHINE_GUN {{GUN} {MACHINE GUN}}

一個類別以關鍵字CLASS開頭，接著是空白字元，然後是類別名稱識別字，接著空白字元，然後是一對大刮號。大刮號裡面可以定義可有可無的用來存取以此類別生成的物件別名，每一個別名也用一對大括號刮起來。例如類別PLAYER的物件，可以以ME、SELF或MYSELF來存取。而像是ROOM類別的物件則無法讓玩家透過任何名字存取，只能作為內部使用。而MACHINE_GUN類別物件有兩個可以存取的別名，分別是GUN及MACHINE GUN。

2.7 屬性 Properties

就像許多物件導向的程式語言一樣，OASYS的類別也有屬性，例如描述或重量。只是宣告的方式是以PROPERTY宣告一個屬性列表，這些屬性並不是特別專屬于那個類別，而是所有類別都能使用宣告的任何屬性。

例如

PROPERTY INT WEIGHT
PROPERTY STRING DESCRIPTION
PROPERTY OBJECT IN

如上面的例子，屬性以一個PROPERTY關鍵字開始，接著空白字元，然後是一個屬性類型關鍵字，接著是空白字元，最後是屬性名稱識別字。

屬性類型總共有三種，INT、STRING或OBJECT。INT是整數型別，初始值為0，如上面的WEIGHT屬性。STRING是字串型別，初始值為"NULL STRING"，如上面的描述屬性。OBJECT則是一個指向其它物件的參考的屬性，初始值為OBJECT 0。

2.8 方法 Methods

方法是OASYS裡面要作的事情怎麼完成的的動作。如下是一個簡單範例

METHOD INT SQUARE INT X
{
  RETURN X * X
}

這是一個計算平方數的方法。一個方法以METHOD關鍵字開始，接著空白字元，可有可無的回傳值類型，接著是空白字元，然後是方法名稱識別字，此例中是SQUARE。再來是可有可無的參數列，此例中有一個類型為INT的叫作X的參數。接著是方法主體，以一對大括號括起來。

底下是另一個例子

METHOD LOOK VERBS {{LOOK} {DESCRIBE LOCATION}}
{
  PRINT PLAYER IN DESCRIPTION
}

這個方法叫作LOOK，它沒有回傳值所以沒有回傳值類型。另外關鍵字VERBS表示接下來的一對大括號裡面，是這個方法的別名列表，定義的方法類似CLASS的別名。定義方法的VERB別名後，就能在遊戲的過程中，使用此定義的別名作為操作命令輸入遊戲中。

下面是比較複雜的例子

METHOD GIVE_TO OBJECT X IS_CARRIED OBJECT Y IS_VISIBLE
   VERBS {{GIVE X TO Y} {OFFER X TO Y} {GIVE Y X} {OFFER Y X}}
{
  ...
}

這樣就能以如下的方法呼叫到GIVE_TO方法

GIVE FISH TO TIGER
OFFER FISH TO TIGER
GIVE THE TIGER THE FISH
OFFER THE TIGER THE FISH

注意到GIVE_TO方法的參數列的定義裡有IS_CARRIED及IS_VISIBLE，其實這是另外兩個定義的修飾方法，用來修飾X和Y參數，底下會再介紹。另外上面的例子裡面可以看到THE這個單字，這個特別的單字也是作為修飾用，會被系統自動忽略。

2.9 變數 Variables

類似在定義PROPERTY一樣，你也可以定義GLOBAL變數，但只能有一個實體，如下所示

INT SCORE

如果加上PROPERTY關鍵字，就變成了物件屬性，可以被多個物件擁有。另外在方法裡定義的變數則為LOCAL變數，可見範圍及生命周期只在方法內部有效。如下面的例子

METHOD INT SQUARE INT X
{
  INT RESULT

  RESULT = X * X
  RETURN RESULT
}

此外方法的參數的地位則相當於LOCAL變數。

2.10 THIS

所有的方法都會假定為被指定為某個物件呼叫。例如，當你輸入指令時，就預設假定為指令是被PLAYER物件所呼叫。方法呼叫時，系統維護一個隱含的THIS物件參考，表示此方法是被此物件呼叫的。另外像上面的SQUARE方法的實作裡，並沒有使用到THIS物件，但系統還是一樣會指派一個THIS物件參考。

2.11 INIT方法 METHOD INIT

每一個遊戲都需要一個INIT方法，INIT方法是遊戲程式的進入點，遊戲啟動時第一個被系統呼叫的方法就是INIT，可以在此作初始化。

2.12 選擇器方法 Selector methods

上面的GIVE_TO方法裡定義的參數列中，我們看到IS_CARRIED及IS_VISIBLE。前面提到這是修飾方法，也就是選擇器方法。

這二個方法定義如下

METHOD INT IS_CARRIED
"You haven't got that.\n"
{
  RETURN THIS IN == PLAYER
}

METHOD INT IS_VISIBLE
"That isn't here.\n"
{
  RETURN THIS IS_CARRIED OR THIS IN == PLAYER IN
}

選擇器方法不帶參數，回傳值類型都是INT，也就是0或非0，即FALSE或TRUE。在左大括號前的字串，是定義為當選擇器方法回傳FALSE時，顯示給usr的提示訊息。

2.13 SELECT_ADDRESSEE方法 METHOD SELECT_ADDRESSEE

在遊戲中，玩家可以和其它物件互動或交談。使用如下的語法

GUARD, DROP THE MACHINE GUN

如果沒有前面的"GUARD,"，則表示玩家執行“DROP THE MACHINE GUN"，加上前面的"GUARD,"後，這個動作則變為是由GUARD執行。

一般來說，要把命令指派給物件，要先輸入物件的名字，接著一個逗號，然後是指令。至於那些物件能夠和玩家互動或交談呢？

有個特殊的選擇器方法叫作SELECT_ADDRESSEE就是用來做這個檢查的。如果你有定義一個SELECT_ADDRESSEE，則需要時它就會被呼叫，否則系統總是會顯示預設的訊息"You can't talk to that"。

下面是一個範例

METHOD SELECT_ADDRESSEE
"It doesn't understand you!\n"
{
  RETURN (THIS IS GUARD OR THIS IS ROBOT) AND THIS IS_VISIBLE
}

2.14 玩家 Player

PLAYER是需要預先定義的物件，在INIT方法裡需要被產生出來。如

PLAYER = CREATE PLAYER

如上的例子PLAYER物件是以PLAYER類別產生出來的，當然這也不是必需這樣，你也能以其它類別的產生PLAYER物件。如

PLAYER = CREATE ROOM

上面的例子中，PLAYER物件是以ROOM類別建立的。這表示說，在遊戲過程中玩家可以在不同時間轉換為不同角色。

例如在Commodore 64上的魔戒這個遊戲裡，4個哈比人Frodo、Sam、Merry和Pippin，可以用4個類別來表示這4個角色。玩家可以使用BECOME這個命令來操控這4個角色。遊戲開始時，玩家是先從FRODO這個角色開始，然後使用BECOME SAME切換為SAM。一個使用OASYS的可能實現方式如下

CLASS FRODO {{FRODO}}
CLASS SAM {{SAM}}
CLASS MERRY {{MERRY}}
CLASS PIPPIN {{PIPPIN}}

...

OBJECT FRODO
OBJECT SAM
OBJECT MERRY
OBJECT PIPPIN

...

METHOD INT IS_BECOMABLE
{
  RETURN THIS SELECT_ADDRESSEE AND (THIS IS FRODO OR
                                    THIS IS SAM OR
                                    THIS IS MERRY OR
                                    THIS IS PIPPIN)
}

METHOD BECOME OBJECT X IS_BECOMABLE VERBS {{BECOME X}}
{
  PLAYER = X
}

METHOD INIT
{
  ...
  FRODO = CREATE FRODO
  SAM = CREATE SAM
  MERRY = CREATE MERRY
  PIPPIN = CREATE PIPPIN

  PLAYER = FRODO      // Player starts off playing Frodo
  ...
}

3. 攻略 Walkthrough

Escape from Planet Delta by Russell Wallace

Originally written with The Quill on the Commodore 64 in the mid eighties and
ported to OASYS in January 1991. This game is public domain and source and
object code may be freely copied and used.

The plot is as follows: You were on a starship flying to the planet Betelgeuse
Delta, fourth planet of the Betelgeuse star system. On approaching the planet
for landing, the ship developed engine trouble and appeared to be about to
crash. Unfortunately there was not quite enough lifeboat space for everyone, so
your shipmates beat you up, threw you into the control room, locked the door,
grabbed the lifeboat, ejected and are probably on their way back to Earth by
now. The ship crash landed but amazingly is still mostly intact and you
survived the landing. However there is no chance of your being able to fly it
out of here, so you will have to look for the Starfleet base on the planet and
try to find some means of escape.

Commands can be multiple words, but words like ALL, IT and AND are not
supported. SAVE saves the game and LOAD reloads your position. VERBOSE, BRIEF
and NORMAL give you different lengths of location descriptions.

Good luck!

底下是一系列需要輸入的指令，括號裡的文字是一些關鍵訊息。

(Control Room)
open box
open box
open box
open box
open box
open box
open box
open box
open box
open box
open box
(以上總共11次open box)
(You open the box and remove an American Express credit card and an
oxy-acetylene torch.)
get card
get torch
open door with card
(You manage to unlock the door with the credit card.)
e
(Corridor)

以上的solution只是拋磚引玉起個頭，改天有什麼好心人士提供或我自己過關了再補上。

4. 移植雜記

4.1 試移植

如上面提到的，在網路上下載的v1版本oa_script.zip有缺檔案，另外找到v1.01版本oasys101.zip就完整了。

一開始我先在emsc環境試下po，看看有沒有很多err。還好不多，也很快就修正可以編譯出目標檔。

基本上以以下命令編譯

em++ OAI.C OALIB.C

然後試著用node執行看看，會有當掉的錯誤。原因是我先用下載的oac.exe編譯escape，但是下載下來的執行檔是古董程式，那時候的int是2個bytes。所以如果我用現在的編譯工具編譯oai.exe，新的oai會認為一個int是4個bytes。所以主要問題出在這裡。

想辦法用硬幹的方式修正後，也可以成功在console下看到print的遊戲文字了。但是emsc不能直接移植scanf，所以試po到此為止。

以以下命令執行編譯出來的程式

node a.out.js

4.2 建立oac和oai專案作改版

在Visual studio下建立oac和oai專案，之所有用vs建立專案只是方便移植，任何可以達到目的的方式或工具都可以。

建立vs的oac和oai專案後，用類似試po時的改法，先改版一個可以執行的版本。接著就是針對這個可以執行的版本作更多的跨平台改版。這裡只要針對oai改版即可，先不用管oac，除非我們之後還要可以編譯並執行usr輸入的程式，否則現在只要改版oai並一律使用目前可執行的oac的版本。

移植oai有兩個關鍵點。

第一點是載入檔案的地方都改成從byte stream載入，這樣方便在上層一次載入檔案資料再一次解析再執行。第二個地方是usr輸入的處理，只要把原本無窮的REPL迴圈改成事件驅動即可。

第一點沒有甚麼特別的，現在只說明一下第二個重點，其實很簡單。底下是原本的主REPL迴圈

LoadGame(argv[1]);
NewGame();
for (;;) {
  assert (sp == 0);
  if (!getinput ()) {
    continue;
  }
  command ();
  if (restart) {
    if (!getyn ("Would you like to play again? (Y/N) "))
      return 0;
    NewGame();
  }
}

現在只要改成當使用emsc編譯時，不要進入一個無窮的REPL迴圈，而時把這個迴圈打散，以事件趨動的方式每次從javascript那邊呼叫並傳遞進來作為usr輸入的字串時，再進行下一步的command解析處理。

#ifdef __EMSCRIPTEN__
LoadGameFromStream((char*)BIN);
NewGame();
getinput();
emscripten_exit_with_live_runtime();
#endif

BIN是將透過oac編譯好的escape遊戲的物件檔binary使用bin2c之類的工具轉成c程式碼裡的array，底下是ESCAPE.h的一個部份範例。

#ifndef ESCAPE_INC
#define ESCAPE_INC

const unsigned char BIN[] = {
0x6f,0x61,0x73,0x00,0x9f,0x01,0x00,0x00,0x0d,0x00,0x00,0x00,0x2a,0x4e,0x55,0x4c,
...
};

#endif // ESCAPE_INC

底下是對getinput的修改

void input (char *s)
{
  printx = printy = 0;
#ifdef __EMSCRIPTEN__
  // 不作事, 等待從javascript傳遞usr輸入字串.
#else
  gets (s);
#endif
}

int getinput_i(void)
{
  // 作原來的處理.
}

int getinput (void)
{
  print ("> ");
  input (buf);
#ifndef __EMSCRIPTEN__
  return getinput_i();
#else
  return FALSE;
#endif
}

至於提供給javascript的api，用來模擬usr輸入字串的cSendCmd如下

#ifdef __EMSCRIPTEN__
#include 
extern "C" {
int EMSCRIPTEN_KEEPALIVE cSendCmd(char *pBuff)
{
  strcpy(buf, pBuff);
  if (getinput_i()) {
    printf("%s\n", pBuff);
    command();
  }
  getinput();
  return 0;
}
} // extern "C"
#endif

另外javascript的部份，底下只列出怎麼呼叫cSendCmd模擬usr輸入

<script>
function sendCommand(e) {
  if (13 === e.keyCode || 14 === e.keyCode) {
    sendCommand_i();
  }
}

function sendCommand_i() {
  var el = document.getElementById('cmd');
  var cmd = el.value;
  el.value = '';
  if ('' == cmd) {
    return;
  }
  var ptr  = allocate(intArrayFromString(cmd), 'i8', ALLOC_NORMAL);
  Module.ccall('cSendCmd', 'number', ['number'], [ptr]);
  var resValue = Pointer_stringify(retPtr);
  _free(ptr);
}
</script>

這樣基本就完成了移植。

無限隨機地圖生成 Wang Tiles

noreply@blogger.com (Waync Cheng) — Sat, 04 Mar 2023 13:17:00 +0000

Wang Tiles

----------------

在研究關於可用於地圖生成的波函數坍縮演算法(Wave Function Collapse，底下簡寫WFC)的時候，又看到關於王式磚的資料(Wang Tiles，底下簡寫WT)。跟WFC比起來，WT比較容易理解和實作，所以我就先根據WT的原理實作了一個無限隨機地圖生成的測試。

關於WT，這個網站有詳細的介紹，同時也有許多tilesets可以用來作為測試資源。WT是數學家發明的遊戲，主要概念是邊緣匹配的tile連通拚接。每一個矩形tile有4個邊和4個角，所以有2種拼法，一種是邊匹配的拼法，一種是角匹配的拼法。

邊匹配 2Edge

---------------------

以邊匹配的拼法為例，每一個矩形tile的4個邊裡面，每個邊如果用0或1表示不同顏色，則總共有2x2x2x2共16種不同的tile。如下圖，生成tilemap時，如果一個tileA的上方的tileB的下邊是1，則tileA的上邊必須也是1，才能連通。同理，右方的tileC的左邊是1的話tileA的右邊也要是1，等等。整個tilemap的每一個tile都符合這個規則，就是一個符合WT的tilemap。

生成隨機tilemap的方式不只一種，一個簡單的方法是從左到右從上到下，一個一個tile生成。每一個新tile生成時，針對它的上方及左方2個己生成的tile的邊建立連通狀態(上方tile的下邊是1則新tile的上邊也需為1，左方tile的右邊為1則新tile的左邊也需為1)，而新tile的右方及下方的邊則隨機選擇0或1。

如下圖，針對tileX的4個邊依序上右下左以2進制編碼為1,2,4,8，這樣在生成tilemap時可以使用bit運算操作方便判斷。

這樣16種tile的編號也同時是它的編碼。如tile0表示4個邊都是0，tile8表示左邊是1其餘3邊是0，tile13表示上左下邊是1右邊是0，等等。底下是生成邊匹配的tilemap的虛擬碼。

void gen2EdgeWangTilesmap(cx, cy)

{

foreach tile i of tilemap {

tile = 0;

if (tilemap[upper] & 4) { // Match upper edge.

tile |= 1;

}

if (tilemap[left] & 2) { // Match left edge.

tile |= 8;

}

if (rand) { // Random lower edge.

tile |= 4;

}

if (rand) { // Random right edge.

tile |= 2;

}

tilemap[i] = tile;

}

下圖為以邊匹配拼法產生的隨機tilemap。(tileset來源http://cr31.co.uk/stagecast/wang/tiles_e.html)

角匹配 2Corner

----------------------

邊匹配的拼法裡面，對每個tile的每個邊來說只需要跟另一個相隣的tile的一條邊作匹配即可，但是角匹配的拼法就複雜多了，角匹配的拼法裡面的每個tile的每個角需要和其它3個相隣的tile的角匹配。如下圖，和tileX的角x相隣的3個tile的角分別是tileA的角a、tileB的角b和tileC的角c。

同邊匹配的拼法一樣，在作角匹配的演算法我們一樣對每一個tile的4個角作編碼，方便使用bit運算作檢查，如下圖。

生成隨機tilemap時，在上圖中相隣的4個角xabc中只要一個是1，全都要是1才能連通。一個生成的方法也是同邊匹配的拼法一樣，從左到右從上到下，一個一個tile生成。每一個新tile生成時，針對新tile的左上、右上及左下角3個角要和己存在的tile的對應的相隣角匹配作連通，而剩下的右下角則使用隨機數0或1。底下是生成角匹配的隨機tilemap虛擬碼。

void gen2CornerWangTilesmap(cx, cy)

{

foreach tile i of tilemap {

tile = 0;

// Match upper.

if (mTilemap[up] & 4) {

tile |= 8;

}

if (mTilemap[up] & 2) {

tile |= 1;

}

// Match left.

if (mTilemap[left] & 1) {

tile |= 8;

}

if (mTilemap[left] & 2) {

tile |= 4;

}

// Match lower.

if (mTilemap[down] & 8) {

tile |= 4;

}

// Match right.

if (mTilemap[right] & 8) {

tile |= 1;

}

// Random lower-right.

if (rand()) {

tile |= 2;

}

tilemap[i] = tile;

}

下圖為以角匹配拼法產生的隨機tilemap。(tileset來源http://cr31.co.uk/stagecast/wang/tiles_c.html)

生成無限隨機地圖

---------------------------

動態生成無限隨機地圖的一個簡單方法是，把世界地圖切成許多小tilemap，每一個tilemap是8x8的tile組成。每一個tilemap使用WT的拼法隨機生成，同時每一個tilemap還要和相隣的tilemap連通。不只每一個tilemap內的每一個tile是連通的，相隣的tilemap之間也都是連通的，這樣整個世界地圖都會是無縫連接的。

如下圖，在畫世界地圖時，從左上角開始，計算出左上角的tilemap是那一個，然後依序從左到右從上到下，一個一個tilemap畫出來。每一個tilemap是8x8大小，每個tilemap區塊的左上角的數字是這個tilemap的座標(col,row)。

tilemap生成的時機是，當畫面捲動要畫出其中一個tilemap區塊時(指定座標為col:row)，若這個tilemap原先不存在，則生成一個新的tilemap，並記錄下來。每一個tilemap以上面介紹的WT生成隨機內容，生成每一個tilemap內容後，還要作的就是處理相隣的tilemap怎麼作到連通相接。如下是生成世界地圖中指定座標的tilemap的虛擬碼。

void genNewTilemap(col, row)

{

// Gen new tilemap.

tilemaps[col,row].gen2CornerWangTilesmap();

// Link tiles of edges to neighbor tilemaps.

if (isTilemapExist(col - 1, row)) {

tilemaps[col,row].linkLeftEdge(tilemaps[col - 1, row]);

}

if (isTilemapExist(col, row - 1)) {

tilemaps[col,row].linkUpperEdge(tilemaps[col, row - 1]);

}

if (isTilemapExist(col + 1, row)) {

tilemaps[col,row].linkRightEdge(tilemaps[col + 1, row]);

}

if (isTilemapExist(col, row + 1)) {

tilemaps[col,row].linkLowerEdge(tilemaps[col, row + 1]);

}

如上面的虛擬碼所示，生成一個指定座標的tilemap之後，還要再檢查此tilemap的上下左右4個方向是否也己經有tilemap存在，若是則需要再和它們作連通檢驗。

底下只舉linkLeftEdge一例，其餘依此類推。

void linkLeftEdge(leftTilemap)

{

// Link left col to right col of wt.

foreach tile i of left col {

tileL = leftTilemap.tilemap[iL]; // foreach tile iL of right col of leftTilemap.

tile = mTilemap[i] & ~(4 + 8); // Clear top-left and bottom-left corner.

if (tileL & 1) { // Match top-right corner.

tile |= 8;

}

if (tileL & 2) { // Match bottom-right corner.

tile |= 4;

}

tilemap[i] = tile;

}

下圖為以此方法生成的一個無限隨機地圖。(tileset來源為http://cr31.co.uk/stagecast/wang/tiles_c.html)

Good Game Editor HTML5 porting (resource browser)

noreply@blogger.com (Waync Cheng) — Sun, 24 Jul 2022 08:47:00 +0000

斷斷續續製作了一個HTML5版本的Good Game Editor，一方面是作為測試及學習web相關技術，一方面也是利用這個過程持續對good作點改良。雖然目的是想作一個HTML5版的編輯器，但實際上目前只作到resource browser，可以在web browser開啟good package作資源檢視。目前大部份的功能還是原來的C++ code直接以emscripten編譯成javascript，再加上少部份javascript，最後利用w3.css作排版。

<試試>

點擊連結會列出網站上good/uploads目錄下的所有good package，可以再點擊package的play來試玩或者是edit開啟編輯器(res browser)。

目前編輯器大致可以檢視所有類型的資源，包含聲音(audio)、貼圖(texture)、精靈(sprite)、地圖(tilemap)、關卡(level)、腳本(script)及粒子腳本(particle)。

如下圖，為點擊herobye.zip這個package的Edit時顯示的第一個畫面。

編輯器畫面主要分為3個部份。左側依據不同類型資源，列出所有資源列表。右側是屬性顯示區，顯示選取的物件屬性資料。中間區域為編輯區，依據選取的不同類型物件作不同顯示。

下圖是選取了聲音(audio)類型的資源，編輯區顯示標準的播放聲音介面。

下圖是選取了貼圖(texture)類型的資源。

如下圖是選取了精靈(sprite)類型的資源，編輯區顯示此精靈每個frame的資訊及在上方播放精靈動畫。而右側屬性區也會顯示此精靈使用的貼圖物件。

下圖是選取的地圖(tilemap)類型的資源，編輯區顯示己編輯的tilemap，右側屬性區也會顯示目前地圖使用的貼圖。

下圖為選取關卡(level)類型的資源，編輯區顯示關卡內容，右側屬性區上方顯示關卡內物件的階層圖。點擊階層圖上的子物件時，右側屬性區下方會再顯示選取子物件的屬性資訊。

下圖為選取腳本(script)類型的資源。

下圖為選取粒子腳本(particle)類型資源。編輯區有二個分頁，左分頁Source同腳本一樣顯示script內容。右分頁Test為粒子執行preview畫面，同時右側屬性區上方也會列出所有可測試的particle script名稱，點擊時立即執行作preview。

以上是目前Good Game Editor HTML5的移植，還會持續update。

867的HTML5移植

noreply@blogger.com (Waync Cheng) — Thu, 02 Jun 2022 08:32:00 +0000

[PLAY]

這個遊戲是較早期的作品，所以使用的技術是以當時自己較熟悉的Win32相關技術製作。遊戲核心部份一開始就己分離出來，但還不是100%跨平台。畫面部份是以Win32 GDI呈現，以及透過Windows視窗機制處理輸入。本次目標是將遊戲移植到HTML5，主要的工作有三個部份。

將遊戲核心Gameplay確實作到跨平台。
將畫圖及輸入部份抽離作到跨平台。
將遊戲移植為HTML5可以在Browser上執行。

第一部份己幾乎完成了，只需再作點小修改就能達成。主要的移植工作在於第二和第三部份，以下是這部份工作的重點記錄。

抽離繪圖層

因為867和Win32 GDI緊密結合，一時無法輕易的將繪圖層抽離出來。萬事起頭難，可以先從最簡單的改良開始，一次一小步逐步重整。首先增加一個Renderer類別，只包含一個很大略的一個render函數。而render函數的實作，是根據當前遊戲狀態透過renderTitle和renderGame二個函數實作遊戲的全部繪圖。

class Renderer
{
public:
  void render(const Game &game, CDCHandle& dc)
  {
    switch (game.iStage)
    {
    case Game::STAGE_TITLE:
      renderTitle(dc);
      break;
    case Game::STAGE_GAME:
      renderGame(dc, Game::MENU_NONE);
      break;
    case Game::STAGE_MENU:
      renderGame(dc, Game::MENU_GAME);
      break;
    case Game::STAGE_DIE:
      renderGame(dc, Game::MENU_NONE);
      break;
    case Game::STAGE_OVER:
      renderGame(dc, Game::MENU_OVER);
      break;
    case Game::STAGE_WIN:
      renderGame(dc, Game::MENU_NONE);
      break;
    }
  }
  virtual void renderTitle(CDCHandle& dc) {...}
  virtual void renderGame(CDCHandle& dc, int menu) {...}
};

Renderer的renderTitle及renderGame的內容，是整個從原來和Win32 GDI相依的程式完整的搬過來，現在先忽略它。定義Renderer後，原來在視窗裡的畫圖部份就可以以Renderer替換。

// Render game.
CClientDC dc(m_hWnd);
RECT rc = {0, 0, SCREEN_W, SCREEN_H};
CMemoryDC memdc(dc, rc);
Renderer renderer;
renderer.render(game, memdc);

注意到上面呼叫Renderer::render時，傳入的第二個參數memdc目前還是一樣跟Win32平台相關。底下繼續對Renderer::renderTitle整理，抽出幾個子函數。這些子函數的參數裡還是有許多和Win32平台相依的部份，也暫時忽略。

class Renderer
{
public:
  ...
  virtual void drawMenuStrings(CDCHandle& dc, int idsStart, int idsEnd, int xOffset, int yOffset, COLORREF clrNormal = RGB(0,0,0), COLORREF clrSelect = RGB(255,0,0)) const=0;
  virtual void drawMenuBar(CDCHandle& dc, int xOffset, int yOffset) const=0;
  virtual void drawMsgIcon(CDCHandle& dc, int offsetMsg, int w, int h, int xSrc, int ySrc) const=0;
  virtual void fillRect(CDCHandle& dc, LPCRECT lpRect, int brush) const=0;
};

繼續對Renderer::renderGame作類似整理，抽出幾個子函數。

class Renderer
{
public:
  ...
  virtual void drawAlphaRect(CDCHandle& dc, int brush, int x, int y, int w, int h, int step) const=0;
  virtual void drawFadeText(CDCHandle& dc, const char* str, int step, int x, int y) const=0;
  virtual void drawFireBall(CDCHandle& dc, int iBallImg, int xOffset, int yOffset, int shift) const=0;
  virtual void drawPlayer(CDCHandle& dc, int x, int y, int frame, int dir) const=0;
  virtual void drawPlane(CDCHandle& dc, int x, int y, int dir) const=0;
};

接著定義一個Win32Renderer繼承自Renderer，並實作上面那些純虛擬的畫圖子函數，然後在遊戲繪圖部份以Win32Renderer替換。這樣就能逐步的把平台無關和平台相關的繪圖程式碼抽離。

// Define Win32 Renderer.
class Win32Renderer : public Renderer
{
public:
  ...
  virtual void drawMenuStrings(CDCHandle& dc, int idsStart, int idsEnd, int xOffset, int yOffset, COLORREF clrNormal = RGB(0,0,0), COLORREF clrSelect = RGB(255,0,0)) const {...}
  virtual void drawMenuBar(CDCHandle& dc, int xOffset, int yOffset) const {...}
  virtual void drawMsgIcon(CDCHandle& dc, int offsetMsg, int w, int h, int xSrc, int ySrc) const {...}
  virtual void fillRect(CDCHandle& dc, LPCRECT lpRect, int brush) const {...}
};

// Render game.
...
Win32Renderer win32renderer;
win32renderer.render(game, memdc);

重複上面的步驟，將各個render子函數持續抽象化，盡可能的把更小的可能和平台有關的子函數抽出來，只保留和平台無關的部份。接下來開始逐步替換平台相依的部份，一次替換一個。首先把CDCHandle抽象化替換為void*，底下以Renderer::fillRect為例。

// Renderer base.
class Renderer
{
public:
  ...
  virtual void fillRect(void *pCtx, LPCRECT lpRect, int brush) const=0;
};

// Render game.
...
Win32Renderer win32renderer;
win32renderer.render(game, (void*)(HDC)memdc);

// Win32 renderer.
class Win32Renderer : public Renderer
{
public:
  ...
  virtual void fillRect(void *pCtx, LPCRECT lpRect, int brush) const
  {
    CDCHandle dc((HDC)pCtx);
    ...
  }
};

如上所示，把Renderer::fillRect的HDC參數替換成void*後。在遊戲繪圖呼叫render，傳入第二個平台相依的參數memdc時，作一個將dc轉型抽象為和平台無關的型別void*。而在平台相依的Win32Renderer::fillRect實作裡，再作一次將void*轉型回平台相依的HDC型別，底下其它實作照舊不變。這個動作好像多此一舉，但這個處理就能把平台相關的東西全部從平台無關的Renderer裡搬到外面，而達到跨平台的目的。

注意上面的兩個主要的操作：一、抽出平台相依的子函數及二、替換平台相依的參數，是可以交替進行的。持續以上操作，盡可能把平台相關和無關的部份以這種方式逐步抽離乾淨，直到可以很容易的作到跨平台移植。

遊戲移植到HTML5

HTML5的移植主要透過Emscripten將跨平台的程式碼編譯成WebAssembly。跨平台的程式碼包含有二部份，一個是和平台無關的可以直接移植的程式碼，也就是像上面的Renderer的部份。另一部份是和平台相依的需要作移植的程式碼，像是上面的Win32Renderer的部份。這裡要作的是定義一個EmscRenderer繼承自Renderer，並實作所有需要跨平台到HTML5的子函數。

class EmscRenderer : public _867::Renderer
{
public:

  virtual void drawAlphaRect(void *pCtx, int brush, int x, int y, int w, int h, int step) const;
  virtual void drawAlphaText(void *pCtx, const char* s, int step, int x, int y) const;
  virtual void drawFireBall(void *pCtx, int iBallImg, int xOffset, int yOffset, int shift) const;
  virtual void drawGameFinText(void *pCtx, const char *s, const sw2::IntRect &rc) const;
  virtual void drawGameScore(const _867::Game &game, void* pCtx, int x, int y) const;
  virtual void drawMenuStrings(void *pCtx, const char* str[], int xOffset, int yOffset, int clrNormal = COLOR_BLACK, int clrSelect = COLOR_RED) const;
  virtual void drawMenuBar(void *pCtx, int xOffset, int yOffset) const;
  virtual void drawMsgIcon(void *pCtx, int offsetMsg, int w, int h, int xSrc, int ySrc) const;
  virtual void drawPlayer(void *pCtx, int x, int y, int w, int h, int frame, int dir) const;
  virtual void drawPlane(void *pCtx, int x, int y, int w, int h, int dir) const;
  virtual void drawTitleBkgndText(void *pCtx, const char* s, const sw2::IntRect &rc) const;
  virtual void fillRect(void *pCtx, const sw2::IntRect &rc, int brush) const;
};

實作的細節沒什麼特別的，這裡不特別說明。底下只針對幾個需要作特別的處理，作了記錄。

轉換有Color Key的圖形為ARGB格式

早期要作簍空貼圖都是使用Color Key作法，也就是指定2D圖形裡某個顏色的RGB值作為Color Key，繪圖時只要是這張貼圖裡的像素的RGB是和Color Key相同，則這些像素就不會被繪出來。如下圖是遊戲裡使用的紙飛機的貼圖，大片的紫色色塊的紫色RGB(254,0,255)作為Color Key。

因為不想要改變原始貼圖格式及繪圖方式，所以一個簡單的作法是HTML5版本中，把原來的使用Color Key的貼圖作一個轉換，轉換成ARGB格式，這樣在HTML5使用drawImage時就自然可以作簍空貼圖。

轉換的方法很簡單，步驟如下。

將原始貼圖畫到一個memory canvas。
將這個canvas裡的所有像素取出處理，如果像素的RGB值和Color Key相同，則把這個像素的alpha清0。
以處理過的memory canvas建立一個新的貼圖img，使用這個img作為新貼圖來源。

如下所示，為轉換程式碼片斷。

<img id="imgPlane" src="plane.bmp" alt="" style="display:none;"/>
<img id="imgRole" src="role.bmp" alt="" style="display:none;"/>

<script>
function convertColorKeyedImg(id) {
  var img = document.getElementById(id);
  var canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  var data = imgData.data;
  var Color Key = [data[0], data[1], data[2]];
  for (var i = 0; i < data.length; i += 4) {
    if (data[i] == Color Key[0] &&
        data[i + 1] == Color Key[1] &&
        data[i + 2] == Color Key[2]) {
      data[i + 3] = 0;
    }
  }
  ctx.putImageData(imgData, 0, 0);
  img.src = canvas.toDataURL('image/png');
}

convertColorKeyedImg('imgRole');
convertColorKeyedImg('imgPlane');
</script>

畫火球

畫火球主要有兩個步驟。

產生火焰圖。
以火焰圖作底圖，畫出彈性球形。

產生火焰圖的部份這裡略過，網路上有許多產生火焰效果圖的資料。這裡說明怎麼利用事先建好的火焰圖作貼圖，畫出彈跳的球形。這裡的作法還是一樣利用一個memory canvas，步驟如下。

建立一個memory canvas。
在memory canvas上根據扁平需求畫一個紅色ellipse。
取出memory canvas所有像素，把所有紅色像素替換為火焰圖貼圖裡對應座標的像素。
將memory canvas的內容畫到指定畫面位置。

程式片斷如下。

function drawFireBall(x, y, w, h, W, H, xSrc, data, len) {
  var canvas1 = document.createElement('canvas');
  canvas1.width = w;
  canvas1.height = h;
  var ctx1 = canvas1.getContext('2d');
  ctx1.fillStyle = 'red';
  ctx1.beginPath();
  ctx1.ellipse(w/2, h/2, w/2, h/2, 0, 0, 2 * Math.PI);
  ctx1.fill();
  var imgData1 = ctx1.getImageData(0, 0, w, h);
  var data1 = imgData1.data;
  for (var i = 0; i < w; i++) {
    for (var j = 0; j < h; j++) {
      var idx1 = 4 * (i + j * w);
      if (255 == data1[idx1 + 0] && 0 == data1[idx1 + 1] && 0 == data1[idx1 + 2]) { // red pixel.
        var idx = 2 * (xSrc + i + (h - j - 1) * W);
        var c16 = getValue(data + idx, 'i16');
        var r5 = (c16 >> 11) & 0x1f;
        var g6 = (c16 >> 5) & 0x3f;
        var b5 = c16 & 0x1f;
        data1[idx1 + 0] = Math.floor(r5 * 255 / 31.0 + 0.5);
        data1[idx1 + 1] = Math.floor(g6 * 255 / 63.0 + 0.5);
        data1[idx1 + 2] = Math.floor(b5 * 255 / 31.0 + 0.5);
      }
    }
  }
  ctx1.putImageData(imgData1, 0, 0);
  ctx.drawImage(canvas1, x, y);
}

其實中間那個判斷是否為RGB(255,0,0)的if是可有可無的，因為畫ellipse時，範圖外不屬於扁平球的部份的alpha為0，不會被畫出來。只是多了這個檢查可以少作些運算。

耐心烏龜 Patience

noreply@blogger.com (Waync Cheng) — Sat, 19 Mar 2022 15:29:00 +0000

有一次去看診的時候，因為等了好久等到有點快失去耐性，看完診花了不少時間。在回家的路上有感而發，想說不知道有沒有什麼可以訓練或培養耐性的方法。如果沒有的話，或者我自己可以作個APP來達到這個目的，最後就作了這個APP。

<玩玩> <Android>

一開始想到的不是烏龜，而是主畫面是一個泡泡。這個泡泡會愈來愈大，但很容易就破掉。比如不小心點了畫面、程式進入背景、有來電或收到訊息通知等等，都會讓泡泡破掉。程式的目的就是想辨法讓泡泡持續變大，也就是你愈有耐心的保護它，就愈成功。可能可以顯示一個存活時間，用來表示耐心度。

後來一邊考慮程式內容時，一邊把泡泡改成了烏龜。同時考慮到，如果這隻烏龜很容易就死掉，要用這種方式來訓練耐心似乎很難，甚至會有反效果。考慮到一次性的遊戲方式，以存活度來評價耐心度有難度，改變為養成性質的作法。現在不會死掉了，存活時間是累計制的。這樣子應該會比較容易讓人持續的去作這作事，長期下來應該就能提高點耐心吧。

改成養成性質的作法後，其它的設計就能對應調整。首先除了存活度(存活時間)之外，再加上一個等級。這個等級的定義，只是簡單的每次烏龜從左走到右就升級一次。等級每升一級，烏龜就長大1個pixel。同時等級也對應烏龜移動速度，LV10表示每10秒烏龜走1個pixel。以上是核心功能，其它還設計了幾個裝飾畫面的功能。如上方背景日夜變化、月相變化及顯示12星座等。

以下作重點說明。

背景連續山脈圖

背景的山是先建好一個div元素，以CSS設定背景水平重複。

// CSS.
#mountains {
background-repeat:repeat-x;
background-position:bottom;
text-align:
right;font-size:48px;
}

// HTML.
<div style="mountains">
</div>

重複的圖片則以一記憶體canvas畫了一個山型emoji後產生。

var mountains = document.getElementById('mountains');
var url = getCharImgUrl(32, '⛰️');
mountains.style.backgroundImage = 'url("' + url + '")';

function drawCharCenter(ctx, size, s, x, y) {
ctx.font = size + 'px Arial';
ctx.textBaseline = 'middle';
ctx.textAlign = 'center';
ctx.fillText(s, x, y);
}

function getCharImgUrl(size, s) {
var canvas = document.createElement('canvas');
canvas.width = canvas.height = size;
var ctx = canvas.getContext('2d');
drawCharCenter(ctx, size, s, size/2, size/2);
return canvas.toDataURL();
}

背景日夜變化

日夜變化是根據目前的時間來判斷是白天或黑夜，只是簡單的檢查目前小時來決定。

function isNight() {
var now = new Date();
var hour = now.getHours();
return 6 > hour || 18 <= hour;
}

function getDayNightColor() {
if (isNight()) {
return 'black';
} else {
return 'skyblue';
}
}

月相變化

月相是根據取得目前年月日計算得到，公式是上網google得到。

var now = new Date();
var phase = moonPhase(now.getFullYear(), now.getMonth() + 1, now.getDate());

function moonPhase(year, month, day) {
var lp = 2551443;
var now = new Date(year, month - 1, day, 20, 35,0);
var new_moon = new Date(1970, 0, 7, 20, 35, 0);
var phase = ((now.getTime() - new_moon.getTime())/1000) % lp;
return Math.floor(phase / (24 * 3600)) + 1;
}

月相圖則是根據計算得到的月相參數，再利用emoji內建的幾個月相圖作顯示。

function moonPhaseEmoji(day) {
if (1 <= day && 30 >= day) {
var emoji = ['🌑', '🌒', '🌒', '🌒', '🌒', '🌓', '🌓', '🌓', '🌓', '🌔', '🌔', '🌔', '🌔', '🌕', '🌕', '🌕', '🌖', '🌖', '🌖', '🌖', '🌗', '🌗', '🌗', '🌗', '🌘', '🌘', '🌘', '🌘', '🌘', '🌑'];
return emoji[day - 1];
} else {
return ' ';
}
}

12星座

12星座是根據目前月日，作簡單判斷得到。

var now = new Date();
var zodiac = getZodiacSign(now.getMonth() + 1, now.getDate());

function getZodiacSign(month, day) {
var astro_sign = "";
if (1 == month) {
if (day < 20)
astro_sign = "Capricorn♑";
else
astro_sign = "aquarius♒";
} else if (2 == month) {
if (day < 19)
astro_sign = "Aquarius♒";
else
astro_sign = "pisces♓";
} else if (3 == month) {
if (day < 21)
astro_sign = "Pisces♓";
else
astro_sign = "aries♈";
} else if (4 == month) {
if (day < 20)
astro_sign = "Aries♈";
else
astro_sign = "taurus♉";
} else if (5 == month) {
if (day < 21)
astro_sign = "Taurus♉";
else
astro_sign = "gemini♊";
} else if (6 == month) {
if (day < 21)
astro_sign = "Gemini♊";
else
astro_sign = "cancer♋";
} else if (7 == month) {
if (day < 23)
astro_sign = "Cancer♋";
else
astro_sign = "leo♌";
} else if(8 == month) {
if (day < 23)
astro_sign = "Leo♌";
else
astro_sign = "virgo♍";
} else if (9 == month) {
if (day < 23)
astro_sign = "Virgo♍";
else
astro_sign = "libra♎";
} else if (10 == month) {
if (day < 23)
astro_sign = "Libra♎";
else
astro_sign = "scorpio♏";
} else if (11 == month) {
if (day < 22)
astro_sign = "scorpio♏";
else
astro_sign = "sagittarius♐";
} else if (12 == month) {
if (day < 22)
astro_sign = "Sagittarius♐";
else
astro_sign ="capricorn♑";
}
return astro_sign;
}

繪文字填圖 Emoji Paint

noreply@blogger.com (Waync Cheng) — Thu, 23 Dec 2021 12:48:00 +0000

這個遊戲的靈感是源自兒子的學校課本裡面，有個叫不插電程式課的書本裡面得到的。書裡面有一類型的題目就是把圖畫裡的數字填上對應的色塊，全部填滿後就能夠得到一張馬賽克風格的圖案。

利用這個概念，再結合之前製作的繪文字刮刮樂的分類資料，使用emoji製作了一個馬賽克像素風的填圖小遊戲。

玩 / Android

底下是這個小遊戲的製作技術重點。

圖片馬賽克化

把圖片馬賽克化的原理很簡單，簡單的講就是：

先把整張圖片根據馬賽克大小作切割。
對每一塊切割下來的馬賽克圖塊裡面的所有像素的顏色計算平均值。
使用計算出來的平均顏色填滿馬賽克圖塊。

對所有馬賽克圖塊作同樣處理，這樣就完成了把一張圖片馬賽克化了，接下來底下說明一些實作細節。

1、繪文字填圖的馬賽克分為大中小三種尺寸，為了在手機上最後呈現的畫面尺寸大小適中，把canvas的大小設定為400x400px。為了方便計算，三種馬賽克方塊的大小分別為：16x16、25x25及40x40，16、25及40正好都可以整除400。在遊戲主選單最下方選擇馬賽克尺寸後，就會以這個大小對400x400尺寸的原圖作馬賽克化的切割。如果選擇最小尺寸的馬賽克，則原圖被切割成25x25個圖塊。如果選擇中等尺寸的馬賽克，則原圖被切割成16x16個圖塊。若選擇最大尺寸的馬賽克，則原圖被切割成10x10個圖塊。

2、計算每個馬賽克圖塊的平均顏色的方法很直接，就是對圖塊中每一個Pixel加總後，再除以Pixel總數得到平均值。需注意的是，加總再求平均的計算是要對顏色的RGB值各別作。最後把得到的平均的RGB值，再組成一個新的顏色作為整個馬賽克圖塊的顏色。

function sumRgb(data, x, y, cw, ch) {
var rgb = [0, 0, 0];
for (var i = 0; i < cw; i++) {
for (var j = 0; j < ch; j++) {
var idx = 4 * ((x + i) + (y + j) * canvas.width);
rgb[0] += data[idx];
rgb[1] += data[idx + 1];
rgb[2] += data[idx + 2];
}
}
for (var i = 0; i < rgb.length; i++) {
rgb[i] = clamp(rgb[i] / (cw * ch));
}
return rgb;
}

data是透過canvas的context2d.getImageData得到的，而cw及ch是馬賽克尺寸，一般cw=ch為正方形。而x及y是馬賽克圖塊在原圖中的左上角座標。注意在sumRgb最後對各別RGB值求平均時還作了一個clamp的動作。這個clamp其實是一個類似四拾五入的動作，目的是為了要減少最後整個原圖馬賽克化的顏色數量，讓調色盤的顏色數不要那麼多。

var CLAMP_EMOJI = 32;
var CLAMP_NUM = CLAMP_EMOJI;

function clamp(n) {
return CLAMP_NUM * Math.round(n / CLAMP_NUM);
}

3、整張原圖馬賽克化後，就可以根據所有馬賽克圖塊的顏色建立一個調色盤。再根據這個調色盤再把馬賽克化的原圖，轉換成數字謎題圖。

var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var col = canvas.width / cw;
var row = canvas.height / ch;
var colors = [];
for (var i = 0; i < col; i++) {
for (var j = 0; j < row; j++) {
var x = cw * i;
var y = ch * j;
var rgb = sumRgb(imgData.data, x, y, cw, ch);
ctx.fillStyle = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
var index = colors.indexOf(ctx.fillStyle);
if (-1 == index) {
colors.push(ctx.fillStyle);
}
}
}

勇者小白

noreply@blogger.com (Waync Cheng) — Sat, 21 Aug 2021 02:59:00 +0000

勇者小白是一個簡單的冒險小遊戲，主要由三大系統構成：任務系統、對話系統和背包系統。由小遊戲和過場劇情對話把遊戲故事串連起來，目前小遊戲數量己經有30個，還在持續增加中。這些小遊戲和故事，大部份由我設計製作，有些是和兒子一起設計由我製作。

從我兒子幼兒園開始就就只會讓小孩玩勇者小白，後來女兒也開始玩了。其間也試著引導小孩幫忙設計內容，雖然效果還不明顯，不過多少也為生活增加點樂趣。遊戲裡面的資源儘量都是網路上的免費資料，而有些是自己簡單製作的，但也有些就是借用的，那天有問題時再作更換。

總之，勇者小白會持續不斷的增加內容。

試玩 / Source

;-----

很久之前我就想要製作一個冒險類的小遊戲，所以某天靈感來了很快的寫了幾頁的故事大綱。

早上起床的時候發現小白不見了
一出門外星人巨大的太空船蓋住整個天空，廣播說要你們好看
跟爺爺說明，爺爺說出一段古老的傳說，需要3把神兵利器才能把外星人打跑，分別是(xx,yy,zz-要命名)
突然發現爺爺用來抓癢的手牌不求人是其中一把神兵(布)-獲得(布)
爺爺說張媽媽家有另一把神兵，於是去找張媽媽
張媽媽在她家門口曬衣服，她說她家的傳家之寶封印在洞穴內，被祖先保管著要通過考驗才能取得
到洞穴，用手牌不求人解開封印，進去後通過考驗(倉庫番)，和祖先對話取得寶箱，打開是空的...
回去找張媽媽說明-原來她把傳家之寶拿來當曬衣杆-獲得(石頭)
從張媽媽得知另一把神兵是由小香家保管的
小香正在作美勞作業，(取得布和石頭前她只會在門口玩)，發現她桌上有一把美勞用的剪刀，不過要拿棒棒糖來換
跑到雜貨店去，結果沒有錢，回去找爺爺要5塊再到雜貨店買棒棒糖(要今天的零用錢)
拿著棒棒糖去和小香換到剪刀，但是沒有神力不能用
此時小香爸爸出現，他說他的傳家之寶是一段咒語，可以附與剪刀神力變成神之剪刀，不過還缺少桿子的部份
到搖滾阿凱家去，向他借打鼓棒，不過要先幫他找回偷跑的小烏龜
找小香爸爸但少了烏龜的眼淚才能施咒，回去找阿凱的小烏龜
需要一個瓶子到雜貨店玩轉蛋取得(找爺爺要但今天給過了，雜貨店老闆給一個打工機會賺5塊)
親了小烏龜一下讓他大哭，趕快用瓶子裝獲得烏龜眼淚
再回去找小香爸爸,組合成神之剪刀-獲得(剪刀)
到飛碟處，用猜拳打倒魔王
警報響起,飛碟要爆了，趕快進到機艙，解除爆炸裝置(解謎)
魔王：謝謝你，小白。你真是個勇者！
過關

同時也對想像的gameplay作了幾個重點記錄。

室外地圖 – 地上地圖由3x3個畫面構成，每個畫面為640x480大小，但遊戲地圖會更小(包含其它UI部份)；走到地圖邊緣時會整個地圖捲到下一個畫面，而不使用全地圖捲動方式
室內地圖 – 地圖會有建築物，有些可以進入，進入後就是室內地圖，室內地圖固定都為一個畫面大小
走路 – 勇者小白(你)，可以在全地圖上自由行走，即便相關任務還未達成；走路方式為4方向，以pixel為單位
和NPC說話 – 任務的執行必須利用和各個NPC對話來達成；應任務需求會有給NPC任務物品及獲得物品
猜拳 – 為本遊戲的攻擊方式，必須取得3把神兵後才能出對應的拳；敵人在地圖上行走時，身上會有不斷變換的猜拳屬性，進入攻擊範圍後出拳，如果是剋制屬性，對方不能動作，如果被剋，你不能動，同屬性則沒有反應；出不同拳會有不同動作
主角被敵人碰到會損血，血會隨著時間自動回復，最多3滴，死掉回到自己家後繼續遊戲
敵人血沒了會被從天空打下來的光束吸回太空船
魔王血沒了，全破

還有出場人物列表。

勇者小白
爺爺
張媽媽 – 一直在門口曬衣
小香妹妹 – 在門口玩/在家作美勞作業
小香她爹
雜貨店老闆
搖滾阿凱 – 打鼓(搖頭)
小烏龜

以及建築物列表。

教堂 – 裡面有壁畫，可觀賞片頭動畫
你家 - 門口旁有個狗屋，露出個狗頭..
張媽媽家
小香家
雜貨店
阿凱家
封印洞

甚至還寫了幾段開場劇情設計。

Title 很久很久以前，邪惡的外星人來到地球打算要征服世界，勇者村的三個勇者拿著傳說的神兵勇敢的去挑戰魔王，最後三位勇者終於打敗了魔王。某年某月的某一天，邪惡的外星人搭著巨大的太空船來到勇者村上空，要勇者村的村民們把勇者交出來，因為邪惡的外星人們相信，要征服世界就必須先征服勇者村。
起床小白：爺爺，為什麼我們村要叫作勇者村？爺爺：小白啊，總有一天你會了解的。小白：什麼時候呢？爺爺：總有一天啊...先不談這個了，去把我的無敵不求人拿來給我抓抓癢。小白：不求人就不求人，為什麼叫無敵不求人？爺爺：這是我們家的傳家之寶，以後我還會傳給你，總有一天你會了解的... 小白：...
外星人來到

不過寫了這幾頁的word文件之後，一方面對於實際如何表現後來一直沒什麼靈感，一方面也沒有美術和企劃的支援，所以就一直放著沒動。又過了幾年後才又心血來潮，請老婆幫我畫了幾張勇者小白和小狗小白，然後我自己也試著開如規畫了一下地圖的格局。總算有個開始，只不過開個頭後又拖了一陣子。

最後終於用good編輯器開新專案，根據上面的地圖設計，首先編輯了一張大地圖。因為最一開始的想法是想要模仿薩爾達傳說的地圖gameplay，所以把大地圖用了6x4個640x384個畫面大小的地圖拼起來，總大小是3840x1536，作出來的地圖如下。

地圖編好後，也寫了簡單的script可以用滑鼠或鍵盤來捲動檢視地圖。不過一時想不到怎麼在上面簡單的進行遊戲，所以又再編了遊戲title和一張地圖，把這三個場景串起來體驗看看。

試來試去想來想去，好像無論如何總是很難作出預想的效果，所以又卡關繼續放著。過一陣子後再拿出來看的時候，想說不如先全部化簡把作不到的都先去掉，不要在地圖走路先作遊戲故事過程，以後再看怎麼作改良。同時一方面也考慮到，這個遊戲或者可以作成以簡單的小遊戲來串連劇情。同時因為都是簡單的小遊戲，之後也可以給兒子玩。結果一開始就作了兩個很小的遊戲，一個是撿木頭另一個是敲木魚。

再來設計了一個簡單的對話系統，可以顯示圖片和文字，這樣就可以表現劇情了。所以在開頭插入了另一段劇情，用來銜接進入這兩個開頭的小遊戲。

接著就是第一張小地圖，這是包含開頭小遊戲的勇者山地圖。勇者山地圖的模式，也確立了勇者小白的地圖形式。地圖上的物件原則上都是靜態物件，點擊它時會顯示對話過場或者是切換畫面。地圖上的物件點了要作什麼由任務系統控制，每個物件會有個狀態值其實就是狀態機的值，根據故事進行這個值會變化，點擊後不同狀態值就值行不同對話script或切換場景。

如圖一開始勇者山有3個場景物件，分別是勇者山、商店和村落。點擊村落可以玩化緣小遊戲賺點錢，點擊勇者山或商店則視情況會有不同劇情。另外這時也加了一個簡單的背包系統，用來顯示己獲得的物品，點擊時會顯示一個簡短的說明。地圖ui上也顯示了目前擁有的金錢數量。

接著又加了二個場景物件，教堂和工地。教堂其實是吳神父的按摩店，是切換至夢中世界勇者村的入口，而工地是作為未來建廟的保留地。預計以後廟蓋起來後，在裡面可以玩各種可以賺大錢的小遊戲，比如說募功德款、廟會進香團等等。

第一次進入夢中世界時，插入了一段劇情，把以前寫的一篇也叫作勇者小白的極短篇小說的劇情整合了進來。在這裡加入了豬小妹的打小強小遊戲，以及小白的爺爺也登場了。

作到這裡，也把之前只作了起頭的小遊戲加進來。把勇者山的商店老闆沒東西可以賣了之後，改成賽魂場用來賭注比賽賽魂。

第二次進入教堂吳神父按摩店，舒服到睡著後又進入夢鄉。初次進入勇者村場景時會有一段過場，用來表現原始設計的外星人降臨的情節。

勇者村的教堂其實是另一張小地圖，裡面有小白的爺爺和教堂圖書館。教堂圖書館是背包系統的另一個表現，只不過只會顯示背包裡的書籍物件。點擊書籍的時候，會顯示比較長的說明文字，提供一些額外故事或過關訊息。同時小白爺爺的設計，是一個攻略提示的功能。在勇者村的世界裡，只要不知道下一步怎麼辨的時候就去找小白爺爺，小白爺爺就會給你提供簡單的提示。

在勇者村裡，隨時可以找張媽媽玩曬衣服小遊戲，賺點零用錢。

勇者村左邊地圖是一個猜拳小遊戲，必須收集三種猜拳武器才能過關進入下一個場景。右邊地圖是搖滾阿凱的家和池塘，再右邊是洞穴入口地圖。

洞穴入口一開始無法進入，必須先取得過關道具手電筒才能前進。進去之後還會遇到一道有密碼保護的門，必須知道通關密碼才能進入。解決了一些簡單的問題後，最後可以獲得猜拳武器。

池塘小遊戲是一個找小青蛙的簡單遊戲，那時候作出來這個小遊戲，正好給在念幼兒園的兒子還有更小的女兒玩，讓他們練習一下點擊的操作。其實上面的猜拳小遊戲也是同樣的目的，都是很簡單的設計，很適合給小孩玩。

不過搖滾阿凱的小遊戲我一直沒有靈感，直到有一天我看到兒子的塗鴉，是一個機械設計圖，題目就叫作超級老鼠拍打器。內容是這樣子的：

按下紅色按鈕拍打器跑出來
按下綠色按鈕球跑出來
按下黃色按鈕起士跑出來
老鼠跑來吃起士
老鼠踩到球跌倒
拍打器打下來打死老鼠

我一看立刻稱讚兒子幹的好，正好適合拿來作成搖滾阿凱的小遊戲，我立刻就以此構想設計了一個小遊戲，另外還特別作了一本書放在勇者村教堂圖書館作為紀念。

集滿三種猜拳武器之後，就可以通過猜拳小遊戲去和外星人用猜拳作戰鬥。

打敗外星人之後，這時候如果回到勇者山，就可以開啟財神廟的功能了。原本打算進入廟後可以玩各種賺錢的遊戲，不過一時想不到好點子，所以簡化成類似小瑪利的小遊戲。

作到這裡，故事內容大致和原始的設計走向差不多。雖然製作過程也是花了些時間，但遊戲內容實在太短了，一下子就玩完了。所以接著又增加了地底世界的設計，入口一樣從洞穴入口進入。

一進入地底洞穴會先經過一個地底迷宮，這是為了向薩爾達夢見島致敬，所以迷宮的過關路徑也和gb版夢見島蛋迷宮路徑一樣。過關後會進入地底王國的世界，這裡面就放了7個小遊戲。

在地底王國世界裡面增加了三個長老事件，其中兩個可以在勇者村裡完成，而另一個則需要進入到拳頭星的世界後才能完成。要去到拳頭星需要先解決一些問題，經由外星人的幫忙上到太空。進入拳頭星之前，會先經過一個擊破隕石的小遊戲，過關後再進入拳頭星。

借用天線寶寶的圖，拳頭星裡面有4個小遊戲，每過一關可以獲得不同顏色的毛。4個小遊戲分別是：拼圖小遊戲、記憶小遊戲、影子小遊戲和彩虹小遊戲。收集4種毛可以找比比博士，合成另一個過關道具S擦布，用來解地底王國長老的任務。

比比博士的電腦，其實是虛擬電腦遊戲世界的入口。不過現在只作了個開頭，遊戲內容還在和兒子一起設計中。

獲得S擦布的事件同時也開啟了可以進入海洋世界的開關，從拳頭星回到勇者村後就可以出海了。出海後可以玩釣魚小遊戲，之後可以把魚賣給漁夫或其它人賺點零用錢。

大海上有兩個小島，其中一個是動物園。這個原本是一個很小的遊戲，作給小孩們玩。點了動物圖案，就會發出對應動物叫聲，也把它整合進來勇者小白了。一開始是把動物園放在勇者山地圖，後來搬到勇者村世界的小島上。

另一個小島是我們這一家之島，其實就是我們一家4口的對應。我想要給我們家每個人作一個對應的小遊戲，現在完成了3個。

因為我老婆常在找她的拖鞋，所以我就作了一個找拖鞋的小遊戲給她。兒子雖然年紀還小，但我希望他從小養成時間觀念，所以作了一個時鐘小遊戲給他。女兒現在喜歡唱歌跳舞，所以作了一個簡單的音樂節奏小遊戲給她。至於我的遊戲，目前預計要跟拳頭星比比博士的電腦串連起來，不過還沒有進行。

(繼續更新)

訊息刮刮樂 Message Scratch

noreply@blogger.com (Waync Cheng) — Thu, 03 Jun 2021 15:39:00 +0000

這個專案跟繪文字刮刮樂EmojiScratch使用的核心技術是相同的，其實這個專案才是最早的靈感而建立的，只是因為在研發過程中嘗試了一些UI上的設計，但一直覺得不是很滿意。結果作到一半又基於同樣的技術產生了繪文字刮刮樂這個遊戲，也很快的製作完成，所以反而繪文字刮刮樂這個遊戲先release了，而訊息刮刮樂斷斷續續的修修改改直到這幾天才release。

刮刮樂的製作相關技術可參考繪文字括括樂的記錄，而這個專案比較值得記錄的是關於QR Code掃瞄和顯示的功能。本專案的QR Code程式庫是使用zxing-android-embedded，這是ZXing Barcode Scanner的精簡版本。

一開始的時候我並沒有直接整合QRCode程式庫，而是因為本來手機上己經有安裝BarcodeScanner了，所以可以直接在自己的APP裡面透過Android Intent的方式呼叫BarcodeScanner提供的掃瞄和顯示QRCode的功能。

呼叫BarcodeScanner的掃瞄QRCode功能很簡單，如下：

顯示QRCode也同樣簡單，如下：

注意到上面二段code都是用try包起來，如果因為手機上沒有預先安裝BarcodeScanner無法使用功能的話，就可以幫user開啟google play下載頁面，讓user自行安裝。

;-----

在release之前以上面的作法快速且簡單的讓APP可以有掃瞄及顯示QRCode功能是很好，但當要真正release至google play上時，就會有違反google play policies的可能。因為在APP裡會跳出至google play的其它APP安裝頁面，會有虛假廣告的疑慮。所以這時候得要自己把QRCode程式庫整合進APP裡。

選擇zxing-android-embedded作為QRCode程式庫，除了因為它是個精簡版的程式庫，最主要還是因為它的整合非常簡單，按照它的readme上的說明，只要幾行就搞定。

如readme上所說明的，只要在build.grandle裡加上如下幾行，即完成整合。

接下來按照readme上的說明，透過使用IntentIntegrator就能很簡單的呼叫掃瞄QRCode的功能。

而使用BarcodeEncoder則可以產生一內含QRCode的Bitmap物件，有了這個Bitmap就可以指定給UI上的ImageView顯示QRCode了。

nature online 的架構

noreply@blogger.com (Waync Cheng) — Wed, 12 May 2021 03:02:00 +0000

nature online, no是以多人連線版本吃金幣的人為基礎所建立起來的一個網路架構實驗平台。

雛形版本功能如下：

- 分散式的網路伺服器架構，後端使用mysql。

- 使用2張測試地圖，隨時可以任意切換至任意地圖任意位置。

- 地圖物件有二種:tree,bug。

- tree物件應用生命遊戲規則生成及更新。

- bug物件應用基因算法活動，食物為tree物件。

- 自動同步client可見視野內的內容。

- 使用good為client成象引擎。

新增功能如下：

- 可監控,動態增減server節點。

- 新增地圖物件:bird,base,ship。

- bird物件應用鳥群算法(boids)控制。

- base物件對應每一個帳號在地圖上的基地。

- ship物件為bot/testclient自動從base出發前往地圖採集tree物件得到log資源。

- 調整自動同步client可見視野內的內容機制提升效能。

no底層是以smallworld2的Bigworld架構為基礎再往上架構出來的一個分散式game server架構，每一個server都是一個Bigword節點，設定好conf後Bigworld底層會自動建立並保持節點關係。底下是架構圖：

center：這是所有server的server，所有server都需要連線到它。center作為一個中央控制server，可以作其它server的訊息轉發者，也能夠控制其它server的開關。
login：負責轉發client的登入，因此每一台login都知道所有其它game的存在。login登入center後，即註冊自己讓client可以在登入時隨機選一台login作登入。
game：game負責gameplay功能實作。client由login登入game時，是由login幫client隨機選擇一個game登入。
client：client登入時由指定url取得一隨機login位址，登入login後再由login轉發至隨機一台game。client登入game後即和login斷線。
db：db負責作為no架構裡mysql的代理，所以狀態讀寫都針對db，再由db對mysql讀寫。client登入game後，game即向db讀取和此client有關的帳號資料。遊戲過程中有任何變化需要儲存即存入db，再由db批次存入mysql。
account：所有帳號和db/mysql的關聯以及是否online等資訊由account記錄維護。client登入game後，game也會向account註冊此client帳號目前所在game位置。若是新帳號登入，則account會指派此新帳號，以後此帳號的資料會由那個db負責存取。
map：client畫面上看到的物件，如tree,bug,bird,base,ship等全由map產生維護。

以上是no節點的大略介紹。

;-----------

每個server節點程式就是一個console程式，所以執行起來後在畫面上都以文字模式顯示狀態及訊息，同時也能以簡單的命令操作server功能。不知道server支援什麼指令時，只需輸入help即可得到簡單的指令列表及說明。

如圖所示的certer help列表可以看到，center有help,info,exit,shutdown,remote,fork等指令可使用。前3個指令help,info,exit是所有節點都支援的common指令，不同server節點可能會提供不同的特有指令，而shutdown,remote,fork是center特有的指令。server負載過大可用fork新增節點，要關機時用shutdown指令一次全部關機，就不必一個一個server關不遺漏。

雖然info是每個server都支援的指令，但根據server類型不同，顯示的info內容除了header格式相同外，其餘內容也會有不同。如上圖center的info就包含每一個連線到center的節點的info，而如下圖map的info內容就包含地圖info。

附帶提一下，center同時也內建web service，所以center的console內容和操作也可以透過browser對center作存取。

;------------

server程式開發最重要的就是穩定，想確保server穩定最簡單的方法是作該作的測試和夠多的測試。所以從一開始server雛形建立的同時，我也同時會建立一個testclient雛形。一開始也是一個console程式，後來再建立gui程式。

testclient的雛形就只是一個可以連線登入到game的console程式，可以顯示送到server和收到server的訊息內容這樣子就夠了，這樣簡單的程式就能讓整個server開發動起來，以後再以這樣的基礎繼續加功能繼續改良。最重要的是，有了testclient就能很方便快速的debug。

當server開發到一個程度後，想要開始作一點簡單的壓力測試時，可以很簡單的用batch file重復多開幾個testclient就行了。寫2個批次檔，RunTest1.bat一次執行一個testclient，RunTestN.bat可以透過RunTest1.bat用for迴圈一次執行多個testclient。

如下所示：

這個方法很簡單很暴力，初期這樣作簡單的壓力測試還可以，中後期要作比較大量的壓力測試時就有問題了。因為每一個testclient執行一個console，100個testclient就100個console，電腦還勉強可以。但當開了200,300,400..到一個量之後電腦資源就被吃光不行了，所以後面勢必要改成一個testclient console可以支援多個連線才行，這樣就可以作更大規模的壓力測試。

;------------

一開始為了簡化設計client登入game後，每隔一段時間由game自動替這個client向map請求他的視野範圍內的可視物件狀態資訊。map回應視野內的物件資訊給game後，game再根據簡單的狀態檢查，只傳送client視野內有變化的物件資訊給client作畫面更新。

地圖物件的更新有二種類型，一是以當前位置狀態更新給client，如tree,bug,bird,base等。另一種是有起點和終點的長距離移動物件，如ship。第一種類型物件的更新資訊會不斷從server傳至client，讓client有機會可以更新畫面。第二種類型物件只有在需要的時候才更新給client，其餘時間由client自行根據移動物件的起止點作內插更新。

這也是很簡單又暴力的方法，當client不多時還好，但當client多起來的時候server之間的封包量非常大，server光是要處理這麼大的封包就可能來不及消化，以致於server反應愈來愈慢。game這邊定時發給map的請求是暫時方便測試的作法，所以會有大量重覆請求及大量多餘封包。以後需要改成其它機制，這是接下來要作的改良。

繪文字刮刮樂 Emoji Scratch

noreply@blogger.com (Waync Cheng) — Tue, 29 Dec 2020 15:09:00 +0000

使用html5+javascript+emoji，做了一個給小孩玩的刮刮樂小遊戲，讓他們學習簡單的英文單字。如果在chrome上使用，還可以利用tts英文發音唸出單字，讓小孩也能練習英文聽力及發音。

玩 / Android / Github

底下是開發這個遊戲的一些技術重點紀錄。

1，刮刮樂的部分是使用html5的canvas製作。原理是使用兩個canvas，一個作底圖圖層(c0)，一個做為可被刮除的前景遮罩圖層(c1)，c1預設不可見為一記憶體圖層。把c0的原始圖型內容事先存起來作為後續更新使用，並在c0上安裝onmousedown,onmouseup及onmousemove，滑鼠滑動時以在c1上畫粗直線的方式模擬出刮除效果，然後再以新的c1前景遮罩結合事先儲存的c0底圖重新合併更新畫面，這樣就能作出刮刮樂的效果。

c1上的刮除效果是利用將2d context的globalCompositeOperation設為'destination-out'模式，並且strokeStyle設為'rgba(0,0,0,1)'，以這樣子的設定在c1上畫線時，得到的是一個擦除的效果，這樣就作到刮刮樂刮除的效果。

c0.onmousemove = function(e) {

if (mouse_down) {

ctx1.strokeStyle = 'rgba(0,0,0,1)';

ctx1.globalCompositeOperation = 'destination-out';

ctx1.lineWidth = 18;

ctx1.lineCap = 'round';

ctx1.beginPath();

ctx1.moveTo(last_x, last_y);

ctx1.lineTo(x, y);

ctx1.stroke();

last_x = x;

last_y = y;

updateCanvas();

}

更新畫面的方法是以getImageData從c1抓取整張前景遮罩，對每一個pixel檢查如果alpha值是0表示這個點己刮除，則這個點取c0的同一位置的顏色值，否則表示這個點還未刮除需要取c1的前景遮罩顏色。所有pixel都處理完成後，再把整個新的合併事先儲存的c0的背景底圖內容的imagedata透過putImageData畫到c0上更新。

2，如果是使用chrome browser來執行這個遊戲，則能夠利用chrome的文字轉語音(TTS)功能唸出英文單字。這裡是透過window.speechSynthesis及SpeechSynthesisUtterance來完成這個功能，如下程式片段所示。

function trySpeak(s) {

if (window.speechSynthesis) {

var msg = new SpeechSynthesisUtterance(s);

if (msg) {

msg.lang = "en-US";

window.speechSynthesis.speak(msg);

}

3，為了讓括括樂canvas太大在計算時計算量跟著太大，所以把大小限制為300x300，但這樣一來畫面顯示的時候又會顯的太小。所以為了讓這個300x300px的canvas可以填滿畫面，需多作一點微調。

首先在html內的viewport屬性就把它剛好設為300px，讓畫面寬度剛好符合300px。另外記得把body預設的margin和padding都設為0，才不會不小心多出其它px，讓canvas的300px被切掉。

<head>

body {margin:0;padding:0;}

...

</style>

...

</head>

如果是在android裡用WebView來作顯示時，需要多作點參數設定，確保view可以填滿畫面。

WebView wv = findViewById(R.id.webView);

wv.getSettings().setLoadWithOverviewMode(true);

wv.getSettings().setUseWideViewPort(true);

最後如果是在一般browser裡顯示的話，為了讓畫面顯示比較符合原始設計，使用iframe把原始html包裹起來，大小設定可以包含括括樂canvas即可。

4、遊戲內以表格事先編好有那些emoji的資料，但因為這個遊戲是以web的方式來呈現，而在不同裝置上的browser呈現的emoji可能都各不相同，甚至有些emoji是不支援無法顯示的。所以需要在遊戲前先把那些不支援無法顯示的emoji挑選出來，只是目前沒有什麼標準的方法或api可以作這樣的檢查，所以這裡用一個間接的方式來作檢查。使用的方式是試著把要檢查的emoji畫到一個作為檢查用的canvas，這個canvas的大小只要設為1個pixel大小。如果這個canvas上面有畫出東西(alpha值不為0)，那麼就表示這個emoji是可顯示的，否則就當作它無法顯示。當然用這種方式不能保證100%正確有效，但至少是個可行的辨法，可以避免在emoji不支援時顯示出一個X。

function supportsEmoji(ch) {

const ctx = document.createElement("canvas").getContext("2d");

ctx.canvas.width = ctx.canvas.height = 1;

ctx.fillText(ch, -4, 4);

return ctx.getImageData(0, 0, 1, 1).data[3] > 0; // Not a transparent pixel.

}

C/C++遊戲程式透過Emscripten編譯為javascript移植成web版

noreply@blogger.com (Waync Cheng) — Sun, 12 Jul 2020 15:20:00 +0000

最近一兩周利用空檔時間將過去作過的幾個小遊戲，改版成簡單的對應的web版。原來的程式底層都是使用C/C++實作，透過Emscripten將原來的程式build成javascript，然後再結合web應用完成簡單的移植。因為原來的程式一開始在實作時就幾乎是可以跨平台的，所以移植很順利很快。我目前使用的Emscripten是1.35.0版本，因為只是用作移植測試目的，自從安裝後就沒有再更新過。

完成移植的遊戲分別是：

移植的基本原則很簡單：

首先確定原來的C/C++程式可以在Emscripten的command line環境下編譯。
再來定義一些API可以讓html綱頁裡的javascript呼，這個部份更多細節可以參考官方網站的文件說明。
C/C++讓javascript呼叫的API定義好後，也編譯成功了。就可以先用printf的方式作簡單的測試，測試方式也很簡單。如下圖的例子，是一個簡單的將兩個數字相加並回傳和數的cAPI cAdd。在mainl裡用一個printf作簡單的測試，然後在cmdline環境下編譯成功後，透過nodejs來執行觀察結果是否正確。
API初步沒有問題了，然後就可以真正撰寫些code來呼叫這些API，主要方式是在javascript裡透過Module.ccall來呼叫我們的API。Module.ccall的第一個參數是API的名稱，第二個參數是API的回傳值類型，第三個參數是API的參數列表類型，第四個參數是參數列表。在我們的例子裡，API名稱叫作cAdd，回傳值是一個數字類型，參數列表是兩個數字類型，輸入1和2。結果用一個alert顯示出來，正確答案是3。

透過以上幾個簡單的原則，很容易就可以把一些原本用C/C++寫成的程式，改版成網頁版。

Good Game Editor 1.6.4

noreply@blogger.com (Waync Cheng) — Tue, 08 May 2018 17:13:00 +0000

改良關卡編輯器(LevelEditor)中Dummy物件圖示。
地圖物件(Map)或精靈物件(Sprite)只有在實際出現在畫面中時才載入貼圖。
關卡編輯器(LevelEditor)點擊物件階層樹上的物件時畫面立即捲動至該物件。
關卡編輯器(LevelEditor)中物件顯示不可見狀態圖示若父物件為不可見狀態。
Util新增Good.GetScreenPos計算物件銀幕絕對座標。
修正取得色塊物件大小尺寸的錯誤。
一個DrawCall最多支援一次畫1024個物件。
新增Graphics.GenCanvas、Graphics.KillCanvas支援建立及刪除虛擬畫布。
新增Resource.UpdateTex支援以虛擬畫面更新貼圖資料。
Graphics.FillRect、Graphics.DrawImage及Graphics.DrawText支援繪至虛擬畫布。

[ 下載 ]

Good Game Editor 1.6.3

noreply@blogger.com (Waync Cheng) — Tue, 10 Oct 2017 16:10:00 +0000

* 最佳化色塊繪製方式大幅提升繪圖效能。
* 修正FPS計算顯示

<Download>

Good Emscripten Porting

noreply@blogger.com (Waync Cheng) — Sun, 25 Jun 2017 16:52:00 +0000

最近試了一下Emscripten將good編譯成web版本，也就是透過Emscripten使用LLVM技術將C/C++編譯成javascript，這樣就可以在browser上執行了。

一開始先不管圖形顯式的話，移植都還算很順利，可以在下方看到接上trace log之後表示功能移植完成。接下來使用OpenGL版本的繪圖模組來作成像移植，不過這部份不是很順利，只有色塊可以正常顯示，圖形就都無法正常顯示出來。可能是我的OpenGL版本的繪圖模組太老舊了，Emscripten沒辨法100%相容支援，最後沒辨法只好將OpenGL版本的繪圖模組換成SDL版本的繪圖模組，因為SDL是Emscripten預設內建支援的成像引擎，結果圖形就能正常顯示了，只不過缺點是SDL版本的繪圖模組功能很陽春，很多像是縮放旋轉等功能沒實作，因為是使用SDL1。

不過還有個問題，預設參數編譯出來的js檔有10M，太大了。但如果加上-O2之類的最佳化編譯選項後，結果會造成無法執行(或者是載入太久?)。如果改成使用wasm編譯參數就可以配會-O1以上最佳化參數，編譯出來的檔案再加上使用Closure Compiler去除空白字元等，大小就會小於5M。

底下是測試連結。

Test

這個測試連結同時也以php簡單的實作了上傳及表列good檔案，以及執行選取的good檔案。

Good Game Editor 1.6.2

noreply@blogger.com (Waync Cheng) — Sun, 18 Jun 2017 15:35:00 +0000

* 修正播放器(In Editor Player)顯示貼圖資訊的問題。
* 修正關卡編輯器物件樹點擊關卡物件程式當掉的問題。
* 新增Good.GenObjEx支援從外部資源包(External Good Package)生成物件。

Download

戰鬥象棋

noreply@blogger.com (Waync Cheng) — Sat, 29 Apr 2017 17:33:00 +0000

這是個休閒放置類型的即時象棋戰鬥小遊戲。(Android下載) (src)

* 共有六種不同兵種可以訓練
* 戰鬥型態有近戰型及遠距型
* 兵種有攻擊型及輔助型
* 每一兵種有二種技能
* 無限關卡可以挑戰
------------------------------------------------

底下是演化圖...

===========================

底下是戰略模式玩法的新版本，目前功能己完成測試調整中，更完善後就會發佈。

- 新增戰略地圖，共24個城市
- 共10個玩家，其中9個AI
- 目標為佔領所有城市

Good Game Editor 1.6.1

noreply@blogger.com (Waync Cheng) — Thu, 20 Apr 2017 23:10:00 +0000

* 新增可以Undo關卡的寛高。
* 修正關卡編輯器(LevelEditor)顯示格點的效能問題。
* 新增可以指定關卡的位置屬性。
* 新增在狀態列上顯示關卡編輯器(LevelEditor)目前寛高及左上角位置資訊。
* 修正關卡編輯器(LevelEditor)中點擊貼圖物件右下角範圍選取小工具無效的問題。
* 修正當物件數量太大時造成當機的問題。
* 修正動作編輯器(Sprite Editor)Undo時當機的問題。
* 修正Good.IsAnimPlaying不能正確工作的問題。
* 修正Good.GenObj生成關卡資源內的子物件時沒有設定指定script的問題。
* 播放器FPS資訊新增顯示目前物件數量及最大物件數量資訊。
* 播放器只在畫面內容有變更時才重繪畫面。

<Download>

多人連線版本的吃金幣的人

noreply@blogger.com (Waync Cheng) — Sun, 19 Feb 2017 07:28:00 +0000

吃金幣的人是對基因算法的一個研究和實驗，主要是資料及算法上的研究和測試。後來使用good的繪圖能力把它圖形化，同時測試及擴展good的整合能力。現在再進一步把它和網路底層作結合，建立一個新的實驗平台，命名為nature online。

和good一樣建立no的目的是為了創造一個可以讓我平常利用空間時間來作研發和實驗的平台。no整合了所有到目前為止所作的小實驗和研究。主要的目標是研究分散式網路遊戲的架構及模擬生態系統。

目前具備的功能:
- 分散式的網路伺服器架構，後端使用mysql。
- 使用2張測試地圖，隨時可以任意切換至任意地圖任意位置。
- 地圖物件目前有二種:tree/bug。
- tree物件應用生命遊戲規則生成及更新。
- bug物件應用基因算法活動食物為tree物件。
- 自動同步client可見視野內的內容。
-使用good為client成象引擎。

下階段的目標是持續底層研發及增加更多種類的物件。

;=========================

以下二件事是需要特別記錄的。

A.
首先tree物件的更新決定以生命遊戲的規則來作更新及生成，規則沒什麼問題，問題是數量和速度。如果是像good內建的life範例，那相當於16x16的地圖格子大小，總數也才256格，每次更新時全訠256格都掃一次也沒什麼問題。不過當地圖變成像no那樣是500x500或更大時，問題就出來了。每次要掃那麼多的格子，速度就成為一個問題了，而且server每次更新不只是要更新tree物件而己，還有其它工作要作。

一個簡單的解決方法是只檢查需要檢查的格子。

1,記錄目前有那些存活的格子
2,根據存活的格子推算有那些格子在下一世代可能產生狀態變化,可能有狀態變化的格子也就是存活的格子的周圍8個空格子
3,下一世代只需計算(目前存活格子+可能產生狀態變化的格子),其它的格子都可以忽略不看

假設目前存活的格子是10000個，這10000個格子周圍總共30000個空格子，那麼下一世代只需計算40000個格子，而不是全部250000個格子。數量大大的減少了!

B.
bug物件是以基因算法為基礎來製作。和吃金幣的人一樣，假設基因的編碼是根據上下左右中5個格子(環境變數)共3種不同狀態，基因長度為243。現在的問題是，假設過了一段時間之後，要改變編碼需要檢查的格子數或狀態數，這樣一來原本之前花時間演化出來的基因就會無效。因為新舊編碼方法不同產生的基因長度是不同的，二者無法一一對應。雖然舊的編碼方式的基因可以作為新編碼方式基因的一個子集合被包含，但是存取的方法必須改變，否則無法相容。

一個簡單的解決方法是另外維護一個編碼對照表，這樣即使基因的長度擴充了，舊的基因的位置還是不變可以向下相容。

1,建立<狀態編碼,基因位置>對照表
2,分別處理二種不同的擴充基因的狀況
* 檢查格子數擴充
* 檢查狀態數擴充

討論檢查格子數擴充的狀況。

0 0 [0] 0 [0 0] idx0
1 0 [1] 0 [0 1] idx1
1 0 0 [1 0] idx2
1 1 0 [1 1] idx3
1 0 0 idx4
1 0 1 idx5
1 1 0 idx6
1 1 1 idx7

假設現在只看一個格子且狀態只有0和1二種，如最上表最左行所示，基因長度為2，基因的索引位置為0和1。現在新增一個格子，每個格子一樣有二種狀態，基因長度變為4(2^2)。請看上表中間的部份，列出4種可能的狀態編碼，中括號標出來的[0]和[1]為一個格子的狀況的可能編碼，這是需要在基因擴充時保持不變且向下相容的部份。同樣的再增加一個格子，總共可能的編碼變為3^2=8。如上表右側部份列出所有可能編碼，中括號標示出來的部份[00][01][10]及[11]是必須保持不變向下相容的。

討論檢查狀態數擴充的狀況。

0 0 [0 0] [0 0] idx0
0 1 [0 1] idx1
1 0 0 2 idx2
1 1 [1 0] idx3
[1 1] idx4
1 2 idx5
2 0 idx6
2 1 idx7
2 2 idx8

如上表所示，類似於討論檢查格子數擴充的狀況所說明的，每增加一個新的狀態時，需要保持不變且向下相容的編碼規則會有些不同。不像上面增加檢查格子時舊的部份維持在上半部，新增的部份在下部份。每增加一個新的狀態時，舊的編碼和新的編碼會互相交錯，但還是可以看出其中的規則。

依據以上二個不同狀況變更編碼擴充基因時變更維護的<狀態編碼,基因位置>對照表，這樣就可以繼續套用原來己花時間演化出來的基因而不必全部打掉重來。