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() { ONSControls.createDPad = function() {
const container = new PIXI.Sprite.fromImage("js/porting/assets/omori_dpad.png"); 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); container.anchor.set(0.5);
for (elem of directions) { container.interactive = true;
container.addChild(elem); container.cursor = "pointer";
elem.interactive = true; container.pressed = false;
elem.anchor.set(0.5); 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")}) container.upAll = function() {
.on("pointerup", (event) => {this.sendEvent(event, "DPAD_RIGHT")}); container.pressed = false;
directions[1].on("pointerdown", (event) => {this.sendEvent(event, "DPAD_DOWN")}) container.pressed_button = null;
.on("pointerup", (event) => {this.sendEvent(event, "DPAD_DOWN")}); ONSControls.sendEvent({type: "pointerup"}, "DPAD_RIGHT");
directions[2].on("pointerdown", (event) => {this.sendEvent(event, "DPAD_UP")}) ONSControls.sendEvent({type: "pointerup"}, "DPAD_DOWN");
.on("pointerup", (event) => {this.sendEvent(event, "DPAD_UP")}); ONSControls.sendEvent({type: "pointerup"}, "DPAD_UP");
directions[3].on("pointerdown", (event) => {this.sendEvent(event, "DPAD_LEFT")}) ONSControls.sendEvent({type: "pointerup"}, "DPAD_LEFT");
.on("pointerup", (event) => {this.sendEvent(event, "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._controlsCanvas.stage.addChild(container);
this._dPadContainer = container; this._dPadContainer = container;
} }
@ -213,19 +248,9 @@ ONSControls.updateButtons = function() {
// Update DPAD // Update DPAD
const dPadSize = ConfigManager.ONSConfig.dPadSize; const dPadSize = ConfigManager.ONSConfig.dPadSize;
const dpadContainer = this._dPadContainer; const dpadContainer = this._dPadContainer;
const directions = dpadContainer.children;
dpadContainer.width = dPadSize; dpadContainer.width = dPadSize;
dpadContainer.height = dPadSize; dpadContainer.height = dPadSize;
dpadContainer.position.set(ConfigManager.ONSConfig.dPadX, ConfigManager.ONSConfig.dPadY); 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 // Update LB/RB
const LBsprite = this._LBsprite; const LBsprite = this._LBsprite;