Page 1 of 1

Touch Controller Component

PostPosted: Wed Feb 05, 2014 2:54 pm
by robaldred
Hey I just thought I would share my TouchControllerComponent

It allows you to controller a player or entity when working with touch screens.
It can have two touch controlled sticks.
A left stick for movement, and a right stick for aiming and firing.


There are some configuration options to change the behaviour of the sticks.

Options (* = required):
Code: Select all
scene *: (an IgeScene) the scene to which the controllers will be mounted to.
controller_texture *: (IgeTexture) a texture that will be rendered for the controller base
controller_stick_texture *: (IgeTexture) a texture that will render for the controller stick under
movement: (boolean) enable or disable the movement stick
aiming: (boolean) enable or disable the aiming/firing stick
events: (boolean) if true the controller will emit events

- If one of the sticks is enabled it will be triggered by the entire screen.
- If both 'movement' and 'aiming' are false the movement stick will be enabled.

Events (if enabled):

- Emitted when the screen is touched
- Receives two arguments
1. stickname, a string either 'movement' or 'aiming' so you know which stick triggered the event
2. vector, an IgePoint with the stick's current vector from the origin touch point.

- Emitted as the stick is moved
- Receives the same two arguments as controllerOn

- Emitted when the touch is removed.
- Receives a single argument the 'stickname' same as the other events.

I recommend using live assets, if you
A couple of example texture assets are included in the zip.

If both sticks are enabled, the movement stick will triggered by pressing the left side of the screen, the aiming/firing stick the right.

To initialise the controller:
Code: Select all
var entity = new IgeEntity();
   scene: ige.client.uiScene,
   movement: true,
   aiming: true,
   controller_texture: ige.client.gameTexture.controller,
   controller_stick_texture: ige.client.gameTexture.controller_stick,
   events: false

The data of the sticks are accessible directly on the component.

Here's a little example of how it could be used to take input from a player and sent the control vectors to a multiplayer server.
A copy of the current controller stick vectors are stored in the player here to make it easily possible to determine if the stick has moved from the last tick.
This saves you pinging your server with unnecessary updates.

Code: Select all
Player = IgeEntity.extend({
   classId: 'Player',
   init: function() {
      this.movement = {
         id: -1,
         vector: new IgePoint(0,0,0)
      this.aiming = {
         id: -1,
         vector: new IgePoint(0,0,0)
      this.firing = false;
      this.addBehaviour('control_behaviour', this._behaviour);
   _behaviour: function(ctx) {

      if(!ige.isServer) {
         # if control vectors have changed, tell the server
            this.movement.vector = this.controller.movement.vector.clone()
            this.aiming.vector = this.controller.aiming.vector.clone()
         if(this.firing != this.controller.firing) {
            this.firing = this.controller.firing


Zip contains:
coffeescript source, compiled js and example assets

Hope this is useful for someone, if you notice any issues please let me know.