From 24e9231b481afa91dc5656eab6c0c63baa08a0b2 Mon Sep 17 00:00:00 2001 From: OleSTEEP Date: Tue, 20 Feb 2024 01:26:27 +0300 Subject: [PATCH] PIXI Controls: Merge all changes to English version --- www.eng/js/plugins/VND_ONSControls.js | 505 +++++++++++++++++++------- 1 file changed, 365 insertions(+), 140 deletions(-) diff --git a/www.eng/js/plugins/VND_ONSControls.js b/www.eng/js/plugins/VND_ONSControls.js index 152c8d8..7c5832e 100644 --- a/www.eng/js/plugins/VND_ONSControls.js +++ b/www.eng/js/plugins/VND_ONSControls.js @@ -23,18 +23,7 @@ ONSControls.createCanvas = function() { document.body.appendChild(canvas.view); canvas.view.id = "ControlsCanvas"; canvas.view.style.zIndex = this.options.zIndex; - canvas.view.style.position = "absolute"; - canvas.view.style.left = 0; - canvas.view.style.right = 0; - canvas.view.style.down = 0; - canvas.view.style.top = 0; canvas.stage.interactive = true; - var idleInterval = setInterval(ONSControls.playIdleAnimation, 60000); - canvas.stage.on("pointerdown", () => { - this.stopIdleAnimation(); - clearInterval(idleInterval); - idleInterval = setInterval(ONSControls.playIdleAnimation, 60000); - }) canvas.vh = (persent) => { return canvas.screen.height * persent; } @@ -51,14 +40,6 @@ ONSControls.createButtons = function() { new PIXI.Sprite.fromImage("js/porting/assets/omori_b_button.png"), new PIXI.Sprite.fromImage("js/porting/assets/omori_y_button.png") ] - buttons[0].on("pointerdown", (event) => {this.sendEvent(event, "BUTTON_A")}) - .on("pointerup", (event) => {this.sendEvent(event, "BUTTON_A")}); - buttons[1].on("pointerdown", (event) => {this.sendEvent(event, "BUTTON_X")}) - .on("pointerup", (event) => {this.sendEvent(event, "BUTTON_X")}); - buttons[2].on("pointerdown", (event) => {this.sendEvent(event, "BUTTON_B")}) - .on("pointerup", (event) => {this.sendEvent(event, "BUTTON_B")}); - buttons[3].on("pointerdown", (event) => {this.sendEvent(event, "BUTTON_Y")}) - .on("pointerup", (event) => {this.sendEvent(event, "BUTTON_Y")}); for (btn of buttons) { btn.anchor.set(0.5); btn.hitArea = new PIXI.Circle(0, 0, 40); @@ -74,7 +55,6 @@ ONSControls.createDPad = function() { const container = new PIXI.Sprite.fromImage("js/porting/assets/omori_dpad.png"); container.anchor.set(0.5); container.interactive = true; - container.cursor = "pointer"; container.pressed = false; container.pressed_button = null; container.down = function(x, y) { @@ -110,24 +90,6 @@ ONSControls.createDPad = function() { ONSControls.sendEvent({type: "pointerup"}, "DPAD_UP"); ONSControls.sendEvent({type: "pointerup"}, "DPAD_LEFT"); } - container.on("pointerup", () => {container.upAll();}) - container.on("pointerupoutside", () => {container.upAll();}) - container.on("pointerdown", (event) => { - var x = event.data.global.x - this._dPadContainer.x; - var y = event.data.global.y - this._dPadContainer.y; - container.down(x, y); - }) - container.on("pointermove", (event) => { - if (container.pressed) { - // DPad pressed, set up button - var x = event.data.global.x - this._dPadContainer.x; - var y = event.data.global.y - this._dPadContainer.y; - container.down(x, y); - } else { - // DPad not pressed, clear all buttons - container.upAll(); - } - }) this._controlsCanvas.stage.addChild(container); this._dPadContainer = container; } @@ -139,12 +101,8 @@ ONSControls.createBumpers = function() { const RBsprite = new PIXI.Sprite.fromImage("js/porting/assets/omori_rb_button.png"); LBsprite.anchor.set(0.5); LBsprite.interactive = true; - LBsprite.on("pointerdown", (event) => {this.sendEvent(event, "BUTTON_LB")}) - .on("pointerup", (event) => {this.sendEvent(event, "BUTTON_LB")}) RBsprite.anchor.set(0.5); RBsprite.interactive = true; - RBsprite.on("pointerdown", (event) => {this.sendEvent(event, "BUTTON_RB")}) - .on("pointerup", (event) => {this.sendEvent(event, "BUTTON_RB")}) this._controlsCanvas.stage.addChild(LBsprite); this._controlsCanvas.stage.addChild(RBsprite); this._LBsprite = LBsprite; @@ -157,11 +115,34 @@ ONSControls.createAdditionalButtons = function() { const showButton = new PIXI.Sprite.fromImage("js/porting/assets/omori_show_button.png"); showButton.anchor.set(0.5); showButton.interactive = true; - showButton.on("pointerdown", this.toggle) this._controlsCanvas.stage.addChild(showButton); this._showButton = showButton; } //============================================================================= +// * Edit Mode Interface +//============================================================================= +ONSControls.createEditModeInterface = function() { + const headerText = new PIXI.Text("Edit Mode", { + fontFamily: ONSControls.options.primaryFont, + fontSize: Math.round(this._controlsCanvas.screen.height / 20), + fill: 0xaaaaaa, + align: 'center' + }); + const tipText = new PIXI.Text("In this mode you can freely move control elements on screen.\nTo exit from this mode, press \"Back\" button on your Android device.", { + fontFamily: ONSControls.options.additionalFont, + fontSize: Math.round(this._controlsCanvas.screen.height / 32), + fill: 0xaaaaaa, + align: 'center' + }); + headerText.anchor.set(0.5); + headerText.visible = false; + headerText.addChild(tipText); + tipText.anchor.set(0.5); + tipText.y = 48; + this._controlsCanvas.stage.addChild(headerText); + this._editModeText = headerText; +} +//============================================================================= // * Check idle animation (spinning buttons) //============================================================================= ONSControls.idleAnimation = function() { @@ -175,11 +156,12 @@ ONSControls.idleAnimation = function() { // * Check idle animation (spinning buttons) //============================================================================= ONSControls.isIdlePlaying = false; +ONSControls.idleDisabled = false; //============================================================================= // * Play idle animation (spinning buttons) //============================================================================= ONSControls.playIdleAnimation = function() { - if (!ONSControls.isIdlePlaying) { + if (!ONSControls.isIdlePlaying && !ONSControls.idleDisabled) { ONSControls.isIdlePlaying = true; ONSControls._controlsCanvas.ticker.add(ONSControls.idleAnimation); } @@ -196,6 +178,18 @@ ONSControls.stopIdleAnimation = function() { ONSControls._showButton.rotation = 0; } //============================================================================= +// * Reset idle animation timer +//============================================================================= +ONSControls.resetIdleAnimation = function() { + if (ONSControls._idleInterval !== undefined) { + ONSControls.stopIdleAnimation(); + clearInterval(ONSControls._idleInterval); + if (!ONSControls.idleDisabled) { + ONSControls._idleInterval = setInterval(ONSControls.playIdleAnimation, 300000); + } + } +} +//============================================================================= // * Send event to virtual controller //============================================================================= ONSControls.sendEvent = function(event, button) { @@ -208,16 +202,18 @@ ONSControls.sendEvent = function(event, button) { //============================================================================= // * Toggle controls //============================================================================= -ONSControls.toggle = function() { +ONSControls.toggle = function(neededState = null) { const elements = [ ONSControls._buttonsContainer, ONSControls._dPadContainer, ONSControls._LBsprite, ONSControls._RBsprite ] for (elem of elements) { - if (elem.visible) { + if (elem.visible || neededState === false) { elem.visible = false; + ONSControls.idleDisabled = true; } else { elem.visible = true; + ONSControls.idleDisabled = false; } } } @@ -226,6 +222,14 @@ ONSControls.toggle = function() { //============================================================================= ONSControls.updateButtons = function() { + // Update canvas + const canvas = this._controlsCanvas; + canvas.view.style.position = "absolute"; + canvas.view.style.left = 0; + canvas.view.style.right = 0; + canvas.view.style.down = 0; + canvas.view.style.top = 0; + // Update A/B/X/Y const buttonsSize = ConfigManager.ONSConfig.buttonsSize; const container = this._buttonsContainer; @@ -243,6 +247,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; @@ -251,15 +256,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; @@ -267,15 +275,189 @@ 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; console.log("ONSControls: Controls updated"); } +//============================================================================= +// * Clamp to safe area +//============================================================================= +ONSControls.toSafeArea = function(position, element) { + let sx = ONSControls._controlsCanvas.vh(0.032); + let sy = ONSControls._controlsCanvas.vh(0.024); + let n = ConfigManager.ONSConfig.safeArea; + let safeAreaX = 10 * sx * Math.abs(n - 1) + sx + element.width / 2; + let safeAreaY = 10 * sy * Math.abs(n - 1) + sy + element.height / 2; + position.x = position.x.clamp(safeAreaX, this._controlsCanvas.screen.width - safeAreaX); + position.y = position.y.clamp(safeAreaY, this._controlsCanvas.screen.height - safeAreaY); + return position; +} +//============================================================================= +// * Setup controls touch events +//============================================================================= +ONSControls.setupInteractive = function () { + // Canvas + this._idleInterval = setInterval(ONSControls.playIdleAnimation, 300000); + this._controlsCanvas.stage.on("pointerdown", ONSControls.resetIdleAnimation); + + // A/B/X/Y + const buttons = this._buttonsContainer.children; + buttons[0].on("pointerdown", (event) => {this.sendEvent(event, "BUTTON_A")}) + .on("pointerup", (event) => {this.sendEvent(event, "BUTTON_A")}); + buttons[1].on("pointerdown", (event) => {this.sendEvent(event, "BUTTON_X")}) + .on("pointerup", (event) => {this.sendEvent(event, "BUTTON_X")}); + buttons[2].on("pointerdown", (event) => {this.sendEvent(event, "BUTTON_B")}) + .on("pointerup", (event) => {this.sendEvent(event, "BUTTON_B")}); + buttons[3].on("pointerdown", (event) => {this.sendEvent(event, "BUTTON_Y")}) + .on("pointerup", (event) => {this.sendEvent(event, "BUTTON_Y")}); + for (btn of buttons) { + btn.hitArea = new PIXI.Circle(0, 0, 40); + } + + // DPAD + const container = this._dPadContainer; + container.on("pointerup", () => {container.upAll();}) + container.on("pointerupoutside", () => {container.upAll();}) + container.on("pointerdown", (event) => { + var x = event.data.global.x - this._dPadContainer.x; + var y = event.data.global.y - this._dPadContainer.y; + container.down(x, y); + }) + container.on("pointermove", (event) => { + if (container.pressed) { + // DPad pressed, set up button + var x = event.data.global.x - this._dPadContainer.x; + var y = event.data.global.y - this._dPadContainer.y; + container.down(x, y); + } else { + // DPad not pressed, clear all buttons + container.upAll(); + } + }); + + // LB/RB + this._LBsprite.on("pointerdown", (event) => {this.sendEvent(event, "BUTTON_LB")}) + .on("pointerup", (event) => {this.sendEvent(event, "BUTTON_LB")}); + this._RBsprite.on("pointerdown", (event) => {this.sendEvent(event, "BUTTON_RB")}) + .on("pointerup", (event) => {this.sendEvent(event, "BUTTON_RB")}); + + // Show button + this._showButton.on("pointerdown", this.toggle); +} +//============================================================================= +// * Get all buttons +//============================================================================= +ONSControls.getControlElements = function() { + return [ + this._dPadContainer, this._LBsprite, + this._RBsprite, this._showButton, this._buttonsContainer + ]; +} +//============================================================================= +// * Clear all controls touch events +//============================================================================= +ONSControls.clearInteractive = function() { + this._controlsCanvas.stage.removeAllListeners(); + for (child of this._buttonsContainer.children) { + child.removeAllListeners(); + } + for (elem of this.getControlElements()) { + elem.removeAllListeners(); + } + this._dPadContainer.upAll(); + clearInterval(this._idleInterval); + // Clear status of VirtualGamepad + VirtualGamepad.clearState(); +} +//============================================================================= +// * Setup drag'n drop events for element +//============================================================================= +ONSControls.editButtonBressed = false; +ONSControls.setupDragNDrop = function(element) { + var orig_alpha = element.alpha; + + var onStart = function(event) { + if (ONSControls.editButtonBressed === false) { + ONSControls.editButtonBressed = true; + element.alpha = orig_alpha / 2; + ONSControls._controlsCanvas.stage.on("pointermove", onMove); + } + } + var onMove = function(event) { + if (element) { + element.parent.toLocal(ONSControls.toSafeArea(event.data.global, element), null, element.position); + ConfigManager.ONSConfig.customPos = true; + }; + } + var onEnd = function(event) { + if (element) { + ONSControls._controlsCanvas.stage.off("pointermove", onMove); + ONSControls.editButtonBressed = false; + element.alpha = orig_alpha; + }; + } + element.on("pointerdown", onStart); + this._controlsCanvas.stage.on("pointerup", onEnd); + this._controlsCanvas.stage.on("pointerupoutside", onEnd); +} +//============================================================================= +// * Disable native RPG Maker touch support +//============================================================================= ONSControls.disableTouch = function() { TouchInput.update = function() {return;}; } +//============================================================================= +// * Replace default cordova's backbutton event +//============================================================================= +ONSControls.replaceBackEvent = function() { + document.addEventListener("backbutton", function(event){ + event.preventDefault(); + ONSControls.closeEditMode(); + }); +} +//============================================================================= +// * Open Edit Mode +//============================================================================= +ONSControls.openEditMode = function() { + if (Graphics._canvas.hidden === false) { + Graphics._canvas.hidden = true; + this.idleDisabled = true; + this.clearInteractive(); + this._buttonsContainer.interactive = true; + for (elem of this.getControlElements()) { + this.setupDragNDrop(elem); + } + this._buttonsContainer.children[0].hitArea = new PIXI.Circle(0, -50, 100); + this._editModeText.visible = true; + this._editModeText.x = this._controlsCanvas.screen.width / 2; + this._editModeText.y = this._controlsCanvas.screen.height / 2; + } +} +//============================================================================= +// * Close Edit Mode +//============================================================================= +ONSControls.closeEditMode = function() { + this._editModeText.visible = false; + Graphics._canvas.hidden = false; + this.idleDisabled = false; + this.clearInteractive(); + this.setupInteractive(); + ConfigManager.ONSConfig.saveButtonsPosition(); +} +//============================================================================= +// * Handle connected physical gamepad and hide ONSControls +//============================================================================= +ONSControls.gamepadHandler = function() { + if (VirtualGamepad._originalNavigator.call(navigator)[0] !== null && + VirtualGamepad._originalNavigator.call(navigator).length !== 0) { + this.toggle(false); + } + window.addEventListener("gamepadconnected", () => {this.toggle(false);}); + window.addEventListener("gamepaddisconnected", () => {this.toggle(true);}); +} @@ -326,30 +508,35 @@ VirtualGamepad.gamepad = { //============================================================================= // * Replace first gamepad with virtual //============================================================================= -VirtualGamepad.replaceNavigator = function() { - var gamepads = navigator.getGamepads(); +VirtualGamepad._originalNavigator = navigator.getGamepads; +VirtualGamepad.updateNavigator = function() { + var gamepads = VirtualGamepad._originalNavigator.call(navigator); navigator.getGamepads = function() { var index = ONSControls.options.gamepadIndex; gamepads[index] = VirtualGamepad.gamepad; return gamepads; } + console.log("ONSControls: Navigator updated"); } //============================================================================= // * Connect virtual gamepad //============================================================================= -VirtualGamepad.originalNavigator = navigator.getGamepads; VirtualGamepad.connect = function () { - this.replaceNavigator(); - const event = new Event("gamepadconnected"); - event.gamepad = this.gamepad; - window.dispatchEvent(event); + this.updateNavigator(); console.log(`ONSControls: Virtual gamepad connected with index ${this.gamepad.index}`); } //============================================================================= // * Disconnect virtual gamepad //============================================================================= VirtualGamepad.disconnect = function () { - const event = new Event("gamepaddisconnected"); + this.clearState(); + //VirtualGamepad.originalNavigator.getGamepads.call(); + console.log(`ONSControls: Virtual gamepad disconnected with index ${this.gamepad.index}`); +} +//============================================================================= +// * Clear state of all buttons +//============================================================================= +VirtualGamepad.clearState = function() { this.gamepad.axes = [0, 0, 0, 0]; this.gamepad.buttons = Array.apply(0, Array(17)).map(function () { return { @@ -358,9 +545,15 @@ VirtualGamepad.disconnect = function () { value: 0 }; }) - window.dispatchEvent(event); - //VirtualGamepad.originalNavigator.getGamepads.call(); - console.log(`ONSControls: Virtual gamepad disconnected with index ${this.gamepad.index}`); +} +//============================================================================= +// * Initialize virtual gamepad +//============================================================================= +VirtualGamepad.initialize = function() { + this._originalNavigator.call(navigator); + this.connect(); + window.addEventListener('gamepadconnected', this.updateNavigator); + window.addEventListener('gamepaddisconnected', this.updateNavigator); } @@ -376,91 +569,109 @@ ONSControls.configManager = function() { // * Class Variables //============================================================================= ConfigManager.ONSConfig ||= {}; -ConfigManager.ONSConfig.buttonsScale ||= this.options.buttonsScale; -ConfigManager.ONSConfig.buttonsOpacity ||= this.options.buttonsOpacity; -ConfigManager.ONSConfig.controlsOffsetX ||= 32; -ConfigManager.ONSConfig.controlsOffsetY ||= 16; +ConfigManager.ONSConfig.customPos ||= false; +ConfigManager.ONSConfig.buttonsScale ||= ONSControls.options.buttonsScale; +ConfigManager.ONSConfig.buttonsOpacity ||= ONSControls.options.buttonsOpacity; +ConfigManager.ONSConfig.safeArea ||= 1; ConfigManager.ONSConfig.buttonsSize ||= ONSControls._controlsCanvas.vh(0.18) * ConfigManager.ONSConfig.buttonsScale; -ConfigManager.ONSConfig.buttonsX ||= ONSControls._controlsCanvas.screen.width - (ConfigManager.ONSConfig.buttonsSize + ConfigManager.ONSConfig.controlsOffsetX);; -ConfigManager.ONSConfig.buttonsY ||= ONSControls._controlsCanvas.screen.height - (ConfigManager.ONSConfig.buttonsSize + ConfigManager.ONSConfig.controlsOffsetY); +ConfigManager.ONSConfig.buttonsX ||= ONSControls._controlsCanvas.screen.width - ConfigManager.ONSConfig.buttonsSize; +ConfigManager.ONSConfig.buttonsY ||= ONSControls._controlsCanvas.screen.height - ConfigManager.ONSConfig.buttonsSize; ConfigManager.ONSConfig.dPadSize ||= ONSControls._controlsCanvas.vh(0.36) * ConfigManager.ONSConfig.buttonsScale; -ConfigManager.ONSConfig.dPadX ||= ConfigManager.ONSConfig.dPadSize / 2 + ConfigManager.ONSConfig.controlsOffsetX; -ConfigManager.ONSConfig.dPadY ||= ONSControls._controlsCanvas.screen.height - (ConfigManager.ONSConfig.dPadSize / 2 + ConfigManager.ONSConfig.controlsOffsetY); +ConfigManager.ONSConfig.dPadX ||= ConfigManager.ONSConfig.dPadSize / 2; +ConfigManager.ONSConfig.dPadY ||= ONSControls._controlsCanvas.screen.height - ConfigManager.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.bumpersWidth / 2; -ConfigManager.ONSConfig.LBY ||= (ConfigManager.ONSConfig.bumpersOffsetY + ConfigManager.ONSConfig.bumpersHeight / 2); -ConfigManager.ONSConfig.RBX ||= ONSControls._controlsCanvas.screen.width - (ConfigManager.ONSConfig.bumpersOffsetX + ConfigManager.ONSConfig.bumpersWidth / 2); -ConfigManager.ONSConfig.RBY ||= (ConfigManager.ONSConfig.bumpersOffsetY + ConfigManager.ONSConfig.bumpersHeight / 2); -ConfigManager.ONSConfig.additionalOffset ||= ONSControls._controlsCanvas.vh(0.03); +ConfigManager.ONSConfig.LBY ||= ConfigManager.ONSConfig.bumpersOffsetY + ConfigManager.ONSConfig.bumpersHeight / 2; +ConfigManager.ONSConfig.RBX ||= ConfigManager.ONSConfig.bumpersOffsetX + ConfigManager.ONSConfig.bumpersWidth / 2; +ConfigManager.ONSConfig.RBY ||= ConfigManager.ONSConfig.bumpersOffsetY + ConfigManager.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.additionalOffset); -ConfigManager.ONSConfig.showY ||= ONSControls._controlsCanvas.screen.height - (ConfigManager.ONSConfig.additonalSize / 2 + ConfigManager.ONSConfig.additionalOffset); +ConfigManager.ONSConfig.showX ||= ONSControls._controlsCanvas.screen.width - ConfigManager.ONSConfig.additonalSize / 2; +ConfigManager.ONSConfig.showY ||= ONSControls._controlsCanvas.screen.height - ConfigManager.ONSConfig.additonalSize / 2; //============================================================================= // * Restore defaults //============================================================================= var _ConfigManager_restoreDefaultConfig = ConfigManager.restoreDefaultConfig; ConfigManager.restoreDefaultConfig = function () { _ConfigManager_restoreDefaultConfig.apply(this, arguments); - const fs = require("fs");j + const fs = require("fs"); const path = require('path'); var base = path.dirname(process.mainModule.filename); base = path.join(base, 'save/'); if (fs.existsSync(base + "config.rpgsave")) { fs.unlinkSync(base + "config.rpgsave"); } - ConfigManager.ONSConfig.buttonsScale = this.options.buttonsScale; - ConfigManager.ONSConfig.buttonsOpacity = this.options.buttonsOpacity; - ConfigManager.ONSConfig.controlsOffsetX = 32; - ConfigManager.ONSConfig.controlsOffsetY = 16; - ConfigManager.ONSConfig.buttonsSize = ONSControls._controlsCanvas.vh(0.18) * ConfigManager.ONSConfig.buttonsScale; - ConfigManager.ONSConfig.buttonsX = ONSControls._controlsCanvas.screen.width - (ConfigManager.ONSConfig.buttonsSize + ConfigManager.ONSConfig.controlsOffsetX);; - ConfigManager.ONSConfig.buttonsY = ONSControls._controlsCanvas.screen.height - (ConfigManager.ONSConfig.buttonsSize + ConfigManager.ONSConfig.controlsOffsetY); - ConfigManager.ONSConfig.dPadSize = ONSControls._controlsCanvas.vh(0.36) * ConfigManager.ONSConfig.buttonsScale; - ConfigManager.ONSConfig.dPadX = ConfigManager.ONSConfig.dPadSize / 2 + ConfigManager.ONSConfig.controlsOffsetX; - ConfigManager.ONSConfig.dPadY = ONSControls._controlsCanvas.screen.height - (ConfigManager.ONSConfig.dPadSize / 2 + ConfigManager.ONSConfig.controlsOffsetY); - 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.bumpersWidth / 2; - ConfigManager.ONSConfig.LBY = (ConfigManager.ONSConfig.bumpersOffsetY + ConfigManager.ONSConfig.bumpersHeight / 2); - ConfigManager.ONSConfig.RBX = ONSControls._controlsCanvas.screen.width - (ConfigManager.ONSConfig.bumpersOffsetX + ConfigManager.ONSConfig.bumpersWidth / 2); - ConfigManager.ONSConfig.RBY = (ConfigManager.ONSConfig.bumpersOffsetY + ConfigManager.ONSConfig.bumpersHeight / 2); - ConfigManager.ONSConfig.additionalOffset = ONSControls._controlsCanvas.vh(0.03); - ConfigManager.ONSConfig.additonalSize = ONSControls._controlsCanvas.vh(0.06) * ConfigManager.ONSConfig.buttonsScale; - ConfigManager.ONSConfig.showX = ONSControls._controlsCanvas.screen.width - (ConfigManager.ONSConfig.additonalSize / 2 + ConfigManager.ONSConfig.additionalOffset); - ConfigManager.ONSConfig.showY = ONSControls._controlsCanvas.screen.height - (ConfigManager.ONSConfig.additonalSize / 2 + ConfigManager.ONSConfig.additionalOffset); - ConfigManager.applyData(ConfigManager); + this.ONSConfig.customPos = false; + this.ONSConfig.buttonsScale = ONSControls.options.buttonsScale; + this.ONSConfig.buttonsOpacity = ONSControls.options.buttonsOpacity; + this.ONSConfig.safeArea = 1; + this.ONSConfig.buttonsSize = ONSControls._controlsCanvas.vh(0.18) * this.ONSConfig.buttonsScale; + 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.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.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.showY = ONSControls._controlsCanvas.screen.height - this.ONSConfig.additonalSize / 2; + this.applyData(ConfigManager); + this.ONSConfig.updateData(); + VirtualGamepad.clearState(); let needsRestore = confirm(LanguageManager.languageData().text.System.plugins.optionsMenu.alertMessages["restoreGeneral"]); if (!!needsRestore) { DataManager._restoreGlobalInfo(); } } //============================================================================= +// * Save buttons position to config +//============================================================================= +ConfigManager.ONSConfig.saveButtonsPosition = function() { + this.buttonsX = ONSControls._buttonsContainer.x; + this.buttonsY = ONSControls._buttonsContainer.y; + this.dPadX = ONSControls._dPadContainer.x; + this.dPadY = ONSControls._dPadContainer.y; + this.LBX = ONSControls._LBsprite.x; + this.LBY = ONSControls._LBsprite.y; + this.RBX = ONSControls._RBsprite.x; + this.RBY = ONSControls._RBsprite.y; + this.showX = ONSControls._showButton.x; + this.showY = ONSControls._showButton.y; +} +//============================================================================= // * Update all controls data //============================================================================= ConfigManager.ONSConfig.updateData = function() { - ConfigManager.ONSConfig.buttonsScale = ConfigManager.ONSConfig.buttonsScale; - ConfigManager.ONSConfig.buttonsOpacity = ConfigManager.ONSConfig.buttonsOpacity; - ConfigManager.ONSConfig.controlsOffsetX = ConfigManager.ONSConfig.controlsOffsetX; - ConfigManager.ONSConfig.controlsOffsetY = ConfigManager.ONSConfig.controlsOffsetY; - ConfigManager.ONSConfig.buttonsSize = ONSControls._controlsCanvas.vh(0.18) * ConfigManager.ONSConfig.buttonsScale; - ConfigManager.ONSConfig.buttonsX = ONSControls._controlsCanvas.screen.width - (ConfigManager.ONSConfig.buttonsSize + ConfigManager.ONSConfig.controlsOffsetX);; - ConfigManager.ONSConfig.buttonsY = ONSControls._controlsCanvas.screen.height - (ConfigManager.ONSConfig.buttonsSize + ConfigManager.ONSConfig.controlsOffsetY); - ConfigManager.ONSConfig.dPadSize = ONSControls._controlsCanvas.vh(0.36) * ConfigManager.ONSConfig.buttonsScale; - ConfigManager.ONSConfig.dPadX = ConfigManager.ONSConfig.dPadSize / 2 + ConfigManager.ONSConfig.controlsOffsetX; - ConfigManager.ONSConfig.dPadY = ONSControls._controlsCanvas.screen.height - (ConfigManager.ONSConfig.dPadSize / 2 + ConfigManager.ONSConfig.controlsOffsetY); - ConfigManager.ONSConfig.bumpersOffsetX = ConfigManager.ONSConfig.bumpersOffsetX; - ConfigManager.ONSConfig.bumpersOffsetY = ConfigManager.ONSConfig.bumpersOffsetY; - 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.bumpersWidth / 2; - ConfigManager.ONSConfig.LBY = (ConfigManager.ONSConfig.bumpersOffsetY + ConfigManager.ONSConfig.bumpersHeight / 2); - ConfigManager.ONSConfig.RBX = ONSControls._controlsCanvas.screen.width - (ConfigManager.ONSConfig.bumpersOffsetX + ConfigManager.ONSConfig.bumpersWidth / 2); - ConfigManager.ONSConfig.RBY = (ConfigManager.ONSConfig.bumpersOffsetY + ConfigManager.ONSConfig.bumpersHeight / 2); - ConfigManager.ONSConfig.additionalOffset = ConfigManager.ONSConfig.additionalOffset; - ConfigManager.ONSConfig.additonalSize = ONSControls._controlsCanvas.vh(0.06) * ConfigManager.ONSConfig.buttonsScale; - ConfigManager.ONSConfig.showX = ONSControls._controlsCanvas.screen.width - (ConfigManager.ONSConfig.additonalSize / 2 + ConfigManager.ONSConfig.additionalOffset); - ConfigManager.ONSConfig.showY = ONSControls._controlsCanvas.screen.height - (ConfigManager.ONSConfig.additonalSize / 2 + ConfigManager.ONSConfig.additionalOffset); + this.customPos = this.customPos; + this.buttonsScale = this.buttonsScale; + this.buttonsOpacity = this.buttonsOpacity; + this.safeArea = this.safeArea; + this.buttonsSize = ONSControls._controlsCanvas.vh(0.18) * this.buttonsScale; + this.dPadSize = ONSControls._controlsCanvas.vh(0.36) * this.buttonsScale; + this.bumpersOffsetX = this.bumpersOffsetX; + this.bumpersOffsetY = this.bumpersOffsetY; + this.bumpersWidth = ONSControls._controlsCanvas.vh(0.188) * this.buttonsScale; + 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.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.showY = ONSControls._controlsCanvas.screen.height - this.additonalSize / 2; + } ONSControls.updateButtons(); } } @@ -476,11 +687,10 @@ var _ConfigManager_makeData = ConfigManager.makeData; ConfigManager.makeData = function () { var config = _ConfigManager_makeData.apply(this, arguments); config.ONSConfig = {}; - config.ONSConfig.controlsOffsetX = this.ONSConfig.controlsOffsetX; - config.ONSConfig.controlsOffsetY = this.ONSConfig.controlsOffsetY; + config.ONSConfig.customPos = this.ONSConfig.customPos; config.ONSConfig.buttonsScale = this.ONSConfig.buttonsScale; config.ONSConfig.buttonsOpacity = this.ONSConfig.buttonsOpacity; - config.ONSConfig.additionalOffset = this.ONSConfig.additionalOffset; + config.ONSConfig.safeArea = this.ONSConfig.safeArea; config.ONSConfig.buttonsSize = this.ONSConfig.buttonsSize; config.ONSConfig.buttonsX = this.ONSConfig.buttonsX; config.ONSConfig.buttonsY = this.ONSConfig.buttonsY; @@ -495,7 +705,6 @@ ConfigManager.makeData = function () { config.ONSConfig.LBY = this.ONSConfig.LBY; config.ONSConfig.RBX = this.ONSConfig.RBX; config.ONSConfig.RBY = this.ONSConfig.RBY; - config.ONSConfig.additionalOffset = this.ONSConfig.additionalOffset; config.ONSConfig.additonalSize = this.ONSConfig.additonalSize; config.ONSConfig.showX = this.ONSConfig.showX; config.ONSConfig.showY = this.ONSConfig.showY; @@ -509,11 +718,10 @@ ConfigManager.applyData = function (config) { _ConfigManager_applyData.apply(this, arguments); try { this.ONSConfig = config.ONSConfig; - this.ONSConfig.controlsOffsetX = config.ONSConfig.controlsOffsetX; - this.ONSConfig.controlsOffsetY = config.ONSConfig.controlsOffsetY; + this.ONSConfig.customPos = config.ONSConfig.customPos; this.ONSConfig.buttonsScale = config.ONSConfig.buttonsScale; this.ONSConfig.buttonsOpacity = config.ONSConfig.buttonsOpacity; - this.ONSConfig.additionalOffset = config.ONSConfig.additionalOffset; + this.ONSConfig.safeArea = config.ONSConfig.safeArea; this.ONSConfig.buttonsSize = config.ONSConfig.buttonsSize; this.ONSConfig.buttonsX = config.ONSConfig.buttonsX; this.ONSConfig.buttonsY = config.ONSConfig.buttonsY; @@ -528,7 +736,6 @@ ConfigManager.applyData = function (config) { this.ONSConfig.LBY = config.ONSConfig.LBY; this.ONSConfig.RBX = config.ONSConfig.RBX; this.ONSConfig.RBY = config.ONSConfig.RBY; - this.ONSConfig.additionalOffset = config.ONSConfig.additionalOffset; this.ONSConfig.additonalSize = config.ONSConfig.additonalSize; this.ONSConfig.showX = config.ONSConfig.showX; this.ONSConfig.showY = config.ONSConfig.showY; @@ -610,7 +817,7 @@ Window_OmoMenuOptionsONSControls.prototype.createOptionBars = function () { bitmap.fillRect(x, 20, 2, 20, 'rgba(255, 255, 255, 1)'); }; // Create Sprites - for (var i = 0; i < 8; i++) { + for (var i = 0; i < 6; i++) { var sprite = new Sprite(bitmap); var index = Math.floor(i / 2); var rect = this.itemRect(index); @@ -629,10 +836,10 @@ Window_OmoMenuOptionsONSControls.prototype.makeOptionsList = function () { // Get Text //var text = LanguageManager.getPluginText('optionsMenu', 'audio'); var text = { - buttonsScale: {help: "Change on-screen controls scale.", text: "CONTROLS SCALE", persent: true, maxValue: 500}, - buttonsOpacity: {help: "Change on-screen controls opacity.", text: "CONTROLS OPACITY", persent: true, maxValue: 100}, - bumpersOffsetX: {help: "Change x coordinate offset of LB/RB.", text: "LB/RB X OFFSET", persent: false, maxValue: 500}, - bumpersOffsetY: {help: "Change y coordinate offset of LB/RB.", text: "LB/RB Y OFFSET", persent: false, maxValue: 500} + buttonsScale: {help: "Change on-screen controls scale.", text: "CONTROLS SCALE", isBar: true, persent: true, minValue: 0, maxValue: 500}, + buttonsOpacity: {help: "Change on-screen controls opacity.", text: "CONTROLS OPACITY", isBar: true, persent: true, minValue: 0, maxValue: 100}, + safeArea: {help: "Change safe area size for on-screen controls.", text: "SAFE AREA", isBar: true, persent: true, minValue: 10, maxValue: 100}, + editMenu: {help: "Press Left or Right button on DPad, to open menu.", text: "OPEN EDIT MODE", isBar: false} } // Get Config var config = ConfigManager; @@ -647,10 +854,14 @@ Window_OmoMenuOptionsONSControls.prototype.makeOptionsList = function () { // Get Data var data = text[name]; // Add Option - if (data.persent) { - this._optionsList.push({ header: data.text + ':', config: name, option: ConfigManager.ONSConfig[name] * 100, helpText: data.help, persent: data.persent, maxValue: data.maxValue }); + if (data.isBar) { + if (data.persent) { + this._optionsList.push({ header: data.text + ':', config: name, option: ConfigManager.ONSConfig[name] * 100, helpText: data.help, isBar: data.isBar, persent: data.persent, minValue: data.minValue, maxValue: data.maxValue }); + } else { + this._optionsList.push({ header: data.text + ':', config: name, option: ConfigManager.ONSConfig[name], helpText: data.help, isBar: data.isBar, persent: data.persent, minValue: data.minValue, maxValue: data.maxValue }); + } } else { - this._optionsList.push({ header: data.text + ':', config: name, option: ConfigManager.ONSConfig[name], helpText: data.help, persent: data.persent, maxValue: data.maxValue }); + this._optionsList.push({ header: data.text, config: name, helpText: data.help, isBar: data.isBar}); } }; } @@ -667,7 +878,9 @@ Window_OmoMenuOptionsONSControls.prototype.drawItem = function (index) { // Draw Header this.contents.drawText(data.header, rect.x + 50, rect.y, rect.width, 24); // Update option bar - this.updateOptionBar(index, data.option, data.persent); + if (data.isBar) { + this.updateOptionBar(index, data.option, data.persent); + } }; }; //============================================================================= @@ -693,7 +906,11 @@ Window_OmoMenuOptionsONSControls.prototype.cursorRight = function (wrap) { if (data) { var rate = Input.isLongPressed('right') ? 5 : 5 data.option = Math.min(data.option + rate, data.maxValue); - this.updateOptionBar(this.index(), data.option, data.persent); + if (data.isBar) { + this.updateOptionBar(this.index(), data.option, data.persent); + } else { + ONSControls.openEditMode(); + } }; }; //============================================================================= @@ -707,12 +924,16 @@ Window_OmoMenuOptionsONSControls.prototype.cursorLeft = function (wrap) { // Get Data if (data) { var rate = Input.isLongPressed('left') ? 5 : 5 - data.option = Math.max(data.option - rate, 0); - this.updateOptionBar(this.index(), data.option, data.persent); + data.option = Math.max(data.option - rate, data.minValue); + if (data.isBar) { + this.updateOptionBar(this.index(), data.option, data.persent); + } else { + ONSControls.openEditMode(); + } }; }; //============================================================================= -// * Cursor Left +// * Update option bar //============================================================================= Window_OmoMenuOptionsONSControls.prototype.updateOptionBar = function (index, option, persent) { // Get Data @@ -754,7 +975,7 @@ Window_OmoMenuOptionsONSControls.prototype.add = function () { return [this._generalOptionsWindow, this._audioOptionsWindow, this._controlOptionsWindow, this._onscontrolsOptionsWindow, this._systemOptionsWindow] } Scene_OmoriTitleScreen.prototype.createONSControlsOptionsWindow = function () { - // Create Audio Options Window + // Create ONSControls Options Window this._onscontrolsOptionsWindow = new Window_OmoMenuOptionsONSControls(); this._onscontrolsOptionsWindow.setHandler('cancel', this.onOptionWindowCancel.bind(this)); this._onscontrolsOptionsWindow.visible = false; @@ -803,13 +1024,17 @@ Window_OmoMenuOptionsONSControls.prototype.add = function () { ONSControls.initialize = function() { console.log("ONSControls: Initialized"); this.createCanvas(); + this.createEditModeInterface(); this.configManager(); this.createButtons(); this.createDPad(); this.createBumpers(); this.createAdditionalButtons(); this.updateButtons(); + this.setupInteractive(); this.disableTouch(); - VirtualGamepad.connect(); + this.replaceBackEvent(); + VirtualGamepad.initialize(); Window_OmoMenuOptionsONSControls.prototype.add(); + this.gamepadHandler(); } \ No newline at end of file