[9월 28일~10월 3일] 날짜별 작업 기록 #2
Description
날짜별 요약
- 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일 새벽까지 경로 이슈를 해결하고자 했으나 실패
📌 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 애니메이션
- 송편, 달, 토끼 => 레퍼런스 수집 완료
- 음향
- render할 이미지 찾기
- 부수적인 구현
- 링크 복사 기능
- 소셜공유(화면 캡쳐) 기능
- 파이어베이스 연결, 점수와 닉네임 기록 << 여기까지 구현하기
- 소셜 로그인 << 이 부분은 오버 엔지니어링, 시간이 남으면 다른 게임 구현하기
- 완성하기
- 푸터 추가 : 저작권, 깃헙 링크, 메일주소
- 배포의 경우 ⇒ 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분에 제출 ✨