# 光暈功能測試專用 此專案用來測試光暈的功能。有發現問題或建議可留言討論。 ## 已知問題 - ??? ## Authors **[小哈片刻](/profile/Haskasu)**

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

# CG.Base Provide tool kits that helps you fast build an app on Code.Gamelet. Key features include: 1. initialize [pixi.js](#pixi.init) or [three.js](#three.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) or [three.js](#three.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) <a name="three.init"></a> ## Start with three.js ```typescript class App { constructor() { CG.Base.three.initialize(600, 400); CG.Base.three.physicsDebugDraw.setActive(true); CG.Base.three.camera.position.z = -50; CG.Base.three.camera.up.set(0, -1, 0); CG.Base.three.camera.lookAt(new THREE.Vector3()); // 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_THREE) ## 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/) * [Three.js](https://threejs.org/) - 3D rendering engine * [API & Docs](https://threejs.org/docs/index.html#manual/introduction/Creating-a-scene) * [Examples](https://threejs.org/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*

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

# React React is a JavaScript library for building interactive interfaces with HTML tags. This project integrate React.js into CG environment, and offer utilities to fast build React apps. ## Getting Started You need to import the latest build of this project before using it. ```typescript Give examples ``` ## Versioning We use [SemVer](http://semver.org/) for versioning. ## Authors * **[Haskasu](/profile/Haskasu)** ## Links and resources * [React Homepage](https://reactjs.org/) * [React@github](https://github.com/facebook/react) * [從零開始學 ReactJS](https://www.gitbook.com/book/kdchang/react101/details)

# 無差別五子棋 五子棋是中國古老的棋藝之一，發展至今天有日本的連珠(Renju)、歐洲的五目(Gomoku)、以及Gamelet的無差別五子棋。棋友們不打不相識，歡迎大家進來互相切磋棋藝吧。 這款使用Code.Gamelet.com平台製作的多人連線遊戲除了Online對弈模式可在線上找棋友單挑之外，還有單人模式，讓玩家可以輕鬆讓站長設計的人工智慧培養你的實力。 單人模式可以選擇下「篤姬五子棋」、「德川家定將軍五子棋」、還有可愛的「女僕五子棋」，每個人都有不同的個性，若是新手請選擇女僕五子棋喔！ ## 規則 遊戲中和玩家對弈的部分有六種規則可以選擇： 1. **無差別**：沒有職業棋賽的各種繁複規則，只要玩家能湊出五個子連成一線就算贏。後手贏得比賽所得到的分數是先手贏得到分數的1.5倍喔。 1. **三手交換**：黑白雙方輪流落子，盤上第三手棋後，後手白子有權選擇交換，或不交換直接下第四手。若後手白子於第三手選擇交換，則棋盤上黑白子交換，並由黑子繼續下子。長連不禁也不判勝。 1. **黑子禁手**：先手黑子不能下禁手棋，包括雙活三、雙四和長連。 1. **山口規則**：(Yamaguchi Rule) 2009世界盃開始採用的職業規則。 1. **索索夫規則**: (Soosõrv Rule) 2017世界盃開始採用的職業規則。 1. **六子棋**: 雙方輪流各下兩子，連成六子（或以上）者獲勝。 開局的玩家一定是持白子後手，遊戲結束後，如果兩人選擇再玩一次，那麼先手和後手就會交換順序，讓贏的人變後手！ 自認是高手的朋友們，快進來開局等人來挑戰吧！ ## 作者 **[小哈片刻](/profile/113321052805704333314@google)**

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

# CgEventsLib The engine of CgEvents. CgEvents is a great way to build your own games with with a CG.built-in editor. ## Attention 請注意 This project is not released and still in actively development. Expect breaking changes before official release. 這個專案目前仍在測試階段，在正式推出之前，所有功能隨時都有可能大改，請謹慎試用。 ## 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)**

# Cordova This library wrap cordova plugins api for accessing native API when running in native app. ## Requirement This library only works when running as a native App(android, ios or windows). You can export a native app from a built production of your projects. Remember to check the corresponding plugin that your app needs when exporting native apps. Ex. Check to import "Camera" plugin if your app needs to access device camera. ## Getting Started Check if the build is running as a Cordova App before accessing any functions. ```typescript if(CG.Base.system.isCordovaApp()) { CG.Cordova.camera.getPicture(imgData => { // do something with the image data. }, error => { // handle error }); } ```

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

# PixiGif Add [GIF](https://en.wikipedia.org/wiki/GIF) 89a (animated GIF) support for pixi.js. ## Getting Started Add GIF image alias to resourceManager as regular resources, and create a GifSprite by CG.PixiGif.createGifSprite(); ```typescript let resourceAlias = 'PixiGif.anim'; CG.Base.resourceManager.addAppResource(alias); CG.Base.resourceManager.load(() => { CG.Base.pixi.initialize(300, 300); // create a GifSprite, attach to pixi.root and play the animation let sprite = CG.PixiGif.createGifSprite(resourceAlias); CG.Base.pixi.root.addChild(sprite); sprite.play(); }); ``` You can setup custom sequences by any combination of frames. ```typescript let sprite = CG.PixiGif.createGifSprite(resourceAlias); sprite.addSequence('jump', [1,3,5]); // define a sequence named jump sprite.setSequence('jump', true); // set jump as the current sequence, and play ``` You can listen to events from GifSprite ```typescript let sprite = CG.PixiGif.createGifSprite(resourceAlias); sprite.on('frameChanged', (sp) => console.log('the frame is just changed')); sprite.on('complete', (sp) => console.log('the animation is complete and stopped')); sprite.on('play', (sp) => console.log('just starts playing the animation')); sprite.on('stop', (sp) => console.log('the animation is stopped')); sprite.on('end', (sp) => console.log('the animation plays to the end of the sequence')); ``` #### References - [GIF reader by Dean McNamee](https://github.com/deanm/omggif) - [GIF Format](http://www.onicos.com/staff/iz/formats/gif.html)

# TiledMapEngine 方塊地圖遊戲引擎 如果大家有玩過光暈戰記／Minecraft，那一定方塊地圖十分了解：<br/> #### <I>方塊地圖是指地圖由一格一格組成。</I><br/> 這個引擎可以讓大家輕鬆做出方塊地圖，並在地圖上設計遊戲。<br/> 不過使用這個引擎之前，你必須在<a href="">我們提供的地圖編輯器</a>設計你的地圖。<br/> 有關地圖編輯器的說明，可以在該專案查看。<br/><br/> ## 我不懂那些函式怎用，怎麼辨？ 你可以點入本專案程式碼查看說明，一切程式碼都是開源的。<br/> 你也可以在本專案建立討論串，說明你的問題。<br/> ## How to use 本專案大多使用asynchronous function，<br/> 換而言之，在使用本專案之前，你可能需要學習一些語法，比如： ```typescript this.gameMap.renderMap() .then(() => { //write your code in here }); ``` 這個程式是要this.gameMap去加載地圖，由於加載地圖需要時間，<br/> 不使用asynchronous function的話，你的程式會卡著一段時間。<br/> 現在，在使用asynchronous function的設計後，你只要把加載地圖之後的程式寫在then中，就可以避免卡著的情況。<br/><br/> 在完成地圖設計之後，你會得一個JSON檔案，這個檔案儲存了一切有關那個的資料。<br/> 然後，你須在你的專案加入本模組，並把JSON檔案上載至你的專案（你也可以修改左方CG.TiledMapEngine中的tiled_map.json）。<br/> 接下來，請參考加載地圖示範： ```typescript CG.Base.pixi.initialize(500, 600); //格式化PIXI CG.Base.resourceManager.addAppResource('TiledMapEngine.mapResource') //加載你的地圖圖片 CG.Base.resourceManager.load(() => { //step 1: 加載JSON $.getJSON(CG.Base.getAppSourceUrl('CG.TiledMapEngine/tiled_map.json'), (data) => { //請把那個url改成你json檔案位置，如果你是直接修改tiled_map.json，這邊可以不用改 //step 2:建立地圖，並把地圖資料，即JSON傳入 this.gameMap = new CG.TiledMapEngine.Map(data , true); //建立一張新地圖，在建立時，會把json資料傳入, true代表有視野限制 //step 3:把地圖素材包加到地圖中 this.gameMap.importUsedMapTexture() //把地圖格子資料加到地圖 .then(() => { //step 4:生成地圖 this.gameMap.renderMap() //生成地圖 .then(() => { CG.Base.pixi.root.addChild(this.gameMap); //把地圖加到PIXI中 }); }); }) }); ``` 這樣，你就會得一個this.gameMap，而這就是你的地圖。<br/> 在CG中，實作無限地圖十分簡單，<br/> 在光暈，我們只有一個地圖，即是只有一個this.gameMap，<br/> 但在CG，你可以使用上面的方法，建立多個地圖。 ## API ### CG.TiledMapEngine.camera ### <div style="color:red">Method</div> set(map: Map, x: number, y: number): void<br/> 根據輸入的地圖和位置，移動視角。 | Parameter | Type | Description | Optional | |:---------:|:------:|:------------------:|:--------:| | map | Map | 要移動視角的地圖。 | No | | x | number | 位置的x軸座標。 | No | | y | number | 位置的y軸座標。 | No | ## Author **[gamtable](/profile/gamtable)**

# TW_Starter 在這兒寫下一段簡短的文字介紹你的遊戲吧。 ## 開始設計 <a href="cg://source/CG.TW_Starter/game.events" class="mat-raised-button mat-primary">編輯遊戲事件表</a> ## 作者 **[Haskasu](/profile/113321052805704333314@google)**

# TutConnections2 在這兒寫下一段簡短的文字介紹你的遊戲吧。 ## 開始設計 <a href="cg://source/CG.TutConnections2/game.events" class="mat-raised-button mat-primary">編輯遊戲事件表</a> ## 作者 **[Haskasu](/profile/113321052805704333314@google)**

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

# GoLinkJump One Paragraph of the game description goes here ## Getting Started <a href="cg://source/CG.GoLinkJump/game.events" class="mat-raised-button mat-primary">Edit Game Events Sheet</a> ## Authors **[Haskasu](/profile/113321052805704333314@google)**

# 入門C班 第十一課 [課程筆記](https://docs.google.com/presentation/d/14mr7O6LSpZh9Z4T85YxaWCk9xi2TeG1ey65nPm5JAXE/edit?usp=sharing) ## 作業題目 更新遊戲為橫向動作遊戲，並試試延長遊戲舞台。 ## 作業指引 1. 將Class寫進不同的ts檔 1. 監聽鍵盤，空白鍵跳躍 1. 製作不同高度的可踩平台 1. 使用攝影機，聚焦主角 <a href="cg://source/app.ts" class="mat-raised-button mat-primary">開始寫作業</a> ## 附註 * [markdown語法](https://tiida54.github.io/2018/01/03/3%E5%88%86%E9%90%98%E5%AD%B8%E6%9C%83Markdown%E5%B8%B8%E7%94%A8%E8%AA%9E%E6%B3%95/) * 出題: [小哈片刻](/profile/Haskasu)

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

# TestCgLogin A platformer game with login/submit scores ## 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() { } ``` ## Assets https://ansimuz.itch.io/ ## Authors **[Haskasu](/profile/Haskasu)**

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