C .
ODE
G
AMELET
# CookPixiUI 這是一個主要用於 Code.Gamelet Pixi v5 的 UI 模組。 # 元件介紹 ## ScrollView(滑動容器元件) **ScrollView** 是一個可捲動的容器元件,適用於清單、選單、物品欄等場景。 支援以下功能: - 指定顯示區域的寬度與高度 - 垂直或水平滑動方向(可選) - 拖曳滑動內容(支援滑鼠與觸控) - 慣性滾動(速度遞減) - 自動遮罩超出區域的內容 - 可動態加入或清除內容項目 ### `ScrollView.addContent(...child: PIXI.DisplayObject[]): void;` 添加內容到滑動容器中。 - `child` — 要加入的顯示物件(例如卡片、格子、圖片等) ### `ScrollView.clearContent(): void;` 清除內容容器內的所有子物件。 ### 使用範例 ```ts // 請先確保該檔案頂層有 import(引入)ScrollView class(類別) import ScrollView = CG.CookPixiUI.Components.ScrollView; ``` #### 建立垂直滑動區域 ```ts // 建立一個 300 x (畫面高度 - 100) 的垂直滑動區域 const scrollView_V = new ScrollView(300, CG.Base.pixi.stageHeight - 100, 'vertical'); scrollView_V.position.set(50, 50); CG.Base.pixi.root.addChild(scrollView_V); // 單元格尺寸設定(寬 300、高 50) const rowCellSize = { width: 300, height: 50 }; // 加入 20 個垂直排列的矩形內容 for (let i = 0; i < 20; i++) { const item = getRowItemCell(i); scrollView_V.addContent(item); } /** * 建立一個垂直列表用的彩色矩形區塊(含文字) * @param index 第幾個項目(用來標示文字與計算 Y 座標) */ function getRowItemCell(index: number): PIXI.Graphics { const item = new PIXI.Graphics() .beginFill(0xFFFFFF * Math.random()) // 隨機顏色 .drawRect(0, 0, rowCellSize.width, rowCellSize.height) .endFill(); // 設定位置(x 固定,y 根據索引排列) item.position.set(10, index * (rowCellSize.height + 10)); // 建立文字物件並加入 item 內 const label = new PIXI.Text(`Item ${index + 1}`, { fontSize: 20, fill: 0xFFFFFF, stroke: 0, strokeThickness: 4, lineJoin: 'round', } as PIXI.TextStyle); label.anchor.set(0, 0.5); label.position.set(10, 25); item.addChild(label); return item; } ``` #### 建立水平滑動區域 ```ts // 建立一個 (畫面寬度 - 450) x 150 的水平滑動區域 const scrollView_H = new ScrollView(CG.Base.pixi.stageWidth - 450, 150, 'horizontal'); scrollView_H.position.set(400, CG.Base.pixi.stageHeight * 0.5 - 75); CG.Base.pixi.root.addChild(scrollView_H); // 單元格尺寸設定(寬 80、高 100) const colCellSize = { width: 80, height: 100 }; // 加入 15 個水平排列的彩色方塊 for (let i = 0; i < 15; i++) { const item = getColItemCell(i); scrollView_H.addContent(item); } /** * 建立一個水平列表用的彩色方塊(含文字) * @param index 第幾個項目(用來標示文字與計算 X 座標) */ function getColItemCell(index: number): PIXI.Graphics { const item = new PIXI.Graphics() .beginFill(0x66ccff + (index * 0x111111)) // 每個項目不同顏色 .drawRoundedRect(0, 0, colCellSize.width, colCellSize.height, 12) .endFill(); // 設定位置(y 固定,x 根據索引排列) item.position.set(index * (colCellSize.width + 20), 25); // 建立文字物件並加入 item 內 const label = new PIXI.Text(`${index + 1}`, { fontSize: 25, fill: 0xFFFFFF, stroke: 0, strokeThickness: 5, lineJoin: 'round', } as PIXI.TextStyle); label.anchor.set(0.5); label.position.set(40, 50); item.addChild(label); return item; } ``` ## ListViewCell(清單項目元件) **ListViewCell** 是清單中每個資料項目的基底元件,由 `ListView` 管理與重用。 每個 Cell 顯示對應的一筆資料,由 ListView 控制其內容更新與位置配置。 主要功能: - 儲存該筆資料內容與索引(`data` 與 `index`) - 提供 `setItem(index, data)` 方法,供 ListView 設定內容 - 靜態屬性 `width`、`height` 用於 ListView 的動態排版 注意事項: - Cell 不持有所有資料,只管理自己那一筆 - UI 細節需由子類別實作 - 使用時子類別必須呼叫 `super.setItem(index, data)`,確保父類記錄資料狀態,以利 ListView 正確管理重用機制 ### 使用範例 ```ts // 請先確保該檔案頂層有 import(引入)ListViewCell class(類別) import ListViewCell = CG.CookPixiUI.Components.ListViewCell; ``` #### 建立用於垂直清單的項目 ```ts /** 一個簡單的 Cell 實作,顯示數字(垂直版)。 */ export class NumberCell_V extends ListViewCell<number> { /** 靜態寬度(由 ListView 使用) */ static width = 300; /** 靜態高度(由 ListView 使用) */ static height = 40; private _background: PIXI.Graphics; private _label: PIXI.Text; constructor() { super(); this._background = new PIXI.Graphics(); this.addChild(this._background); this._label = new PIXI.Text('', { fontSize: 20, fill: 0x333333, }); this._label.anchor.set(0.5); this._label.position.set(NumberCell_V.width / 2, NumberCell_V.height / 2); this.addChild(this._label); } /** * 設定 Cell 資料並更新顯示內容。 * @param index - 資料在列表中的位置 * @param data - 對應的數值內容 */ setItem(index: number, data: number): void { super.setItem(index, data); // 一定要呼叫,讓父類別記住 index 和 data,ListView 才能正確管理 Cell // 重新繪製底色 this._background.clear() .beginFill(index % 2 === 0 ? 0xeeeeee : 0xdddddd) // 依據 index 決定底色,交錯顯示兩種顏色 .drawRoundedRect(0.5, 0.5, NumberCell_V.width - 1, NumberCell_V.height - 1, 5) .endFill(); this._label.text = `#${index} → ${data}`; } } ``` #### 建立用於水平清單的項目 ```ts /** 一個簡單的 Cell 實作,顯示數字(水平版)。 */ export class NumberCell_H extends ListViewCell<number> { /** 靜態寬度(由 ListView 使用) */ static width = 80; /** 靜態高度(由 ListView 使用) */ static height = 100; private _background: PIXI.Graphics; private _label: PIXI.Text; constructor() { super(); this._background = new PIXI.Graphics(); this.addChild(this._background); this._label = new PIXI.Text('', { fontSize: 18, fill: 0x224466 }); this._label.anchor.set(0.5); this._label.position.set(NumberCell_H.width / 2, NumberCell_H.height / 2); this.addChild(this._label); } /** * 設定 Cell 資料並更新顯示內容。 * @param index - 資料在列表中的位置 * @param data - 對應的數值內容 */ setItem(index: number, data: number): void { super.setItem(index, data); // 一定要呼叫,讓父類別記住 index 和 data,ListView 才能正確管理 Cell // 重新繪製底色 this._background.clear() .beginFill(index % 2 === 0 ? 0xddeeff : 0xaabbcc) // 依據 index 決定底色,交錯顯示兩種顏色 .drawRoundedRect(0.5, 0.5, NumberCell_H.width - 1, NumberCell_H.height - 1, 6) .endFill(); this._label.text = `${data}`; } } ``` ## ListView(清單元件) **ListView** 是一個高效能的清單元件,繼承自 `ScrollView`,適用於大量資料的滾動顯示場景。 適用於大量資料的滾動顯示場景,例如排行榜、道具欄、選單等。 主要特性: - 垂直或水平滾動顯示資料項目 - 自動建立、回收 Cell 項目以節省效能 - Cell 由 ListView 自動管理,會重複使用 - Cell 類別需繼承自 ListViewCell,並實作 setItem() 接收資料 注意事項: - Cell 將由 ListView 自動管理,請勿自行新增或刪除 - Cell 的尺寸由靜態屬性 width / height 提供 ### `ListView.addData(...data: U[]): void;` 加入一筆或多筆資料,並立即更新畫面。 - `data` — 欲加入的資料內容 ### `ListView.refreshVisibleCells(): void;` 根據目前滾動位置更新可見 Cell。 - 回收不在顯示範圍內的 Cell - 產生新的 Cell,設定資料與位置 ### `ListView.jumpToIndex(index: number): void;` 瞬間跳轉到指定資料索引位置,讓該項目顯示在可視區起始處(上方或左方)。 - `index` — 欲顯示的資料索引 ### 使用範例 ```ts // 請先確保該檔案頂層有 import(引入)ListView class(類別) import ListView = CG.CookPixiUI.Components.ListView; ``` #### 建立垂直滑動區域 ```ts // 建立垂直 ListView 實例 const listView_V = new ListView<NumberCell_V, number>( NumberCell_V.width, CG.Base.pixi.stageHeight - 100, NumberCell_V, ListView.DIRECTION.VERTICAL ); listView_V.position.set(50, 50); CG.Base.pixi.root.addChild(listView_V); // 填入資料 const numbers = Array.from({ length: 100 }, (item, i) => i + 1); listView_V.addData(...numbers); // 跳到第 26 筆 listView_V.jumpToIndex(26); ``` #### 建立水平滑動區域 ```ts // 建立水平 ListView 實例 const listView_H = new ListView<NumberCell_H, number>( CG.Base.pixi.stageWidth - 400, NumberCell_H.height, NumberCell_H, ListView.DIRECTION.HORIZONTAL ); listView_H.position.set(350, CG.Base.pixi.stageHeight * 0.5 - NumberCell_H.height * 0.5); CG.Base.pixi.root.addChild(listView_H); // 填入資料 const numbers = Array.from({ length: 100 }, (item, i) => i + 1); listView_H.addData(...numbers); // 跳到第 50 筆 listView_H.jumpToIndex(50); ``` --- ## Authors **[cook1470](/profile/cook1470)**
# CgEventsLib The engine of CgEvents. CgEvents is a great way to build your own games with with a CG.built-in editor. ## Live Demo <a href="cg://source/test/physics.events" class="mat-raised-button mat-primary">Open Demo Events Sheet</a> ## Concept The engine takes a *.events file to run. The .events file is an encoded json which contains a config field and a events field. ```json { config: { stage: { width: "number", height: "number", resolutionPolicy: "showAll" | "exactFit" | "fixedWidth" | "fixedHeight" | "origin", alignHorizontal: "left" | "center" | "right", alignVertical: "top" | "middle" | "bottom" } }, events: [ { id: "string", triggers: [], checks: [], actions: [] }, ... ] } ``` Yon can edit the json with CG.built-in editor to control all your game events. ## How Events Work Each event contains a TRIGGER, some CHECKS, and some ACTION. The event flow works like this: 1. The TRIGGER of the event is triggered by the engine (keyboard pressed, event over, or maybe the hero collides with an enemy) 1. Once the trigger is triggered, the engine then goes check the CHECKS. 1. If all CHECKS pass, the engine executes all the ACTIONS in the event. ## Getting Started ```typescript let manager = new CgEventManager(); manager.importFromSource('CG.YourProject/yourGame.events') .then(() => manager.preload()) .then(() => manager.start()) ; ``` ## Versioning We use [SemVer](http://semver.org/) for versioning. ## Authors * **[Haskasu](/profile/Haskasu)**
# EnhServer 為了解決一些CG功能上的缺失,故實作此Lib。 包含變數無法跨專案使用,以及無法跨專案實作大聊天室。 (可能只是不知道方法) 未來將會逐步補上缺失的功能,範例後端請參照[此Github repo](https://github.com/setsuk1/EnhServer-monorepo),歡迎發起PR。 以及可以加入[Discord群組](https://discord.gg/seJwuzCbWq)一起討論,並共同討論功能方向。 初期可能不穩定,建議自建Server。 **且安全性並非此Lib的第一考量,此Lib主要是作為補充功能使用。** ## 如何使用 主要是透過下列方法進行初始化: ```typescript server.initialize(options) ``` options部分為可選選項,若參數為空則預設連線至Enh之後端伺服器。 預設狀態本模組會export一個server物件提供操作,若是希望使用多個instance,僅須透過下列方法: ```typescript const customServer = new EnhServer(); customServer.initialize(options); ``` 之後透過下列方式取得一對一傳訊的資料: ```typescript let context = { handler(data: any, senderCode: string) { console.log(data); } } server.msgManager.on(UserEventList.MSG.UNICAST, context.handler, context); ``` --- ## 呼叫功能 作為範例,下面舉出廣播至全體的功能如何使用: ```typescript let cmd = new Command(SocketEventList.USER, new BroadcastToAllEvent({ data: "Hi there." })); server.sendCommand(cmd); ``` 由此便可送出"Hi there."訊息到Server上的所有使用者。 至於其餘功能目前尚未確定如何說明,待補。 ## Authors **[EnhProject](/profile/EnhProject)** - **[不會取名字](/profile/buhuechuminzu)** - **[雪姬](/profile/setsuki)**
# 花靈宮模組 - 作者 **[妮娜](/profile/LoliPrincessNina)** - 使用此模組為你的專案增加新的陣營和技能 - 注意電腦AI使用技能時有機會比較蠢 - 過快使用技能將會有概率出BUG - 此為測試版本,有BUG很正常 - 查詢及回報請到<b><a href="https://gamelet.online/user/nina/board">我的留言板</a></b> # 說明 - 為了方便各位照搬/測試花靈宮的任務,此處將填上花靈宮裡所有用到的觸發/檢查/動作 - 有相當一部分代碼是來自TwilightWarsEventsExp和CgEventsExp(下方不列出;部分存在變更,與原版有差異) - 若希望使用以上觸發/檢查/動作,請用原版,此處不會有更新 ## 目前提供支援的有: ## 陣營 - 花靈宮 - 盜賊幫 - 無魂軍 - 智械兵團(缺失: 小刀LV2、大刀LV2) <!-- --> ## 觸發 #### 角色 - 角色說話 - 人物受傷(內建排除傷害類型/傷害數值比對) #### 武器道具 - 使用消耗型道具(可儲存道具變數) <!-- --> ## 檢查 #### 技能 - 角色技能狀態 - 手持武器技能 #### 角色 - 角色狀態附加 - 角色面向某物 - 角色燃燒狀態 - 角色B是否角色A的敵人 - 角色是否可直視某點/物 #### 地圖 - 可行走座標 - 兩點之間的距離 #### 存讀 - 儲存變數 - 在陣列中找到字串 - 以符號分離字串 #### 地圖機關 - 燭火機關狀態 - 找出所有地圖機關(迴圈) <!-- --> ## 動作 - 筆記 #### 角色 - 新增角色 - 角色漂浮能力 - 設定角色演員 - 移動角色位置 - 設定角色大小 - 角色可否攻擊 - 角色死亡訊息 - 人物停止說話 - 角色特殊屬性 - 取得玩家陣營演員角色 - 角色醉酒管理 - 角色反彈子彈 - 放下旗幟 - 鎖定面向方向 - 傳送角色加血訊息 - 傳送角色傷害訊息 - 傳送角色閃現至定點訊息 #### 技能 - 角色結束技能 - 限制使用技能 - 設定武器技能 - 傳送技能訊息 - 白鳥拳 - 正/反旋風劈掌 - 千手如來 - 百裂拳 - 元氣玉 #### 任務流程 - 跳出系統訊息 - 更多遊戲規則 - 角色對己說話 - 改變任務代碼 #### 存讀 - 工作階段儲存空間數據庫存取 - 以符號分離字串 - 定義Json變數 - 轉換Json為字串 - 轉換Json為物件 #### 特效 - 聖靈治療特效 - 角色燃燒狀態 - 應用攻擊特效 - 震地特效 - 吸血血刃特效 - 劍氣光彈 - 新增地圖痕跡 - 散發冰氣特效 - 發射火箭 - 快跳文字 - 散發光環特效 - 衝擊波 - 新增地圖動畫 - 擊退人物 - 光印 - 冷卻特效 - 防護罩特效 - 防護罩泡泡特效 - 冰魂護盾特效 - 血滴特效 - 設置自動移除動畫 - 反衝箭 #### 武器道具 - 背包道具設定 - 攜帶式道具設定 - 切換預設武器 - 切換至另一手 - 裝填武器彈藥 - 新增任務道具 - 新增武器道具 - 人物裝備道具 - 人物裝備武器 - 移除武器道具 - 玩家背包道具擁有的數量 #### 地圖 - 隨機可行走座標 #### 隨機 - 隨機設定陣營 - 隨機角色演員 - 隨機使用技能 - 隨機物件代碼 - 隨機字串 - 隨機角色 #### 陣營 - 設定陣營暱稱 - 新增陣營 - 改變陣營色彩風格(4個子項被拆分成2個新動作) #### 地圖機關 - 控制燭火機關 - 新增可推石塊 - 新增告示牌(NPC角色包括同人陣營選項)
# TwilightWarsLib A Top-down view shooting game framework. ## Getting Started These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. To start a .event ```typescript CG.TwilightWarsLib.initialize() .then(() => { CG.TwilightWarsLib.events.startEvents('test/test.events', 'arena'); }) ``` To manually setup the game: ```typescript CG.TwilightWarsLib.initialize() .then(() => let mapSource = 'test/test.twmap'; CG.Base.resourceManager.addAppSource(mapSource); CG.Base.resourceManager.load(() => { let mapResource = new CG.TWMap.resources.MapResource(); mapResource.importBase64(CG.Base.resourceManager.getText(mapSource)); mapResource.loadTextures(() => { CG.Base.pixi.initialize(600, 500); let game = new CG.TwilightWarsLib.games.Game(); CG.Base.pixi.root.addChild(game); game.initResources(mapResource); game.start(); console.log('tw game created'); let me = new CG.TwilightWarsLib.games.actors.Actor(game, 'me'); game.addActor(me, new MyActorController(me), 32, 100, 0, null); game.gameCamera.setFocus(me); game.interface.setMe(me); let ai = new CG.TwilightWarsLib.games.actors.Actor(game, 'ai'); ai.camp = CG.TwilightWarsLib.games.datas.Camp.CAMP2; ai.actorClip.headClip.clip.gotoAndStop(5); game.addActor(ai, new CG.TwilightWarsLib.games.actors.controllers.AIController(ai), 160, 300, 0, null); game.createStuff(null, 64 + 16, 128 + 16, CG.TwilightWarsLib.games.items.StuffInfo.getByCode('sword'), game.stuffManager.useNextStuffId(), true); }); }); }) ``` ## Versioning We use [SemVer](http://semver.org/) for versioning. ## Authors * **[Haskasu](/profile/Haskasu)** ## Acknowledgments * Hat tip to anyone who's code was used * Inspiration * etc
# RyvexiaLib 這是一個用來製作 **[Ryvexia](https://ryvexia.gamelet.online/)** 音樂遊戲的核心模組,如果想要摳出新專案來製作遊戲,請不要摳此模組,建議摳遊戲成品。 有任何問題請於 **[專案討論](https://code.gamelet.com/discuss/p/RyvexiaLib/0)** 回報,會盡快解決。 ### 遊玩方法 遊戲開始後,會播放音樂,並從畫面上方落下音符,當音符與下方的判定框重合後按下對應的按鍵來打擊音符,打擊時機越準分數越高。 預設為四個軌道,對應按鍵分別為 D、F、J、K。 音符的種類目前分為下列幾種: - **Tap**:單壓,當音符與下方的判定框重合後,按下對應的按鍵來打擊音符。 - **Hold**:長壓,當音符與下方的判定框重合後,按住對應的按鍵直到音符結束時完成打擊。 遊戲中按下 ESC 可暫停遊戲。 ## 如何開始? ```typescript // 設置譜面檔案路徑(專案內),必須先於專案內新增譜面資料檔案。 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(); }) }) ``` ## 自製譜面 本模組提供了具有圖形化介面的譜面編輯器,當然你也可以自己使用程式碼添加,甚至利用譜面資料可以新增資料的功能,自製一個譜面編輯器也可以。 ### 如何從編輯器開始? #### 快捷鍵: - W、上:譜面向上移動。 - S、下:譜面向下移動。 - Shift + 移動:加速移動。 - +:增加每小節的拍數。 - -:減少每小節的拍數。 - Shift + 測試遊戲:啟用自動遊玩模式。 (也可以拖動進度條來改變音樂進度。) ```typescript // 初始化 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(); }) ``` ### 如何從程式碼編輯? ```typescript // 創建一個譜面資料,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'); ``` 如果你想要使用壓縮後的譜面檔案,匯入的方法稍有不同。 ```typescript const chartSource = 'CG.YourProject/我的譜面.rvx'; // 與 #如何開始? 相同,先加載要使用的譜面,可參考上方介紹,在此省略。 // 利用 Base 的資源管理器讀取成字串。 const text = CG.Base.resourceManager.getText(chartSource); // 新增一個譜面資料物件,並匯入壓縮譜面資料。 const chartData = new ChartData(); chartData.importGzip(text); // 後續與 #如何開始? 相同,建立遊戲、載入音樂並開始遊戲。 ``` ## 頁面控制器 本模組提供了一個簡單的頁面控制器,以及一些預設的頁面可供使用,以下展示以編輯器為主的控制流程。 包含了封面、校正頁面、編輯器頁面。 ```ts // 初始化 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` 內,裡面有一些特別的參數可以調整,以下為預設值。 ```typescript // 以下可設定各判定分的範圍(時間差)。 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"; ``` ## 作者 **[module_cook1470](/profile/64897095@github)**
# GLT One Paragraph of the game description goes here ## Getting Started ### Auth (Login) ```typescript // All action must wait until auth system is ready. CG.GLT.auth.onReady(user => { if(user.isLocalGuest()) { // not login yet } else { // logged in user } }); // auth event listener, triggered when auth user changed let authListener = CG.GLT.auth.onAuth(user => { if(user.isLocalGuest()) { // logged out } else { // logged in user } }); // auth event listener, triggered when validating a new auth action // a following onAuth event is expected. this.validatingListener = onAuthValidating(() => { // show loading animation }); ``` ### API The CG.GLT.api is responsible to communicate with glt.gamelet.online. CG.GLT.commands includes all comments to query/submit data from glt.gamelet.online. The commands has a function submit() that uses CG.GLT.api.submitCommand(), so most of the time, you don't need to call the api to submit. ```typescript CG.GLT.commands.scoreService.submitScore( 'challenge', // the name of the score to submit 10, // the score SubmitType.KEEP_HIGHEST, // submit only when the new score is greater than the one on server TimeRange.ALL // submit to all time-ranges (history and weekly) ) .submit(); // to receive the weekly high score list CG.GLT.commands.scoreService.listScores( 'challenge', // the name of the scores to get TimeRange.WEEKLY, // in which time range OrderType.HIGH_TO_LOW, // how to order the scores CG.GLT.api.lastUpdatedServerTimestamp, // tell the server which week to see 0, // start index 10, // how many to get (list: UserScoreList) => { // do something with the scorelist }, (error) => { // deal with error } ) ``` ## Authors **[Haskasu](/profile/113321052805704333314@google)**
# JEventsEXP <table width="100%"> <tr> <th rowspan="2"> <a href="https://discord.gg/UNde4eaGuc" target="_blank"> <img src="https://imgur.com/HDw592N.png" width="110px"> <br> 珍・EventsEXP <br> <a href="https://discord.gg/UNde4eaGuc" class="mat-raised-button mat-primary "> 加入Discord </a> </a> </th> <th> 隨便寫的模組。 </th> <th> A casually written module. </th> </tr> <tr> <td> <pre> # 觸發 珍妮-擴充包/ └── 輸入/ └── 鍵盤序列 # 動作 珍妮-擴充包/ └── 變數/ └── 生成隨機整數陣列 └── 地圖/ └── 迷宮生成 └── 特效/ └── 角色/ └── 熱感應追蹤器 └── 移除熱感應追蹤器 # 道具 └── 熱感應追蹤器 </pre> </td> <td> <pre> # Trigger Jennie-Expansions/ └── Input/ └── Keyboard Sequence # Actions Jennie-Expansions/ └── Variable/ └── Generate Random Integer Array └── Map/ └── Maze Generation └── Effect/ └── Actor/ └── Thermal Tracker └── Remove Thermal Tracker # Item └── Thermal Tracker </pre> </td> </tr> </table> ## 作者 **[SinB.JN](/profile/108665576516229624668@google)** <details open> <summary> <a class="mat-raised-button mat-primary"> 更新日誌(Changlog) </a> </summary> ## [v0.1.2](/view/JEventsEXP/0.1.2) (2025-06-25) #### 新增 - [動作]特效/角色/熱感應追蹤器 - 顯示其他角色的即時位置熱感應追蹤 - [動作]特效/角色/移除熱感應追蹤器 - 移除角色的熱感應追蹤器 #### Added - [Actions]Effect/Actor/Thermal Tracker - Show other actors' real-time positions with thermal tracking - [Actions]Effect/Actor/Remove Thermal Tracker - Remove thermal tracker from an actor ## [v0.0.8](/view/JEventsEXP/0.0.8) (2025-05-24) #### 新增 - [觸發]輸入/鍵盤序列 - 當一系列鍵盤按鍵和滑鼠按鍵依序被按下時觸發 #### Added - [Trigger]Input/KeyboardSequence - Trigger when a sequence of keyboard keys and mouse buttons is pressed ## [v0.0.7](/view/JEventsEXP/0.0.7) (2025-05-09) #### 新增 - [動作]地圖/迷宮生成 - 在選定的地圖區域(矩形或圓形)內以1x1物件生成迷宮 #### Added - [Actions]Map/Maze Generation - Generates a maze within a selected map region (rectangle or circle) with 1x1 object ## [v0.0.6](/view/JEventsEXP/0.0.6) (2024-08-31) #### 更改 - [動作]變數/生成隨機整數陣列 - 新增了對數量、最大重複次數和種子參數的變數輸入支持。 - 優化了錯誤處理和無效輸入的提示信息。 #### Changed - [Actions]Variable/Generate Random Integer Array - Added support for variable input for count, max repeats, and seed parameters. - Improved error handling and messaging for invalid inputs. ## [v0.0.5](/view/JEventsEXP/0.0.5) (2024-08-30) #### 更改 - [動作]變數/生成隨機整數陣列 - 新增了使用種子生成隨機數的選項。用戶現在可以選擇是否使用種子,並輸入一個特定的種子值來生成可重現的隨機數序列。 - 優化了用戶界面。 #### Changed - [Actions]Variable/Generate Random Integer Array - Added an option to use a seed for random number generation. Users can now choose whether to use a seed and input a specific seed value to generate reproducible random number sequences. - Improved the user interface. ## [v0.0.4](/view/JEventsEXP/0.0.4) (2024-08-29) #### 錯誤修復 - [動作]變數/生成隨機整數陣列 - 修復了當可用數字少於陣列長度時導致遊戲崩潰的問題。 #### Bug fixed - [Actions]Variable/Generate Random Integer Array - Fixed an issue where the game would crash when the number of usable integers was smaller than the array length. ## [v0.0.1](/view/JEventsEXP/0.0.1) (2024-08-29) #### 新增 - [動作]變數/生成隨機整數陣列 #### Added - [Actions]Variable/Generate Random Integer Array </details>
# Base2 重新架構的Base2,相比Base少了很多功能,包括Pixi/Sound/ResourceManager/Physics/geoms都被拿掉,只留最主要的CG功能。 ## 基本功能 1. 取得專案的資料 ```typescript // 取得專案代碼 CG.Base2.projectCode; // 取得資源 CG.Base2.getAppResource(resourceAlias: string) // 取得資源網址 CG.Base2.getAppResourceFileUrl(resourceAlias: string, filename?: string) ``` ## 更新循環 Base2內建了一個更新循環系統。 ```typescript // 先定義一個每幀都要更新的函式 function updateFunc(dt: number) { } // 將函式加入更新循環系統 CG.Base2.addUpdateFunction(updateFunc); // 將函式移出更新循環系統 CG.Base2.removeUpdateFunction(updateFunc); ``` 另外也提供子更新循環系統可使用。 ```typescript import Updater = CG.Base2.utils.Updater; // 先定義一個每幀都要更新的函式 function updateFunc(dt: number) { } // 建立子更新循環系統 let updater = new Updater(); // 將函式加入更新循環系統 updater.addDelayFunction(updateFunc); // 可暫停 updater.pause(); // 可繼續 updater.resume(); ``` ## 鍵盤管理員 Base2提供了一個基本的鍵盤管理員,可以在按鍵被按下去(DOWN)、提起來(UP)、先按再提(PRESSED)的時候觸發事件。 ```typescript // 取得鍵盤管理員 import Keyboard = CG.Base.keyboards.Keyboard; import keyboard = CG.Base2.keyboard; import Key = CG.Base2.keyboards.Key; // 鍵盤事件 keyboard.on(Keyboard.EVENT.DOWN, (event: KeyboardEvent) => { if (Key.SPACE.matchEvent(event)) { // 當空白鍵被按下去的時候... } }) // 檢查目前按鍵狀態 if (keyboard.isDown(Key.SPACE)) { // 目前空白鍵是正在按下去的狀態 } ``` ## 補間變化 Base2內建了[tweenjs](https://github.com/tweenjs/tween.js)用來將某個物件的屬性,在一段時間內作動態的變化。 ```typescript async function makeAnimation() { // 建立一隻有x,y資料的動物 let animal = { x: 100, y: 100, }; // 建立補間變化,在1秒內讓動物的x和y變化到指定的值 let tween = new TWEEN.Tween(animal); tween.to( { x: 300, y: 200, }, 1000 // 毫秒 ); tween.start(); // 等待變化完畢 await CG.Base2.waitTween(tween); console.log(animal.x); // 這時會印出 300 } ``` ## JSZip Base2內建[JSZip](https://stuk.github.io/jszip/)。 ```typescript async function loadZip() { let zip = new JSZip(); await zip.loadAsync(buffer); for(let filename in zip.files) { ... } } ```
ⒸCode.Gamelet.com | Privacy Policy | Terms of Service