New controls: Implement base functionality

This commit is contained in:
OleSTEEP 2024-02-01 16:27:54 +03:00
parent b5d5cc6c89
commit 043164ec38

View file

@ -80,12 +80,35 @@ ONSControls.createButtons = function() {
//============================================================================= //=============================================================================
ONSControls.createDPad = function() { ONSControls.createDPad = function() {
const container = new PIXI.Sprite.fromImage("js/porting/assets/omori_dpad.png"); const container = new PIXI.Sprite.fromImage("js/porting/assets/omori_dpad.png");
const directions = [
new PIXI.Sprite(), new PIXI.Sprite(),
new PIXI.Sprite(), new PIXI.Sprite()
]
var dPadSize = ConfigManager.ONSConfig.dPadSize; var dPadSize = ConfigManager.ONSConfig.dPadSize;
container.width = dPadSize; container.width = dPadSize;
container.height = dPadSize; container.height = dPadSize;
container.anchor.set(0.5); container.anchor.set(0.5);
container.x = ConfigManager.ONSConfig.dPadX; container.x = ConfigManager.ONSConfig.dPadX;
container.y = ConfigManager.ONSConfig.dPadY; container.y = ConfigManager.ONSConfig.dPadY;
for (elem of directions) {
container.addChild(elem);
elem.anchor.set(0.5);
elem.width = dPadSize / 5.5;
elem.height = dPadSize / 5.5;
elem.interactive = true;
}
directions[0].x = directions[0].width;
directions[1].y = directions[1].height;
directions[2].y = -directions[2].height;
directions[3].x = -directions[3].width;
directions[0].on("pointerdown", (event) => {this.sendEvent(event, "DPAD_RIGHT")})
.on("pointerup", (event) => {this.sendEvent(event, "DPAD_RIGHT")});
directions[1].on("pointerdown", (event) => {this.sendEvent(event, "DPAD_DOWN")})
.on("pointerup", (event) => {this.sendEvent(event, "DPAD_DOWN")});
directions[2].on("pointerdown", (event) => {this.sendEvent(event, "DPAD_UP")})
.on("pointerup", (event) => {this.sendEvent(event, "DPAD_UP")});
directions[3].on("pointerdown", (event) => {this.sendEvent(event, "DPAD_LEFT")})
.on("pointerup", (event) => {this.sendEvent(event, "DPAD_LEFT")});
this.controlsCanvas.stage.addChild(container); this.controlsCanvas.stage.addChild(container);
this.DPadContainer = container; this.DPadContainer = container;
} }
@ -93,43 +116,51 @@ ONSControls.createDPad = function() {
// * LB/RB Buttons // * LB/RB Buttons
//============================================================================= //=============================================================================
ONSControls.createBumpers = function() { ONSControls.createBumpers = function() {
const LBcontainer = new PIXI.Sprite.fromImage("js/porting/assets/omori_lb_button.png"); const LBsprite = new PIXI.Sprite.fromImage("js/porting/assets/omori_lb_button.png");
const RBcontainer = new PIXI.Sprite.fromImage("js/porting/assets/omori_rb_button.png"); const RBsprite = new PIXI.Sprite.fromImage("js/porting/assets/omori_rb_button.png");
LBcontainer.x = ConfigManager.ONSConfig.LBX; LBsprite.x = ConfigManager.ONSConfig.LBX;
LBcontainer.y = ConfigManager.ONSConfig.LBY; LBsprite.y = ConfigManager.ONSConfig.LBY;
LBcontainer.width = ConfigManager.ONSConfig.bumpersWidth; LBsprite.width = ConfigManager.ONSConfig.bumpersWidth;
LBcontainer.height = ConfigManager.ONSConfig.bumpersHeight; LBsprite.height = ConfigManager.ONSConfig.bumpersHeight;
LBcontainer.anchor.set(0.5); LBsprite.anchor.set(0.5);
RBcontainer.x = ConfigManager.ONSConfig.RBX; LBsprite.interactive = true;
RBcontainer.y = ConfigManager.ONSConfig.RBY; LBsprite.on("pointerdown", (event) => {this.sendEvent(event, "BUTTON_LB")})
RBcontainer.width = ConfigManager.ONSConfig.bumpersWidth; .on("pointerup", (event) => {this.sendEvent(event, "BUTTON_LB")})
RBcontainer.height = ConfigManager.ONSConfig.bumpersHeight; RBsprite.x = ConfigManager.ONSConfig.RBX;
RBcontainer.anchor.set(0.5); RBsprite.y = ConfigManager.ONSConfig.RBY;
this.controlsCanvas.stage.addChild(LBcontainer); RBsprite.width = ConfigManager.ONSConfig.bumpersWidth;
this.controlsCanvas.stage.addChild(RBcontainer); RBsprite.height = ConfigManager.ONSConfig.bumpersHeight;
this.LBcontainer = LBcontainer; RBsprite.anchor.set(0.5);
this.RBcontainer = RBcontainer; 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;
this.RBsprite = RBsprite;
} }
//============================================================================= //=============================================================================
// * Show/Switch Buttons // * Show/Switch Buttons
//============================================================================= //=============================================================================
ONSControls.createAdditionalButtons = function() { ONSControls.createAdditionalButtons = function() {
const showButton = new PIXI.Sprite.fromImage("js/porting/assets/omori_show_button.png"); 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"); //const switchButton = new PIXI.Sprite.fromImage("js/porting/assets/omori_switch_button.png");
showButton.x = ConfigManager.ONSConfig.showX; showButton.x = ConfigManager.ONSConfig.showX;
showButton.y = ConfigManager.ONSConfig.showY; showButton.y = ConfigManager.ONSConfig.showY;
showButton.width = ConfigManager.ONSConfig.additonalSize; showButton.width = ConfigManager.ONSConfig.additonalSize;
showButton.height = ConfigManager.ONSConfig.additonalSize; showButton.height = ConfigManager.ONSConfig.additonalSize;
showButton.anchor.set(0.5); showButton.anchor.set(0.5);
switchButton.x = ConfigManager.ONSConfig.switchX; showButton.interactive = true;
switchButton.y = ConfigManager.ONSConfig.switchY; showButton.on("pointerdown", this.toggle)
switchButton.width = ConfigManager.ONSConfig.additonalSize; // switchButton.x = ConfigManager.ONSConfig.switchX;
switchButton.height = ConfigManager.ONSConfig.additonalSize; // switchButton.y = ConfigManager.ONSConfig.switchY;
switchButton.anchor.set(0.5); // switchButton.width = ConfigManager.ONSConfig.additonalSize;
// switchButton.height = ConfigManager.ONSConfig.additonalSize;
// switchButton.anchor.set(0.5);
this.controlsCanvas.stage.addChild(showButton); this.controlsCanvas.stage.addChild(showButton);
this.controlsCanvas.stage.addChild(switchButton); // this.controlsCanvas.stage.addChild(switchButton);
this.ShowButton = showButton; this.ShowButton = showButton;
this.SwitchButton = switchButton; // this.SwitchButton = switchButton;
} }
//============================================================================= //=============================================================================
// * Idle animation (spinning buttons) // * Idle animation (spinning buttons)
@ -149,7 +180,26 @@ ONSControls.playIdleAnimation = function() {
//============================================================================= //=============================================================================
ONSControls.sendEvent = function(event, button) { ONSControls.sendEvent = function(event, button) {
const key = VirtualGamepad.keys.find((element) => element.name == button); const key = VirtualGamepad.keys.find((element) => element.name == button);
VirtualGamepad.gamepad.buttons[key.code].pressed = event.type == "pointerdown" ? true : false if (event.type === "pointerdown") {
console.log(`ONSControls: Pointer down for ${button}`); // Remove in release
}
VirtualGamepad.gamepad.buttons[key.code].pressed = event.type === "pointerdown" ? true : false
}
//=============================================================================
// * Toggle controls
//=============================================================================
ONSControls.toggle = function() {
const elements = [
ONSControls.ButtonsContainer, ONSControls.DPadContainer,
ONSControls.LBsprite, ONSControls.RBsprite
]
for (elem of elements) {
if (elem.visible) {
elem.visible = false;
} else {
elem.visible = true;
}
}
} }
//============================================================================= //=============================================================================
// * Fix controls size on empty screen // * Fix controls size on empty screen
@ -157,11 +207,12 @@ ONSControls.sendEvent = function(event, button) {
document.addEventListener("deviceready", onCordovaDeviceReady, false); document.addEventListener("deviceready", onCordovaDeviceReady, false);
ONSControls.onCordovaDeviceReady = function () { ONSControls.onCordovaDeviceReady = function () {
console.log("ONSControls - SETUP!!!"); //Remove in release console.log("ONSControls: Received deviceready event from cordova"); //Remove in release
document.addEventListener("resume", onCordovaResume, false); document.addEventListener("resume", onCordovaResume, false);
}; };
ONSControls.onCordovaResume = function () { ONSControls.onCordovaResume = function () {
console.log("ONSControls: Received resume event from cordova"); //Remove in release
// TODO: HERE CONTROLS WILL BE UPDATED OR RECREATED // TODO: HERE CONTROLS WILL BE UPDATED OR RECREATED
}; };
@ -274,8 +325,8 @@ ConfigManager.ONSConfig.dPadX = ConfigManager.ONSConfig.dPadSize / 2 + ConfigMan
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.controlsOffsetY);
ConfigManager.ONSConfig.bumpersScale = 1; ConfigManager.ONSConfig.bumpersScale = 1;
ConfigManager.ONSConfig.bumpersOffsetX = 16; ConfigManager.ONSConfig.bumpersOffsetX = 16;
ConfigManager.ONSConfig.bumpersWidth = ONSControls.controlsCanvas.vh(0.204) * ConfigManager.ONSConfig.bumpersScale; ConfigManager.ONSConfig.bumpersWidth = ONSControls.controlsCanvas.vh(0.188) * ConfigManager.ONSConfig.bumpersScale;
ConfigManager.ONSConfig.bumpersHeight = ONSControls.controlsCanvas.vh(0.13) * ConfigManager.ONSConfig.bumpersScale; ConfigManager.ONSConfig.bumpersHeight = ONSControls.controlsCanvas.vh(0.12) * ConfigManager.ONSConfig.bumpersScale;
ConfigManager.ONSConfig.bumpersOffsetY = ONSControls.controlsCanvas.vh(0.56); ConfigManager.ONSConfig.bumpersOffsetY = ONSControls.controlsCanvas.vh(0.56);
ConfigManager.ONSConfig.LBX = ConfigManager.ONSConfig.bumpersOffsetX + ConfigManager.ONSConfig.bumpersWidth / 2; 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.LBY = ONSControls.controlsCanvas.screen.height - (ConfigManager.ONSConfig.bumpersOffsetY + ConfigManager.ONSConfig.bumpersHeight / 2);
@ -383,8 +434,8 @@ ConfigManager.restoreDefaultConfig = function () {
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.controlsOffsetY);
ConfigManager.ONSConfig.bumpersScale = 1; ConfigManager.ONSConfig.bumpersScale = 1;
ConfigManager.ONSConfig.bumpersOffsetX = 16; ConfigManager.ONSConfig.bumpersOffsetX = 16;
ConfigManager.ONSConfig.bumpersWidth = ONSControls.controlsCanvas.vh(0.204) * ConfigManager.ONSConfig.bumpersScale; ConfigManager.ONSConfig.bumpersWidth = ONSControls.controlsCanvas.vh(0.188) * ConfigManager.ONSConfig.bumpersScale;
ConfigManager.ONSConfig.bumpersHeight = ONSControls.controlsCanvas.vh(0.13) * ConfigManager.ONSConfig.bumpersScale; ConfigManager.ONSConfig.bumpersHeight = ONSControls.controlsCanvas.vh(0.12) * ConfigManager.ONSConfig.bumpersScale;
ConfigManager.ONSConfig.bumpersOffsetY = ONSControls.controlsCanvas.vh(0.56); ConfigManager.ONSConfig.bumpersOffsetY = ONSControls.controlsCanvas.vh(0.56);
ConfigManager.ONSConfig.LBX = ConfigManager.ONSConfig.bumpersOffsetX + ConfigManager.ONSConfig.bumpersWidth / 2; 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.LBY = ONSControls.controlsCanvas.screen.height - (ConfigManager.ONSConfig.bumpersOffsetY + ConfigManager.ONSConfig.bumpersHeight / 2);
@ -410,7 +461,7 @@ ConfigManager.restoreDefaultConfig = function () {
// * Plugin init // * Plugin init
//============================================================================= //=============================================================================
ONSControls.initialize = function() { ONSControls.initialize = function() {
console.log("PLUGIN INIT"); console.log("ONSControls: Initialized");
this.createCanvas(); this.createCanvas();
this.configManager(); this.configManager();
this.createButtons(); this.createButtons();