✏️ 폭죽효과 넣기, js-confetti 라이브러리

프로젝트에서 게임을 만들던 중, 마지막에 승리 모달창에서 게임이 종료될 때

승리 결과창과 함께 폭죽효과를 넣고 싶어서 찾아보게 되었다.

그 중에 초보자도 쉽게 적용할 수 있는 js-confetti 라이브러리를 활용해보기로 했다.

 

 

패키지 설치

npm i js-confetti
yarn add js-confetti

 

 

 

사용법

import JSConfetti from 'js-confetti'

const jsConfetti = new JSConfetti()

jsConfetti.addConfetti()

 

jsConfetti 인스턴스를 초기화하고 addConfetti 매서드를 호출한다.

 

 

 

그리고 js-confetti는 사이즈, 개수, 색상, 형태 를 변경할 수 있다.

• confettiRadius : 조각의 반지름 길이를 설정할 수 있다
• confettiColors : 색상을 설정할 수 있다.
• confettiNumber : 조각의 개수를 설정할 수 있다.
• emojis : 이모티콘으로 사용할 때 사용한다.
• emojiSize : 이모티콘의 크기를 설정할 수 있다.

 

 

 

 

예제 코드 

import JSConfetti from "js-confetti";

  const jsConfetti = new JSConfetti();

  jsConfetti.addConfetti({
    confettiColors: ["#5C5BAD", "#FFFFFF", "#EB7FEC", "#E72424"],
    confettiRadius: 5,
    confettiNumber: 300
  });

 

 

 

 

 

 

적용 결과

 

 

 

 

 

이모티콘 넣기 예제

import JSConfetti from "js-confetti";

  const jsConfetti = new JSConfetti();

  jsConfetti.addConfetti({
      emojis: ["✨", "😁", "🌸"],
      emojiSize: 50,
      confettiNumber: 30,
  });

 

 

 

 

 

적용 결과

 

 

 

마치며

여러가지 라이브러리가 있었지만, 우리는 간단하게 폭죽효과를 넣을거라 js-confetti를 사용했으나

다양하게 커스터마이징 할 수 있는 라이브러리들이 많았다.

간단하게 터트리는 폭죽효과를 넣을거면, js-confetti 라이브러리가 가장 베스트인 것 같다!

 

 

 

 

참고한 문서

js-confetti

 

 

 

 

 

다음 포스팅 - 프로젝트에 적용해보기

IceCraft - 폭죽효과 넣기