diff --git a/www.eng/img/system/controls/omori_dpad_down.png b/www.eng/img/system/controls/omori_dpad_down.png new file mode 100644 index 0000000..5401be9 Binary files /dev/null and b/www.eng/img/system/controls/omori_dpad_down.png differ diff --git a/www.eng/img/system/controls/omori_dpad_left.png b/www.eng/img/system/controls/omori_dpad_left.png new file mode 100644 index 0000000..684e96e Binary files /dev/null and b/www.eng/img/system/controls/omori_dpad_left.png differ diff --git a/www.eng/img/system/controls/omori_dpad_right.png b/www.eng/img/system/controls/omori_dpad_right.png new file mode 100644 index 0000000..fec2267 Binary files /dev/null and b/www.eng/img/system/controls/omori_dpad_right.png differ diff --git a/www.eng/img/system/controls/omori_dpad_up.png b/www.eng/img/system/controls/omori_dpad_up.png new file mode 100644 index 0000000..944b9dd Binary files /dev/null and b/www.eng/img/system/controls/omori_dpad_up.png differ diff --git a/www.eng/js/plugins/VND_ONSControls.js b/www.eng/js/plugins/VND_ONSControls.js index 39fe7a5..3278e43 100644 --- a/www.eng/js/plugins/VND_ONSControls.js +++ b/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(); - 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); diff --git a/www.rus/img/system/controls/omori_dpad_down.png b/www.rus/img/system/controls/omori_dpad_down.png new file mode 100644 index 0000000..5401be9 Binary files /dev/null and b/www.rus/img/system/controls/omori_dpad_down.png differ diff --git a/www.rus/img/system/controls/omori_dpad_left.png b/www.rus/img/system/controls/omori_dpad_left.png new file mode 100644 index 0000000..684e96e Binary files /dev/null and b/www.rus/img/system/controls/omori_dpad_left.png differ diff --git a/www.rus/img/system/controls/omori_dpad_right.png b/www.rus/img/system/controls/omori_dpad_right.png new file mode 100644 index 0000000..fec2267 Binary files /dev/null and b/www.rus/img/system/controls/omori_dpad_right.png differ diff --git a/www.rus/img/system/controls/omori_dpad_up.png b/www.rus/img/system/controls/omori_dpad_up.png new file mode 100644 index 0000000..944b9dd Binary files /dev/null and b/www.rus/img/system/controls/omori_dpad_up.png differ diff --git a/www.rus/js/plugins/VND_ONSControls.js b/www.rus/js/plugins/VND_ONSControls.js index b2d0fc8..9f24e21 100644 --- a/www.rus/js/plugins/VND_ONSControls.js +++ b/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(); - 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);