feat: sprite alpha and rotation

This commit is contained in:
cha0s 2024-07-25 10:48:22 -05:00
parent 0439c52076
commit 5fe346372b
3 changed files with 45 additions and 9 deletions

View File

@ -11,6 +11,9 @@ export default class Sprite extends Component {
return super.animation; return super.animation;
} }
set animation(animation) { set animation(animation) {
if (this.$$animation === animation) {
return;
}
super.animation = animation; super.animation = animation;
// eslint-disable-next-line no-self-assign // eslint-disable-next-line no-self-assign
this.frame = this.frame; this.frame = this.frame;
@ -31,6 +34,27 @@ export default class Sprite extends Component {
} }
return this.$$sourceJson.animations[this.animation].length; return this.$$sourceJson.animations[this.animation].length;
} }
hasAnimation(animation) {
if (
!this.$$sourceJson.animations
|| !(animation in this.$$sourceJson.animations)
) {
return false;
}
return true;
}
get rotates() {
if (!this.$$sourceJson.meta) {
return false;
}
return 'rotation' in this.$$sourceJson.meta;
}
get rotation() {
if (!this.$$sourceJson.meta) {
return 0;
}
return this.$$sourceJson.meta.rotation;
}
get scale() { get scale() {
return {x: this.scaleX, y: this.scaleY}; return {x: this.scaleX, y: this.scaleY};
} }
@ -51,6 +75,7 @@ export default class Sprite extends Component {
super.markChange(entityId, key, value); super.markChange(entityId, key, value);
} }
static properties = { static properties = {
alpha: {defaultValue: 1, type: 'float32'},
anchorX: {defaultValue: 0.5, type: 'float32'}, anchorX: {defaultValue: 0.5, type: 'float32'},
anchorY: {defaultValue: 0.5, type: 'float32'}, anchorY: {defaultValue: 0.5, type: 'float32'},
animation: {type: 'string'}, animation: {type: 'string'},

View File

@ -24,6 +24,7 @@ export default class SpriteDirection extends System {
} }
} }
if (Direction) { if (Direction) {
if (!Sprite.rotates) {
const name = { const name = {
0: 'right', 0: 'right',
1: 'down', 1: 'down',
@ -32,10 +33,13 @@ export default class SpriteDirection extends System {
}; };
parts.push(name[Direction.quantize(4)]); parts.push(name[Direction.quantize(4)]);
} }
}
if (parts.length > 0) { if (parts.length > 0) {
if (Sprite.hasAnimation(parts.join(':'))) {
Sprite.animation = parts.join(':'); Sprite.animation = parts.join(':');
} }
} }
} }
}
} }

View File

@ -11,6 +11,9 @@ function textureFromAsset(asset, animation, frame) {
} }
let texture; let texture;
if (asset.data.animations) { if (asset.data.animations) {
if (!animation) {
return undefined;
}
texture = asset.animations[animation][frame]; texture = asset.animations[animation][frame];
} }
else { else {
@ -23,7 +26,7 @@ export default function Sprite({entity, ...rest}) {
const [mounted, setMounted] = useState(); const [mounted, setMounted] = useState();
const [normals, setNormals] = useState(); const [normals, setNormals] = useState();
const [normalsMounted, setNormalsMounted] = useState(); const [normalsMounted, setNormalsMounted] = useState();
const {anchor, animation, frame, scale, source} = entity.Sprite; const {alpha, anchor, animation, frame, scale, rotates, rotation, source} = entity.Sprite;
const asset = useAsset(source); const asset = useAsset(source);
const normalsAsset = useAsset(normals); const normalsAsset = useAsset(normals);
useEffect(() => { useEffect(() => {
@ -59,8 +62,10 @@ export default function Sprite({entity, ...rest}) {
<> <>
{texture && ( {texture && (
<PixiSprite <PixiSprite
alpha={alpha}
anchor={anchor} anchor={anchor}
ref={setMounted} ref={setMounted}
{...(rotates ? {rotation: entity.Direction.direction + rotation} : {})}
scale={scale} scale={scale}
texture={texture} texture={texture}
x={Math.round(entity.Position.x)} x={Math.round(entity.Position.x)}
@ -70,8 +75,10 @@ export default function Sprite({entity, ...rest}) {
)} )}
{normalsTexture && ( {normalsTexture && (
<PixiSprite <PixiSprite
alpha={alpha}
anchor={anchor} anchor={anchor}
ref={setNormalsMounted} ref={setNormalsMounted}
{...(rotates ? {rotation: entity.Direction.direction + rotation} : {})}
scale={scale} scale={scale}
texture={normalsTexture} texture={normalsTexture}
x={Math.round(entity.Position.x)} x={Math.round(entity.Position.x)}