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

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

# Tut_SpaceShooter A Space shooter game. Avoid astroids, and shoot as many monster as you can. For more info, go [here](https://code.gamelet.com/edit/Tut_SpaceShooter) ## Controls WASD to accelerate Mouse to shoot ## Edit Game <a href="cg://source/CG.Tut_SpaceShooter/game.events" class="mat-raised-button mat-primary">Edit Game Events Sheet</a>

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

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

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

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

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

# ReactRouter This project wraps [React Router](https://reacttraining.com/react-router/) and provides util classes for easy intergration. Here is the description from official ReactRouter > React Router is a collection of navigational components that compose declaratively with your application. Whether you want to have bookmarkable URLs for your web app or a composable way to navigate in React Native, React Router works wherever React is rendering--so take your pick! ## Getting Started ```typescript CG.React.renderComponent(CG.ReactRouter.BrowserRouter, { routes: [ { component: SomeCompOfYours, path: '/', exact: true, }, { component: SomeCompOfYours1, path: '/path1' }, { component: SomeCompOfYours2, path: '/path2' }, { component: SomeCompOfYours, path: '/*' } ] }) ``` ## References * [Official Site](https://reacttraining.com/react-router/) * [React-Router on github](https://github.com/ReactTraining/react-router)

# A* algorithm In computer science, A* (pronounced as "A star") is a computer algorithm that is widely used in pathfinding and graph traversal, which is the process of finding a path between multiple points, called "nodes". It enjoys widespread use due to its performance and accuracy.<br/><div style='text-align:right'>from <a href='https://en.wikipedia.org/wiki/A*_search_algorithm'>wiki</a></div> ## In this project... 開始遊戲時。程式會自動生成50*50的隨機地圖。<br/> 而算法的開始點為(0,0)。終點則是地圖上隨機一個空白的格子。<br/> 算法完成後，你可以看到有綠色格子，代表算法曾經走過格子。<br/> 你也會看到一個藍色路線，那是A* algorithm 得出的路徑。 ## Reference **[A* tutorial(hightly recommend!)](https://www.gamedev.net/articles/programming/artificial-intelligence/a-pathfinding-for-beginners-r2003/)** ## Authors **[gamtable](/profile/gamtable)**

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

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

# jquery_tutorial_1 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 **[gamtable](/profile/gamtable)**

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

# CgEditorPhysics A Box2d Editor. Help user easily arrange Box2d objects. ## Authors **[Haskasu](/profile/Haskasu)**

# TestGame3 One Paragraph of project description goes here ## Getting Started These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system. ```typescript Give examples ``` ## Versioning We use [SemVer](http://semver.org/) for versioning. ## Acknowledgments * Hat tip to anyone who's code was used * Inspiration * etc ## Authors **[Haskasu](/profile/Haskasu)**

# TestFilePond A Test project for filepond. # FilePond (v1.8.8) A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience. ### Basic Usage Make sure to load the css before creating FilePond Apps. ```typescript CG.Base.linkCSSFile(CG.Base.getAppResourceFileUrl('[YourProjectCode.Alias]', 'react-filepond-0/filepond.min.css')) ``` Create FilePond App. ```typescript let app: FilePond.AppAPI = FilePond.create(); document.body.appendChild(app.element); ``` Create FilePond with existing element. ```typescript let app: FilePond.AppAPI = FilePond.create(document.getElementById('theIdOfTheInput')); ``` With React Component ```typescript export class FilePondComp extends React.Component { render() { return ( <div> <FilePond.FilePond allowMultiple={true} maxFiles={3}> </FilePond.FilePond> </div> ); } } ``` ### Demo Project - [TestPondFile](https://code.gamelet.com/edit/TestFilePond) ## References [Official Site](https://pqina.nl/filepond) This lib includes the following github repositories - [filepond](https://github.com/pqina/filepond) - [react-filepond](https://github.com/pqina/react-filepond) - [filepond-plugin-file-encode](https://github.com/pqina/filepond-plugin-file-encode) - [filepond-plugin-file-metadata](https://github.com/pqina/filepond-plugin-file-encode) - [filepond-plugin-file-poster](https://github.com/pqina/filepond-plugin-file-poster) - [filepond-plugin-file-rename](https://github.com/pqina/filepond-plugin-file-rename) - [filepond-plugin-file-validate-size](https://github.com/pqina/filepond-plugin-file-validate-size) - [filepond-plugin-file-validate-type](https://github.com/pqina/filepond-plugin-file-validate-type) - [filepond-plugin-image-crop](https://github.com/pqina/filepond-plugin-image-crop) - [filepond-plugin-image-exif-orientation](https://github.com/pqina/filepond-plugin-image-exif-orientation) - [filepond-plugin-image-preview](https://github.com/pqina/filepond-plugin-image-preview) - [filepond-plugin-image-resize](https://github.com/pqina/filepond-plugin-image-resize) - [filepond-plugin-image-transform](https://github.com/pqina/filepond-plugin-image-transform) - [filepond-plugin-image-validate-size](https://github.com/pqina/filepond-plugin-image-validate-size)

# Rapid 快速開發模組(by gamtable) 簡化一般常用的功能，讓用戶可以快速開發。 ## Why use Rapid? 為什麼要用Rapid呢? 有些人可能問：為什麼要用Rapid呢?</br> Rapid又有什麼好處呢?</br></br> Rapid把使用對象設在國中生，把功能的複雜的程度大量簡化，當您載入了Rapid，就可以很輕鬆地做出很多東西。</br> 一些很複雜的東西(比如是loadber、按鈕等等)，在Base中都沒沒有提供，但Rapid不但提供了以上功能，我們還把功能整合、中文化。</br></br></br></br> <h3>學習程式?就是如此簡單。</h3> ## Start 開始使用 在使用模組之前，必須在右方的"加載模組"載入本模組。<br> 在編輯時,輸入 **CG.Rapid.**就可以使用，以下為例子： ```typescript export class App { constructor() { CG.Rapid.system.addResource('圖片1','圖片2','圖片3'); //加載資源 } } ``` **注意1:**本模組已事先載入Base的模組，用戶不必重新載入。<br> **注意2:**用戶可以在"討論"提出意見。開發本模組時是根據團隊團員不擅長之處開發，不一定可以涵蓋所有用戶。<br> **注意3:**後續版本會閞發類似光暈同人陣的環境，閞發者可以在OwnGame.ts找到所需函數(未開發完成，現階段使用並沒有效果)。 ## Tutorial 一般教學 檢查是不是用手機瀏覽 ```typescript export class App { constructor() { CG.Base.pixi.initialize(800,600); CG.Rapid.fillClr(0xFFFFFF); if (CG.Rapid.system.checkMobile() == true) { CG.Rapid.text('這是手機用戶',100,100) } else { CG.Rapid.text('這是電腦用戶',100,100) } } } export const APP: App = new App(); ``` 列出一段文字 ```typescript export class App { constructor() { CG.Base.pixi.initialize(800,600); CG.Rapid.fillClr(0xFFFFFF); CG.Rapid.text('列出一段文字',100,100); } } export const APP: App = new App(); ``` 放置圖片 ```typescript export class App { constructor() { CG.Rapid.system.addResource('圖片1'); //要先加載圖片 CG.Base.pixi.initialize(800,600); CG.Base.resourceManager.load(() => { let myImage = CG.Rapid.img('圖片1'); //放置圖片 CG.Base.pixi.root.removeChild(myImage); //移除圖片 }; } } ``` 放置按鈕 ```typescript export class App { constructor() { CG.Rapid.system.addResource('圖片1'); //要先加載圖片 CG.Base.resourceManager.load(() => { let newButton = CG.Rapid.GUI.button(10,10,'圖片1',() => { console.log('點下去就會say hi!'); }); //放置按鈕 CG.Base.pixi.root.removeChild(newButton); //移除按鈕 }; } } ``` ## Authors 作者 * **[gamtable](/dev/profile/gamtable)**

# EventsDemo2 One Paragraph of project description goes here ## Getting Started These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system. ```typescript Give examples ``` ## Versioning We use [SemVer](http://semver.org/) for versioning. ## Acknowledgments * Hat tip to anyone who's code was used * Inspiration * etc ## Authors **[Haskasu](/profile/Haskasu)**