PIXI Controls: New DPad Code
This commit is contained in:
parent
fc098ef830
commit
0510c9c694
1 changed files with 51 additions and 26 deletions
|
@ -71,24 +71,59 @@ ONSControls.createButtons = function() {
|
|||
//=============================================================================
|
||||
ONSControls.createDPad = function() {
|
||||
const container = new PIXI.Sprite.fromImage("js/porting/assets/omori_dpad.png");
|
||||
const directions = [
|
||||
new PIXI.Sprite(PIXI.Texture.WHITE), new PIXI.Sprite(PIXI.Texture.WHITE),
|
||||
new PIXI.Sprite(PIXI.Texture.WHITE), new PIXI.Sprite(PIXI.Texture.WHITE)
|
||||
]
|
||||
container.anchor.set(0.5);
|
||||
for (elem of directions) {
|
||||
container.addChild(elem);
|
||||
elem.interactive = true;
|
||||
elem.anchor.set(0.5);
|
||||
container.interactive = true;
|
||||
container.cursor = "pointer";
|
||||
container.pressed = false;
|
||||
container.pressed_button = null;
|
||||
container.down = function(x, y) {
|
||||
if (Math.abs(x) > container.width / 2 || Math.abs(y) > container.height / 2) {
|
||||
return; // Pointer out of dpad, ignoring event
|
||||
}
|
||||
var threshold = container.width / 5;
|
||||
var button;
|
||||
if (y < -threshold) {
|
||||
button = "DPAD_UP";
|
||||
} else if (y > threshold) {
|
||||
button = "DPAD_DOWN";
|
||||
}
|
||||
if (x < -threshold) {
|
||||
button = "DPAD_LEFT";
|
||||
} else if (x > threshold) {
|
||||
button = "DPAD_RIGHT";
|
||||
}
|
||||
if (button !== container.pressed_button && button !== undefined) {
|
||||
container.pressed = true;
|
||||
container.pressed_button = button;
|
||||
ONSControls.sendEvent({type: "pointerdown"}, button);
|
||||
}
|
||||
}
|
||||
directions[0].on("pointerdown", (event) => {this.sendEvent(event, "DPAD_RIGHT")})
|
||||
.on("pointerup", (event) => {this.sendEvent(event, "DPAD_RIGHT")});
|
||||
directions[1].on("pointerdown", (event) => {this.sendEvent(event, "DPAD_DOWN")})
|
||||
.on("pointerup", (event) => {this.sendEvent(event, "DPAD_DOWN")});
|
||||
directions[2].on("pointerdown", (event) => {this.sendEvent(event, "DPAD_UP")})
|
||||
.on("pointerup", (event) => {this.sendEvent(event, "DPAD_UP")});
|
||||
directions[3].on("pointerdown", (event) => {this.sendEvent(event, "DPAD_LEFT")})
|
||||
.on("pointerup", (event) => {this.sendEvent(event, "DPAD_LEFT")});
|
||||
container.upAll = function() {
|
||||
container.pressed = false;
|
||||
container.pressed_button = null;
|
||||
ONSControls.sendEvent({type: "pointerup"}, "DPAD_RIGHT");
|
||||
ONSControls.sendEvent({type: "pointerup"}, "DPAD_DOWN");
|
||||
ONSControls.sendEvent({type: "pointerup"}, "DPAD_UP");
|
||||
ONSControls.sendEvent({type: "pointerup"}, "DPAD_LEFT");
|
||||
}
|
||||
container.on("pointerup", () => {container.upAll();})
|
||||
container.on("pointerupoutside", () => {container.upAll();})
|
||||
container.on("pointerdown", (event) => {
|
||||
var x = event.data.global.x - this._dPadContainer.x;
|
||||
var y = event.data.global.y - this._dPadContainer.y;
|
||||
container.down(x, y);
|
||||
})
|
||||
container.on("pointermove", (event) => {
|
||||
if (container.pressed) {
|
||||
// DPad pressed, set up button
|
||||
var x = event.data.global.x - this._dPadContainer.x;
|
||||
var y = event.data.global.y - this._dPadContainer.y;
|
||||
container.down(x, y);
|
||||
} else {
|
||||
// DPad not pressed, clear all buttons
|
||||
container.upAll();
|
||||
}
|
||||
})
|
||||
this._controlsCanvas.stage.addChild(container);
|
||||
this._dPadContainer = container;
|
||||
}
|
||||
|
@ -213,19 +248,9 @@ ONSControls.updateButtons = function() {
|
|||
// Update DPAD
|
||||
const dPadSize = ConfigManager.ONSConfig.dPadSize;
|
||||
const dpadContainer = this._dPadContainer;
|
||||
const directions = dpadContainer.children;
|
||||
dpadContainer.width = dPadSize;
|
||||
dpadContainer.height = dPadSize;
|
||||
dpadContainer.position.set(ConfigManager.ONSConfig.dPadX, ConfigManager.ONSConfig.dPadY);
|
||||
for (elem of directions) {
|
||||
elem.width = this._controlsCanvas.vh(0.12);
|
||||
elem.height = this._controlsCanvas.vh(0.12);
|
||||
elem.cursor = 'pointer';
|
||||
}
|
||||
directions[0].x = directions[0].width;
|
||||
directions[1].y = directions[1].height;
|
||||
directions[2].y = -directions[2].height;
|
||||
directions[3].x = -directions[3].width;
|
||||
|
||||
// Update LB/RB
|
||||
const LBsprite = this._LBsprite;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue