C .
ODE
G
AMELET
# 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
# 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
# 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) { ... } } ```
# CG.Base Provide tool kits that helps you fast build an app on Code.Gamelet. Key features include: 1. initialize [pixi.js](#pixi.init) environment 1. load and access resources that are imported via Code.Gamelet IDE 1. manage update functions that are called every frame 1. provide debug utilities ## Getting Started Follow the steps below to fast start an app with [PixiJS](#pixi.init). We will implement a box2d environment to demo the usage of Base. <a name="pixi.init"></a> ## Start with Pixi.js<a name="pixi.init"></a> ```typescript class App { constructor() { // initialize pixi CG.Base.pixi.initialize(600, 400); CG.Base.pixi.physicsDebugDraw.setActive(true); // make a physics wall var wall = CG.Base.physics.createPhysicsObject('wall', {type: 'static'}); wall.addEdge(new CG.Base.geom.Point(10, 300), new CG.Base.geom.Point(500, 330)); // make a dynamic physics ball var ball = CG.Base.physics.createPhysicsObject('ball', {type: 'dynamic'}); ball.addCircle(0, 0, 10, {friction: 0.1, density: 0.1, restitution: 0.3}); ball.setPosition(100, 10); } } new App(); ``` @see [Demo](/edit/Base_Start_with_PIXI) ## Load and play with Resources To load resources that are imported from IDE: ```typescript // tell resources what resources to load (using the alias names) CG.Base.resourceManager.addAppResource('Game1.button'); CG.Base.resourceManager.addAppResource('Game1.music'); // start loading CG.Base.resourceManager.load(() => { // all loaded callback // create button with the image "Game1.button" alias name var button = new CG.Base.pixis.interactive.Button(CG.Base.resourceManager.createPixiSprite('Game1.button', 20, 20)); // set the position of the button button.displayObject.position.set(100, 100); // add the button to pixi.root, so pixi can render the button CG.Base.pixi.root.addChild(button.displayObject); // add a click event listener button.on(CG.Base.pixis.interactive.Button.EVENT.CLICK, () => { // when the button is clicked, play sound with "Game1.music" alias name CG.Base.resourceManager.playSound('Game1.music') }); }); ``` @see [Demo](/edit/Base_Load_Resources) ## Manage update functions Take advantage of CG.Base.addUpdateFunction to make a function called every frame ```typescript class App { constructor() { CG.Base.pixi.initialize(600, 400); CG.Base.addUpdateFunction(this, this.update); } // this function will be called every frame(called 60 times per second normally) private update(deltaTime:number):void { // do something } } new App(); ``` @see [Demo](/edit/Base_Update_and_Delay_Func) You can call a function in the future by CG.Base.addDelayFunction ```typescript class App { constructor() { CG.Base.pixi.initialize(600, 400); // call this.delayAction in 1000 milliseconds(= one second) CG.Base.addDelayFunction(this, this.delayAction, 1000); } private delayAction():void { // do something } } new App(); ``` @see [Demo](/edit/Base_Update_and_Delay_Func) ## Interact with Keyboard Use CG.Base.keyboard package to interact with keyboard events. ```typescript export class App { constructor() { // make the window focused, so we can receive keyboard events. window.focus(); // initialize pixi CG.Base.pixi.initialize(600, 400); // tell resourceManager to load the resource 'Game1.button' CG.Base.resourceManager.addAppResource('Game1.button'); // load resources, and wait callback when resources are all loaded CG.Base.resourceManager.load(() => { // add keyboard event listener, when a key is pressed CG.Base.keyboardManager.on(CG.Base.keyboard.KeyboardManagerEvent.PRESSED, key => { // if the pressed key is space, we call this.createSprite() if (key == CG.Base.keyboard.Key.SPACE) { this.createSprite(); } }); }); } private createSprite(): void { // create a sprite with the image 'Game1.button' var sprite: PIXI.Sprite = CG.Base.resourceManager.createPixiSprite('Game1.button'); // set the position of the sprite sprite.position.set(CG.Base.utils.IntUtil.randomBetween(100, 500), CG.Base.utils.IntUtil.randomBetween(100, 300)); // add the sprite to pixi.root, so it can be rendered CG.Base.pixi.root.addChild(sprite); } } new App(); ``` @see [Demo](/edit/Base_PIXI_Keyboard) ## Debugging The best debug tool on browser is the [developer tools](https://developer.chrome.com/devtools) in Chrome (F12). To find your source code in developer tools, first open developer tools(F12), click "Sources" tab, and search the Network tree as below: > top => {projectCode} => gameFrame => code.gamelet.com => gassets => file/{projectCode}/src for example, if the projectCode is 'Game1', source code is located at > top => Game1 => gameFrame => code.gamelet.com => gassets => file/Game1/src ![Source Network Tree](https://code.gamelet.com/gassets/asset/Base/Base.networktree/networktree.png "Source Network Tree") ### Add Watch In addition to browser's debugging tools, CG.Base provides other useful tools. CG.Base.addWatch() adds objects or objects' properties to Watch panel in CG IDE. ```typescript export class App { constructor() { // initialize pixi CG.Base.pixi.initialize(600, 400); // tell resourceManager to load the resource 'Game1.button' CG.Base.resourceManager.addAppResource('Game1.button'); CG.Base.resourceManager.load(() => { // add the created sprite into Watch panel, the alias name in Watch panel is 'sprite' CG.Base.addWatch('sprite', this.createSprite()); }); // add this(App)'s 'time' property into Watch panel. The alias name for this property is 'now' CG.Base.addWatch('now', this, 'time'); } private createSprite(): PIXI.Sprite { // create a sprite with the image 'Game1.button' var sprite: PIXI.Sprite = CG.Base.resourceManager.createPixiSprite('Game1.button'); // set the position of the sprite sprite.position.set(CG.Base.utils.IntUtil.randomBetween(100, 500), CG.Base.utils.IntUtil.randomBetween(100, 300)); // add the sprite to pixi.root, so it can be rendered CG.Base.pixi.root.addChild(sprite); return sprite; } // a getter function, that works like a property of App object. get time(): number { return CG.Base.time(); } } new App(); ``` @see [Demo](/edit/Base_Add_Watch) ## Versioning We use [SemVer](http://semver.org/) for versioning. ## Links and Resources This library is running with the libraries below. * [Pixi.js](http://www.pixijs.com/) - 2D rendering engine * [API reference](http://pixijs.download/release/docs/index.html) * [Examples](http://pixijs.io/examples/) * [Pixi keyboard](https://github.com/Nazariglez/pixi-keyboard) - Keyboard utility * [Pixi sound](https://github.com/pixijs/pixi-sound) - Sound utility * [Pixi filters](https://github.com/pixijs/pixi-filters) - Filters Collections * [Pixi GafPlayer](https://github.com/mathieuanthoine/PixiGAFPlayer) - [GafMedia](https://gafmedia.com/) Player * [Liquidfun](http://google.github.io/liquidfun/) - Box2D based physics engine * [MD5](http://www.myersdaily.org/joseph/javascript/md5-text.html) - MD5 implementation by Joseph Myers ## Authors **Haska Su** - *Initial work*
# 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) { ... } } ```
# TwilightWarsEventsEnh ### 本模組依附於TwilightWarsEvents模組,主要內容是解開該模組未開放的限制及添加少許該模組缺少的功能。 - v0.6版本更動較大,更新請注意。 - 更新版本前建議先查看更新歷史。 - 若有任何問題或建議,歡迎至討論區回報。 - [Discord群組](https://discord.gg/seJwuzCbWq) ## 本模組功能(v0.5.4)【最新版本v0.6.0】 ### 動作 * 角色 * 設定角色屬性/狀態 * 角色發動技能 * 角色裝備道具 * 加速回氣 * 設定血條 * 套用傷害屬性效果 * 發動武器攻擊 * 中斷技能 * 強制角色死亡 * 設定盔甲屬性 * 設定彈匣 * 強制角色復活 * 人物裝備武器 * 角色重置 * 設定盾牌 * 強制裝子彈 * 改變馬茲屬性 * 自動集氣 * 取消集氣 * 進入行走狀態 * 停止跳躍 * 切換至目標手武器 * 移動角色位置 * 角色暫停/繼續 * 範圍治療/傷害 * 角色攻擊次數 * 設定近遠戰武器傷害 * 設定受擊傷害 * 武器動作速度 * 反射傷害 * 角色加減血 * 陣營重生位置 * 顯示 * 彈出視窗 * 關閉彈出視窗 * 彈出確認視窗 * 彈出複製字串視窗 * 彈出字串輸入視窗 * 彈出載入中 * 彈出選項視窗 * FrontEnd * 新增<button> * +CSS 規則集 * 為HTML變數+CSS類別 * 為HTML變數-CSS類別 * UI顯示設定 * 玩家輸入字串 * 特效 * 地圖 * 濺起水花 * 快跳文字 * 環形特效 * 回血特效 * 爆炸痕跡 * 天隱之眼射擊特效 * 血跡特效 * 爆炸特效 * 塵土飛楊 * 飛鳥特效 * 地圖冰凍特效 * 射擊軌跡 * 火山落石 * 火箭炮特效 * 角色 * 震暈 * 角色閃避 * 飛拳特效 * 爆炸箭特效 * 失明標誌 * 電擊 * 龍波 * 角色濾鏡 * 怒氣發散 * 影分身特效 * 吸血特效 * 血刃特效 * 角色鏡像 * 閃光特效 * 震地 * 血刃降級特效 * 血爆 * 防護盾特效 * 閃現 * 畫面 * 畫面遮色片 * 畫面效果線 * 畫面濾鏡 * 地圖 * 玩家滑鼠座標 * 增加可行走座標 * -地圖物件 * +地圖物件 * 可走格除錯點 * 播放音效 * 移除可行走座標 * 事件 * 執行事件動作 * 自訂功能 * 自訂技能 * 自訂特效 * 自訂陣營 * 伺服器 * 分數 * 上傳玩家分數 * 變數 * 儲存區域變數 ### 檢查 * 系統 * 目前時間 * 角色 * 玩家存活時間 * 角色面相角度 * 角色所在區域 * 角色武器技能 * 遊戲室 * 遊戲室創建者 * 變數 * 比對字串 ### 觸發 * 顯示 * 點擊按鈕 ## 作者 **[不會取名字](/profile/buhuechuminzu)**<br> **[雪姬](/profile/setsuki)** ## Front-End顧問 **[洨貓.來亂。](/profile/CumCat)**
# TwilightWarsEventsEnh ### 本模組依附於TwilightWarsEvents模組,主要內容是解開該模組未開放的限制及添加少許該模組缺少的功能。 - v0.6版本更動較大,更新請注意。 - 更新版本前建議先查看更新歷史。 - 若有任何問題或建議,歡迎至討論區回報。 - [Discord群組](https://discord.gg/seJwuzCbWq) ## 本模組功能(v0.5.4)【最新版本v0.6.0】 ### 動作 * 角色 * 設定角色屬性/狀態 * 角色發動技能 * 角色裝備道具 * 加速回氣 * 設定血條 * 套用傷害屬性效果 * 發動武器攻擊 * 中斷技能 * 強制角色死亡 * 設定盔甲屬性 * 設定彈匣 * 強制角色復活 * 人物裝備武器 * 角色重置 * 設定盾牌 * 強制裝子彈 * 改變馬茲屬性 * 自動集氣 * 取消集氣 * 進入行走狀態 * 停止跳躍 * 切換至目標手武器 * 移動角色位置 * 角色暫停/繼續 * 範圍治療/傷害 * 角色攻擊次數 * 設定近遠戰武器傷害 * 設定受擊傷害 * 武器動作速度 * 反射傷害 * 角色加減血 * 陣營重生位置 * 顯示 * 彈出視窗 * 關閉彈出視窗 * 彈出確認視窗 * 彈出複製字串視窗 * 彈出字串輸入視窗 * 彈出載入中 * 彈出選項視窗 * FrontEnd * 新增<button> * +CSS 規則集 * 為HTML變數+CSS類別 * 為HTML變數-CSS類別 * UI顯示設定 * 玩家輸入字串 * 特效 * 地圖 * 濺起水花 * 快跳文字 * 環形特效 * 回血特效 * 爆炸痕跡 * 天隱之眼射擊特效 * 血跡特效 * 爆炸特效 * 塵土飛楊 * 飛鳥特效 * 地圖冰凍特效 * 射擊軌跡 * 火山落石 * 火箭炮特效 * 角色 * 震暈 * 角色閃避 * 飛拳特效 * 爆炸箭特效 * 失明標誌 * 電擊 * 龍波 * 角色濾鏡 * 怒氣發散 * 影分身特效 * 吸血特效 * 血刃特效 * 角色鏡像 * 閃光特效 * 震地 * 血刃降級特效 * 血爆 * 防護盾特效 * 閃現 * 畫面 * 畫面遮色片 * 畫面效果線 * 畫面濾鏡 * 地圖 * 玩家滑鼠座標 * 增加可行走座標 * -地圖物件 * +地圖物件 * 可走格除錯點 * 播放音效 * 移除可行走座標 * 事件 * 執行事件動作 * 自訂功能 * 自訂技能 * 自訂特效 * 自訂陣營 * 伺服器 * 分數 * 上傳玩家分數 * 變數 * 儲存區域變數 ### 檢查 * 系統 * 目前時間 * 角色 * 玩家存活時間 * 角色面相角度 * 角色所在區域 * 角色武器技能 * 遊戲室 * 遊戲室創建者 * 變數 * 比對字串 ### 觸發 * 顯示 * 點擊按鈕 ## 作者 **[不會取名字](/profile/buhuechuminzu)**<br> **[雪姬](/profile/setsuki)** ## Front-End顧問 **[洨貓.來亂。](/profile/CumCat)**
# 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)**
ⒸCode.Gamelet.com | Privacy Policy | Terms of Service