tsparticles 라이브러리의 Emitters 속성 완벽 가이드

1. 소개

안녕하세요!

오늘은 웹 애플리케이션에 멋진 입자 효과를 추가할 수 있는 tsparticles 라이브러리의 핵심 기능 중 하나인 'Emitters(에미터)' 속성에 대해 자세히 알아보겠습니다.

에미터는 입자를 생성하고 방출하는 소스로, 다양한 시각적 효과를 만들 수 있게 해주는 강력한 도구입니다.

에미터란 무엇인가?

에미터(Emitter)는 tsparticles에서 입자(particles)를 생성하고 방출하는 소스입니다. 

쉽게 말해 입자가 어디서, 어떻게, 얼마나 많이, 얼마나 자주 생성될지를 제어하는 객체입니다. 폭죽, 분수, 연기 등의 효과를 만들 때 특히 유용합니다.

 

 

2. 에미터 속성 상세 설명

에미터는 다양한 속성을 통해 세밀하게 제어할 수 있습니다.

 주요 속성들을 하나씩 살펴보겠습니다.

1) position (위치)

position: {
  x: 50,  // 화면의 가로 위치 (%)
  y: 0,   // 화면의 세로 위치 (%)
}

- x: 화면의 가로 위치를 백분율(%)로 지정합니다. 0은 왼쪽 끝, 100은 오른쪽 끝입니다.
- y: 화면의 세로 위치를 백분율(%)로 지정합니다. 0은 상단, 100은 하단입니다.

 

2) size (크기)

size: {
  width: 0,   // 에미터의 가로 크기
  height: 0,  // 에미터의 세로 크기
}

 

- width: 에미터의 가로 크기를 지정합니다.
- height: 에미터의 세로 크기를 지정합니다.

크기가 0이면 점 형태의 에미터가 되고, 값이 클수록 더 넓은 영역에서 입자가 무작위로 생성됩니다.

3) direction (방향)

direction: "top"  // 입자가 방출되는 방향

- "none" | `"top" | "top-right" | "right" | "bottom-right" | "bottom" | "bottom-left" | "left" | "top-left" | "all"

입자가 방출되는 방향을 지정합니다. 가능한 값은 위와 같습니다.

 

4) life (수명)

life: {
  count: 1,      // 에미터가 활성화되는 횟수
  duration: 0.1,  // 에미터가 활성화되는 시간 (초)
  delay: 0.5      // 에미터 활성화 사이의 지연 시간
}

- count: 에미터가 활성화되는 총 횟수입니다. 0이면 무한히 반복됩니다.
- duration: 에미터가 활성화되는 시간(초)입니다.
- delay: 에미터 활성화 사이의 지연 시간(초)입니다.

5) rate (방출 속도)

rate: {
  delay: 0.1,    // 입자 생성 이벤트 간의 지연 시간 (초)
  quantity: 5    // 각 생성 이벤트마다 방출되는 입자 수
}

- delay: 입자 생성 이벤트 간의 지연 시간(초)입니다. 에미터가 활성화된 동안 입자를 생성하는 주기를 결정합니다.
- quantity: 각 생성 이벤트마다 방출되는 입자의 수입니다. 값이 클수록 더 많은 입자가 동시에 생성됩니다.

6) particles (입자 설정)

particles: {
  // 이 에미터에서 생성되는 입자에 대한 특정 설정
  color: {
    value: "#ff0000"  // 빨간색 입자
  },
  size: {
    value: { min: 3, max: 5 }  // 더 큰 입자
  }
}

 

이 에미터에서 생성되는 입자에 대한 특정 설정을 지정할 수 있습니다. 이는 전역 particles 설정을 덮어씁니다.

 

 

3. 에미터 사용 예시

다양한 효과를 만들기 위한 에미터 설정 예시를 살펴보겠습니다.

0) 전체 코드 예시

"use client";

import { useEffect, useState } from "react";
import Particles, { initParticlesEngine } from "@tsparticles/react";
import { type Container } from "@tsparticles/engine";
import { loadConfettiPreset } from "@tsparticles/preset-confetti";

const TsParticleInit = () => {
  const [init, setInit] = useState(false);

  // this should be run only once per application lifetime
  useEffect(() => {
    initParticlesEngine(async (engine) => {
      await loadConfettiPreset(engine);
    }).then(() => {
      setInit(true);
    });
  }, []);

  const particlesLoaded = async (container?: Container): Promise<void> => {
    console.log(container);
  };

  if (init) {
    return (
      <Particles
        id="tsparticles"
        particlesLoaded={particlesLoaded}
        options={{
          preset: "confetti",
          emitters: {
            direction: "bottom",
            life: {
              count: 3, // 반복 횟수(0.1초 마다 생성 10번 반복)
              duration: 0.1, // 에미터 지속 시간
              delay: 1,
            },
            position: {
              x: 50,
              y: 50,
            },
            size: {
              width: 0,
              height: 0,
            },
            rate: {
              delay: 0,
              quantity: 100,
            },

          },
        }}
      />
    );
  }

  return <></>;
};

export default TsParticleInit;

 

1) 폭발 효과

{
  direction: "all",
  position: { x: 50, y: 50 },
  size: { width: 0, height: 0, mode: "precise" },
  life: { count: 1, duration: 0.1, delay: 0 },
  rate: { delay: 0, quantity: 100 }
}

화면 중앙에서 모든 방향으로 한 번에 100개의 입자를 방출하는 폭발 효과입니다.

2) 지속적인 분수 효과

{
  direction: "top",
  position: { x: 50, y: 100 },
  size: { width: 0, height: 0, mode: "percent" },
  life: { count: 0, duration: -1, delay: 0 },
  rate: { delay: 0.1, quantity: 5 }
}

화면 하단 중앙에서 위쪽으로 지속적으로 입자를 방출하는 분수 효과입니다.

3) 비처럼 내리는 효과

{
  direction: "bottom",
  position: { x: 50, y: 0 },
  size: { width: 100, height: 0, mode: "percent" },
  life: { count: 0, duration: -1, delay: 0 },
  rate: { delay: 0.1, quantity: 2 }
}

화면 상단 전체 너비에서 아래쪽으로 지속적으로 입자를 방출하는 비 효과입니다.

4) 여러 에미터 동시 사용

[
  {
    direction: "top-left",
    position: { x: 100, y: 100 },
    life: { count: 0, duration: -1, delay: 0 },
    rate: { delay: 0.5, quantity: 1 }
  },
  {
    direction: "top-right",
    position: { x: 0, y: 100 },
    life: { count: 0, duration: -1, delay: 0 },
    rate: { delay: 0.5, quantity: 1 }
  }
]

화면 하단의 두 모서리에서 대각선 방향으로 입자를 방출하는 효과입니다.

 

4. 성능 최적화 팁

에미터를 사용할 때 성능을 최적화하기 위한 몇 가지 팁을 소개합니다

1. 입자 수 제한 : `rate.quantity`와 `life.count`를 적절히 조절하여 화면에 표시되는 입자 수를 제한하세요.
2. 입자 수명 조절 : 입자의 수명을 짧게 설정하여 화면에 오래 남아있지 않도록 하세요.
3. **복잡한 애니메이션 제한 : 입자의 회전, 색상 변화 등 복잡한 애니메이션을 제한하세요.
4. 에미터 활성화 시간 제한 : 필요한 시간 동안만 에미터를 활성화하세요.

 

5. 결론

tsparticles의 에미터는 다양한 입자 효과를 만들기 위한 강력한 도구입니다. 위치, 크기, 방향, 수명, 방출 속도 등 다양한 속성을 조합하여 원하는 효과를 세밀하게 제어할 수 있습니다.

이 글에서 소개한 내용을 바탕으로 여러분만의 창의적인 입자 효과를 만들어보세요.

축하 이벤트, 배경 효과, 사용자 인터랙션 피드백 등 다양한 상황에서 활용할 수 있습니다.

tsparticles는 지속적으로 업데이트되는 라이브러리이므로, 최신 기능과 변경 사항은 

[공식 문서](https://particles.js.org/docs/)를 참조하는 것이 좋습니다.

https://particles.js.org/

tsParticles - JavaScript Particles, Confetti and Fireworks animations for your website