From e6f31a5e4f34de909866670b5c1ad3ecf04b66f9 Mon Sep 17 00:00:00 2001 From: OleSTEEP Date: Sun, 18 Feb 2024 14:39:12 +0300 Subject: [PATCH] PIXI Controls: Reimplement safe area with clamp() --- www.rus/js/plugins/VND_ONSControls.js | 69 ++++++++++++++------------- 1 file changed, 37 insertions(+), 32 deletions(-) diff --git a/www.rus/js/plugins/VND_ONSControls.js b/www.rus/js/plugins/VND_ONSControls.js index 1f13891..95a3099 100644 --- a/www.rus/js/plugins/VND_ONSControls.js +++ b/www.rus/js/plugins/VND_ONSControls.js @@ -248,6 +248,7 @@ ONSControls.updateButtons = function() { 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); // Update DPAD const dPadSize = ConfigManager.ONSConfig.dPadSize; @@ -256,15 +257,18 @@ ONSControls.updateButtons = function() { dpadContainer.height = dPadSize; dpadContainer.alpha = ConfigManager.ONSConfig.buttonsOpacity; dpadContainer.position.set(ConfigManager.ONSConfig.dPadX, ConfigManager.ONSConfig.dPadY); + dpadContainer.position = this.toSafeArea(dpadContainer.position, dpadContainer); // Update LB/RB const LBsprite = this._LBsprite; const RBsprite = this._RBsprite; LBsprite.position.set(ConfigManager.ONSConfig.LBX, ConfigManager.ONSConfig.LBY); + LBsprite.position = this.toSafeArea(LBsprite.position, LBsprite); LBsprite.alpha = ConfigManager.ONSConfig.buttonsOpacity; LBsprite.width = ConfigManager.ONSConfig.bumpersWidth; LBsprite.height = ConfigManager.ONSConfig.bumpersHeight; RBsprite.position.set(ConfigManager.ONSConfig.RBX, ConfigManager.ONSConfig.RBY); + RBsprite.position = this.toSafeArea(RBsprite.position, RBsprite); RBsprite.alpha = ConfigManager.ONSConfig.buttonsOpacity; RBsprite.width = ConfigManager.ONSConfig.bumpersWidth; RBsprite.height = ConfigManager.ONSConfig.bumpersHeight; @@ -272,6 +276,7 @@ ONSControls.updateButtons = function() { // Update additional const showButton = this._showButton; showButton.position.set(ConfigManager.ONSConfig.showX, ConfigManager.ONSConfig.showY); + showButton.position = this.toSafeArea(showButton.position, showButton); showButton.width = ConfigManager.ONSConfig.additonalSize; showButton.height = ConfigManager.ONSConfig.additonalSize; showButton.alpha = ConfigManager.ONSConfig.buttonsOpacity; @@ -280,7 +285,7 @@ ONSControls.updateButtons = function() { //============================================================================= // * Clamp to safe area //============================================================================= -ONSControls.clampSafeArea = function(position, element) { +ONSControls.toSafeArea = function(position, element) { let safeAreaX = ConfigManager.ONSConfig.safeArea + element.width / 2; let safeAreaY = ConfigManager.ONSConfig.safeArea + element.height / 2; position.x = position.x.clamp(safeAreaX, this._controlsCanvas.screen.width - safeAreaX); @@ -379,7 +384,7 @@ ONSControls.setupDragNDrop = function(element) { } var onMove = function(event) { if (element) { - element.parent.toLocal(ONSControls.clampSafeArea(event.data.global, element), null, element.position); + element.parent.toLocal(ONSControls.toSafeArea(event.data.global, element), null, element.position); ConfigManager.ONSConfig.customPos = true; }; } @@ -564,22 +569,22 @@ ConfigManager.ONSConfig.buttonsScale ||= this.options.buttonsScale; ConfigManager.ONSConfig.buttonsOpacity ||= this.options.buttonsOpacity; ConfigManager.ONSConfig.safeArea ||= ONSControls._controlsCanvas.vh(0.032); ConfigManager.ONSConfig.buttonsSize ||= ONSControls._controlsCanvas.vh(0.18) * ConfigManager.ONSConfig.buttonsScale; -ConfigManager.ONSConfig.buttonsX ||= ONSControls._controlsCanvas.screen.width - (ConfigManager.ONSConfig.buttonsSize + ConfigManager.ONSConfig.safeArea); -ConfigManager.ONSConfig.buttonsY ||= ONSControls._controlsCanvas.screen.height - (ConfigManager.ONSConfig.buttonsSize + ConfigManager.ONSConfig.safeArea); +ConfigManager.ONSConfig.buttonsX ||= ONSControls._controlsCanvas.screen.width - this.ONSConfig.buttonsSize; +ConfigManager.ONSConfig.buttonsY ||= ONSControls._controlsCanvas.screen.height - this.ONSConfig.buttonsSize; ConfigManager.ONSConfig.dPadSize ||= ONSControls._controlsCanvas.vh(0.36) * ConfigManager.ONSConfig.buttonsScale; -ConfigManager.ONSConfig.dPadX ||= ConfigManager.ONSConfig.dPadSize / 2 + ConfigManager.ONSConfig.safeArea; -ConfigManager.ONSConfig.dPadY ||= ONSControls._controlsCanvas.screen.height - (ConfigManager.ONSConfig.dPadSize / 2 + ConfigManager.ONSConfig.safeArea); +ConfigManager.ONSConfig.dPadX ||= this.ONSConfig.dPadSize / 2; +ConfigManager.ONSConfig.dPadY ||= ONSControls._controlsCanvas.screen.height - this.ONSConfig.dPadSize / 2; ConfigManager.ONSConfig.bumpersOffsetX ||= 16; ConfigManager.ONSConfig.bumpersOffsetY ||= ONSControls._controlsCanvas.vh(0.30); ConfigManager.ONSConfig.bumpersWidth ||= ONSControls._controlsCanvas.vh(0.188) * ConfigManager.ONSConfig.buttonsScale; ConfigManager.ONSConfig.bumpersHeight ||= ONSControls._controlsCanvas.vh(0.12) * ConfigManager.ONSConfig.buttonsScale; -ConfigManager.ONSConfig.LBX ||= ConfigManager.ONSConfig.bumpersOffsetX + ConfigManager.ONSConfig.safeArea + ConfigManager.ONSConfig.bumpersWidth / 2; -ConfigManager.ONSConfig.LBY ||= (ConfigManager.ONSConfig.bumpersOffsetY + ConfigManager.ONSConfig.safeArea + ConfigManager.ONSConfig.bumpersHeight / 2); -ConfigManager.ONSConfig.RBX ||= ONSControls._controlsCanvas.screen.width - (ConfigManager.ONSConfig.safeArea + ConfigManager.ONSConfig.bumpersOffsetX + ConfigManager.ONSConfig.bumpersWidth / 2); -ConfigManager.ONSConfig.RBY ||= (ConfigManager.ONSConfig.bumpersOffsetY + ConfigManager.ONSConfig.safeArea + ConfigManager.ONSConfig.bumpersHeight / 2); +ConfigManager.ONSConfig.LBX ||= this.ONSConfig.bumpersOffsetX + this.ONSConfig.bumpersWidth / 2; +ConfigManager.ONSConfig.LBY ||= this.ONSConfig.bumpersOffsetY + this.ONSConfig.bumpersHeight / 2; +ConfigManager.ONSConfig.RBX ||= this.ONSConfig.bumpersOffsetX + this.ONSConfig.bumpersWidth / 2; +ConfigManager.ONSConfig.RBY ||= this.ONSConfig.bumpersOffsetY + this.ONSConfig.bumpersHeight / 2; ConfigManager.ONSConfig.additonalSize ||= ONSControls._controlsCanvas.vh(0.06) * ConfigManager.ONSConfig.buttonsScale; -ConfigManager.ONSConfig.showX ||= ONSControls._controlsCanvas.screen.width - (ConfigManager.ONSConfig.additonalSize / 2 + ConfigManager.ONSConfig.safeArea); -ConfigManager.ONSConfig.showY ||= ONSControls._controlsCanvas.screen.height - (ConfigManager.ONSConfig.additonalSize / 2 + ConfigManager.ONSConfig.safeArea); +ConfigManager.ONSConfig.showX ||= ONSControls._controlsCanvas.screen.width - this.ONSConfig.additonalSize / 2; +ConfigManager.ONSConfig.showY ||= ONSControls._controlsCanvas.screen.height - this.ONSConfig.additonalSize / 2; //============================================================================= // * Restore defaults //============================================================================= @@ -596,23 +601,23 @@ ConfigManager.restoreDefaultConfig = function () { this.ONSConfig.buttonsOpacity = ONSControls.options.buttonsOpacity; this.ONSConfig.safeArea = ONSControls._controlsCanvas.vh(0.032); this.ONSConfig.buttonsSize = ONSControls._controlsCanvas.vh(0.18) * this.ONSConfig.buttonsScale; - this.ONSConfig.buttonsX = ONSControls._controlsCanvas.screen.width - (this.ONSConfig.buttonsSize + this.ONSConfig.safeArea); - this.ONSConfig.buttonsY = ONSControls._controlsCanvas.screen.height - (this.ONSConfig.buttonsSize + this.ONSConfig.safeArea); + this.ONSConfig.buttonsX = ONSControls._controlsCanvas.screen.width - this.ONSConfig.buttonsSize; + this.ONSConfig.buttonsY = ONSControls._controlsCanvas.screen.height - this.ONSConfig.buttonsSize; this.ONSConfig.dPadSize = ONSControls._controlsCanvas.vh(0.36) * this.ONSConfig.buttonsScale; - this.ONSConfig.dPadX = this.ONSConfig.dPadSize / 2 + this.ONSConfig.safeArea; - this.ONSConfig.dPadY = ONSControls._controlsCanvas.screen.height - (this.ONSConfig.dPadSize / 2 + this.ONSConfig.safeArea); + this.ONSConfig.dPadX = this.ONSConfig.dPadSize / 2; + this.ONSConfig.dPadY = ONSControls._controlsCanvas.screen.height - this.ONSConfig.dPadSize / 2; this.ONSConfig.bumpersOffsetX = 16; this.ONSConfig.bumpersOffsetY = ONSControls._controlsCanvas.vh(0.30); this.ONSConfig.bumpersWidth = ONSControls._controlsCanvas.vh(0.188) * this.ONSConfig.buttonsScale; this.ONSConfig.bumpersHeight = ONSControls._controlsCanvas.vh(0.12) * this.ONSConfig.buttonsScale; - this.ONSConfig.LBX = this.ONSConfig.bumpersOffsetX + this.ONSConfig.safeArea + this.ONSConfig.bumpersWidth / 2; - this.ONSConfig.LBY = (this.ONSConfig.bumpersOffsetY + this.ONSConfig.safeArea + this.ONSConfig.bumpersHeight / 2); - this.ONSConfig.RBX = ONSControls._controlsCanvas.screen.width - (this.ONSConfig.safeArea + this.ONSConfig.bumpersOffsetX + this.ONSConfig.bumpersWidth / 2); - this.ONSConfig.RBY = (this.ONSConfig.bumpersOffsetY + this.ONSConfig.safeArea + this.ONSConfig.bumpersHeight / 2); + this.ONSConfig.LBX = this.ONSConfig.bumpersOffsetX + this.ONSConfig.bumpersWidth / 2; + this.ONSConfig.LBY = this.ONSConfig.bumpersOffsetY + this.ONSConfig.bumpersHeight / 2; + this.ONSConfig.RBX = this.ONSConfig.bumpersOffsetX + this.ONSConfig.bumpersHeight / 2; + this.ONSConfig.RBY = this.ONSConfig.bumpersOffsetY + this.ONSConfig.bumpersHeight / 2; this.ONSConfig.additionalOffset = ONSControls._controlsCanvas.vh(0.03); this.ONSConfig.additonalSize = ONSControls._controlsCanvas.vh(0.06) * this.ONSConfig.buttonsScale; - this.ONSConfig.showX = ONSControls._controlsCanvas.screen.width - (this.ONSConfig.additonalSize / 2 + this.ONSConfig.safeArea); - this.ONSConfig.showY = ONSControls._controlsCanvas.screen.height - (this.ONSConfig.additonalSize / 2 + this.ONSConfig.safeArea); + this.ONSConfig.showX = ONSControls._controlsCanvas.screen.width - this.ONSConfig.additonalSize / 2; + this.ONSConfig.showY = ONSControls._controlsCanvas.screen.height - this.ONSConfig.additonalSize / 2; this.applyData(ConfigManager); this.ONSConfig.updateData(); VirtualGamepad.clearState(); @@ -650,17 +655,17 @@ ConfigManager.ONSConfig.updateData = function() { this.bumpersHeight = ONSControls._controlsCanvas.vh(0.12) * this.buttonsScale; this.additonalSize = ONSControls._controlsCanvas.vh(0.06) * this.buttonsScale; if (this.customPos === false) { - this.buttonsX = ONSControls._controlsCanvas.screen.width - (this.buttonsSize + this.safeArea); - this.buttonsY = ONSControls._controlsCanvas.screen.height - (this.buttonsSize + this.safeArea); - this.dPadX = this.dPadSize / 2 + this.safeArea; - this.dPadY = ONSControls._controlsCanvas.screen.height - (this.dPadSize / 2 + this.safeArea); - this.LBX = this.bumpersOffsetX + this.safeArea + this.bumpersWidth / 2; - this.LBY = (this.bumpersOffsetY + this.safeArea + this.bumpersHeight / 2); - this.RBX = ONSControls._controlsCanvas.screen.width - (this.safeArea + this.bumpersOffsetX + this.bumpersWidth / 2); - this.RBY = (this.bumpersOffsetY + this.safeArea + this.bumpersHeight / 2); + this.buttonsX = ONSControls._controlsCanvas.screen.width - this.buttonsSize; + this.buttonsY = ONSControls._controlsCanvas.screen.height - this.buttonsSize; + this.dPadX = this.dPadSize / 2; + this.dPadY = ONSControls._controlsCanvas.screen.height - this.dPadSize / 2; + this.LBX = this.bumpersOffsetX + this.bumpersWidth / 2; + this.LBY = this.bumpersOffsetY + this.bumpersHeight / 2; + this.RBX = ONSControls._controlsCanvas.screen.width - this.bumpersOffsetX + this.bumpersWidth / 2; + this.RBY = this.bumpersOffsetY + this.bumpersHeight / 2; this.additionalOffset = this.additionalOffset; - this.showX = ONSControls._controlsCanvas.screen.width - (this.additonalSize / 2 + this.safeArea); - this.showY = ONSControls._controlsCanvas.screen.height - (this.additonalSize / 2 + this.safeArea); + this.showX = ONSControls._controlsCanvas.screen.width - this.additonalSize / 2; + this.showY = ONSControls._controlsCanvas.screen.height - this.additonalSize / 2; } ONSControls.updateButtons(); }