domino-client/src/game/SpriteBase.ts
2024-07-05 15:37:29 +02:00

112 lines
2.1 KiB
TypeScript

import { Sprite, Texture, Ticker } from 'pixi.js'
export abstract class SpriteBase {
private _interactive: boolean = false
protected sprite: Sprite = new Sprite()
constructor(
protected ticker?: Ticker,
protected scale: number = 1
) {
this.ticker = ticker
this.scale = scale
}
abstract createTexture(): Texture
set interactive(value: boolean) {
this._interactive = value
this.sprite.eventMode = value ? 'static' : 'none'
this.sprite.cursor = value ? 'pointer' : 'default'
}
get interactive(): boolean {
return this._interactive
}
get x(): number {
return this.sprite.x
}
get y(): number {
return this.sprite.y
}
get width(): number {
return this.sprite.width
}
get height(): number {
return this.sprite.height
}
set alpha(value: number) {
this.sprite.alpha = value
}
get alpha(): number {
return this.sprite.alpha
}
set anchor(value: { x: number; y: number } | number) {
if (typeof value === 'number') {
this.sprite.anchor.set(value)
return
}
this.sprite.anchor.set(value.x, value.y)
}
on(event: string, fn: any): void {
this.sprite.on(event, fn)
}
off(event: string): void {
this.sprite.off(event)
}
getSprite(): Sprite {
return this.sprite
}
setPosition(x: number, y: number) {
this.sprite.x = x
this.sprite.y = y
}
setFilters(filters: any[]) {
this.sprite.filters = filters
}
clearFilters() {
this.sprite.filters = []
}
animateTo(x: number, y: number) {
const initialX = this.sprite.x
const initialY = this.sprite.y
const deltaX = x - this.sprite.x
const deltaY = y - this.sprite.y
let elapsed: number = 0
const duration: number = 10
const tick: any = (delta: any) => {
elapsed += delta.deltaTime
const progress = Math.min(elapsed / duration, 1)
this.sprite.x = initialX + deltaX * progress
this.sprite.y = initialY + deltaY * progress
if (progress === 1) {
this.ticker?.remove(tick)
}
}
this.ticker?.add(tick)
}
addTo(container: any) {
container.addChild(this.sprite)
}
}