Skip to content
/ Maze_in_the_90s Public

영상인식으로 컨트롤하는 미로 웹게임

0 stars 0 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

ohzeno/Maze_in_the_90s

BranchesTags

Repository files navigation

🙋‍♂️ Maze in the 90's 🙋‍♀️

📌 목차

  1. 프로젝트 소개

  2. 기술스택

  3. Project Period

  4. Contributors

  5. 프로젝트세팅

  6. ERD

  7. 시스템 아키텍쳐

  8. 주요 기술

  9. 서비스 소개

  10. 개발기록

🚩 프로젝트 소개

🚩 기술스택

용도 스택 버전
React 편집 18
C# 편집 2019, community
배포서버
DB
서버 설계 3.10.1
인게임 개발 2020.3.30f1 (LTS)
웹빌드
형상관리
협업

🚩 Project Period

2022.02.28 - 2022.04.08 (6주)

🚩 Contributors

팀원 역할 비고 깃헙
오제노 팀장, 풀스택 AI, Django, React, React-Django 통신,
React-Unity 통신, Unity-Django 통신,
Unity 전반, 배포		 https://github.com/ohzeno
이승훈 백엔드 Photonserver 담당 및 멀티플레이 게임 제작 https://github.com/SeungHunL
조은누리 백엔드 Firebase 및 회원 관리 담당 https://github.com/eunnuricho
박수아 프론트엔드 react-django 통신 연구, 컴포넌트 제작 https://github.com/pakrsua
박신영 프론트엔드 Unity - Scene 제작, React - UI 제작 https://github.com/shinyoung-angel
박준영 프론트엔 싱글플레이 및 멀티플레이 맵 제작, 배포 담당 https://github.com/JUNYOUNG31

🚩 프로젝트 세팅

  • React

    # 라이브러리 설치 및 실행 
yarn install  # npm 사용시 오류 생기는 경우 있어서 yarn 사용
npm start

  • Django

    # 가상환경 생성 후 활성화   
python -m venv venv 
source venv/Scripts/activate  # 리눅스/우분투/맥 환경에서는 source venv/bin/activate

# 라이브러리 설치 
pip install -r requirements.txt

# 서버 실행
python manage.py runserver

🚩 ERD

ERD.png

🚩 시스템 아키텍쳐

Architecture.png

🚩 주요 기술

  • Unity

  • PhotonServer

  • Firebase

  • React

  • Django

  • MediaPipe

🚩 서비스 소개

1. 로그인 및 회원가입

  • 로그인: Google, Github를 통한 로그인 가능

  • 랭킹 확인: 로그인 없이 랭킹 확인 가능

  • 회원가입

2. 로비

  • 프로필, 마이페이지, 랭킹, 방 목록 확인 가능

    Lobby.png

  • 방생성

    RoomCreateCute.gif

  • 튜토리얼

    Tutorial.PNG

3. 마이페이지

  • 유저의 모든 게임 전적 확인 가능

  • 각 게임 별 최고 성적 확인 가능

  • 프로필 이미지 변경

    ProfileImageChange.gif

  • 닉네임 및 비밀번호 변경

    NicknameChange.gif

  • 로그아웃

  • 회원탈퇴

4. 대기실

  • 게임 모드 선택 가능

  • 게임 캐릭터 선택 가능

  • '레디' 클릭 시 게임 준비 완료 상태

5. 미로찾기 게임

  • 총 10가지의 맵 제공

    • Maze Forest stage 1, 2, 3, 4

    • Maze Grave stage 1, 2, 3, 4, 5

    • Sullae Grave stage 1

    MazeForest1.PNG

    MazeGrave4.PNG

  • 게임 시작 화면: 5초 카운타다운 후 게임 시작

  • 게임 진행 화면

  • 게임 종료 화면: 전원이 End Point에 들어오면 결과 확인 가능

    Finish.gif

  • Menu 버튼 클릭 시

6. 랭킹

  • 모드와 맵에 따른 게임 랭킹 확인 가능

    Ranking.png

🚩 개발기록

3/7

  1. 와이어프레임 상세

  2. 유니티 기초 학습

3/8

  1. ERD 초안 작성

  2. 개발 계획 작성

  3. [FE,BE] 유니티 학습

3/10

  1. Unity Asset 선정

    1. Asset import 방법 학습

  2. 컨설턴트님과의 미팅

  3. 전문가 미팅 준비

  4. 팀명 회의 (하얀 천과 바람만 있다면 어디든 갈 수 있어)

3/11

  1. 실습코치님과 미팅

  2. 전문가님과의 미팅

  3. FrontEnd 맵 제작

  4. BackEnd 영상인식 학습

3/14

  1. 컨설턴트/코치님과 미팅 (전문가 미팅에 대한 리뷰)

  2. 서버 정상 작동 확인 (pem 파일 지급 받음)

  3. FrontEnd UI 만들기

  4. BackEnd 영상인식 학습/ 유니티 웹 통신/ 멀티플레이 구현 (Webgl에서 막힘)

3/15

  1. 유니티 학습

  2. 파이어베이스 테스트

  3. 장고 웹캠 테스트

  4. 모의 SW 역량 테스트 A형

3/16

  1. 프론트 - 로그인, 회원가입, 로비, 마이페이지, 방 (임시로 UI 구성)

  2. 포톤을 활용한 멀티플레이 방 연구

  3. 장고 웹소켓 테스트

  4. 파이어베이스 로그인 구현

3/17

  1. ppt 제작 및 발표회의

  2. 프론트 - Scene 이동하기 완료

  3. 프론트 스켈레톤 코드(파일 구조 정리) 수정 후 만든 Scene 재 설정

  4. 백 - 로비페이지 서버 통신연구

  5. 백 - 이메일 인증메일 보내기 및 프로필 사진 변경, 자동로그인

  6. 백 - 파이썬 유니티 통신

3/18

  1. ppt 수정, 발표 및 팀원 평가, 발표 감상

  2. 프론트 - Ranking, 강퇴, 프로필 scene 제작

  3. 프론트 - git 충돌 문제 해결

  4. 백 - 로비페이지 서버 통신연구

  5. 백 - 구글 소셜 로그인 기능 구현

3/21

  1. 프론트 - 튜토리얼 scene 제작, 로비 scene 수정

  2. 백 - 로비페이지 서버 통신완료 프론트 작업이랑 merge중

  3. 백 - 파이썬 유니티 통신 연구

  4. 백 - 파이어베이스 프론트 UI 연결

  5. 프론트 - WebGL 학습

3/22

  1. 프론트 - 튜토리얼 scene 추가, Auth UI 수정, map 추가

  2. 프론트 - 스테이지 제작 방법 연구

  3. 백 - 장고 aws 배포 연구, 장고 유니티 통신 테스트

  4. 백 - Android -> WebGL 플랫폼 변경

  5. 백 - 로비 스크립트, 수정사항 마무리

3/23

  1. 백 - 장고 배포 연구

  2. 프론트 - 인게임 화면 구현

  3. 프론트 - 랭킹씬 수정

  4. 프론트 - 맵 화면 구현

  5. 프론트 - 로그인 UI 서버랑 연결, WebGL로 수정

3/24

  1. 프론트 - 캠 안 켜지는 에러 해결 중

  2. 프론트 - https 적용하기

  3. 프론트 - 리액트 유니티 이벤트 적용

  4. 프론트 - 룸에서 게임 선택 구현

  5. 백 - WebGL 플랫폼에서 프로필 생성 구현

  6. 백 - 포톤 rpc 연구

  7. 백 - 장고 배포, 웹캠 오류 연구

3/25

  1. 프론트 - 유니티 웹 통신 중

  2. 프론트 - 유니티 모드 선택 가능

  3. 프론트 - 멀티플레이 연구

  4. 백 - 멀티플레이 연구

  5. 백 - 웹캠 오류 연구

  6. 백 - 로그아웃, 프로필 가져오기

3/28

  1. 프론트 - 멀티플레이 구현

  2. 백 - 웹캠 연결 연구

  3. 백 - 파이어베이스 db 세팅, CRUD 구현

3/29

  1. 프론트 - 닉네임 동기화 구현, 게임 종료화면 설정중

  2. 백 - 게임종료 후 로비 이동, 게임 종료화면 설정중

  3. 프론트 - 마이페이지 수정

  4. 백 - 웹캠 연결 연구

  5. 백 - 리액트 장고 통신 연구

  6. 백 - 파이어베이스 DB, User 테이블 연결

3/30

  1. 프론트 - 파이어베이스 / 게임 연결

  2. 프론트 - 리액트/장고 연결 연구

  3. 프론트 - 리액트 소켓 연결 연구

  4. 백 - 파이어베이스 / 게임 연결

  5. 백 - 파이어베이스 / 게임 연결

  6. 백 - 리액트 https 배포 연구

3/31

  1. 프론트 - 맵, 모드선택

  2. 프론트 - 캐릭터 랜덤배정, 모든 맵에서 시작, 종료 구현

  3. 프론트 - 리액트 웹캠 이미지캡쳐 사이즈 조절 연구

  4. 프론트 - 장고 내부에서 소켓으로 텍스트 전송. 이제 웹캠 전송 가능한지 테스트 시도

  5. 백 - 리액트에서 전송받은 이미지 영상인식 처리 연구

  6. 백 - 게임 종료될때 기록 DB에 넣기, 랭킹페이지 연구

4/1

  1. 프론트 - 소켓 연결 시도 -> 이미지 크기 변경

  2. 프론트 - 리액트 장고 웹소켓 연결 연구

  3. 프론트 - 게임 에러 수정 및 메뉴, 캐릭터 선택

  4. 백 - 게임 에러 수정 및 메뉴, 캐릭터 선택

  5. 백 - 리액트에서 유니티로 함수 호출

  6. 백 - 랭킹페이지 데이터 연결 연구

4/4

  1. 프론트 - 리액트 유니티 연결 연구

  2. 백 - 리액트-장고 연결 최적화, 장고 유니티 연결, 유니티에서 리액트 함수 호출, 게임 시작시 웹캠 띄우기, 게임 종료시 웹캠 없애기

  3. 백 - 리액트 소켓 연결

  4. 프론트 - 배포 테스트 완료

4/5

  1. 프론트 - 리액트 유니티 연결 연구

  2. 프론트 - 캐릭터 연결 완료

  3. 프론트 - 리액트 유니티 소켓 연결 연구

  4. 프론트 - 리액트 UI 제작

  5. 백 - 파이어베이스 리액트 유니티 WebGL 병합 연구

4/6

  1. 프론트, 백 - 파이어베이스 리액트 유니티 WebGL 병합 연구 및 구현

  2. 프론트 - 리액트 페이지 디자인, Readme 작성

  3. 프론트 - 유니티 사운드 추가, 술래잡기 연구

  4. 프론트 - 사운드 조사, PPT, UCC 제작 진행중

  5. 백 - 소셜 로그인 및 회원가입

4/7

  1. 프론트 - 튜토리얼 완료

  2. 프론트 - 리액트 컴포넌트 추가 및 툴팁 추가

  3. 프론트 - 리액트 컴포넌트 , ready 기능 연구

  4. 백 - 발표 준비, 영상인식 머리 컨트롤

  5. 백 - 랭킹 완료, 캐릭터 설정

  6. 백 - 술래잡기 구현, 배경음 추가

About

영상인식으로 컨트롤하는 미로 웹게임

Topics

react webgl django unity image-recognition

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages