Reitsuki JavaScript Galgame Framework

build 下的是已經合并的和minify的Reitsuki.js 可以直接使用

demo 地址

如何開始

初始化游戲對象

var gal = new Reitsuki.init({

container:"game",

height:600,

width:800,

characterSetting:characterSetting

});

其中container 參數為游戲顯示在那個div里的標簽

height 參數為高度

width為寬度

characterSetting 立繪設置

加載腳本

Reitsuki 有2種加載腳本方式

一直那個是直接在element里加載

gal.scriptManager.loadScriptFromElement("main"); //加載id為main里面的內容作為腳本

另一種是通過ajax來加載

gal.scriptManager.loadScriptToFile("main.txt"); //其中main.txt是文件路徑

最后是開始游戲

gal.start();

這里補充下characterSetting 立繪設置的例子

var characterSetting = {

"春日野穹":{"白色-笑":"sora-1","校服-一般-白天":"sora-2","校服-一般-黃昏":"sora"},

"渚一葉":{"校服-笑":"kazuha-1"}

};

例如 "春日野穹":{"白色-笑":"sora-1","校服-一般-白天":"sora-2","校服-一般-黃昏":"sora"}, 這行

其中為"春日野穹" 為角色的名字

后面大括號里的'{"白色-笑":"sora-1","校服-一般-白天":"sora-2","校服-一般-黃昏":"sora"}' 為對應的立繪文件對應

立繪文件文件類型為jpg

如果不設置 characterSetting 或者賦值為null的話,括號里的立繪編號就是文件名(沒有擴展名)

在腳本里 例如

春日野穹(校服-一般-白天)：今天要和哥哥出去

的話就會在游戲里顯示sora-2.jpg這個文件

最后立繪文件是放在 character 這個文件夾里的

游戲腳本格式說明

對話段落

對話段落必須以空行分開,否則會被認為是同一個人說的, 正常是這樣的

所以只要把她當作小孩子看就立即會生氣.不過這也沒辦法的

事情,自從媽媽讓我照顧好穹之后,我就一直守在她身邊了.

悠：哪里有許多令你懷念的地方呢.

穹：.........

你可以發現,上面的劇本名字是是用了全角的：里區分名字和內容(上面的對話沒有是用立繪所以名字后面沒有跟著括號),如果你是用半角

的冒號的話Reitsuki則無法知道哪里是名字哪里是內容,就會把名字一起輸出到腳本框里面

##顯示立繪,使用別名,播放語音

名字后面添加括號,在里面寫該角色的立繪編號,例如:

穹(怒)：.......別把我當成小孩子看!!

另外Reitsuki是支持同時顯示多個立繪的,只需要在名字后面以逗號分割就可以了,例如

穹(笑),一葉(笑)：.......

另外還可以設置角色顯示的別名 例如 你想"春日野穹",顯示為"穹"話,只需要用到一個半角冒號":"就可以了

穹:春日野穹(笑)：.........

另外你想播放語音的可以添加一個名為voice的角色,然后括號里寫語音的文件名,例如:

春日野穹(笑),voice(12)：.........

手動顯示和清除立繪

@setCH "角色名","立繪序號"

@clearCH null

設置標簽(@label命令)

標簽命令為

@label "標簽名"

其中標簽名必須在冒號里面, @label后面必須要有一個空格,因為這是Reitsuki調用函數的格式

跳轉命令(@goto命令)

@goto "標簽名"

@if命令

@if a > b,"label2"

其中 a > b為javascript的邏輯語句, 這里的意思為如果 a > b 的話那么就跳轉到label2哪里

注意Reitsuki沒有else語句的

##定義javaScript語句塊

@{ javascript內容 }@

可以多行 但是必須以 @{開始 并且以}@結束

其中 global 對象為全局變量,在JS塊外面的命令只能訪問global對象的內容

調用自定義函數

例如在 JS語句塊里聲明了以下這個函數

@{

global.log = function(str){

console.log(str);

};

}@

就可以在下面是用

@log "helloworld"

調用.多個參數可以是用冒號分隔.

如果是想在調用語句里是用變量的話

@{ global.text = "hello"; }@

@log global.text

在對話中是用變量

穹(怒)：.......$text是個大笨蛋,別把我當成小孩子看!!

就會變成

穹(怒)：.......hello是個大笨蛋,別把我當成小孩子看!!

就是$號后面跟著在global里的成員名

設置背景(@setBG命令)

@setBG "bg1",1000

背景文件夾為bg,文件格式為jpg.

上面的意思為 顯示bg1.jpg為背景,且漸變速度為1000毫秒

其中漸變速度為可選

以純色作為背景(@setBGColor命令)

@setBGColor "#000",1000

"#000" 為顏色編碼

1000為漸變速度 可選

播放BGM,語音,其他聲音

對應文件夾為 bgm,voice,sound

chrome,firefox,opera 是使用ogg文件格式,IE和Safari是使用mp3文件格式

@setBGM "bgm"

@setVoice "v01"

@setSound "sound"

播放視頻 (@video命令)

@video "mp4.m4v","video.webm","video.ogg"

選擇語句(@selectBox命令)

@selectBox "item1","如果Item1被選擇的話就跳去這個label","item2","如果Item2被選擇的話就跳去這個label"

#環境設置命令 (@set)

例如設置 腳本顯示框的背景

@set "sb_BackgroundImage","image","img/scrpitboxbk.jpg",0.7

其中"sb_BackgroundImage" 表示要設置的環境函數,

這里的sb是ScriptDispBoxComponent 的縮寫,Reitsuki當前只支持2中縮寫,另外一種是SelectBoxComponent縮寫sel

后面的"_"表示組件名與setter的分界,后后面的是setter方法的名字 BackgroundImage

其他為要設置的參數

Reitsuki 常用的環境設置參數

@set "sb_BackgroundImage","背景類型,image為圖像color為純色","圖像的url/顏色編碼",透明度

@set "sb_TextSpeed" 字符現實速度單位為毫秒

@set "sb_TextFontFamily" "字體名稱"

@set "sb_TextColor" "字體顏色"

@set "sb_TextSize" 字體大小

@set "sel_TextSize" 選項的字體大小

@set "sel_TextFontFamily" "選項的字體名字"

@set "sel_TextColor" "選項的字體顏色"

@set "sel_TextAlign" "選項的字體對其方式,left,center,right"

以上是比較常用的組件環境設置方法

想要設置其他組件的話 必須帶上完整名字例如想設置BGComponent的A屬性

@set "BG_A" 1

顯示對話框(@dailog)

@dailog "titleDailog",callback

意思是顯示html element id為titleDailog 的div,在這個dailog關閉的時候調用callback里的函數

對話框必須關閉后才會繼續執行下一句語句

在對話框關閉后必須執行closeDialog方法通知Reitsuki 這個對話框已經關閉了并返回了一些東西

另外callback參數不是必須的

當對話框顯示時,會觸發 "dailogShow" 事件

當對話框關閉時,會觸發 "dailogClose" 事件

對話框關閉事件例子

document.getElementById("start_game").addEventListener("click",function(){

gal.closeDialog("startGame");

},false);

#Reitsuki的API

儲存

Reitsuki.init.prototype.save = function(name,isAutoSave);

其中name為存檔的名字,isAutoSave 是否為自動存檔 ,這2個參數都可選

默認為 存檔名字為當前時間的字符串

調用例子

gal.save()

##讀取

Reitsuki.init.prototype.load = function(name);

name為存檔名字,可選,末日為自動存檔

調用例子

gal.load()

立即顯示對話框

Reitsuki.init.prototype.showDailog = function(id);

id為html element對象的id

調用例子

gal.showDailog("dailog");

注冊右鍵菜單

Reitsuki.init.prototype.registerRightClickDailog = function(id);

id為html element對象的id

調用例子

gal.registerRightClickDailog("dailog");

查詢是否有存檔

Reitsuki.init.prototype.hasSaveData();

調用例子

if(gal.hasSaveData()){

//do something..

}

總結

以上是生活随笔為你收集整理的html galgame引擎,GitHub - kasuganosora/Reitsuki: Html5 GalGameEngine的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。