Source code
// Simple drag component
class DragComponent extends Component {
constructor() {
super();
this.dragging = false;
this.clickPos = new Vector();
}
onAdded(gameObject) {
// Add InputComponent is required in order to Sprite listen for input
gameObject.addComponent(new InputComponent());
gameObject.on('pointerDown', this.onPointerDown, this);
Black.input.on('pointerMove', this.onPointerMove, this);
Black.input.on('pointerUp', this.onPointerUp, this);
}
onPointerDown(msg) {
this.clickPos = this.gameObject.globalToLocal(Black.input.pointerPosition);
this.dragging = true;
}
onPointerMove(msg) {
if (this.dragging === false)
return;
// Find the offset relative to its parent
let parentPos = this.gameObject.parent.globalToLocal(Black.input.pointerPosition);
// Set a new position
this.gameObject.x = parentPos.x - this.clickPos.x + this.gameObject.pivotX;
this.gameObject.y = parentPos.y - this.clickPos.y + this.gameObject.pivotY;
}
onPointerUp(msg) {
this.dragging = false;
}
}
class MyGame extends GameObject {
constructor() {
super();
// Set auto resizeable stage
Black.stage.scaleMode = StageScaleMode.LETTERBOX;
Black.stage.setSize(900, 500);
var assets = new AssetManager();
assets.enqueueImage('bottle', '/assets/examples/popart_bottle.png');
assets.on('complete', this.onAssetsLoaded, this);
assets.loadQueue();
}
onAssetsLoaded(m) {
// All parent objects must be also touchable
this.touchable = true;
this.sprite = new Sprite('bottle');
this.sprite.x = this.stage.centerX;
this.sprite.y = this.stage.centerY;
this.sprite.touchable = true;
this.sprite.alignPivot();
this.addChild(this.sprite);
// Add the DragComponent to the sprite
this.drag = this.sprite.addComponent(new DragComponent());
this.lastPos = this.sprite.x;
}
onUpdate() {
let dt = Black.time.delta;
if (this.sprite != null) {
if (this.sprite.x !== this.lastPos) {
this.sprite.rotation = (this.sprite.x - this.lastPos) * dt * (this.drag.clickPos.y - this.sprite.height / 2) / this.sprite.height * -2;
this.lastPos = this.sprite.x;
}
}
}
}
var engine = new Engine('game-container', MyGame, CanvasDriver, [Input]);
engine.start();