playengine

• PlayEngine

PlayEngine is a framework based on PlayCanvas engine.

** Features

• Refactor playcanvas script system by TypeScript. You can write script by TypeScript now. See [[file:src/scripts/camera/orbitCamera.ts][OrbitCamera]] for more detail.

• Lots of enhancements for PlayCanvas engine. Implemented by prototype inheritance.

• Add asset type managers, such as ModelManager, MaterialManager, TextureManager and so on.

• Add selection for application. You can select entities by raycast or pc.Picker.

• Built in gizmoes.

** Install

*** Prerequirements

• PlayCanvas engine (Global variable =pc=)

  You can use =

  If you prefer to use npm, as there is no official playcanvas engine package on NPM, so I created [[https://www.npmjs.com/package/@scarletsky/playcanvas][@scarletsky/playcanvas]]. It requires [[https://github.com/jsdom/jsdom][JSDOM]] as optional dependency so that it can run on =Node.js= environment. If you don't need it, just add =--no-optional= option on =npm install=:

  #+BEGIN_SRC bash npm install @scarletsky/playcanvas # (this will install JSDOM) npm install @scarletsky/playcanvas --no-optional # (this will NOT install JSDOM)

  npm install playengine #+END_SRC

• PlayCanvas Typings

  #+BEGIN_SRC bash git clone [e-mail]:Gizmo/playcanvas-typings.git ~/your/projects/ ln -s ~/your/projects/playcanvas-typings/ /path/to/playengine/typings/ #+END_SRC

*** Usage

#+BEGIN_SRC javascript const pc = require('@scarletsky/playcanvas'); const pe = require('playengine');

// create pe application const app = new pe.Application(canvas, { mouse: new pc.Mouse(canvas), touch: 'ontouchstart' in window ? new pc.TouchDevice(canvas) : null }); app.autoResize();

// create scripts const OrbitCameraScript = pe.OrbitCamera(app); const OrbitCameraMouseInputScript = pe.OrbitCameraMouseInput(app); const OrbitCameraTouchInputScript = pe.OrbitCameraTouchInput(app);

// create entity with camera component const camera = new pe.Camera({ name: 'camera', position: [2, 1, 2] });

// create entity with model component const cube = new pe.Model({ name: 'cube', position: [0, 0, 0], rotation: [0, 0, 0], type: 'box' });

// create entity with light component const light = new pe.Light({ name: 'light', position: [1, 1, 1], rotation: [45, 45, 45], type: 'point' });

camera.entity.addComponent('script'); camera.entity.script.create(OrbitCameraScript.__name); camera.entity.script.create(OrbitCameraMouseInputScript.__name); camera.entity.script.create(OrbitCameraTouchInputScript.__name);

// you can access pc.Application instance by app.$ app.$.root.addChild(camera.entity); app.$.root.addChild(cube.entity); app.$.root.addChild(light.entity); #+END_SRC