1. 프로젝트 개요

• 프로젝트명: 픽셀즈 슬롯머신
• 목표: 사용자가 슬롯머신 게임에서 당첨 시 다채로운 애니메이션과 물리 기반의 효과를 체험하도록 구현

2. 담당 역할 및 주요 작업

• 기획

  

• 디자인

  • 루비 인벤토리, 잭팟, 버튼 등의 UI 요소 디자인

• 웹 퍼블리싱

  • UI/UX 디자인 반영 및 스타일링

• 개발

  • 프로젝트 세팅
  • 애니메이션
    • 루비 인벤토리 애니메이션
    • 당첨 및 잭팟 시 루비 떨어지는 애니메이션
    • 심볼 스프라이트 이미지 애니메이션 (CSS keyframes 활용)
  • 상태 관리
    • React의 useResultStore를 통해 게임 결과에 따라 동적으로 애니메이션 처리
  • 물리 효과
    • Matter.js 활용: 루비들이 튕기고 떨어지는 현실감 있는 애니메이션 구현
  • 모달
    • Zustand 기반 전역 상태 관리로 다양한 팝업 구현

3. 주요 기술 및 구현 포인트

1. 당첨 시 애니메이션 (GSAP)

• GSAP 활용:
  • gsap.timeline()으로 순차적 애니메이션 설정
  • x, y 이동 및 scale, opacity 변화 적용
• 심볼 애니메이션:
  • Scatter (9)와 Wild (8) 심볼 각각 목표 위치로 이동 및 스타일 변화
  • 동적 스타일링을 통해 결과에 따라 심볼 이미지와 애니메이션 제어

2. Matter.js 기반 물리 엔진

• 루비 효과 구현:
  • Bodies.circle로 루비 생성, 속성을 랜덤하게 설정해 자연스러운 물리 효과 제공
  • Engine.create, Render.create, Runner.run을 통해 엔진과 렌더링 연결
• 반응형 캔버스:
  • useRef와 useEffect를 이용해 다양한 화면 크기에 대응하는 캔버스 구현

3. 스프라이트 애니메이션 (CSS)

• CSS 애니메이션 최적화:
  • 순수 CSS와 keyframes, steps()를 사용하여 스프라이트 애니메이션 구현

4. 모달 및 전역 상태 관리 (Zustand)

• Zustand 활용:
  • useShowPopup 커스텀 훅으로 팝업 상태(isPopupVisible, popupType) 관리