從遊戲設計到遊戲化設計

本書仍處於初步起草撰寫階段。 (Early Draft)

這是一個從構想到產品的過程實作分享。

• 曾創辦遊戲設計公司
• 多年來在互動數字媒體創作
• 曾撰寫多人在線遊戲書籍與 HTML5 遊戲撰寫教學書籍

[其中一本著作][images.jpg][images (1).jpg]

而遊戲，也是軟件的一種。是在解決娛樂放鬆的需求。

Prototyping 是打造原型/雛型的產品，以方便快速驗證想法及提早獲取目標客戶的需求。

有時原型甚至可以是影片加 Marketing Page 來收集使用意向。

例如 Dropbox 一開始，就是只有一個半成品，配上示範影片。並有一個收集 Waiting List 電郵的頁面，來確定受眾是否想要這個軟件。

撰寫後，對每個功能編上 A, B, C.

C 的可以直接刪掉。

B 的功能留下來，變成 Nice to Have

A 的功能，再砍一半，剩下的就是首先必須的功能。

所以，在正式實作前，先做好選擇尤其重要。

現時主流的版本控制有 git.

最基本的操作有 git commit -A -m ""

及 git push 來推送到中央 code repo. (假設一開始已進行 git clone)

Git 和 Github 是兩件事Git 是本地的版本控制，存放於目錄中。

而 Github 是中央代碼庫服務。

在軟件開發中，技術部份首先要選擇用哪個技術棧。

視目標而言，是用在網站瀏覽器上？是放到 console 遊戲機上？這些都影響使用哪個框架及哪個程式語言。

“To use AI, or not to use AI. That's not the question.

Makzan”

現今的軟件開發，離不開 AI 人工智能輔助編程，又稱 Vibe Coding。

AI 能幫什麼?• 快速打造原型
• 將構想轉為程式代碼

AI 不能幫什麼?• 決定什麼要做，什麼不做。
• 人性化的設計

• 動作：反應同操作，平台跳跃、射擊、格鬥
• 冒險：探索、解謎、推進劇情
• 角色扮演（RPG）：養成角色、數值成長、選擇影響故事
• 策略：資源、佈局、長期決策；即時或回合制
• 模擬：重現一個系統，經營城市、飛行、人生
• 解謎：規則固定，重點是想通
• 體育／競速：真實或虛構規則下的競賽
• 沙盒／開放世界：目標弱，玩家自己定義玩法
• 派對／休閒：規則短、單局短、適合一齊玩

同一款遊戲常常跨類型。例如一款經營遊戲可以同時是模擬加策略。

常見的玩法：

問答、骰子移動。

例如蛇梯棋、大富翁式移動等。

• 單人
• 競爭（零和或排名）
• 合作
• 團隊對抗
• 大規模多人（MMO 一類）

• Points
• Badges
• Leaderboards

• 娛樂遊戲：好玩本身就是目的
• 嚴肅遊戲／教育遊戲：本身就是一個完整遊戲，學習藏在玩裏面
• 遊戲化：不是做一款遊戲，而是把目標、回饋、進度等元素加到現有流程（課堂、App、網站）

• 遊戲迴圈、固定時間步、輸入
• 場景／實體／元件
• 精靈、圖集、瓦片、鏡頭
• AABB 碰撞、簡單物理
• 動畫、UI、存檔、音效
• 渲染層

輸入 (Input) -> 輸出 (Feedback) -> 再輸入 (Input) -> 再輸出 (Feedback)

Open this page to start reading.

[Game Loop]

const canvas = document.querySelector("#game");
const ctx = canvas.getContext("2d");

const step = 1 / 60;
let acc = 0;
let last = performance.now();
const player = { x: 20, y: 80, speed: 80 };

function update(dt) {
player.x += player.speed * dt;
if (player.x > 300) player.x = 20;
}

function draw() {
ctx.fillStyle = "#1b2430";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#8bd3dd";
ctx.fillRect(player.x, player.y, 16, 16);
}

function frame(now) {
requestAnimationFrame(frame);
let elapsed = (now - last) / 1000;
last = now;
if (elapsed > 0.1) elapsed = 0.1;

acc += elapsed;
let steps = 0;
while (acc >= step && steps < 5) {
update(step);
acc -= step;
steps += 1;
}
draw();
}

requestAnimationFrame(frame);

遊戲的座標，可以分為邏輯座標及顯示座標。

例如，在底層如果用方格棋盤來表示，則可以用 i/j 座標系。但渲染到畫面時，則一般使用屏幕的 x/y 座標系。

遊戲的其中一個互動重點，是總能夠回應玩家。

包括玩家微細的操作。

參考八角框架

1. 重要的事
2. 變厲害了
3. 自己創造
4. 這是我的
5. 跟別人有關
6. 現在拿不到，所以更想要
7. 不知道接下來會怎樣
8. 不想生去已經有的

Open this page to start reading.

Open this page to start reading.