개요

• 10월 9일까지 항해톤(1회) 심사 기간이므로, 현재 프로젝트를 추가 작업하지 않습니다.
• 심사 기간 이후, 주말에 아래 체크리스트 항목을 진행합니다.(아마도 14~15일)

Todo List

• 기능 추가A: 점수 기록 (score + nickname) Firebase 연결
• 기능 추가B: Google Analytics 추가
• 기능 추가C: 게임 도중에 초기화 버튼
• 기능 추가D: 게임 오버 시, 재시작 버튼
• 기능 추가E: 게임 오버, 게임 클리어 시 Lottie 애니메이션 추가 etc) confetti
• 기능 추가F: 게임 sound 추가
• 버그 수정A: 게임 종료 타이밍 관련 버그 수정
• 버그 수정B: MouseConstranit 타겟 제한
• 버그 수정C: stage 4에서 송편 가끔 굴러 떨어짐
• 버그 수정D: 가끔 송편이 사라짐 < ? 재현 필요

현재 socre 데이터_231005

• 집계 방식: 카카오톡 스크린샷 인증
• 심사(10월 9일) 이후 DB 추가 예정

날짜별 요약

• 9월 28일: 주제 확인, 아이디어 정리, 프로젝트 세팅 및 설정
• 9월 29일: 구현 방식 찾아보기 (vanilla JS vs MatterJS)
• 9월 30일: 라이브러리 공식문서 확인, 기본 월드 구현
• 10월 1일: 슈터 구현, stage 설정
• 10월 2일: 추가 레퍼런스 살펴보기, 남은 task 확인
• 10월 3일: 점수 기능 구현, 이미지 제작, 텍스처 추가, 기능 및 UI 정리, 제출

📌 9월 28일

항해 코육대 주제 확인하기 (2시)
미니게임 주제 확인 및 아이디어 정리
프로젝트 세팅 및 설정 트러블 슈팅

코육대 개인 목표

25% 달성😢

• 리액트 빌드를 정적으로 배포해보자. (+tailwindCSS)
• 이전 해커톤에서 썼던 chakra를 활용
• threeJS 적용할 거리 찾기
• rottie 사용해서 애니메이션 추가하기

부가 목표

시간 부족!

• 소셜 로그인 붙이기
• AWS 활용: 람다 사용할 거리 찾기

프로젝트 init

• 빌드&프레임워크: vite, react, ts
• UI: chakra-ui, tailwind-css
• => next로 변경
  • app 라우팅
  • next/font 쓰기 => 지움
• 하루종일 스택 정하기 + 설정

Next static export

https://nextjs.org/docs/pages/building-your-application/deploying/static-exports

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export",
  distDir: "dist",
  skipTrailingSlashRedirect: true,
  trailingSlash: true,
};

module.exports = nextConfig;

=> 빌드 config: 28일 새벽까지 경로 이슈를 해결하고자 했으나 실패

• https://stackoverflow.com/questions/68401554/export-project-with-nextjs-tailwind-emotion-loses-tailwind-css-styles

• vercel/next.js#2581 (comment)

📌 9월 30일

게임 구현 방법 찾기

방법A: JS로 직접 구현하기

• webGL보다 threeJS를 많이 사용하듯, 보편적인 라이브러리가 있다면 활용하는 것이 좋음
  • 성능, 구현 완성도, 구현 속도

방법B: 물리 엔진 구현 라이브러리: MatterJS

• https://brm.io/matter-js/docs/
• HTML canvas에 2d context를 그리는 데 많이 쓰이는 라이브러리

// module aliases
var Engine = Matter.Engine,
    Render = Matter.Render,
    Runner = Matter.Runner,
    Bodies = Matter.Bodies,
    Composite = Matter.Composite;

• 각종 플러그인 보유
  • 활용도가 높다. => 포트폴리오 제작 등에 활용 가능
  • https://github.com/abagames/lark-matter : pixel art render
  • https://github.com/FormidableLabs/react-game-kit
• 공식문서 읽으면서 기능 확인

📌 9월 29일

추석 지낸 후 => 오후 시간 공부
기초 활용
주요 참고 코드 : body.create()의 options

공부 메모 => 스크린샷 및 동영상 따로 정리하기!

• rectangle(x, y, w, h)
  • 물체 origin: 중앙 (좌표 중앙부터 물체 그림)
• gravity
  • 같은 높이에서 떨어질 때, 크기가 달라도 같은 속도로 떨어짐
  • 피라미드 형태로 배치했을 때, 흐느적 거리면서 무너짐
• engine? 엔진 create과 update가 있음
• circle 그리기
  • bodies => body.create 소스코드 확인
• object는 static이거나 dynamic(기본값)일 수 있다

📌 10월 1일

mouse, mouseConstraint 모듈 확인
shooter 구현하기

• 레퍼런스 찾기
• 기능 구현 (각 메소드 활용한 stage)

• constraint 구현 방법 확인
• 피라미드 출력 메소드 발견 후 교체 (안 흐느적거림�)
  
• 레퍼런스 찾아보기

- https://www.youtube.com/watch?v=W-9DcLtBhVc
- https://www.youtube.com/watch?v=_r955zGxgFQ
    - https://github.com/0shuvo0/Angry-Birds-Clone/blob/main/main.js
- https://www.youtube.com/watch?v=TDQzoe9nslY&t=1865s
- body.create()
    - https://github.com/liabru/matter-js/blob/master/src/body/Body.js
- https://github.com/liabru/matter-js/blob/master/examples/slingshot.js

• 점수 기준
• block이 바닥에 닿았을 때(송편 터짐 상태)
  • 닿았냐 여부 확인하는 법 찾기 => (1)공식문서 (2)레퍼런스
• 화면 해상도에 대해서
  • lookAt 메소드는? mouseConstraint 좌표가 lookAt 위치와 다름
  • 데스크탑 먼저 구현 (모바일 최적화 x)
• 예외 케이스 추가 및 레벨 구현

// mouse interaction
const mouse = Matter.Mouse.create(ref.current);
const mouseConstraint = Matter.MouseConstraint.create(engine, { mouse });

Matter.Events.on(mouseConstraint, "enddrag", (e: any) => {
  birdsLeft.map((bird) => {
    if (!bird) return;

    if (e.body === bird) {
      isFire = true;
    }
  });
});

Matter.Events.on(engine, "afterUpdate", () => {
  if (!life || birdsLeft.length === 0) return;
  if (isFire) {
    birdsLeft.shift();
    setLife(birdsLeft.length);

    const newBird = birdsLeft[0];
    if (!newBird) {
      sling.bodyB = null;
      Composite.remove(engine.world, sling);
    } else {
      sling.bodyB = newBird;
      setTimeout(() => {
        Composite.add(engine.world, newBird);
      }, 500);
    }

    isFire = false;
  }
});

📌 10월 2일

앵그리버드 클론 확인하기

레퍼런스에서 다음 내용 차용

• composite create이랑, _createStand 함수 추가
• bodies.fromVertices: svg처럼 점 찍어서 벡터 이미지 그릴 수 있음
  • static body 추가(경사 바닥)
  • 경사 추가해서 목숨 1개로 클리어 가능!

중간 점검

• 게임 기능
  • 시작 버튼
  • 초기화 버튼
  • 재시작 버튼
  • 게임 오버 기준
    • 점수 기준
    • 게임 오버 시 점수 표기
• 기능 완성
  • 점수 블록에는 mouseConstraint 막기
• 1~3 레벨 구현
  • 레벨별 bird 다르게
  • 레벨별 목표물 다르게
• 마지막 단계
  • render할 이미지 찾기
    • 송편, 달, 토끼 => 레퍼런스 수집 완료
      • 도트 또는 귀엽게
        • 귀여운게 최고
    • lottie 애니메이션
  • 음향
    • https://www.mewpot.com/sound-effects/133
    • https://www.epidemicsound.com/sound-effects/
• 부수적인 구현
  • 링크 복사 기능
  • 소셜공유(화면 캡쳐) 기능
  • 파이어베이스 연결, 점수와 닉네임 기록 << 여기까지 구현하기
  • 소셜 로그인 << 이 부분은 오버 엔지니어링, 시간이 남으면 다른 게임 구현하기
• 완성하기
  • 푸터 추가 : 저작권, 깃헙 링크, 메일주소
  • 배포의 경우 ⇒ next 프로젝트 build 후 기존 github.io 사이트에 static으로 폴더만 추가해서 배포가 어렵다면 ? vercel로 진행합니다.
    • vercel 배포 완료

📌 10월 3일

점수 기능 구현: collision & detector 확인
텍스처 추가
송편 이미지 그리기

• collision mask? => 그룹을 나눠서 filter에 추가해서 요소를 겹치게 할 수 있음
• detector => id랑 label로 관리. detect 된 다음 지우기 => 상태바 UI 업데이트
  • 점수: 하트=500, 미니송편=25, 라운드 클리어=1000
• config option에 texture 이미지 추가
  • 외부 이미지가 아니므로, loader 함수를 추가할 필요는 없음 (+shooter target을 만들고 constraint에 추가하는 과정이랑 꼬임)
• 텍스처 테스트.
  
• [Figma] 그림 그리기
  • 냥글냥글에서 굥이 그린 스타일과 비슷하게 그림
    
• vercel 기본 도메인 배포 https://game-q363klszp-kikids.vercel.app/
  • 도메인 등록 => 1시간 정도 기다림 https://www.dusuna.me/
• 배포 완료 후, 11시 55분에 제출 ✨