pixijs-scene-particle-container은(는) 무엇을 하나요?
이 스킬은 PixiJS v8에서 수천 개의 경량 스프라이트를 렌더링할 때 사용합니다. ParticleContainer, Particle 인스턴스, addParticle/removeParticle, particleChildren 배열, dynamicProperties (vertex, position, rotation, uvs, color), boundsArea, roundPixels, update를 다룹니다. 트리거: ParticleContainer, Particle, IParticle, addParticle, particleChildren, dynamicProperties, boundsArea, particle effects, constructor options, ParticleContainerOptions, ParticleOptions.
개요
ParticleContainer는 PixiJS v8에서 대량의 스프라이트를 효율적으로 렌더링하기 위해 특별히 설계된 컨테이너입니다. 일반 Container에 비해 메모리 사용량이 적고 렌더링 성능이 뛰어나지만, 일부 기능(예: 개별 스프라이트의 복잡한 변환)이 제한됩니다.
주요 구성 요소
ParticleContainer
ParticleContainer는 파티클을 관리하는 최상위 컨테이너입니다.
import { ParticleContainer } from 'pixi.js';
const container = new ParticleContainer({
capacity: 10000, // 최대 파티클 수
properties: {
vertices: true, // 버텍스 데이터 사용
position: true, // 위치 데이터 사용
rotation: true, // 회전 데이터 사용
uvs: false, // UV 좌표 사용 안 함
color: true, // 색상 데이터 사용
},
boundsArea: new Rectangle(0, 0, 800, 600),
roundPixels: true,
});
Particle
Particle은 개별 파티클 인스턴스를 나타냅니다.
import { Particle } from 'pixi.js';
const particle = new Particle({
texture: texture,
position: { x: 100, y: 200 },
rotation: 0.5,
tint: 0xff0000,
alpha: 0.8,
});
IParticle
IParticle 인터페이스는 파티클의 기본 속성을 정의합니다.
interface IParticle {
position: ObservablePoint;
rotation: number;
scale: ObservablePoint;
alpha: number;
tint: number;
visible: boolean;
texture: Texture;
}
주요 메서드
addParticle
컨테이너에 새 파티클을 추가합니다.
const particle = container.addParticle({
texture: particleTexture,
position: { x: Math.random() * 800, y: Math.random() * 600 },
tint: 0xffffff,
alpha: 1,
});
removeParticle
컨테이너에서 파티클을 제거합니다.
container.removeParticle(particle);
particleChildren
particleChildren 속성은 컨테이너 내 모든 파티클의 배열을 반환합니다.
const children = container.particleChildren;
children.forEach((particle) => {
particle.alpha -= 0.01;
});
동적 속성 (dynamicProperties)
dynamicProperties는 각 파티클의 속성을 개별적으로 업데이트할 수 있게 해주는 설정입니다.
| 속성 | 설명 | 기본값 |
|---|---|---|
vertex | 버텍스 데이터 사용 여부 | true |
position | 위치 데이터 사용 여부 | true |
rotation | 회전 데이터 사용 여부 | true |
uvs | UV 좌표 사용 여부 | false |
color | 색상 데이터 사용 여부 | false |
const container = new ParticleContainer({
capacity: 5000,
properties: {
vertices: false,
position: true,
rotation: true,
uvs: false,
color: true,
},
});
옵션
boundsArea
파티클의 경계 영역을 설정합니다. 이 영역 밖의 파티클은 렌더링되지 않아 성능이 향상됩니다.
import { Rectangle } from 'pixi.js';
container.boundsArea = new Rectangle(0, 0, 1024, 768);
roundPixels
파티클 위치를 정수로 반올림하여 픽셀 정렬을 개선합니다. 이는 성능을 약간 향상시키고 안티앨리어싱 아티팩트를 줄일 수 있습니다.
container.roundPixels = true;
update
파티클 속성이 변경된 후 컨테이너를 수동으로 업데이트할 때 사용합니다.
container.update();
생성자 옵션
ParticleContainerOptions
interface ParticleContainerOptions {
capacity: number;
properties?: {
vertices?: boolean;
position?: boolean;
rotation?: boolean;
uvs?: boolean;
color?: boolean;
};
boundsArea?: Rectangle;
roundPixels?: boolean;
}
ParticleOptions
interface ParticleOptions {
texture: Texture;
position?: { x: number; y: number };
rotation?: number;
scale?: { x: number; y: number };
alpha?: number;
tint?: number;
visible?: boolean;
}
사용 예제
기본 파티클 효과
import { Application, ParticleContainer, Particle, Texture } from 'pixi.js';
const app = new Application();
await app.init({ width: 800, height: 600 });
document.body.appendChild(app.canvas);
const particleContainer = new ParticleContainer({
capacity: 1000,
properties: { position: true, rotation: true, color: true },
});
const texture = Texture.WHITE;
for (let i = 0; i < 500; i++) {
const particle = particleContainer.addParticle({
texture,
position: {
x: Math.random() * 800,
y: Math.random() * 600,
},
rotation: Math.random() * Math.PI * 2,
tint: Math.random() * 0xffffff,
alpha: 0.8 + Math.random() * 0.2,
});
}
app.stage.addChild(particleContainer);
// 애니메이션 루프에서 파티클 업데이트
app.ticker.add(() => {
particleContainer.particleChildren.forEach((particle) => {
particle.position.y -= 1;
particle.rotation += 0.01;
});
particleContainer.update();
});
주의사항
ParticleContainer는Container의 모든 기능을 지원하지 않습니다. 복잡한 개별 변환이 필요하면 일반Container를 사용하세요.dynamicProperties에서 활성화하지 않은 속성은 파티클에서 사용할 수 없습니다.capacity는 컨테이너 생성 시 설정해야 하며, 이후 변경할 수 없습니다.- 대규모 파티클 시스템을 사용할 때는
boundsArea를 설정하여 불필요한 렌더링을 방지하세요.