PIXI Controls: Merge all changes to English version

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() {
+VirtualGamepad._originalNavigator = navigator.getGamepads;
-    var gamepads = 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();
+    this.updateNavigator();
-    const event = new Event("gamepadconnected");
-    event.gamepad = this.gamepad;
-    window.dispatchEvent(event);
     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.customPos ||= false;
-ConfigManager.ONSConfig.buttonsOpacity ||= this.options.buttonsOpacity;
+ConfigManager.ONSConfig.buttonsScale ||= ONSControls.options.buttonsScale;
-ConfigManager.ONSConfig.controlsOffsetX ||= 32;
+ConfigManager.ONSConfig.buttonsOpacity ||= ONSControls.options.buttonsOpacity;
-ConfigManager.ONSConfig.controlsOffsetY ||= 16;
+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.buttonsX ||= ONSControls._controlsCanvas.screen.width - ConfigManager.ONSConfig.buttonsSize;
-ConfigManager.ONSConfig.buttonsY ||= ONSControls._controlsCanvas.screen.height - (ConfigManager.ONSConfig.buttonsSize + ConfigManager.ONSConfig.controlsOffsetY);
+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.dPadX ||= ConfigManager.ONSConfig.dPadSize / 2;
-ConfigManager.ONSConfig.dPadY ||= ONSControls._controlsCanvas.screen.height - (ConfigManager.ONSConfig.dPadSize / 2 + ConfigManager.ONSConfig.controlsOffsetY);
+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.LBY ||= ConfigManager.ONSConfig.bumpersOffsetY + ConfigManager.ONSConfig.bumpersHeight / 2;
-ConfigManager.ONSConfig.RBX ||= ONSControls._controlsCanvas.screen.width - (ConfigManager.ONSConfig.bumpersOffsetX + ConfigManager.ONSConfig.bumpersWidth / 2);
+ConfigManager.ONSConfig.RBX ||= ConfigManager.ONSConfig.bumpersOffsetX + ConfigManager.ONSConfig.bumpersWidth / 2;
-ConfigManager.ONSConfig.RBY ||= (ConfigManager.ONSConfig.bumpersOffsetY + ConfigManager.ONSConfig.bumpersHeight / 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.showX ||= ONSControls._controlsCanvas.screen.width - ConfigManager.ONSConfig.additonalSize / 2;
-ConfigManager.ONSConfig.showY ||= ONSControls._controlsCanvas.screen.height - (ConfigManager.ONSConfig.additonalSize / 2 + ConfigManager.ONSConfig.additionalOffset);
+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;
+    this.ONSConfig.customPos = false;
-    ConfigManager.ONSConfig.buttonsOpacity = this.options.buttonsOpacity;
+    this.ONSConfig.buttonsScale = ONSControls.options.buttonsScale;
-    ConfigManager.ONSConfig.controlsOffsetX = 32;
+    this.ONSConfig.buttonsOpacity = ONSControls.options.buttonsOpacity;
-    ConfigManager.ONSConfig.controlsOffsetY = 16;
+    this.ONSConfig.safeArea = 1;
-    ConfigManager.ONSConfig.buttonsSize = ONSControls._controlsCanvas.vh(0.18) * ConfigManager.ONSConfig.buttonsScale;
+    this.ONSConfig.buttonsSize = ONSControls._controlsCanvas.vh(0.18) * this.ONSConfig.buttonsScale;
-    ConfigManager.ONSConfig.buttonsX = ONSControls._controlsCanvas.screen.width - (ConfigManager.ONSConfig.buttonsSize + ConfigManager.ONSConfig.controlsOffsetX);;
+    this.ONSConfig.buttonsX = ONSControls._controlsCanvas.screen.width - this.ONSConfig.buttonsSize;
-    ConfigManager.ONSConfig.buttonsY = ONSControls._controlsCanvas.screen.height - (ConfigManager.ONSConfig.buttonsSize + ConfigManager.ONSConfig.controlsOffsetY);
+    this.ONSConfig.buttonsY = ONSControls._controlsCanvas.screen.height - this.ONSConfig.buttonsSize;
-    ConfigManager.ONSConfig.dPadSize = ONSControls._controlsCanvas.vh(0.36) * ConfigManager.ONSConfig.buttonsScale;
+    this.ONSConfig.dPadSize = ONSControls._controlsCanvas.vh(0.36) * this.ONSConfig.buttonsScale;
-    ConfigManager.ONSConfig.dPadX = ConfigManager.ONSConfig.dPadSize / 2 + ConfigManager.ONSConfig.controlsOffsetX;
+    this.ONSConfig.dPadX = this.ONSConfig.dPadSize / 2;
-    ConfigManager.ONSConfig.dPadY = ONSControls._controlsCanvas.screen.height - (ConfigManager.ONSConfig.dPadSize / 2 + ConfigManager.ONSConfig.controlsOffsetY);
+    this.ONSConfig.dPadY = ONSControls._controlsCanvas.screen.height - this.ONSConfig.dPadSize / 2;
-    ConfigManager.ONSConfig.bumpersOffsetX = 16;
+    this.ONSConfig.bumpersOffsetX = 16;
-    ConfigManager.ONSConfig.bumpersOffsetY = ONSControls._controlsCanvas.vh(0.30);
+    this.ONSConfig.bumpersOffsetY = ONSControls._controlsCanvas.vh(0.30);
-    ConfigManager.ONSConfig.bumpersWidth = ONSControls._controlsCanvas.vh(0.188) * ConfigManager.ONSConfig.buttonsScale;
+    this.ONSConfig.bumpersWidth = ONSControls._controlsCanvas.vh(0.188) * this.ONSConfig.buttonsScale;
-    ConfigManager.ONSConfig.bumpersHeight = ONSControls._controlsCanvas.vh(0.12) * ConfigManager.ONSConfig.buttonsScale;
+    this.ONSConfig.bumpersHeight = ONSControls._controlsCanvas.vh(0.12) * this.ONSConfig.buttonsScale;
-    ConfigManager.ONSConfig.LBX = ConfigManager.ONSConfig.bumpersOffsetX + ConfigManager.ONSConfig.bumpersWidth / 2;
+    this.ONSConfig.LBX = this.ONSConfig.bumpersOffsetX + this.ONSConfig.bumpersWidth / 2;
-    ConfigManager.ONSConfig.LBY = (ConfigManager.ONSConfig.bumpersOffsetY + ConfigManager.ONSConfig.bumpersHeight / 2);
+    this.ONSConfig.LBY = this.ONSConfig.bumpersOffsetY + this.ONSConfig.bumpersHeight / 2;
-    ConfigManager.ONSConfig.RBX = ONSControls._controlsCanvas.screen.width - (ConfigManager.ONSConfig.bumpersOffsetX + ConfigManager.ONSConfig.bumpersWidth / 2);
+    this.ONSConfig.RBX = this.ONSConfig.bumpersOffsetX + this.ONSConfig.bumpersHeight / 2;
-    ConfigManager.ONSConfig.RBY = (ConfigManager.ONSConfig.bumpersOffsetY + ConfigManager.ONSConfig.bumpersHeight / 2);
+    this.ONSConfig.RBY = this.ONSConfig.bumpersOffsetY + this.ONSConfig.bumpersHeight / 2;
-    ConfigManager.ONSConfig.additionalOffset = ONSControls._controlsCanvas.vh(0.03);
+    this.ONSConfig.additionalOffset = ONSControls._controlsCanvas.vh(0.03);
-    ConfigManager.ONSConfig.additonalSize = ONSControls._controlsCanvas.vh(0.06) * ConfigManager.ONSConfig.buttonsScale;
+    this.ONSConfig.additonalSize = ONSControls._controlsCanvas.vh(0.06) * this.ONSConfig.buttonsScale;
-    ConfigManager.ONSConfig.showX = ONSControls._controlsCanvas.screen.width - (ConfigManager.ONSConfig.additonalSize / 2 + ConfigManager.ONSConfig.additionalOffset);
+    this.ONSConfig.showX = ONSControls._controlsCanvas.screen.width - this.ONSConfig.additonalSize / 2;
-    ConfigManager.ONSConfig.showY = ONSControls._controlsCanvas.screen.height - (ConfigManager.ONSConfig.additonalSize / 2 + ConfigManager.ONSConfig.additionalOffset);
+    this.ONSConfig.showY = ONSControls._controlsCanvas.screen.height - this.ONSConfig.additonalSize / 2;
-    ConfigManager.applyData(ConfigManager);
+    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;
+    this.customPos = this.customPos;
-    ConfigManager.ONSConfig.buttonsOpacity = ConfigManager.ONSConfig.buttonsOpacity;
+    this.buttonsScale = this.buttonsScale;
-    ConfigManager.ONSConfig.controlsOffsetX = ConfigManager.ONSConfig.controlsOffsetX;
+    this.buttonsOpacity = this.buttonsOpacity;
-    ConfigManager.ONSConfig.controlsOffsetY = ConfigManager.ONSConfig.controlsOffsetY;
+    this.safeArea = this.safeArea;
-    ConfigManager.ONSConfig.buttonsSize = ONSControls._controlsCanvas.vh(0.18) * ConfigManager.ONSConfig.buttonsScale;
+    this.buttonsSize = ONSControls._controlsCanvas.vh(0.18) * this.buttonsScale;
-    ConfigManager.ONSConfig.buttonsX = ONSControls._controlsCanvas.screen.width - (ConfigManager.ONSConfig.buttonsSize + ConfigManager.ONSConfig.controlsOffsetX);;
+    this.dPadSize = ONSControls._controlsCanvas.vh(0.36) * this.buttonsScale;
-    ConfigManager.ONSConfig.buttonsY = ONSControls._controlsCanvas.screen.height - (ConfigManager.ONSConfig.buttonsSize + ConfigManager.ONSConfig.controlsOffsetY);
+    this.bumpersOffsetX = this.bumpersOffsetX;
-    ConfigManager.ONSConfig.dPadSize = ONSControls._controlsCanvas.vh(0.36) * ConfigManager.ONSConfig.buttonsScale;
+    this.bumpersOffsetY = this.bumpersOffsetY;
-    ConfigManager.ONSConfig.dPadX = ConfigManager.ONSConfig.dPadSize / 2 + ConfigManager.ONSConfig.controlsOffsetX;
+    this.bumpersWidth = ONSControls._controlsCanvas.vh(0.188) * this.buttonsScale;
-    ConfigManager.ONSConfig.dPadY = ONSControls._controlsCanvas.screen.height - (ConfigManager.ONSConfig.dPadSize / 2 + ConfigManager.ONSConfig.controlsOffsetY);
+    this.bumpersHeight = ONSControls._controlsCanvas.vh(0.12) * this.buttonsScale;
-    ConfigManager.ONSConfig.bumpersOffsetX = ConfigManager.ONSConfig.bumpersOffsetX;
+    this.additonalSize = ONSControls._controlsCanvas.vh(0.06) * this.buttonsScale;
-    ConfigManager.ONSConfig.bumpersOffsetY = ConfigManager.ONSConfig.bumpersOffsetY;
+    if (this.customPos === false) {
-    ConfigManager.ONSConfig.bumpersWidth = ONSControls._controlsCanvas.vh(0.188) * ConfigManager.ONSConfig.buttonsScale;
+        this.buttonsX = ONSControls._controlsCanvas.screen.width - this.buttonsSize;
-    ConfigManager.ONSConfig.bumpersHeight = ONSControls._controlsCanvas.vh(0.12) * ConfigManager.ONSConfig.buttonsScale;
+        this.buttonsY = ONSControls._controlsCanvas.screen.height - this.buttonsSize;
-    ConfigManager.ONSConfig.LBX = ConfigManager.ONSConfig.bumpersOffsetX + ConfigManager.ONSConfig.bumpersWidth / 2;
+        this.dPadX = this.dPadSize / 2;
-    ConfigManager.ONSConfig.LBY = (ConfigManager.ONSConfig.bumpersOffsetY + ConfigManager.ONSConfig.bumpersHeight / 2);
+        this.dPadY = ONSControls._controlsCanvas.screen.height - this.dPadSize / 2;
-    ConfigManager.ONSConfig.RBX = ONSControls._controlsCanvas.screen.width - (ConfigManager.ONSConfig.bumpersOffsetX + ConfigManager.ONSConfig.bumpersWidth / 2);
+        this.LBX = this.bumpersOffsetX + this.bumpersWidth / 2;
-    ConfigManager.ONSConfig.RBY = (ConfigManager.ONSConfig.bumpersOffsetY + ConfigManager.ONSConfig.bumpersHeight / 2);
+        this.LBY = this.bumpersOffsetY + this.bumpersHeight / 2;
-    ConfigManager.ONSConfig.additionalOffset = ConfigManager.ONSConfig.additionalOffset;
+        this.RBX = ONSControls._controlsCanvas.screen.width - this.bumpersOffsetX + this.bumpersWidth / 2;
-    ConfigManager.ONSConfig.additonalSize = ONSControls._controlsCanvas.vh(0.06) * ConfigManager.ONSConfig.buttonsScale;
+        this.RBY = this.bumpersOffsetY + this.bumpersHeight / 2;
-    ConfigManager.ONSConfig.showX = ONSControls._controlsCanvas.screen.width - (ConfigManager.ONSConfig.additonalSize / 2 + ConfigManager.ONSConfig.additionalOffset);
+        this.additionalOffset = this.additionalOffset;
-    ConfigManager.ONSConfig.showY = ONSControls._controlsCanvas.screen.height - (ConfigManager.ONSConfig.additonalSize / 2 + ConfigManager.ONSConfig.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.customPos = this.ONSConfig.customPos;
-    config.ONSConfig.controlsOffsetY = this.ONSConfig.controlsOffsetY;
     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.customPos = config.ONSConfig.customPos;
-        this.ONSConfig.controlsOffsetY = config.ONSConfig.controlsOffsetY;
         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},
+        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", persent: true, maxValue: 100},
+        buttonsOpacity: {help: "Change on-screen controls opacity.", text: "CONTROLS OPACITY", isBar: true, persent: true, minValue: 0, maxValue: 100},
-        bumpersOffsetX: {help: "Change x coordinate offset of LB/RB.", text: "LB/RB X OFFSET", persent: false, maxValue: 500},
+        safeArea: {help: "Change safe area size for on-screen controls.", text: "SAFE AREA", isBar: true, persent: true, minValue: 10, maxValue: 100},
-        bumpersOffsetY: {help: "Change y coordinate offset of LB/RB.", text: "LB/RB Y OFFSET", persent: false, maxValue: 500}
+        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) {
+        if (data.isBar) {
-            this._optionsList.push({ header: data.text + ':', config: name, option: ConfigManager.ONSConfig[name] * 100, helpText: data.help, persent: data.persent, maxValue: data.maxValue });
+            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);
+        data.option = Math.max(data.option - rate, data.minValue);
-        this.updateOptionBar(this.index(), data.option, data.persent);
+        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();
 }