September 7, 2011

東方戰鬥牌 Touhou flash card game

去年修多媒體資訊導論課所做的期末專題,用 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)

Ren’Py 也支援從劇本內撥放音樂及音效,但我的程式必須將這些資訊 hard-code 進 Flash。

其實加幾段程式碼就可以改成從劇本撥音效了,但最近越來越多平台不再支援 Flash,所以我也會慢慢減少用 Flash 的頻率,之後也不會再更新這個程式了。