info_outline
# 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
### 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*
Haskasu 
LauKaKit 
gamtable