VienDesuPorting/OMORI_Android
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

PIXI Controls: Add basic touch animation

Browse source
This commit is contained in:
OleSTEEP 2024-03-21 17:56:11 +03:00
parent caf92ad553
commit 04ae22dfdb
2 changed files with 40 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

26
www.eng/js/plugins/VND_ONSControls.js
View file

@ -238,6 +238,7 @@ ONSControls.updateButtons = function() {
btn.width = buttonsSize; btn.width = buttonsSize;
btn.height = buttonsSize; btn.height = buttonsSize;
btn.interactive = true; btn.interactive = true;
btn.alpha = ConfigManager.ONSConfig.buttonsOpacity;
} }
buttons[0].y = buttonsSize / 2 + buttonsSize / 4; buttons[0].y = buttonsSize / 2 + buttonsSize / 4;
buttons[1].x = -(buttonsSize / 2 + buttonsSize / 4); buttons[1].x = -(buttonsSize / 2 + buttonsSize / 4);
@ -245,7 +246,6 @@ ONSControls.updateButtons = function() {
buttons[3].y = -(buttonsSize / 2 + buttonsSize / 4); buttons[3].y = -(buttonsSize / 2 + buttonsSize / 4);
container.width = buttonsSize * 2; container.width = buttonsSize * 2;
container.height = buttonsSize * 2; container.height = buttonsSize * 2;
container.alpha = ConfigManager.ONSConfig.buttonsOpacity;
container.position.set(ConfigManager.ONSConfig.buttonsX, ConfigManager.ONSConfig.buttonsY); container.position.set(ConfigManager.ONSConfig.buttonsX, ConfigManager.ONSConfig.buttonsY);
container.position = this.toSafeArea(container.position, container); container.position = this.toSafeArea(container.position, container);
@ -295,12 +295,23 @@ ONSControls.toSafeArea = function(position, element) {
return position; return position;
} }
//============================================================================= //=============================================================================
// * Set button pressing animation
//=============================================================================
ONSControls.pressAnimation = function(element, is_pressed) {
const orig_opacity = ConfigManager.ONSConfig.buttonsOpacity;
element.alpha = is_pressed ? orig_opacity / 1.5 : orig_opacity;
console.log(orig_opacity, element.alpha);
}
//=============================================================================
// * Setup events for button // * Setup events for button
//============================================================================= //=============================================================================
ONSControls.setupButton = function(element, button) { ONSControls.setupButton = function(element, button) {
element.on("pointerdown", (event) => {this.sendEvent(event, button)}) element.on("pointerdown", (event) => {this.sendEvent(event, button);
.on("pointerup", (event) => {this.sendEvent(event, button)}) ONSControls.pressAnimation(element, true);})
.on("pointerupoutside", (event) => {this.sendEvent(event, button)}); .on("pointerup", (event) => {this.sendEvent(event, button);
ONSControls.pressAnimation(element, false);})
.on("pointerupoutside", (event) => {this.sendEvent(event, button);
ONSControls.pressAnimation(element, false);});
} }
//============================================================================= //=============================================================================
// * Setup controls touch events // * Setup controls touch events
@ -323,9 +334,12 @@ ONSControls.setupInteractive = function () {
// DPAD // DPAD
const container = this._dPadContainer; const container = this._dPadContainer;
container.on("pointerup", () => {container.upAll();}) container.on("pointerup", () => {container.upAll();
container.on("pointerupoutside", () => {container.upAll();}) ONSControls.pressAnimation(container, false);})
container.on("pointerupoutside", () => {container.upAll();
ONSControls.pressAnimation(container, false);})
container.on("pointerdown", (event) => { container.on("pointerdown", (event) => {
ONSControls.pressAnimation(container, true);
var x = event.data.global.x - this._dPadContainer.x; var x = event.data.global.x - this._dPadContainer.x;
var y = event.data.global.y - this._dPadContainer.y; var y = event.data.global.y - this._dPadContainer.y;
container.down(x, y); container.down(x, y);

26
www.rus/js/plugins/VND_ONSControls.js
View file

@ -238,6 +238,7 @@ ONSControls.updateButtons = function() {
btn.width = buttonsSize; btn.width = buttonsSize;
btn.height = buttonsSize; btn.height = buttonsSize;
btn.interactive = true; btn.interactive = true;
btn.alpha = ConfigManager.ONSConfig.buttonsOpacity;
} }
buttons[0].y = buttonsSize / 2 + buttonsSize / 4; buttons[0].y = buttonsSize / 2 + buttonsSize / 4;
buttons[1].x = -(buttonsSize / 2 + buttonsSize / 4); buttons[1].x = -(buttonsSize / 2 + buttonsSize / 4);
@ -245,7 +246,6 @@ ONSControls.updateButtons = function() {
buttons[3].y = -(buttonsSize / 2 + buttonsSize / 4); buttons[3].y = -(buttonsSize / 2 + buttonsSize / 4);
container.width = buttonsSize * 2; container.width = buttonsSize * 2;
container.height = buttonsSize * 2; container.height = buttonsSize * 2;
container.alpha = ConfigManager.ONSConfig.buttonsOpacity;
container.position.set(ConfigManager.ONSConfig.buttonsX, ConfigManager.ONSConfig.buttonsY); container.position.set(ConfigManager.ONSConfig.buttonsX, ConfigManager.ONSConfig.buttonsY);
container.position = this.toSafeArea(container.position, container); container.position = this.toSafeArea(container.position, container);
@ -295,12 +295,23 @@ ONSControls.toSafeArea = function(position, element) {
return position; return position;
} }
//============================================================================= //=============================================================================
// * Set button pressing animation
//=============================================================================
ONSControls.pressAnimation = function(element, is_pressed) {
const orig_opacity = ConfigManager.ONSConfig.buttonsOpacity;
element.alpha = is_pressed ? orig_opacity / 1.5 : orig_opacity;
console.log(orig_opacity, element.alpha);
}
//=============================================================================
// * Setup events for button // * Setup events for button
//============================================================================= //=============================================================================
ONSControls.setupButton = function(element, button) { ONSControls.setupButton = function(element, button) {
element.on("pointerdown", (event) => {this.sendEvent(event, button)}) element.on("pointerdown", (event) => {this.sendEvent(event, button);
.on("pointerup", (event) => {this.sendEvent(event, button)}) ONSControls.pressAnimation(element, true);})
.on("pointerupoutside", (event) => {this.sendEvent(event, button)}); .on("pointerup", (event) => {this.sendEvent(event, button);
ONSControls.pressAnimation(element, false);})
.on("pointerupoutside", (event) => {this.sendEvent(event, button);
ONSControls.pressAnimation(element, false);});
} }
//============================================================================= //=============================================================================
// * Setup controls touch events // * Setup controls touch events
@ -323,9 +334,12 @@ ONSControls.setupInteractive = function () {
// DPAD // DPAD
const container = this._dPadContainer; const container = this._dPadContainer;
container.on("pointerup", () => {container.upAll();}) container.on("pointerup", () => {container.upAll();
container.on("pointerupoutside", () => {container.upAll();}) ONSControls.pressAnimation(container, false);})
container.on("pointerupoutside", () => {container.upAll();
ONSControls.pressAnimation(container, false);})
container.on("pointerdown", (event) => { container.on("pointerdown", (event) => {
ONSControls.pressAnimation(container, true);
var x = event.data.global.x - this._dPadContainer.x; var x = event.data.global.x - this._dPadContainer.x;
var y = event.data.global.y - this._dPadContainer.y; var y = event.data.global.y - this._dPadContainer.y;
container.down(x, y); container.down(x, y);