Forums » Code » Another Thumb Control

I just completed a small thumb control that I needed for an iPad game and I just thought I'd share it.

Basically wherever you place your thumb is where the control will appear. When you release, the control vanishes as well. This works well if you are left handed for example.

The two images referenced are simply circles. One has a radius of 100px and the other about 48px.

The code needs customisation to work on your system. I'm only sharing this to save someone some time hopefully.

Code for the control thumbArea.js;

ig.module('game.entities.thumbArea')

.requires(
    'impact.entity'
)

.defines(function () {

    EntityThumbBall = ig.Entity.extend({
        img: new ig.Image('media/ThumbBall.png'),
        zIndex: 1000,
        boundX: 0,
        boundY: 0,
        positionX: 0,
        positionY: 0,
        active: false,

        init: function (x, y, settings) {
            this.parent(x, y, settings);
            ig.game.sortEntitiesDeferred();
        },

        draw: function () {

            var pos = { x: 0, y: 0 };

            if (ig.input.mouse.y < this.boundY - 100 || ig.input.mouse.y > this.boundY + 100 || ig.input.mouse.x < this.boundX - 100 || ig.input.mouse.x > this.boundX + 100) {
                this.positionX = 0;
                this.positionY = 0;
                this.active = false;
            } else {
                this.img.draw(ig.input.mouse.x - 24, ig.input.mouse.y - 24);
                this.positionX = ig.input.mouse.x;
                this.positionY = ig.input.mouse.y;
                this.active = true;
            }

            this.parent();
        }

    })

    EntityThumbArea = ig.Entity.extend({
        img: new ig.Image('media/ThumbArea.png'),
        size: { x: 200, y: 200 },
        thumbBall: null,
        angle: 0,

        init: function (x, y, settings) {
            this.thumbBall = ig.game.spawnEntity('EntityThumbBall', ig.input.mouse.x, ig.input.mouse.y, { boundX: ig.input.mouse.x, boundY: ig.input.mouse.y });
            this.parent(x, y, settings);
        },

        update: function () {
            if (this.thumbBall.active)
                this.calculateAngle();
            else
                this.angle = -1;

            this.parent();
        },

        draw: function () {
            this.img.draw(this.pos.x, this.pos.y);
            this.parent();
        },

        kill: function () {
            this.thumbBall.kill();
            this.angle = -1;
            this.parent();
        },

        calculateAngle: function () {
            var radius = Math.floor(this.size.x / 2);
            var center = { x: this.pos.x + 100, y: this.pos.y + 100 };

            var p1 = { x: parseInt(this.thumbBall.positionX), y: parseInt(this.thumbBall.positionY) };

            radius = Math.sqrt(Math.abs(p1.x - center.x) * Math.abs(p1.x - center.x)
				+ Math.abs(p1.y - center.y) * Math.abs(p1.y - center.y));
            var p0 = { x: center.x, y: center.y - radius };
            var angle = 2 * Math.atan2(p1.y - p0.y, p1.x - p0.x);
            this.angle = Math.round((angle * 180 / Math.PI) * 100) / 100;
        }

    })

});

Usage:

This is in my update event of the game;

            var touch = (ig.input.state('CanvasTouch')) ? ig.input.state('CanvasTouch') : "";
            if (touch) {
                if (this.getEntitiesByType(EntityThumbArea) == false) {
                    this.thumbControl = ig.game.spawnEntity(EntityThumbArea, ig.input.mouse.x - 100, ig.input.mouse.y - 100);
                }
            } else {
                if (this.thumbControl) {
                    this.thumbControl.kill();
                }
            }

Don't forget to do this;

ig.input.bind(ig.KEY.MOUSE1, 'CanvasTouch');

in your init code.

Then use

this.thumbControl.angle 

to get the angle of where the user is within the circle. Convert that to up, left, right and down and you're in business.

If anyone wants this as a plugin, let me know and I'll see what I can do. Or, you could convert it for me :)

Seams nice, I will try this one out, an yeah we all want plugins :D

you could have a much simpler code if you had a EntityThumbArea that is always spawned, and visible only when touch. Even better, you can make a fade out using an ig.Timer and playing with context2D.globalAlpha.
something like :

isVisible : false,
fadeOutTimer : null,
fadeOutTime : 1.5,

//... in the init
this.fadeOutTimer = new ig.Timer(1);

// in the update you set this.isVisible to true or false depending on touch
// reset timer on touch...
this.fadeOutTimer.set(1);
// ... and set timer when touch released
this.fadeOutTimer.set(this.fadeOutTime);

//... in the draw()
if ((!this.isVisible) && (this.this.fadeOutTimer.delta>0)) return;
if (this.fadeOutTimer.delta()<0)  // fadeOut ongoing.
{
  var ctx=ig.system.context , oldglobalAlpha=ctx.globalAlpha;
  var alpha = this.fadeOutTimer.delta().map(-this.fadeOutTime, 0,1,0);
  ctx.globalAlpha= alpha; // you might use a shaping function like cos or x*x*x or....
  this.parent();
  ctx.globalAlpha=oldGlobalAlpha;
}
else
{ this.parent(); // normal draw.
}

// to make your plugins more interesting, provide some callbacks, like 
thumbStart(pos) 
thumbOngoing(startPos, currentPos, angle) 
thumbStopped(startPos, lastPos, angle) 

// thumbOngoing would be called every update if a thumb is ... ongoing...