PIXI Controls: Add basic touch animation
This commit is contained in:
parent
caf92ad553
commit
04ae22dfdb
2 changed files with 40 additions and 12 deletions
|
@ -238,6 +238,7 @@ ONSControls.updateButtons = function() {
|
|||
btn.width = buttonsSize;
|
||||
btn.height = buttonsSize;
|
||||
btn.interactive = true;
|
||||
btn.alpha = ConfigManager.ONSConfig.buttonsOpacity;
|
||||
}
|
||||
buttons[0].y = 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);
|
||||
container.width = buttonsSize * 2;
|
||||
container.height = buttonsSize * 2;
|
||||
container.alpha = ConfigManager.ONSConfig.buttonsOpacity;
|
||||
container.position.set(ConfigManager.ONSConfig.buttonsX, ConfigManager.ONSConfig.buttonsY);
|
||||
container.position = this.toSafeArea(container.position, container);
|
||||
|
||||
|
@ -295,12 +295,23 @@ ONSControls.toSafeArea = function(position, element) {
|
|||
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
|
||||
//=============================================================================
|
||||
ONSControls.setupButton = function(element, button) {
|
||||
element.on("pointerdown", (event) => {this.sendEvent(event, button)})
|
||||
.on("pointerup", (event) => {this.sendEvent(event, button)})
|
||||
.on("pointerupoutside", (event) => {this.sendEvent(event, button)});
|
||||
element.on("pointerdown", (event) => {this.sendEvent(event, button);
|
||||
ONSControls.pressAnimation(element, true);})
|
||||
.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
|
||||
|
@ -323,9 +334,12 @@ ONSControls.setupInteractive = function () {
|
|||
|
||||
// DPAD
|
||||
const container = this._dPadContainer;
|
||||
container.on("pointerup", () => {container.upAll();})
|
||||
container.on("pointerupoutside", () => {container.upAll();})
|
||||
container.on("pointerup", () => {container.upAll();
|
||||
ONSControls.pressAnimation(container, false);})
|
||||
container.on("pointerupoutside", () => {container.upAll();
|
||||
ONSControls.pressAnimation(container, false);})
|
||||
container.on("pointerdown", (event) => {
|
||||
ONSControls.pressAnimation(container, true);
|
||||
var x = event.data.global.x - this._dPadContainer.x;
|
||||
var y = event.data.global.y - this._dPadContainer.y;
|
||||
container.down(x, y);
|
||||
|
|
|
@ -238,6 +238,7 @@ ONSControls.updateButtons = function() {
|
|||
btn.width = buttonsSize;
|
||||
btn.height = buttonsSize;
|
||||
btn.interactive = true;
|
||||
btn.alpha = ConfigManager.ONSConfig.buttonsOpacity;
|
||||
}
|
||||
buttons[0].y = 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);
|
||||
container.width = buttonsSize * 2;
|
||||
container.height = buttonsSize * 2;
|
||||
container.alpha = ConfigManager.ONSConfig.buttonsOpacity;
|
||||
container.position.set(ConfigManager.ONSConfig.buttonsX, ConfigManager.ONSConfig.buttonsY);
|
||||
container.position = this.toSafeArea(container.position, container);
|
||||
|
||||
|
@ -295,12 +295,23 @@ ONSControls.toSafeArea = function(position, element) {
|
|||
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
|
||||
//=============================================================================
|
||||
ONSControls.setupButton = function(element, button) {
|
||||
element.on("pointerdown", (event) => {this.sendEvent(event, button)})
|
||||
.on("pointerup", (event) => {this.sendEvent(event, button)})
|
||||
.on("pointerupoutside", (event) => {this.sendEvent(event, button)});
|
||||
element.on("pointerdown", (event) => {this.sendEvent(event, button);
|
||||
ONSControls.pressAnimation(element, true);})
|
||||
.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
|
||||
|
@ -323,9 +334,12 @@ ONSControls.setupInteractive = function () {
|
|||
|
||||
// DPAD
|
||||
const container = this._dPadContainer;
|
||||
container.on("pointerup", () => {container.upAll();})
|
||||
container.on("pointerupoutside", () => {container.upAll();})
|
||||
container.on("pointerup", () => {container.upAll();
|
||||
ONSControls.pressAnimation(container, false);})
|
||||
container.on("pointerupoutside", () => {container.upAll();
|
||||
ONSControls.pressAnimation(container, false);})
|
||||
container.on("pointerdown", (event) => {
|
||||
ONSControls.pressAnimation(container, true);
|
||||
var x = event.data.global.x - this._dPadContainer.x;
|
||||
var y = event.data.global.y - this._dPadContainer.y;
|
||||
container.down(x, y);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue