PIXI Controls: Add touch animation for DPAD

www.eng/js/plugins/VND_ONSControls.js

@@ -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(); 
+    container.on("pointerup", () => {container.upAll()});
-        ONSControls.pressAnimation(container, false);})
+    container.on("pointerupoutside", () => {container.upAll()});
-    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);

www.rus/js/plugins/VND_ONSControls.js

@@ -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(); 
+    container.on("pointerup", () => {container.upAll()});
-        ONSControls.pressAnimation(container, false);})
+    container.on("pointerupoutside", () => {container.upAll()});
-    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);