# 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, }; // 建立補間變化，在１秒內讓動物的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) { ... } } ```

# Pixi 這個專案將 Base 中的 Pixi 獨立出來，配合新的 Base2 以及 Pixi.js v8，提供遊戲製作更強大的繪圖工具。 ## 包含套件 - [pixi.js](https://pixijs.com/) - [pixi-filters](https://github.com/pixijs/filters) - [@pixi/tilemap](https://github.com/pixijs/tilemap) - [@pixi/sound](https://pixijs.io/sound/examples/index.html) - GAFMovieClip - GIFSprite - SpritesheetMovieClip - TilingSprite ## 使用步驟 ```typescript import pixi = CG.Pixi.pixi; async function example() { // 將pixi初始化(這裏要await，和以前Base裏的不一樣) await pixi.initialize({ width: 800, height: 600, }); // 將專案的資源載入。 await pixi.assets .add("Pixi.gaf") .add("Pixi.gif") .add("Pixi.spritesheet") .add("Pixi.snd") .load(); // 建立GAFMovieClip let movieclip = pixi.assets.createGAFMovieClip( /*資源名*/ "Pixi.gaf", /*linkage*/ "lib_puffer" ); pixi.root.addChild(movieclip); movieclip.gotoAndPlay("normal"); // 建立GIFSprite let gif = pixi.assets.createGIFSprite("Pixi.gif"); pixi.root.addChild(gif); gif.play(); // 建立GIFSprite let spritesheet = pixi.assets.createSpritesheetMovieClip("Pixi.spritesheet"); pixi.root.addChild(spritesheet); spritesheet.play(); // 播放音效 let sound = pixi.assets.playSound("Pixi.snd", { loop: true, volume: 0.5 }); } ``` ## Authors **[Haskasu](/profile/Haskasu)**

# Pixi 這個專案將 Base 中的 Pixi 獨立出來，配合新的 Base2 以及 Pixi.js v8，提供遊戲製作更強大的繪圖工具。 ## 包含套件 - [pixi.js](https://pixijs.com/) - [pixi-filters](https://github.com/pixijs/filters) - [@pixi/tilemap](https://github.com/pixijs/tilemap) - [@pixi/sound](https://pixijs.io/sound/examples/index.html) - GAFMovieClip - GIFSprite - SpritesheetMovieClip - TilingSprite ## 使用步驟 ```typescript import pixi = CG.Pixi.pixi; async function example() { // 將pixi初始化(這裏要await，和以前Base裏的不一樣) await pixi.initialize({ width: 800, height: 600, }); // 將專案的資源載入。 await pixi.assets .add("Pixi.gaf") .add("Pixi.gif") .add("Pixi.spritesheet") .add("Pixi.snd") .load(); // 建立GAFMovieClip let movieclip = pixi.assets.createGAFMovieClip( /*資源名*/ "Pixi.gaf", /*linkage*/ "lib_puffer" ); pixi.root.addChild(movieclip); movieclip.gotoAndPlay("normal"); // 建立GIFSprite let gif = pixi.assets.createGIFSprite("Pixi.gif"); pixi.root.addChild(gif); gif.play(); // 建立GIFSprite let spritesheet = pixi.assets.createSpritesheetMovieClip("Pixi.spritesheet"); pixi.root.addChild(spritesheet); spritesheet.play(); // 播放音效 let sound = pixi.assets.playSound("Pixi.snd", { loop: true, volume: 0.5 }); } ``` ## Authors **[Haskasu](/profile/Haskasu)**

# TwilightWarsEvents 使用光暈戰記的遊戲引擎 + 同人陣的任務制作 = TwilightWarsEvents ## Getting Started ```typescript // app.ts export class App { constructor() { CG.TwilightWarsLib.initialize() .then(() => { CG.TwilightWarsLib.events.startEvents('CG.projectCode/your_mission.events') }); } } export const APP = new App(); ``` ## Authors **[Haskasu](/profile/Haskasu)**

# 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

# TWLibLib 因為TwilightWarsLib太大了。為了方便開發，將一些不常變更的模組移至這個地方，再包回去TwilightWarsLib。 請開發者只匯入TwilightWarsLib或TwilightWarsEvents，不要匯入這個模組。 ## 作者 **[Haskasu](/profile/113321052805704333314@google)**

# 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)**

# GLT2 One Paragraph of project description goes here ## Getting Started (For a game project) Write some tips or instructions how to control in your game. (For building a module) Write a piece of codes to demostrate how to use this module. ```typescript function examples() { } ``` ## Authors **[Haskasu](/profile/Haskasu)**

# TwilightWarsEvents 使用光暈戰記的遊戲引擎 + 同人陣的任務制作 = TwilightWarsEvents ## Getting Started ```typescript // app.ts export class App { constructor() { CG.TwilightWarsLib.initialize() .then(() => { CG.TwilightWarsLib.events.startEvents('CG.projectCode/your_mission.events') }); } } export const APP = new App(); ``` ## Authors **[Haskasu](/profile/Haskasu)**

# TwilightWarsEvents 使用光暈戰記的遊戲引擎 + 同人陣的任務制作 = TwilightWarsEvents ## Getting Started ```typescript // app.ts export class App { constructor() { CG.TwilightWarsLib.initialize() .then(() => { CG.TwilightWarsLib.events.startEvents('CG.projectCode/your_mission.events') }); } } export const APP = new App(); ``` ## Authors **[Haskasu](/profile/Haskasu)**

# 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)**

# CgEventsEngine The engine of CgEvents. CgEvents is a great way to build your own games with with a CG.built-in editor. ## 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)**

# 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)**

# CgEventsLib2 One Paragraph of project description goes here ## Getting Started (For a game project) Write some tips or instructions how to control in your game. (For building a module) Write a piece of codes to demostrate how to use this module. ```typescript function examples() { } ``` ## Authors **[Haskasu](/profile/Haskasu)**

# CgEventsEngine The engine of CgEvents. CgEvents is a great way to build your own games with with a CG.built-in editor. ## 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)**

# TwilightWarsEvents 使用光暈戰記的遊戲引擎 + 同人陣的任務制作 = TwilightWarsEvents ## Getting Started ```typescript // app.ts export class App { constructor() { CG.TwilightWarsLib.initialize() .then(() => { CG.TwilightWarsLib.events.startEvents('CG.projectCode/your_mission.events') }); } } export const APP = new App(); ``` ## Authors **[Haskasu](/profile/Haskasu)**

# 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

# CgEventsEngine The engine of CgEvents. CgEvents is a great way to build your own games with with a CG.built-in editor. ## 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)**

# TwilightWarsEvents 使用光暈戰記的遊戲引擎 + 同人陣的任務制作 = TwilightWarsEvents ## Getting Started ```typescript // app.ts export class App { constructor() { CG.TwilightWarsLib.initialize() .then(() => { CG.TwilightWarsLib.events.startEvents('CG.projectCode/your_mission.events') }); } } export const APP = new App(); ``` ## Authors **[Haskasu](/profile/Haskasu)**

# 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