C .
ODE
G
AMELET
# 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 PIXI.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 PIXI.keyboardManager.on('pressed', key => { // if the pressed key is space, we call this.createSprite() if (key == PIXI.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/) * [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*
# 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)**
# 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)**
# 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)
# TMXMap Use [Tiled Map Editor](https://www.mapeditor.org/) maps in Code.Gamelet with [pixi.js](http://www.pixijs.com/). ## What is Tiled Map Editor Tiled is a 2D level editor that helps you develop the content of your game. Its primary feature is to edit tile maps of various forms, but it also supports free image placement as well as powerful ways to annotate your level with extra information used by the game. Tiled focuses on general flexibility while trying to stay intuitive. ## Getting Started #### Usage 1. import tmx resources into one appResource ``` typescript CG.Base.resourceManager.addAppResource('TMXMap.testMap'); CG.Base.resourceManager.load(() => { CG.Base.pixi.initialize(600, 600); let tiledMap = new CG.TMXMap.MapRenderer('TMXMap.testMap'); CG.Base.pixi.root.addChild(tiledMap); }); ``` #### Usage 2. import tmx resources into a appResource, and load tmx file from source code ``` typescript CG.Base.resourceManager.addAppSource('test/beach.tmx'); CG.Base.resourceManager.load(() => { CG.Base.pixi.initialize(600, 600); let tiledMap = new CG.TMXMap.MapRenderer('test/beach.tmx') CG.Base.pixi.root.addChild(tiledMap); }); ``` To use tmx of appSource (usage 2), you need to modify the tmx: * tileset > source (tsx file) change "filename" to "resourceAlias:filename" * tileset > image > source (embeded tileset) change "filename" to "resourceAlias" or "resourceAlias:filename" ## Versioning We use [SemVer](http://semver.org/) for versioning. ## Authors * **[Haskasu](/profile/Haskasu)** ## Resources * [Official Tiled Documentation](http://doc.mapeditor.org/en/stable/) * [Tiled Youtube Tutorial](https://www.youtube.com/watch?v=ZwaomOYGuYo)
No more results
ⒸCode.Gamelet.com | Privacy Policy | Terms of Service