From 04ae22dfdb3f0f4457f2ce6f800355536ea2854c Mon Sep 17 00:00:00 2001 From: OleSTEEP Date: Thu, 21 Mar 2024 17:56:11 +0300 Subject: [PATCH] PIXI Controls: Add basic touch animation --- www.eng/js/plugins/VND_ONSControls.js | 26 ++++++++++++++++++++------ www.rus/js/plugins/VND_ONSControls.js | 26 ++++++++++++++++++++------ 2 files changed, 40 insertions(+), 12 deletions(-) diff --git a/www.eng/js/plugins/VND_ONSControls.js b/www.eng/js/plugins/VND_ONSControls.js index 5117ed4..a80cc71 100644 --- a/www.eng/js/plugins/VND_ONSControls.js +++ b/www.eng/js/plugins/VND_ONSControls.js @@ -238,6 +238,7 @@ ONSControls.updateButtons = function() { btn.width = buttonsSize; btn.height = buttonsSize; btn.interactive = true; + btn.alpha = ConfigManager.ONSConfig.buttonsOpacity; } buttons[0].y = buttonsSize / 2 + buttonsSize / 4; buttons[1].x = -(buttonsSize / 2 + buttonsSize / 4); @@ -245,7 +246,6 @@ ONSControls.updateButtons = function() { buttons[3].y = -(buttonsSize / 2 + buttonsSize / 4); container.width = buttonsSize * 2; container.height = buttonsSize * 2; - container.alpha = ConfigManager.ONSConfig.buttonsOpacity; container.position.set(ConfigManager.ONSConfig.buttonsX, ConfigManager.ONSConfig.buttonsY); container.position = this.toSafeArea(container.position, container); @@ -295,12 +295,23 @@ ONSControls.toSafeArea = function(position, element) { return position; } //============================================================================= +// * Set button pressing animation +//============================================================================= +ONSControls.pressAnimation = function(element, is_pressed) { + const orig_opacity = ConfigManager.ONSConfig.buttonsOpacity; + element.alpha = is_pressed ? orig_opacity / 1.5 : orig_opacity; + console.log(orig_opacity, element.alpha); +} +//============================================================================= // * Setup events for button //============================================================================= ONSControls.setupButton = function(element, button) { - element.on("pointerdown", (event) => {this.sendEvent(event, button)}) - .on("pointerup", (event) => {this.sendEvent(event, button)}) - .on("pointerupoutside", (event) => {this.sendEvent(event, button)}); + element.on("pointerdown", (event) => {this.sendEvent(event, button); + ONSControls.pressAnimation(element, true);}) + .on("pointerup", (event) => {this.sendEvent(event, button); + ONSControls.pressAnimation(element, false);}) + .on("pointerupoutside", (event) => {this.sendEvent(event, button); + ONSControls.pressAnimation(element, false);}); } //============================================================================= // * Setup controls touch events @@ -323,9 +334,12 @@ ONSControls.setupInteractive = function () { // DPAD const container = this._dPadContainer; - container.on("pointerup", () => {container.upAll();}) - container.on("pointerupoutside", () => {container.upAll();}) + container.on("pointerup", () => {container.upAll(); + ONSControls.pressAnimation(container, false);}) + container.on("pointerupoutside", () => {container.upAll(); + ONSControls.pressAnimation(container, false);}) 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); diff --git a/www.rus/js/plugins/VND_ONSControls.js b/www.rus/js/plugins/VND_ONSControls.js index 7d7125d..3f20c6a 100644 --- a/www.rus/js/plugins/VND_ONSControls.js +++ b/www.rus/js/plugins/VND_ONSControls.js @@ -238,6 +238,7 @@ ONSControls.updateButtons = function() { btn.width = buttonsSize; btn.height = buttonsSize; btn.interactive = true; + btn.alpha = ConfigManager.ONSConfig.buttonsOpacity; } buttons[0].y = buttonsSize / 2 + buttonsSize / 4; buttons[1].x = -(buttonsSize / 2 + buttonsSize / 4); @@ -245,7 +246,6 @@ ONSControls.updateButtons = function() { buttons[3].y = -(buttonsSize / 2 + buttonsSize / 4); container.width = buttonsSize * 2; container.height = buttonsSize * 2; - container.alpha = ConfigManager.ONSConfig.buttonsOpacity; container.position.set(ConfigManager.ONSConfig.buttonsX, ConfigManager.ONSConfig.buttonsY); container.position = this.toSafeArea(container.position, container); @@ -295,12 +295,23 @@ ONSControls.toSafeArea = function(position, element) { return position; } //============================================================================= +// * Set button pressing animation +//============================================================================= +ONSControls.pressAnimation = function(element, is_pressed) { + const orig_opacity = ConfigManager.ONSConfig.buttonsOpacity; + element.alpha = is_pressed ? orig_opacity / 1.5 : orig_opacity; + console.log(orig_opacity, element.alpha); +} +//============================================================================= // * Setup events for button //============================================================================= ONSControls.setupButton = function(element, button) { - element.on("pointerdown", (event) => {this.sendEvent(event, button)}) - .on("pointerup", (event) => {this.sendEvent(event, button)}) - .on("pointerupoutside", (event) => {this.sendEvent(event, button)}); + element.on("pointerdown", (event) => {this.sendEvent(event, button); + ONSControls.pressAnimation(element, true);}) + .on("pointerup", (event) => {this.sendEvent(event, button); + ONSControls.pressAnimation(element, false);}) + .on("pointerupoutside", (event) => {this.sendEvent(event, button); + ONSControls.pressAnimation(element, false);}); } //============================================================================= // * Setup controls touch events @@ -323,9 +334,12 @@ ONSControls.setupInteractive = function () { // DPAD const container = this._dPadContainer; - container.on("pointerup", () => {container.upAll();}) - container.on("pointerupoutside", () => {container.upAll();}) + container.on("pointerup", () => {container.upAll(); + ONSControls.pressAnimation(container, false);}) + container.on("pointerupoutside", () => {container.upAll(); + ONSControls.pressAnimation(container, false);}) 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);