@mai3/phaser-sdk
Version:
A UI component library based on the Phaser game engine
277 lines (276 loc) • 11.2 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
import { Container } from "./Container";
import Utils from "../utils";
var Joystick = /** @class */ (function (_super) {
__extends(Joystick, _super);
function Joystick(scene, config) {
var _this = this;
config.geomType = 'Circle';
_this = _super.call(this, scene, config) || this;
_this.isBeingDragged = false;
_this.forceX = 0;
_this.forceY = 0;
_this._force = 0;
_this._angle = 0;
_this.baseRadius = 50;
_this.thumbRadius = 25;
_this.Type = "Joystick";
_this._config = config;
_this.reDraw(config);
return _this;
}
Joystick.prototype.reDraw = function (config) {
var _a, _b, _c;
this._config = config;
var _d = config.width, width = _d === void 0 ? 0 : _d, _e = config.height, height = _e === void 0 ? 0 : _e;
var defaultBaseRadius = 50;
var defaultThumbRadius = 25;
// Calculate base radius from config or use default
var baseRadius = 0;
if (width > 0 && height > 0) {
baseRadius = Math.min(width / 2, height / 2);
}
else {
baseRadius = ((_a = config.base) === null || _a === void 0 ? void 0 : _a.radius) || defaultBaseRadius;
}
// Update config dimensions to match calculated radius
this._config.width = baseRadius * 2;
this._config.height = baseRadius * 2;
this._config.radius = baseRadius;
this._config.base.radius = baseRadius;
// Set instance properties
this.baseRadius = baseRadius;
this.thumbRadius = ((_b = config.thumb) === null || _b === void 0 ? void 0 : _b.radius) || defaultThumbRadius;
this.clearComponents();
this.createComponents();
this.setupComponents();
this.setDepth((_c = config.depth) !== null && _c !== void 0 ? _c : 1);
};
Joystick.prototype.clearComponents = function () {
[this.base, this.thumb, this.maskShape, this.thumbMaskShape].forEach(function (component) {
if (component)
component.destroy();
});
this.base = undefined;
this.thumb = undefined;
this.maskShape = undefined;
this.thumbMaskShape = undefined;
};
Joystick.prototype.createComponents = function () {
this.createBase();
this.createThumb();
if (this.base && this.thumb) {
this.add([this.base, this.thumb]);
// Ensure thumb is centered on base
this.thumb.setPosition(this.baseRadius, this.baseRadius);
if (this.thumbMaskShape) {
var imageLeftTopPos = Utils.getWorldPosition(this.thumb);
this.thumbMaskShape.setPosition(imageLeftTopPos.x, imageLeftTopPos.y);
}
}
};
Joystick.prototype.setupComponents = function () {
this.setPosition(this._config.x || 0, this._config.y || 0);
this.updateConfig(this._config);
this.RefreshBounds();
this.setScrollFactor(this._config.isScrollFactor ? 0 : 1);
// this.setScrollFactor(this._config.isScrollFactor ? 0 : 1);
this.setEventInteractive();
this.setupInteractive();
};
Joystick.prototype.createMaskedImage = function (key, radius, index) {
if (!key) {
console.warn("No ".concat(index === 0 ? 'base' : 'thumb', " key provided for joystick"));
return;
}
var maskShape = this.scene.add.graphics();
var image = this.scene.make.image({})
.setTexture(key)
.setPosition(radius, radius)
.setDisplaySize(radius * 2, radius * 2)
.setOrigin(0.5);
this.addChildAt(image, index * 2);
maskShape.clear()
.fillStyle(0xffffff)
.fillCircle(0, 0, radius);
var mask = maskShape.createGeometryMask();
maskShape.setVisible(false);
image.setMask(mask);
this.addChildAt(maskShape, index * 2 + 1);
var imageLeftTopPos = Utils.getWorldPosition(image);
maskShape.setPosition(imageLeftTopPos.x, imageLeftTopPos.y);
return { image: image, maskShape: maskShape };
};
Joystick.prototype.createBase = function () {
var _a;
var result = this.createMaskedImage(((_a = this._config.base) === null || _a === void 0 ? void 0 : _a.key) || '', this.baseRadius, 0);
if (result) {
this.base = result.image;
this.maskShape = result.maskShape;
}
};
Joystick.prototype.createThumb = function () {
var _a;
var result = this.createMaskedImage(((_a = this._config.thumb) === null || _a === void 0 ? void 0 : _a.key) || '', this.thumbRadius, 1);
if (result) {
this.thumb = result.image;
this.thumbMaskShape = result.maskShape;
}
};
Joystick.prototype.setupInteractive = function () {
var _this = this;
if (!this.thumb)
return;
this.thumb.setInteractive();
var events = ['pointerdown', 'pointermove', 'pointerup'];
var handlers = [this.onPointerDown, this.onPointerMove, this.onPointerUp];
events.forEach(function (event, index) {
_this.scene.input.on(event, handlers[index], _this);
});
};
Joystick.prototype.onPointerDown = function (pointer) {
if (!this.thumb)
return;
var thumbPos = Utils.getWorldPosition(this.thumb);
var distance = Phaser.Math.Distance.Between(thumbPos.x, thumbPos.y, pointer.x, pointer.y);
if (distance <= this.thumbRadius) {
this.isBeingDragged = true;
this.pointer = pointer;
this.updateJoystickPosition(pointer);
}
};
Joystick.prototype.onPointerMove = function (pointer) {
var _a;
if (!this.isBeingDragged || ((_a = this.pointer) === null || _a === void 0 ? void 0 : _a.id) !== pointer.id)
return;
this.updateJoystickPosition(pointer);
};
Joystick.prototype.onPointerUp = function (pointer) {
var _a;
if (((_a = this.pointer) === null || _a === void 0 ? void 0 : _a.id) !== pointer.id)
return;
this.resetJoystick();
};
Joystick.prototype.resetJoystick = function () {
this.isBeingDragged = false;
this.pointer = undefined;
if (this.thumb) {
this.thumb.setPosition(this.baseRadius, this.baseRadius);
if (this.thumbMaskShape) {
var imageLeftTopPos = Utils.getWorldPosition(this.thumb);
this.thumbMaskShape.setPosition(imageLeftTopPos.x, imageLeftTopPos.y);
}
}
this.forceX = 0;
this.forceY = 0;
this._force = 0;
this._angle = 0;
};
Joystick.prototype.updateJoystickPosition = function (pointer) {
if (!this.thumb || !this.thumbMaskShape)
return;
var deltaX = pointer.x - (this.x + this.baseRadius);
var deltaY = pointer.y - (this.y + this.baseRadius);
var distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
var angle = Math.atan2(deltaY, deltaX);
this._angle = Phaser.Math.RadToDeg(angle);
this._force = Phaser.Math.Clamp(distance / this.baseRadius, 0, 1);
var isWithinRadius = distance <= this.baseRadius;
var newX = this.baseRadius + (isWithinRadius ? deltaX : Math.cos(angle) * this.baseRadius);
var newY = this.baseRadius + (isWithinRadius ? deltaY : Math.sin(angle) * this.baseRadius);
this.forceX = isWithinRadius ? deltaX / this.baseRadius : Math.cos(angle);
this.forceY = isWithinRadius ? deltaY / this.baseRadius : Math.sin(angle);
this.thumb.setPosition(newX, newY);
var imageLeftTopPos = Utils.getWorldPosition(this.thumb);
this.thumbMaskShape.setPosition(imageLeftTopPos.x, imageLeftTopPos.y);
};
Object.defineProperty(Joystick.prototype, "force", {
get: function () {
return this._force;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Joystick.prototype, "joystickRotation", {
get: function () {
return this._angle;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Joystick.prototype, "up", {
get: function () {
return this.forceY < -0.5;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Joystick.prototype, "down", {
get: function () {
return this.forceY > 0.5;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Joystick.prototype, "left", {
get: function () {
return this.forceX < -0.5;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Joystick.prototype, "right", {
get: function () {
return this.forceX > 0.5;
},
enumerable: false,
configurable: true
});
Joystick.prototype.setVisible = function (visible) {
[this.base, this.thumb].forEach(function (component) {
if (component)
component.setVisible(visible);
});
return this;
};
Joystick.prototype.setScrollFactor = function (factor) {
[this.base, this.thumb].forEach(function (component) {
if (component)
component.setScrollFactor(factor);
});
return this;
};
// Update mask positions without redrawing
Joystick.prototype.updateMaskPos = function () {
var basePos = Utils.getWorldPosition(this.base);
var thumbPos = Utils.getWorldPosition(this.thumb);
this.maskShape.setPosition(basePos.x, basePos.y);
this.thumbMaskShape.setPosition(thumbPos.x, thumbPos.y);
};
Joystick.prototype.destroy = function () {
var _this = this;
var events = ['pointerdown', 'pointermove', 'pointerup'];
var handlers = [this.onPointerDown, this.onPointerMove, this.onPointerUp];
events.forEach(function (event, index) {
_this.scene.input.off(event, handlers[index], _this);
});
this.clearComponents();
_super.prototype.destroy.call(this);
};
return Joystick;
}(Container));
export { Joystick };