# CG Server This library gives apps the tools to access the powerful game server that provided by code.gamelet.com. The server provides the abilities listed below: 1. Player managements including login, profile, password etc. 1. A database that can do score leaderboard, individual player status, and more. 1. Multiplayer online connections (powered by socket.io). ## GLT Server A Database server. <a href="cg://source/CG.Server/GLT_README.md" class="mat-raised-button mat-primary">GLT Server Readme</a> ## MSG Server A realtime socket server. <a href="cg://source/CG.Server/MSG_README.md" class="mat-raised-button mat-primary">MSG Server Readme</a> ## 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)**

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

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

# Fourier Transform 實例展示傅立葉轉換的兩種應用。 科普影片: https://youtu.be/wRNMrTHGJOY ## Authors **[Haskasu](/profile/Haskasu)**

# 我的光暈戰記 My Twilight Wars 光暈戰記的同人陣範本，編輯地圖和任務檔就可以製作出自己的任務了。 The template that help developers to build their own twilightwars-like game, your own map, your own mission. * [同人陣製作教學影片](https://www.youtube.com/playlist?list=PL1GxW0vJciBTV9DNrhhRpB80gl5irQRx8) ## 快捷鈕 Shortcuts <a href="cg://source/CG.TWEventsGameTemplate/game.events" class="mat-raised-button mat-primary">編輯任務事件表 (Edit Events)</a> <a href="cg://source/CG.TWEventsGameTemplate/gamemap.twmap" class="mat-raised-button mat-primary">編輯地圖 (Edit Map)</a> ## 設定任務季度列表 / Setup Story Seasons 將 appSeasons.ts 設為遊戲進入點，即可支援任務章節/列表。 <a href="cg://source/CG.TWEventsGameTemplate/seasons.zh.json" class="mat-raised-button mat-primary">編輯 seasons.json 任務列表(中文版)</a> Set appSeasons.ts as the entry point to support seasons/mission list. <a href="cg://source/CG.TWEventsGameTemplate/seasons.en.json" class="mat-raised-button mat-primary">Edit seasons.json Mission List (English Ver.)</a>

# 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) { ... } } ```

# MidiLib A simplified library to easily play midi music. ## Getting Started Minimum codes to get a midi to play. ```typescript async function examples() { // load the midi resource let player = await loadAndCreateMidiInstrumentPlayer("MidiLib.testmidi"); player.play(); } ``` Also support playSound() in Base library. ```typescript CG.Base.resourceManager.playSound("MidiLib.testmidi"); ``` Codes to get full control. ```typescript async function examples() { // load the midi resource await resourceManager.addAppResource("MidiLib.testmidi").load(); // create the player let player = createMidiInstrumentPlayer("MidiLib.testmidi"); // preload instruments, you can specify the default instrument // find the full list of instrument names in `instruments.ts` await player.preload({ defaultInstrument: "acoustic_grand_piano" }); // play the music player.play({ loop: true, startTick: 0, loopStartTick: 0, gain: 2, // volume tempoScale: 1.5, // tempo }); // control the music player.stop(); player.pause(); player.resume(); } ``` ## Player Events Player emits events for advanced controlling ### Track Events This event emits when a midi note is time to be played (or other meta data is dispatched.) ```typescript function catchTrackEvents(player: InstrumentPlayer) { player.on(MidiTrackEvent.TYPE, (event: MidiTrackEvent) => { let trackEvent = event.trackEvent; if(trackEvent.name == NoteOnEvent.NAME) { // check events/TrackEvent.ts for all TrackEvent names ... } }) } ``` ### EndOfFileEvent This event emits when the play head running to the end of all tracks. ```typescript function catchEndOfFileEvent(player: InstrumentPlayer) { player.on(EndOfFileEvent.TYPE, (event: EndOfFileEvent) => { ... }) } ``` ### ControlEvents This event emits when the player is being controled by calling control functions ```typescript function catchControlEvents(player: InstrumentPlayer) { // play() player.on(ControlEvent.TYPES.PLAY, (event: ControlEvent) => { // this happens when preloading completes after play() is called }) // stop() player.on(ControlEvent.TYPES.STOP, (event: ControlEvent) => { ... }) // pause() player.on(ControlEvent.TYPES.PAUSE, (event: ControlEvent) => { ... }) // resume() player.on(ControlEvent.TYPES.RESUME, (event: ControlEvent) => { ... }) } ```

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

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

# ReactMaterial React components that implement Google's Material Design. Integrated with Code.Gamelet. ## Getting Started ### Usage Open a pre-defined dialog: ```typescript // Alert Dialog CG.ReactMaterial.dialogs.openAlertDialog({ title: 'Alert!!!', message: 'Something is happening.', onClose: () => { console.log('dialog is closed'); }; // Confirm Dialog CG.ReactMaterial.dialogs.openConfirmDialog({ title: 'Delete File', message: 'Are you sure?', onConfirm: () => { console.log('user confirmed'); }; // Input Dialog CG.ReactMaterial.dialogs.openInputDialog({ title: 'What\'s your name?', message: 'Your name will be shown in the highscore board.', onConfirm: (value: string) => { console.log('name = ' + value); }; ``` To write your own React element: ```typescript CG.React.renderElement( <div> <materialUI.TextField id="name" label="Name" margin="normal" /> <materialUI.Button variant="contained" color="primary" size="small" className={classes.button}> Send <materialUI.Icon>send</materialUI.Icon> </materialUI.Button> </div> ); ``` ## 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)**

# PyScript Integrate Py-Script into your CG project. Run py-script on web. - [PyScript home](https://pyscript.net/) - [Document](https://docs.pyscript.net/latest/) - [Github](https://github.com/pyscript/pyscript) ## Getting Started Run a py-script ```typescript CG.PyScript.runScriptFromSource('CG.PyScript/test.py'); ``` Open a py-editor ```typescript CG.PyScript.addRepl('User Script Editor'); ``` Customize the looks ```typescript CG.PyScript.setPyscriptStyles({ fontSize: '16px', padding: '10px, fontFamily: 'Courier', }) ``` ## Build-in utils Some CG related utils are embeded and ready to be used. To get the URL of a source file: ```py url = getAppSourceUrl('CG/PyScript/README.md') print(url) ``` To hide or show python console ```py # hide js.hidePythonConsole() # show js.showPythonConsole() ``` To open dialogs: ```py result = await js.dialog.prompt("What's your name?") print("Your name is " + result) result = await js.dialog.confirm("Are you a girl?") print("You are a " + ("Girl" if result else "Boy")) result = await js.dialog.select(["One", "Two"], "Choose one") print("You got a " + (result if result else "What?")) ``` To draw shapes: ```py # draw a line js.draw.line(10, 400, 300, 100, color=0xFF0000, thickness=5) # draw a rectangle js.draw.rect(100, 300, 100, 50, fillColor=0xFFFF00) # draw a circle js.draw.circle(400, 300, 30, fillColor=0x00FF00, lineThickness=5, lineColor=0x00FFFF) # draw a text js.draw.text(500, 400, "Logo", fontSize=16, color=0xFF9900) # draw lines js.draw.lines([{"x":10,"y":10},{"x":200,"y":400},{"x":100,"y":500}], thickness=2) # draw a polygon js.draw.polygon([{"x":10,"y":10},{"x":200,"y":400},{"x":100,"y":500}]) ```

# 迷宮生成器 用Python以及深度優先演算法製造一個迷宮，然後讓小老鼠在裏面找出口。 ## 我的計畫 1. 迷宮生成演算法 2. 老鼠找出口

# Playground 專門用來快速在畫板上塗塗抹抹的專案。 ## Getting Started 摳出來成為你自己的新專案後，可用以下幾種工具(在/libs裏的工具)快速畫圖。 ```typescript // 畫一個紅色的圓 draw.circle(0, 0, 100, {fillColor: 0xFF0000}); // 打開一個確認視窗 dialog.confirm('Are you sure?', 'Click confirm if you think it is ok.') .then((confirm) => { if(confirm) { console.log('User confirmed.'); } }); // 收集資料畫長條圖 let dataCollector = new DataCollector(); dataCollector.addData('一月', 1, 2); dataCollector.addData('二月', 2, 10); dataCollector.addData('三月', 3, 5); dataCollector.addData('四月', 4, 6); dataCollector.showChart('第一季', 'bar'); ```

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

# 在圓圈裏隨機取一個點 介紹在圓圈裏隨機取一個點的三種方法。 [影片說明](https://youtu.be/2ElcJh0FwrA) ### iT邦2022鐵人賽示範專案 30個遊戲程式的錦囊妙計系列 [Trick 8: 狙擊槍的彈著點是在哈囉？](https://ithelp.ithome.com.tw/articles/10288347)

# (寫程式玩數學#12)新手上路(下):可以旋轉的Hitbox怎麼測碰撞 影片教學 https://youtu.be/1NKRpCfR8gI

# 四輪車演算法 製作以鍵盤控制小車車的遊戲雛形, 模擬四輪車的運動演算法。 [影片說明](https://youtu.be/v7mXuR2ngD0) ### 更為完整的示範APP https://driving.gamelet.online [專案在這](https://code.gamelet.com/edit/driving) ### iT邦2022鐵人賽示範專案 30個遊戲程式的錦囊妙計系列 [Trick 2: 迷你四輪車演算法](https://ithelp.ithome.com.tw/articles/10287663)