pixel-perfect rendering, all sprites have same 1:1 scale

This commit is contained in:
azykov@mail.ru
2026-09-09 19:10:50 +03:00
parent 4e30c585d1
commit 43f6004fb0
16 changed files with 340 additions and 137 deletions
+9 -12
View File
@@ -1,18 +1,16 @@
import { Container, Sprite, type Application } from 'pixi.js';
import { Container, Sprite } from 'pixi.js';
import type { GameStore } from '../../game/GameStore';
import { CHARACTER_SPRITE } from '../../game/sprites';
import { chopShakeOffset, walkBobOffsetY } from '../animations';
import { createHealthBar, setHealthBarPosition, updateHealthBar } from '../healthBar';
import { createShadow } from '../shadow';
import { applySpriteSize, getSpriteTexture } from '../textures';
import { getSpriteTexture } from '../textures';
const CHARACTER_SIZE = 48;
// .entity.character-shadow: width 48 height 24, margin-top 32 (offset from character.x/y).
const SHADOW_OFFSET_Y = 32;
const SHADOW_RADIUS_X = 24;
const SHADOW_RADIUS_Y = 12;
// .health-bar sits `CHARACTER_SIZE * 0.5 + 6` px above the character's own position.
const HEALTH_BAR_OFFSET_Y = CHARACTER_SIZE * 0.5 + 6;
const SHADOW_OFFSET_Y = 11;
const SHADOW_RADIUS_X = 8;
const SHADOW_RADIUS_Y = 4;
/** How far above the character's own position the hp bar floats. */
const HEALTH_BAR_OFFSET_Y = 10;
/** Renders the player character: shadow, sprite (with walk-bob/hit-shake), and an hp bar shown
* only while damaged — mirrors CharacterEntity.tsx. */
@@ -21,11 +19,10 @@ export class CharacterView {
private readonly sprite: Sprite;
private readonly healthBar = createHealthBar();
constructor(app: Application, entities: Container, healthBars: Container) {
const info = getSpriteTexture(app, CHARACTER_SPRITE);
constructor(entities: Container, healthBars: Container) {
const info = getSpriteTexture(CHARACTER_SPRITE);
this.sprite = new Sprite(info.texture);
this.sprite.anchor.set(0.5);
applySpriteSize(this.sprite, info, CHARACTER_SIZE);
entities.addChild(this.shadow, this.sprite);
healthBars.addChild(this.healthBar);