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() {
|
||||
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;
|
||||
container.width = dPadSize;
|
||||
container.height = dPadSize;
|
||||
container.anchor.set(0.5);
|
||||
container.x = ConfigManager.ONSConfig.dPadX;
|
||||
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.DPadContainer = container;
|
||||
}
|
||||
|
|
@ -93,43 +116,51 @@ ONSControls.createDPad = function() {
|
|||
// * 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;
|
||||
const LBsprite = new PIXI.Sprite.fromImage("js/porting/assets/omori_lb_button.png");
|
||||
const RBsprite = new PIXI.Sprite.fromImage("js/porting/assets/omori_rb_button.png");
|
||||
LBsprite.x = ConfigManager.ONSConfig.LBX;
|
||||
LBsprite.y = ConfigManager.ONSConfig.LBY;
|
||||
LBsprite.width = ConfigManager.ONSConfig.bumpersWidth;
|
||||
LBsprite.height = ConfigManager.ONSConfig.bumpersHeight;
|
||||
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.x = ConfigManager.ONSConfig.RBX;
|
||||
RBsprite.y = ConfigManager.ONSConfig.RBY;
|
||||
RBsprite.width = ConfigManager.ONSConfig.bumpersWidth;
|
||||
RBsprite.height = ConfigManager.ONSConfig.bumpersHeight;
|
||||
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;
|
||||
this.RBsprite = RBsprite;
|
||||
}
|
||||
//=============================================================================
|
||||
// * 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");
|
||||
//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);
|
||||
showButton.interactive = true;
|
||||
showButton.on("pointerdown", this.toggle)
|
||||
// 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.controlsCanvas.stage.addChild(switchButton);
|
||||
this.ShowButton = showButton;
|
||||
this.SwitchButton = switchButton;
|
||||
// this.SwitchButton = switchButton;
|
||||
}
|
||||
//=============================================================================
|
||||
// * Idle animation (spinning buttons)
|
||||
|
|
@ -149,7 +180,26 @@ ONSControls.playIdleAnimation = function() {
|
|||
//=============================================================================
|
||||
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
|
||||
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
|
||||
|
|
@ -157,11 +207,12 @@ ONSControls.sendEvent = function(event, button) {
|
|||
document.addEventListener("deviceready", onCordovaDeviceReady, false);
|
||||
|
||||
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);
|
||||
};
|
||||
|
||||
ONSControls.onCordovaResume = function () {
|
||||
console.log("ONSControls: Received resume event from cordova"); //Remove in release
|
||||
// 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.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.bumpersWidth = ONSControls.controlsCanvas.vh(0.188) * ConfigManager.ONSConfig.bumpersScale;
|
||||
ConfigManager.ONSConfig.bumpersHeight = ONSControls.controlsCanvas.vh(0.12) * 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);
|
||||
|
|
@ -383,8 +434,8 @@ ConfigManager.restoreDefaultConfig = function () {
|
|||
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.bumpersWidth = ONSControls.controlsCanvas.vh(0.188) * ConfigManager.ONSConfig.bumpersScale;
|
||||
ConfigManager.ONSConfig.bumpersHeight = ONSControls.controlsCanvas.vh(0.12) * 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);
|
||||
|
|
@ -410,7 +461,7 @@ ConfigManager.restoreDefaultConfig = function () {
|
|||
// * Plugin init
|
||||
//=============================================================================
|
||||
ONSControls.initialize = function() {
|
||||
console.log("PLUGIN INIT");
|
||||
console.log("ONSControls: Initialized");
|
||||
this.createCanvas();
|
||||
this.configManager();
|
||||
this.createButtons();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue