Exposes THREE.js to the Typescript API of the Superpowers Game system for Superpowers, the extensible HTML5 2D+3D game engine.
Clone or download
Latest commit ed4fcb3 Oct 5, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
project/threejs Update for Superpowers v2.1. Update definitions to r73 (was r74). Sep 6, 2016
public/bundles Update definitions to r80, for Superpowers v3. Oct 5, 2016
runtime Update for Superpowers v2.1. Update definitions to r73 (was r74). Sep 6, 2016
typescriptAPI Update definitions to r80, for Superpowers v3. Oct 5, 2016
.gitattributes Add .gitattribues file to prevent issues regarding the line endings w… Apr 6, 2015
.gitignore Update to new asset paths on disk. Dec 30, 2015
LICENCE Update to new API plugin registration. Jan 1, 2016
package.json
readme.md Update for Superpowers v2.1. Update definitions to r73 (was r74). Sep 6, 2016
tsconfig.json Update for Superpowers v2.1. Update definitions to r73 (was r74). Sep 6, 2016

readme.md

Superpowers Game THREE.js plugin

This plugin exposes THREE.js r73 to the Typescript API of the Game system for Superpowers, the extensible HTML5 2D+3D game engine.

Installation

This plugin depends on the DOM plugin, so you need to install it too.

Usage

Typically, runtime objects have an __inner property set to their conterpart instance on the engine side which will reference the THREE objects they works with (texture for a Sprite asset, threeMesh for a SpriteRenderer, ...).

The __inner property is likely not exposed, so you have to store the objects in a temp variable of type any to access it.

You also have direct access to the SupWebGLRenderer and SupThreeScene variables which are set to the instances of THREE.WebGLRenderer and THREE.Scene used by Superpowers.

Quick example

For instance, the following code creates the two cubes and the sphere you can see in the image below:

threejs-plugin-demo.png

class MyBehavior extends Sup.Behavior {
  awake() {

    // add a cube to an actor

    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    var material = new THREE.MeshBasicMaterial( {color: 0xFF4784, wireframe: true} );
    var cube = new THREE.Mesh( geometry, material );

    var tmpActor: any = this.actor; // necessary to access __inner which isn't in the definitions
    tmpActor.__inner.threeObject.add( cube );

    this.actor.setEulerAngles( new Sup.Math.Vector3(0,20,0) );


    // create another cube and set the same texture as Sup's logo

    var tmpSprite: any = Sup.get("Sup Logo", Sup.Sprite);

    var material = new THREE.MeshBasicMaterial( {
      map: tmpSprite.__inner.textures.map,
      //transparent: true,
      color: 0x96FF96, // 150,255,150
      //wireframe: true
    } );
    var cube = new THREE.Mesh( geometry, material );
    cube.rotation.fromArray( [0,-20,0] );

    var tmpActor: any = Sup.getActor("Textured Cube");
    tmpActor.__inner.threeObject.add( cube );
    tmpActor.__inner.threeObject.updateMatrixWorld();


    // create a sphere and add it directly to Sup's scene.

    var sphereGeometry = new THREE.SphereGeometry( 1 );
    var material = new THREE.MeshBasicMaterial( {color: 0x479684, wireframe: true} );
    var sphere = new THREE.Mesh( sphereGeometry, material );
    sphere.position.set(0, 3, 0);

    SupThreeScene.add( sphere );
    SupThreeScene.updateMatrixWorld(true);
  }
}

Test/Demo project

The project folder contains a test/demo project.

To install it, put the project's folder inside Superpowers' projects folder, then restart the server.

On Window, Superpowers' projects folder is typically in C:\Users\[Your user name]\AppData\Roaming\Superpowers.