VienDesuPorting/OMORI_Android
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

PIXI Controls: Add touch animation for DPAD

Browse source
This commit is contained in:
OleSTEEP 2024-03-22 23:04:58 +03:00
parent 82e62f6422
commit a793af35ac
10 changed files with 74 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

42
www.eng/js/plugins/VND_ONSControls.js
View file

@ -66,17 +66,22 @@ ONSControls.createDPad = function() {
var button;
if (y < -threshold) {
button = "DPAD_UP";
ONSControls.dpadAnimation("up");
} else if (y > threshold) {
button = "DPAD_DOWN";
ONSControls.dpadAnimation("down");
}
if (x < -threshold) {
button = "DPAD_LEFT";
ONSControls.dpadAnimation("left");
} else if (x > threshold) {
button = "DPAD_RIGHT";
ONSControls.dpadAnimation("right");
}
if (button !== container.pressed_button && button !== undefined) {
if (container.pressed_button !== null) {
ONSControls.sendEvent({type: "pointerup"}, container.pressed_button);
ONSControls.dpadAnimation(null);
}
container.pressed = true;
container.pressed_button = button;
@ -90,9 +95,11 @@ ONSControls.createDPad = function() {
ONSControls.sendEvent({type: "pointerup"}, "DPAD_DOWN");
ONSControls.sendEvent({type: "pointerup"}, "DPAD_UP");
ONSControls.sendEvent({type: "pointerup"}, "DPAD_LEFT");
ONSControls.dpadAnimation(null);
}
this._controlsCanvas.stage.addChild(container);
this._dPadContainer = container;
this._preloadDPADStates();
}
//=============================================================================
// * LB/RB Buttons
@ -296,6 +303,22 @@ ONSControls.toSafeArea = function(position, element) {
return position;
}
//=============================================================================
// * Preload all dpad states to avoid dpad blink
//=============================================================================
ONSControls._preloadDPADStates = function() {
var states = [
new PIXI.Texture.fromImage(`img/system/controls/omori_dpad_up.png`),
new PIXI.Texture.fromImage(`img/system/controls/omori_dpad_left.png`),
new PIXI.Texture.fromImage(`img/system/controls/omori_dpad_right.png`),
new PIXI.Texture.fromImage(`img/system/controls/omori_dpad_down.png`),
new PIXI.Texture.fromImage(`img/system/controls/omori_dpad.png`),
];
for (state of states) {
this._dPadContainer.setTexture(state);
}
}
//=============================================================================
// * Set button pressing animation
//=============================================================================
ONSControls.pressAnimation = function(element, is_pressed) {
@ -303,6 +326,18 @@ ONSControls.pressAnimation = function(element, is_pressed) {
element.alpha = is_pressed ? orig_opacity / 1.5 : orig_opacity;
}
//=============================================================================
// * Set dpad pressing animation
//=============================================================================
ONSControls.dpadAnimation = function(direction) {
if (direction !== null) {
var texture = new PIXI.Texture.fromImage(`img/system/controls/omori_dpad_${direction}.png`);
this._dPadContainer.setTexture(texture);
} else {
var base_texture = new PIXI.Texture.fromImage("img/system/controls/omori_dpad.png");
this._dPadContainer.setTexture(base_texture);
}
}
//=============================================================================
// * Setup events for button
//=============================================================================
ONSControls.setupButton = function(element, button) {
@ -334,12 +369,9 @@ ONSControls.setupInteractive = function () {
// DPAD
const container = this._dPadContainer;
container.on("pointerup", () => {container.upAll();
ONSControls.pressAnimation(container, false);})
container.on("pointerupoutside", () => {container.upAll();
ONSControls.pressAnimation(container, false);})
container.on("pointerup", () => {container.upAll()});
container.on("pointerupoutside", () => {container.upAll()});
container.on("pointerdown", (event) => {
ONSControls.pressAnimation(container, true);
var x = event.data.global.x - this._dPadContainer.x;
var y = event.data.global.y - this._dPadContainer.y;
container.down(x, y);