[9월 28일~10월 3일] 날짜별 작업 기록

[dusunax]

날짜별 요약

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

---

📌 9월 28일

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

번호	주제	내용	아이디어	난이도
1	세벳돈 계산기	기본 계산기	숫자를 아이콘 등으로 대체 세뱃돈 ⇒ 돈 애니메이션 돈 통장에 넣기 계산값에 따라 책상에 돈 달라지게	easy
2	행맨 게임	기본 단어 맞추기 게임(영어)	행맨 디자인 다르게	easy
3	송편 터뜨리기	슬링샷 게임(구현 방법 찾아보기) 포물선 ⇒ 어떻게 계산 하는지?	달나라/치즈, 토끼, 송편 3d로 구현한다면?	hard
4	테트리스	기본 테트리스(10x20) 레퍼런스 찾아보기(많음)	단계별 이펙트 송편 아이템	middle
5	총알 피하기	총일 피하기 게임 / 선박	이지모드/일반/하드모드, 아이템	hard
6	자유종목	-	-	-

코육대 개인 목표

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

• Use relative URLs instead of absolute 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;
  }
});

2023-10-01.10.56.05.mov

📌 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분에 제출 ✨