去年修多媒體資訊導論課所做的期末專題，用 Flash 寫了一個結合 Visual Novel 與太空戰士八卡片遊戲 Triple Triad (トリプルトライアード) 的小遊戲，卡片上大部分的腳色取自東方 Project。

( C ) Credit

由於期末專題製作時間緊迫，僅少數素材為自行手繪，大部分素材皆取自網路，其版權為原作者所有。

I do not own most of the images in this game, all rights belong to their respective owners.

(一) 遊戲玩法與連結

遊戲連結：

http://chunnorris.cc/public/touhou-card-game/

遊戲玩法：

(二) 遊戲截圖

1.老少咸宜的AVG模式，劇情過目不忘

2.乾淨的操作介面與指示，戰鬥區域豐富多樣

3.組織最適當的牌組對抗強悍的敵人

4.簡單易懂好上手的戰鬥系統

5.平易近人的劇情對話

6.臨場感十足的各種特效

(三) 多媒體資訊導論期末專題：東方戰鬥牌

1. 組員

2. 專題題目

東方戰鬥牌

3. 操作模式

遊戲使用 Visual Novel 模式呈現劇情，藉由有趣的角色與生動對話引領玩家進入一個虛擬的戰鬥卡片世界。

玩家可以在「小地圖 (Free Map)」中依照選擇的地點與其他玩家戰鬥、或是透過事件來獲取金錢，當玩家戰鬥一定的次數後，即可透過小地圖選單挑戰大魔王，並提供兩種不同的結局。

4. 卡片遊戲說明

簡單來說就是太空戰士八的卡片遊戲：Triple Triad (トリプルトライアード)：

玩家在小地圖選擇對戰區域，對戰區域影響敵人強弱。
戰鬥開始後，選擇自己的戰鬥卡片，每張卡片有「上下左右」四個方位的攻擊力。
遊戲會自動擲硬幣決定誰先攻。
玩家要將這些卡片拖曳並放置在一個3*3方格的場上。
一個方格只允許放一張卡片，一次放一張，兩人輪流放。
不同玩家的卡片由不同顏色表示(ex:玩家為藍色、敵人為紅色)。
當我方放下一張卡片後(此時，此牌為攻擊牌)，遊戲系統會檢查該卡片四周的方格：
- 如果卡片周圍是空的(沒放牌)或是放自己的牌→系統不做事。
- 如果卡片周圍有敵人的牌(此時該敵方牌為防守牌)，且「該敵方牌與我方牌所對應的方位的攻擊力」比「我方牌與該敵方牌相對應方位的攻擊力」低的話，該敵方牌即歸我方所有(以顏色變化表示，ex:紅變藍)。
- 若雙方攻擊力相當或攻擊牌的攻擊力比防守牌低的話，系統也不做事。
如此攻守交換，重複以上步驟。
九宮格都放滿卡片後，牌面上卡片較多的一方獲勝。

其他：

賭金較高的區域敵人的手牌較強，賭金較低的區域敵人手牌較弱。
敵方只有最基本的 AI，沒有戰術，所有牌都是隨機放置在場上的。
在小地圖點選竹湖可直接獲得金錢(cheat)。
在 Visual Novel 模式中，按住 Ctrl 可快速 skip 對話。

(四) 製作過程

去年修多媒體資訊導論課所做的期末專題，用 Flash 寫了一個結合 Visual Novel 與太空戰士八卡片遊戲：Triple Triad (トリプルトライアード) 的小遊戲，卡片上大部分的腳色取自東方 Project。

Coding 成績獲得了全班第一，總成績全班第二。

此專題結合了以前我寫到一半的兩個小作品：

一個是高三時(2008)用 Flash 寫的 Visual Novel 引擎，架構不成熟，但是十分夠用。
一個是大一時(2009)應高中同學 Jeff 要求，而用 Flash 寫的 FF8 戰鬥牌遊戲(Triple Triad)。

上述兩個作品都停止在未完成的狀態，剛好藉由這次期末專題將其完成並合併成一個完整的小遊戲。

1. FF8 戰鬥牌遊戲 Triple Triad

主要在於處理 drag & drop、偵測是否放置在九宮格等 Flash Event。

程式碼部分則忠實呈現最基本的 Triple Triad 規則，包含選牌、流程、基本 AI、比大小、勝負等等。

2. Flash based Visual Novel

這個程式就博大精深了，高三時至少花了整整 3 個月在這上面。

簡單來說就是個用 Flash 寫的 Visual Novel 引擎，特色在於它可直接讀取外部純文字檔案(劇本)，遊戲開發者只需要用記事本修改劇本，這個程式就會自動依照規則將文字劇本用 Visual Novel 的方式呈現。

遊戲開發者不必具有任何程式基礎，只要會寫文章，都可以用這個引擎寫出 Visual Novel。

唯一的小缺點就是人物、背景等素材必須先行匯入 Flash 裡面，才可於劇本中使用，不然引擎會找不到圖片。

3. 與現行引擎 Ren’Py 之比較

我當初寫的程式，使用方式跟現在市面上許多 Visual Novel 開發環境非常相似。

譬如現在很紅的免費 Visual Novel 開發環境 Ren’Py 。

Ren’Py 的劇本對話 syntax 如下：

label start:
    "I'll ask her..."

    "Me" "Um... will you..."
    "Me" "Will you be my artist for a visual novel?"

    "Silence."
    "She is shocked, and then..."

    "Sylvie" "Sure, but what is a \"visual novel?\""

我的 Flash 劇本對話 syntax 如下：

_root.dia1 = [
    "我慌張著打開錢包。",
    "【阿虛】：\n「不妙啊..，我全身上下只剩下200元了。」 ",
    "【谷口】：\n「唉.. 借錢借到自己忘記，這種人我還是第一次看到呢。」",
    "【谷口】：\n「沒辦法，我這裡有300元，先借妳應急吧。」",
    "※獲得300元。",
    "【谷口】：\n「不過妳還是得在今天晚上之前湊出3000元才行。」",
    "【谷口】：\n「比利哥學長說今天晚上他會在綜一練火舞，記得去找他。」",

Ren’Py 的特效 syntax 如下：

# 定義人物與文字顏色
define s = Character('Sylvie', color="#c8ffc8")
define m = Character('Me', color="#c8c8ff")

# 定義腳色圖片、場景圖片
image bg meadow = "meadow.jpg"
image bg uni = "uni.jpg"
image sylvie smile = "sylvie_smile.png"
image sylvie surprised = "sylvie_surprised.png"

# 顯示、切換、隱藏人物圖片
show sylvie smile
show sylvie surprised
show sylvie smile
hide sylvie

# 人物特效
show sylvie smile
with dissolve

# 人物位置
show sylvie smile at right

# 切換場景圖片
scene bg meadow

# 場景特效
scene bg meadow
with fade

我的 Flash 特效 syntax 如下：

# 定義人物與文字顏色
_root.myformat_default = new TextFormat();     //預設字型
var tempvar2 = eval("_root.myformat_default");
tempvar2.color = 0x000000;
tempvar2.bullet = false;  // 是否顯示清單
tempvar2.size = 20;
tempvar2.font = "新細明體"
tempvar2.align = "left"
tempvar2.underline = false;
tempvar2.italic = false   //斜體
tempvar2.bold = false;   //粗體
tempvar2.leading = 1   //行距
tempvar2.leftMargin  = 5 //左邊界
tempvar2.rightMargin  = 5 //右邊界
tempvar2.tabStops //指定自訂定位停駐點。
_root.dialogue.dia_down_ac.setNewTextFormat(_root.myformat_default);

# 定義腳色圖片、場景圖片
// 不支援，需手動匯入 Flash 內部。

# 顯示、切換、隱藏人物圖片
case "丟下這句話後，谷口頭也不回帥氣的走進校門。":
    _root.fadeoutcharactor()
    break;
case "【谷口】：\n「哈囉？」":
    charactor = "taniguchi1";
    _root.fadeincharactor(charactor)
    break;

# 人物特效
case "【谷口】：\n「(啪!)」":  // 主角被對方踢擊
    effect_kicked();
    break;
case "我輕輕打了谷口一拳":  // 主角拍打對方
    effect_char_kicked();
    break;

# 切換場景圖片
bg = "bg55";

# 場景特效
bg = "bg55";
_root.fadeinbg(bg,50)
bg = "bg20";
_root.seriesfadebg(bg,60,60,15,15)