PIXI Controls: Reimplement safe area with clamp()

This commit is contained in:
OleSTEEP 2024-02-18 14:39:12 +03:00
parent 11de5727a1
commit e6f31a5e4f

View file

@ -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();
}