From 3834ed6c294fd9201982db5f92c5451f45c2e145 Mon Sep 17 00:00:00 2001 From: OleSTEEP Date: Wed, 31 Jan 2024 17:53:42 +0300 Subject: [PATCH] Initial commit for controls plugin --- www.rus/js/plugins.js | 7 + www.rus/js/plugins/VND_ONSControls.js | 408 ++++++++++++++++++++++++++ 2 files changed, 415 insertions(+) create mode 100644 www.rus/js/plugins/VND_ONSControls.js diff --git a/www.rus/js/plugins.js b/www.rus/js/plugins.js index f38a605..c4f1162 100644 --- a/www.rus/js/plugins.js +++ b/www.rus/js/plugins.js @@ -4230,4 +4230,11 @@ var $plugins = [ "parameters": {} }, + { + "name": "VND_ONSControls", + "status": true, + "description": "On Screen Controls", + "parameters": + {} + }, ]; \ No newline at end of file diff --git a/www.rus/js/plugins/VND_ONSControls.js b/www.rus/js/plugins/VND_ONSControls.js new file mode 100644 index 0000000..776609b --- /dev/null +++ b/www.rus/js/plugins/VND_ONSControls.js @@ -0,0 +1,408 @@ +// by VienDesu! Poring Team 2024 + + +//============================================================================= +// ** ONSControls +//============================================================================= +class ONSControls {}; +//============================================================================= +// * Options +//============================================================================= +ONSControls.options = { + zIndex: 1488, + gamepadId: "Xbox Wireless Controller (STANDARD GAMEPAD Vendor: 045e Product: 02e0)", + gamepadIndex: 0 +} +//============================================================================= +// * Controls canvas +//============================================================================= +ONSControls.createCanvas = function() { + const canvas = new PIXI.Application({ + width: innerWidth, + height: innerHeight, + autoResize: true, + resolution: devicePixelRatio, + transparent: true + }); + document.body.appendChild(canvas.view); + 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.vh = (persent) => { + return canvas.screen.height * persent; + } + this.controlsCanvas = canvas; +} +//============================================================================= +// * A/B/X/Y Buttons +//============================================================================= +ONSControls.createButtons = function() { + const container = new PIXI.Container(); + const buttons = [ + new PIXI.Sprite.fromImage("js/porting/assets/omori_a_button.png"), + new PIXI.Sprite.fromImage("js/porting/assets/omori_x_button.png"), + 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")}); + var buttonsSize = ConfigManager.ONSConfig.buttonsSize; + for (btn of buttons) { + btn.anchor.set(0.5); + btn.width = buttonsSize; + btn.height = buttonsSize; + btn.interactive = true; + container.addChild(btn); + } + buttons[0].y = buttonsSize / 2 + buttonsSize / 4; + buttons[1].x = -(buttonsSize / 2 + buttonsSize / 4); + buttons[2].x = buttonsSize / 2 + buttonsSize / 4; + buttons[3].y = -(buttonsSize / 2 + buttonsSize / 4); + container.width = buttonsSize * 2; + container.height = buttonsSize * 2; + container.x = ConfigManager.ONSConfig.buttonsX; + container.y = ConfigManager.ONSConfig.buttonsY; + this.controlsCanvas.stage.addChild(container); + this.ButtonsContainer = container; +} +//============================================================================= +// * DPad Buttons +//============================================================================= +ONSControls.createDPad = function() { + const container = new PIXI.Sprite.fromImage("js/porting/assets/omori_dpad.png"); + var dPadSize = ConfigManager.ONSConfig.dPadSize; + container.width = dPadSize; + container.height = dPadSize; + container.anchor.set(0.5); + container.x = ConfigManager.ONSConfig.dPadX; + container.y = ConfigManager.ONSConfig.dPadY; + this.controlsCanvas.stage.addChild(container); + this.DPadContainer = container; +} +//============================================================================= +// * LB/RB Buttons +//============================================================================= +ONSControls.createBumpers = function() { + const LBcontainer = new PIXI.Sprite.fromImage("js/porting/assets/omori_lb_button.png"); + const RBcontainer = new PIXI.Sprite.fromImage("js/porting/assets/omori_rb_button.png"); + LBcontainer.x = ConfigManager.ONSConfig.LBX; + LBcontainer.y = ConfigManager.ONSConfig.LBY; + LBcontainer.width = ConfigManager.ONSConfig.bumpersWidth; + LBcontainer.height = ConfigManager.ONSConfig.bumpersHeight; + LBcontainer.anchor.set(0.5); + RBcontainer.x = ConfigManager.ONSConfig.RBX; + RBcontainer.y = ConfigManager.ONSConfig.RBY; + RBcontainer.width = ConfigManager.ONSConfig.bumpersWidth; + RBcontainer.height = ConfigManager.ONSConfig.bumpersHeight; + RBcontainer.anchor.set(0.5); + this.controlsCanvas.stage.addChild(LBcontainer); + this.controlsCanvas.stage.addChild(RBcontainer); + this.LBcontainer = LBcontainer; + this.RBcontainer = RBcontainer; +} +//============================================================================= +// * Show/Switch Buttons +//============================================================================= +ONSControls.createAdditionalButtons = function() { + const showButton = new PIXI.Sprite.fromImage("js/porting/assets/omori_show_button.png"); + const switchButton = new PIXI.Sprite.fromImage("js/porting/assets/omori_switch_button.png"); + showButton.x = ConfigManager.ONSConfig.showX; + showButton.y = ConfigManager.ONSConfig.showY; + showButton.width = ConfigManager.ONSConfig.additonalSize; + showButton.height = ConfigManager.ONSConfig.additonalSize; + showButton.anchor.set(0.5); + switchButton.x = ConfigManager.ONSConfig.switchX; + switchButton.y = ConfigManager.ONSConfig.switchY; + switchButton.width = ConfigManager.ONSConfig.additonalSize; + switchButton.height = ConfigManager.ONSConfig.additonalSize; + switchButton.anchor.set(0.5); + this.controlsCanvas.stage.addChild(showButton); + this.controlsCanvas.stage.addChild(switchButton); + this.ShowButton = showButton; + this.SwitchButton = switchButton; +} +//============================================================================= +// * Idle animation (spinning buttons) +//============================================================================= +ONSControls.playIdleAnimation = function() { + this.controlsCanvas.ticker.add((delta) =>{ + this.ButtonsContainer.rotation -= 0.1 * delta; + this.DPadContainer.rotation += 0.1 * delta; + this.LBcontainer.rotation += 0.1 * delta; + this.RBcontainer.rotation -= 0.1 * delta; + this.ShowButton.rotation += 0.1 * delta; + this.SwitchButton.rotation -= 0.1 * delta; + }); +} +//============================================================================= +// * Send event to virtual controller +//============================================================================= +ONSControls.sendEvent = function(event, button) { + const key = VirtualGamepad.keys.find((element) => element.name == button); + VirtualGamepad.gamepad.buttons[key.code].pressed = event.type == "pointerdown" ? true : false +} + + + + +//============================================================================= +// ** VirtualGamepad +//============================================================================= +class VirtualGamepad {}; +//============================================================================= +// * Virtual gamepad mapping +//============================================================================= +VirtualGamepad.keys = [ + {name: "BUTTON_A", code: 0}, + {name: "BUTTON_B", code: 1}, + {name: "BUTTON_X", code: 2}, + {name: "BUTTON_Y", code: 3}, + {name: "BUTTON_LB", code: 4}, + {name: "BUTTON_RB", code: 5}, + {name: "BUTTON_LT", code: 6}, + {name: "BUTTON_RT", code: 7}, + {name: "BUTTON_SELECT", code: 8}, + {name: "BUTTON_START", code: 9}, + {name: "DPAD_UP", code: 12}, + {name: "DPAD_DOWN", code: 13}, + {name: "DPAD_LEFT", code: 14}, + {name: "DPAD_RIGHT", code: 15}, + {name: "BACK", code: 16} +] +//============================================================================= +// * Define gamepad +//============================================================================= +VirtualGamepad.gamepad = { + id: ONSControls.options.gamepadId || 'builtin', + index: ONSControls.options.gamepadIndex || 0, + connected: true, + timestamp: Math.floor(Date.now() / 1000), + mapping: "standard", + axes: [0, 0, 0, 0], + buttons: Array.apply(0, Array(17)).map(function () { + return { + pressed: false, + touched: false, + value: 0 + }; + }) +} +//============================================================================= +// * Replace first gamepad with virtual +//============================================================================= +VirtualGamepad.replaceNavigator = function() { + var gamepads = navigator.getGamepads(); + navigator.getGamepads = function() { + gamepads[0] = VirtualGamepad.gamepad; + return gamepads; + } +} +//============================================================================= +// * Connect virtual gamepad +//============================================================================= +VirtualGamepad.originalNavigator = navigator.getGamepads; +VirtualGamepad.connect = function () { + this.replaceNavigator(); + 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.gamepad.axes = [0, 0, 0, 0]; + this.gamepad.buttons = Array.apply(0, Array(17)).map(function () { + return { + pressed: false, + touched: false, + value: 0 + }; + }) + window.dispatchEvent(event); + //VirtualGamepad.originalNavigator.getGamepads.call(); + console.log(`ONSControls: Virtual gamepad disconnected with index ${this.gamepad.index}`); +} + + + + + +//============================================================================= +// ** ConfigManager +//============================================================================= + +ONSControls.configManager = function() { +//============================================================================= +// * Class Variables +//============================================================================= +ConfigManager.ONSConfig = {}; +ConfigManager.ONSConfig.buttonsScale = 1; +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.dPadScale = 1; +ConfigManager.ONSConfig.dPadSize = ONSControls.controlsCanvas.vh(0.36) * ConfigManager.ONSConfig.dPadScale; +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.bumpersScale = 1; +ConfigManager.ONSConfig.bumpersOffsetX = 16; +ConfigManager.ONSConfig.bumpersWidth = ONSControls.controlsCanvas.vh(0.204) * ConfigManager.ONSConfig.bumpersScale; +ConfigManager.ONSConfig.bumpersHeight = ONSControls.controlsCanvas.vh(0.13) * ConfigManager.ONSConfig.bumpersScale; +ConfigManager.ONSConfig.bumpersOffsetY = ONSControls.controlsCanvas.vh(0.56); +ConfigManager.ONSConfig.LBX = ConfigManager.ONSConfig.bumpersOffsetX + ConfigManager.ONSConfig.bumpersWidth / 2; +ConfigManager.ONSConfig.LBY = ONSControls.controlsCanvas.screen.height - (ConfigManager.ONSConfig.bumpersOffsetY + ConfigManager.ONSConfig.bumpersHeight / 2); +ConfigManager.ONSConfig.RBX = ONSControls.controlsCanvas.screen.width - (ConfigManager.ONSConfig.bumpersOffsetX + ConfigManager.ONSConfig.bumpersWidth / 2); +ConfigManager.ONSConfig.RBY = ONSControls.controlsCanvas.screen.height - (ConfigManager.ONSConfig.bumpersOffsetY + ConfigManager.ONSConfig.bumpersHeight / 2); +ConfigManager.ONSConfig.additionalScale = 1; +ConfigManager.ONSConfig.additionalOffset = ONSControls.controlsCanvas.vh(0.03); +ConfigManager.ONSConfig.additonalSize = ONSControls.controlsCanvas.vh(0.06) * ConfigManager.ONSConfig.additionalScale; +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.switchX = ConfigManager.ONSConfig.additonalSize / 2 + ConfigManager.ONSConfig.additionalOffset; +ConfigManager.ONSConfig.switchY = ONSControls.controlsCanvas.screen.height - (ConfigManager.ONSConfig.additonalSize / 2 + ConfigManager.ONSConfig.additionalOffset); +//============================================================================= +// * Original functions +//============================================================================= +var ConfigManager_makeData = ConfigManager.makeData; +var ConfigManager_applyData = ConfigManager.applyData; +var ConfigManager_restoreDefaultConfig = ConfigManager.restoreDefaultConfig; +//============================================================================= +// * Make Data +//============================================================================= +ConfigManager.makeData = function () { + var config = ConfigManager_makeData.call(this); + config.ONSConfig = {}; + config.ONSConfig.controlsOffsetX = this.ONSConfig.controlsOffsetX; + config.ONSConfig.controlsOffsetY = this.ONSConfig.controlsOffsetY; + config.ONSConfig.buttonsScale = this.ONSConfig.buttonsScale; + config.ONSConfig.dPadScale = this.ONSConfig.dPadScale; + config.ONSConfig.bumpersScale = this.ONSConfig.bumpersScale; + config.ONSConfig.additionalOffset = this.ONSConfig.additionalOffset; + config.ONSConfig.buttonsSize = this.ONSConfig.buttonsSize; + config.ONSConfig.buttonsX = this.ONSConfig.buttonsX; + config.ONSConfig.buttonsY = this.ONSConfig.buttonsY; + config.ONSConfig.dPadSize = this.ONSConfig.dPadSize; + config.ONSConfig.dPadX = this.ONSConfig.dPadX; + config.ONSConfig.dPadY = this.ONSConfig.dPadY; + config.ONSConfig.bumpersWidth = this.ONSConfig.bumpersWidth; + config.ONSConfig.bumpersHeight = this.ONSConfig.bumpersHeight; + config.ONSConfig.bumpersOffsetX = this.ONSConfig.bumpersOffsetX; + config.ONSConfig.bumpersOffsetY = this.ONSConfig.bumpersOffsetY; + config.ONSConfig.LBX = this.ONSConfig.LBX; + config.ONSConfig.LBY = this.ONSConfig.LBY; + config.ONSConfig.RBX = this.ONSConfig.RBX; + config.ONSConfig.RBY = this.ONSConfig.RBY; + config.ONSConfig.additionalScale = this.ONSConfig.additionalScale; + config.ONSConfig.additionalOffset = this.ONSConfig.additionalOffset; + config.ONSConfig.additonalSize = this.ONSConfig.additonalSize; + config.ONSConfig.showX = this.ONSConfig.showX; + config.ONSConfig.showY = this.ONSConfig.showY; + config.ONSConfig.switchX = this.ONSConfig.switchX; + config.ONSConfig.switchY = this.ONSConfig.switchY; + return config; +} +//============================================================================= +// * Apply Data +//============================================================================= +ConfigManager.applyData = function (config) { + ConfigManager_applyData.call(this, config); + this.ONSConfig.controlsOffsetX = config.ONSConfig.controlsOffsetX; + this.ONSConfig.controlsOffsetY = config.ONSConfig.controlsOffsetY; + this.ONSConfig.buttonsScale = config.ONSConfig.buttonsScale; + this.ONSConfig.dPadScale = config.ONSConfig.dPadScale; + this.OSConfig.bumpersScale = config.ONSConfig.bumpersScale; + this.ONSConfig.additionalOffset = config.ONSConfig.additionalOffset; + this.ONSConfig.buttonsSize = config.ONSConfig.buttonsSize; + this.ONSConfig.buttonsX = config.ONSConfig.buttonsX; + this.ONSConfig.buttonsY = config.ONSConfig.buttonsY; + this.ONSConfig.dPadSize = config.ONSConfig.dPadSize; + this.ONSConfig.dPadX = config.ONSConfig.dPadX; + this.ONSConfig.dPadY = config.ONSConfig.dPadY; + this.ONSConfig.bumpersWidth = config.ONSConfig.bumpersWidth; + this.ONSConfig.bumpersHeight = config.ONSConfig.bumpersHeight; + this.ONSConfig.bumpersOffsetX = config.ONSConfig.bumpersOffsetX; + this.ONSConfig.bumpersOffsetY = config.ONSConfig.bumpersOffsetY; + this.ONSConfig.LBX = config.ONSConfig.LBX; + this.ONSConfig.LBY = config.ONSConfig.LBY; + this.ONSConfig.RBX = config.ONSConfig.RBX; + this.ONSConfig.RBY = config.ONSConfig.RBY; + this.ONSConfig.additionalScale = config.ONSConfig.additionalScale; + this.ONSConfig.additionalOffset = config.ONSConfig.additionalOffset; + this.ONSConfig.additonalSize = config.ONSConfig.additonalSize; + this.ONSConfig.showX = config.ONSConfig.showX; + this.ONSConfig.showY = config.ONSConfig.showY; + this.ONSConfig.switchX = config.ONSConfig.switchX; + this.ONSConfig.switchY = config.ONSConfig.switchY; +} +//============================================================================= +// * Restore defaults +//============================================================================= +ConfigManager.restoreDefaultConfig = function () { + 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 = 1; + 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.dPadScale = 1; + ConfigManager.ONSConfig.dPadSize = ONSControls.controlsCanvas.vh(0.36) * ConfigManager.ONSConfig.dPadScale; + 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.bumpersScale = 1; + ConfigManager.ONSConfig.bumpersOffsetX = 16; + ConfigManager.ONSConfig.bumpersWidth = ONSControls.controlsCanvas.vh(0.204) * ConfigManager.ONSConfig.bumpersScale; + ConfigManager.ONSConfig.bumpersHeight = ONSControls.controlsCanvas.vh(0.13) * ConfigManager.ONSConfig.bumpersScale; + ConfigManager.ONSConfig.bumpersOffsetY = ONSControls.controlsCanvas.vh(0.56); + ConfigManager.ONSConfig.LBX = ConfigManager.ONSConfig.bumpersOffsetX + ConfigManager.ONSConfig.bumpersWidth / 2; + ConfigManager.ONSConfig.LBY = ONSControls.controlsCanvas.screen.height - (ConfigManager.ONSConfig.bumpersOffsetY + ConfigManager.ONSConfig.bumpersHeight / 2); + ConfigManager.ONSConfig.RBX = ONSControls.controlsCanvas.screen.width - (ConfigManager.ONSConfig.bumpersOffsetX + ConfigManager.ONSConfig.bumpersWidth / 2); + ConfigManager.ONSConfig.RBY = ONSControls.controlsCanvas.screen.height - (ConfigManager.ONSConfig.bumpersOffsetY + ConfigManager.ONSConfig.bumpersHeight / 2); + ConfigManager.ONSConfig.additionalScale = 1; + ConfigManager.ONSConfig.additionalOffset = ONSControls.controlsCanvas.vh(0.03); + ConfigManager.ONSConfig.additonalSize = ONSControls.controlsCanvas.vh(0.06) * ConfigManager.ONSConfig.additionalScale; + 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.switchX = ConfigManager.ONSConfig.additonalSize / 2 + ConfigManager.ONSConfig.additionalOffset; + ConfigManager.ONSConfig.switchY = ONSControls.controlsCanvas.screen.height - (ConfigManager.ONSConfig.additonalSize / 2 + ConfigManager.ONSConfig.additionalOffset); + ConfigManager.applyData(ConfigManager); + let needsRestore = confirm(LanguageManager.languageData().text.System.plugins.optionsMenu.alertMessages["restoreGeneral"]); + if (!!needsRestore) { DataManager._restoreGlobalInfo(); } +} +} + + + + +//============================================================================= +// * Plugin init +//============================================================================= +ONSControls.initialize = function() { + console.log("PLUGIN INIT"); + this.createCanvas(); + this.configManager(); + this.createButtons(); + this.createDPad(); + this.createBumpers(); + this.createAdditionalButtons(); + //this.playIdleAnimation(); + VirtualGamepad.connect(); +} \ No newline at end of file