這是一個用來製作 Ryvexia 音樂遊戲的核心模組,如果想要摳出新專案來製作遊戲,請不要摳此模組,建議摳遊戲成品。
有任何問題請於 專案討論 回報,會盡快解決。
遊戲開始後,會播放音樂,並從畫面上方落下音符,當音符與下方的判定框重合後按下對應的按鍵來打擊音符,打擊時機越準分數越高。
預設為四個軌道,對應按鍵分別為 D、F、J、K。
音符的種類目前分為下列幾種: - Tap:單壓,當音符與下方的判定框重合後,按下對應的按鍵來打擊音符。 - Hold:長壓,當音符與下方的判定框重合後,按住對應的按鍵直到音符結束時完成打擊。
遊戲中按下 ESC 可暫停遊戲。
// 設置譜面檔案路徑(專案內),必須先於專案內新增譜面資料檔案。
const chartSource = `CG.${CG.Base.projectCode}/test.json`;
// 加載檔案。
CG.Base.resourceManager.addAppSource(chartSource)
// 初始化 RyvexiaLib。
CG.RyvexiaLib.initialize()
.then(() => { // 初始化完成後
// 初始化 pixi 舞台,建議舞台寬高 1920 x 1080。
CG.Base.pixi.initialize(1920, 1080);
// 新增一個譜面資料物件,並匯入譜面資料。
const chartData = new CG.RyvexiaLib.datas.ChartData();
chartData.importSource(chartSource);
// 加載該譜面的音樂資料。
chartData.loadMusic(() => { // 加載完成後
// 建立 Ryvexia 遊戲物件,並加入到 root 舞台顯示於畫面上。
const game = new CG.RyvexiaLib.games.Game();
CG.Base.pixi.root.addChild(game);
// 設置該遊戲的譜面資料並開始遊戲。
game.setup(chartData).start();
})
})
本模組提供了具有圖形化介面的譜面編輯器,當然你也可以自己使用程式碼添加,甚至利用譜面資料可以新增資料的功能,自製一個譜面編輯器也可以。
(也可以拖動進度條來改變音樂進度。)
// 初始化 RyvexiaLib
CG.RyvexiaLib.initialize()
.then(() => {
// 初始化 pixi 舞台
CG.Base.pixi.initialize(1920, 1080);
// 創建譜面資料物件,BPM 為 160
const chartData = new CG.RyvexiaLib.datas.ChartData(160);
// 設定譜面音樂資源名稱
chartData.musicAlias = "你的音樂資源別稱";
// chartData.musicFilename = "你的音樂資源檔名"; // 如果你的音樂是壓縮檔,就會需要用到這一條。
// 建立譜面編輯器並匯入譜面資源
const editor = new CG.RyvexiaLib.editors.ChartEditor(chartData);
editor.loadByStorage(); // 於譜面編輯器建立後嘗試讀檔,若無檔案則會忽略。
editor.saveWhileTest = true; // 啟用編輯器測試遊戲時自動存檔。(只有在測試遊戲時會存檔,不是有更新就會儲存)
// 建立主要遊戲(讓編輯器用於測試)
const game = new CG.RyvexiaLib.games.Game();
// 建立編輯器頁面(用於控制編輯器與遊戲之間的溝通)
const editorPage = new CG.RyvexiaLib.utils.pages.ChartEditorPage(editor, game);
// 顯示編輯器頁面
editorPage.show();
})
// 創建一個譜面資料,bpm 為 175。
const chartData = new CG.RyvexiaLib.datas.ChartData(175);
// 設定一些譜面資料。
chartData.title = 'Sing My Pleasure'; // 譜面標題
chartData.musicAlias = 'RyvexiaLib.Sing My Pleasure'; // 音樂資源別稱
chartData.musicAuthor = 'Vivy (Vo.Kairi Yagi)'; // 音樂作者、歌手
chartData.chartAuthor = '酷可(cook1470)'; // 譜面作者
// 預設有 4 個軌道,於第 1 軌道,第 0 節拍,位置 0 添加音符。
chartData.tracks[1].addNote(0, new NoteData(0));
// 於第 0 軌道,第 0 節拍,位置 0.5 添加音符。
chartData.tracks[0].addNote(1, new NoteData(0.5));
// 於第 2 軌道,第 7 節拍,位置 0.5 添加音符,音符長度 8。
chartData.tracks[2].addNote(7, new NoteData(0.5, 8));
// BPM 變速設定,於第 20 小節開始,BPM 變為 160。
chartData.bpms[20] = 160;
// 於第 50 小節開始,BPM 變為 160。
chartData.bpms[50] = 175;
// 創建好以後,可以使用 exportJson 匯出 JSON 物件,並使用 JSON.stringify 轉換成字串。
const text = JSON.stringify(chartData.exportJson());
// 再使用 Base 的 HtmlUtil 來下載檔案。
CG.Base.utils.HtmlUtil.downloadText(text, '我的譜面.json');
// 也可以將譜面資料壓縮後直接下載,不需轉換 JSON,且檔案大小會更小。
// CG.Base.utils.HtmlUtil.downloadText(chartData.exportGzip(), '我的譜面.rvx');
如果你想要使用壓縮後的譜面檔案,匯入的方法稍有不同。
const chartSource = 'CG.YourProject/我的譜面.rvx';
// 與 #如何開始? 相同,先加載要使用的譜面,可參考上方介紹,在此省略。
// 利用 Base 的資源管理器讀取成字串。
const text = CG.Base.resourceManager.getText(chartSource);
// 新增一個譜面資料物件,並匯入壓縮譜面資料。
const chartData = new ChartData();
chartData.importGzip(text);
// 後續與 #如何開始? 相同,建立遊戲、載入音樂並開始遊戲。
本模組提供了一個簡單的頁面控制器,以及一些預設的頁面可供使用,以下展示以編輯器為主的控制流程。
包含了封面、校正頁面、編輯器頁面。
// 初始化 RyvexiaLib
CG.RyvexiaLib.initialize()
.then(() => {
// 初始化 pixi 舞台
CG.Base.pixi.initialize(1920, 1080);
// 建立頁面管理器。
const pageManager = new CG.RyvexiaLib.utils.PageManager();
// 建立封面頁面,並註冊到頁面管理器中。
const coverPage = new CG.RyvexiaLib.utils.pages.CoverPage();
// coverPage.titleText.text = "我的音樂遊戲"; // 可改變封面標題文字,預設為 Ryvexia
pageManager.registerPage(coverPage);
// 建立校正、設定頁面,並註冊到頁面管理器中。
const calibrationPage = new CG.RyvexiaLib.utils.pages.CalibrationPage();
pageManager.registerPage(calibrationPage);
const chartData = new CG.RyvexiaLib.datas.ChartData(175);
chartData.musicAlias = "你的音樂資源別稱";
const editor = new CG.RyvexiaLib.editors.ChartEditor(chartData);
editor.loadByStorage();
editor.saveWhileTest = true;
const game = new CG.RyvexiaLib.games.Game();
// 建立編輯器頁面(用於控制編輯器與遊戲之間的溝通),並註冊到頁面管理器中。
const editorPage = new CG.RyvexiaLib.utils.pages.ChartEditorPage(editor, game);
pageManager.registerPage(editorPage);
// ========== 操控個頁面之間的切換流程。 ==========
// 當於封面頁面開始時。
coverPage.onStart = () => {
// 顯示校準頁面。
pageManager.show(calibrationPage.code);
}
// 當於校準頁面返回時。
calibrationPage.onReturn = () => {
// 顯示譜面編輯器頁面。
pageManager.show(editorPage.code);
}
// 當於譜面編輯器頁面返回時。
editorPage.onReturn = () => {
// 顯示封面。
pageManager.show(coverPage.code);
}
// 一開始先顯示封面頁。
pageManager.show(coverPage.code);
})
本模組將一些可設置常數放在 CG.RyvexiaLib.Constant
內,裡面有一些特別的參數可以調整,以下為預設值。
// 以下可設定各判定分的範圍(時間差)。
CG.RyvexiaLib.Constant.PERFECT_TIME_RANGE = 46;
CG.RyvexiaLib.Constant.GREAT_TIME_RANGE = 92;
CG.RyvexiaLib.Constant.GOOD_TIME_RANGE = 138;
CG.RyvexiaLib.Constant.MISS_TIME_RANGE = 200;
// 以下可設定作為判定分顯示的文字,遊戲中、結算等。
CG.RyvexiaLib.Constant.SCORE_TYPES.PERFECT = "Perfect";
CG.RyvexiaLib.Constant.SCORE_TYPES.GREAT = "Great";
CG.RyvexiaLib.Constant.SCORE_TYPES.GOOD = "Good";
CG.RyvexiaLib.Constant.SCORE_TYPES.MISS = "Miss";