Hello all,
So I’ve ported my existing virtual controls implementation for touch devices into a framework that I think might be beneficial to “desktop” devs. Basically, this lets you overlay Joysticks and Buttons onto your canvas, which you can associate with keyboard events (i.e. When the joystick is pulled left, trigger keydown for the “a” key and when released or move elsewhere, trigger keyup for the ‘a’ key.)
This means that with very minor (like, very minor) changes, you could add a Joystick, map the keys, and bingo bango the code you already have gets invoked by the framework. Usage looks like this so far:
var CocosApp = cc.LayerColor.extend({
controls: null,
init: function () {
'use strict';
/* Our Layer. */
this._super();
this.initWithColor(new cc.Color4B(50, 50, 50, 255));
this.controls = new ControlsOverlay(ccCanvas);
this.controls.addJoystick({
imageBase: './Resources/controls_overlay/dpad.png',
imagePad: './Resources/controls_overlay/pad.png',
fixed: false,
trigger: new cc.Rect(0, 0, ccCanvas.width / 2.0, ccCanvas.height),
opacLow: 0.0,
simulateKeys: ['a', -1, 'w', -1, 'd', -1, 's', -1]
});
this.controls.addButton({
image: './Resources/controls_overlay/buttonred.png',
pos: new cc.Point(ccCanvas.width - 54.0, ccCanvas.height - 54.0),
opacLow: 80.0,
simulateKey: 'enter'
});
this.addChild(this.controls);
return true;
}
});
In this example, we’re adding a Joystick with Left, Up, Right, and Down mapped to A, W, D, and S, and a button mapped to ‘enter’. The –1 in simulateKeys means we’re excluding diagonals from triggering keyboard events, but we very easily could trigger something for those as well.
Joysticks can be both fixed in one spot or appear where the user touches. I’ve replaced the controls in my samples with this, but what I haven’t done is test this out with a real keyboard implemented game. So, my ask to the community is:
Can anyone point me at a sample that uses keyboard movement to, say, move an image around a screen? Something basic. If I write it myself, I might unwittingly do stuff to force it to work, so I’m looking for a pre-written sample.
Once I can verify that all works as expected, I’ll be making the framework, a usage guide, and everything associated with it public. I just want to make sure it’s working properly first.