去年修多媒體資訊導論課所做的期末專題,用 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 的頻率,之後也不會再更新這個程式了。