New controls: Implement base functionality
This commit is contained in:
parent
b5d5cc6c89
commit
043164ec38
1 changed files with 82 additions and 31 deletions
|
@ -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();
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue