PIXI Controls: New DPad Code

This commit is contained in:
OleSTEEP 2024-02-02 18:14:10 +03:00
parent fc098ef830
commit 0510c9c694

View file

@ -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
}
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")});
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);
}
}
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;