Thumbnail
개발 · 프로그래밍 웹 개발

따라하며 배우는 웹 게임 대시보드

(4.2)
6개의 수강평 ∙  107명의 수강생

60,500원

지식공유자: John Ahn
총 51개 수업 (8시간 5분)
수강기한: 
무제한
수료증: 발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

중급자를 위해 준비한
[프론트엔드, 게임 프로그래밍] 강의입니다.

이 강의를 통해서 웹 게임을 어떻게 개발해야 하는지 알 수 있습니다.

✍️
이런 걸
배워요!
리액트
webgl
game engine
playcanvas
nakama server

자바스크립트로 만드는 웹 게임!
웹 게임이 처음이라도 일단 따라오세요 🦾

따라 하다 보면 웹 게임이 뚝딱? 🎮

새롭고 낯선 개발을 해보고 싶은 분들은 주목! 여기 자바스크립트를 이용해서 웹 게임을 만들어볼 수 있는 강의가 있어요. 웹 게임은 엄청나게 많은 트래픽을 요구하고, 복잡한 로직을 이용해야 하죠. 웹 게임을 만들면서 여러분의 개발 영역을 넓혀보세요.

저는 코빗 타운, 신한 메타버스 등의 개발 경험을 통해 누구나 웹 게임을 따라 만들며 배울 수 있는 강의를 만들고 싶었습니다. 웹 게임을 만드는 과정에서 웹 기술을 활용한 3D 에셋들을 어떻게 이용해서 게임을 만드는지 배울 수 있습니다. 웹 게임을 만들어 본 경험이 없으시더라도 자바스크립트와 리액트에 익숙한 분이라면 강의를 따라오는 데 크게 무리는 없으실 거예요.

이 기술을 실무에서 사용해서 만든 서비스 예제 (실제 풀스택 메인 개발자로 참여)
코빗 타운

https://www.youtube.com/watch?v=sV1WR0mlXxE
신한 메타버스 : 
https://www.youtube.com/watch?v=MXSMwHA6pBM


이 강의만의 특장점 ✨

소스 코드를 한 줄씩
해석하면서 작성!

웹 게임이 처음이라도
따라올 수 있는 꼼꼼한 설명!

수강생의 이해를 돕기 위한
다양한 시각 자료!


이런 분들께 추천해요 🙋‍♀️

자바스크립트로 웹 개발 외의
다른 것도 체험해보고 싶은 분

웹 게임은 어떻게 만들어지는지
그 과정을 알고 싶은 분

웹 게임 개발을 해본 적 없어서
할 수 있을지 고민하는 분


학습 내용 📚

섹션 1. 프로젝트 구성하기

  • 어떠한 구성으로 게임 앱을 만들게 될 것인지 살펴보며, 필요한 것들을 설치하게 됩니다. 


섹션 2. React & PlayCanvas 간단한 애플리케이션 구현

  • 리액트와 플레이캔버스를 사용해서 Single 플레이 애플리케이션을 구현합니다.



섹션 3. Nakama Client 연동

  • 도커를 이용해서 Nakama 서버와 데이터베이스를 설치하고 실행하며, Nakama Client를 npm을 이용해서 설치해서 이 둘을 통신할 수 있게 준비해줍니다.



섹션 4. Nakama Server 연동

  • 섹션 3에서 설치해놓은 Nakama 서버와 클라이언트를 이용해서 Nakama 서버에서 매치(Match)를 생성하고 그 매치에 참여(Join)해봅니다.




섹션 5. Multiplayer 유저 Spawn 및 움직임 컨트롤 하기

  • 다른 사람이 로그인했을 때 나의 브라우저에서도 유저가 나타나게 해주는 기능을 구현해봅니다.
  • 내가 들어가기 이전에 로그인했던 사람도 나타나게 해주며, 다른 사람의 움직임을 실시간으로 볼 수 있게 해주는 기능을 구현해봅니다.


예상 질문 Q&A 💬

Q. 웹 게임 개발을 한 번도 안 해봤는데 이 강의를 들어도 괜찮을까요?

넵 괜찮습니다. 하지만 자바스크립트와 리액트가 어느 정도 익숙한 상태여야 강의를 듣기 불편함이 없을 것 같습니다.

Q. LuaScript도 사용해보지 않았는데 괜찮을까요?

LuaScript는 로블록스, 마인크래프트 등 많은 게임 앱에서 사용되는데 자바스크립트랑 쓰는 방법이 비슷합니다. 그래서 사용 경험이 없어도 이 강의에서 앱을 같이 만들 때 문제가 없을 것 같습니다. 루아 스크립트를 사용할 때 자바스크립트와 비교해서 한 줄씩 설명하면서 진행합니다.


이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
자바스크립트를 이용해서 웹게임을 만들고 싶으신분
자바스크립트를 더 넓은 분야에서 사용하고 싶으신 분
📚
선수 지식,
필요할까요?
javascript
react

안녕하세요
John Ahn 입니다.
John Ahn의 썸네일

안녕하세요. 

즐겁게 개발하고 있는 개발자입니다. 

앞으로 많은 도움을 드릴 수 있었으면 좋겠습니다.


- 따라하며 배우는 도커와 CI환경 저자
- 카카오 기업 신입 공채 FE 교수자
- 패스트캠퍼스, 구름 강사 
- 현대자동차 개발 기업 교육
- 신한은행 메타버스, 코빗 타운 풀스택 개발
- 여러 공공기관 SNS 풀스택 개발

커리큘럼 총 51 개 ˙ 8시간 5분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 강의 자료
소스 코드
도표 자료
섹션 1. 프로젝트 구성하기
준비 사항 & 전체 구조 미리보기 05:40
프론트엔드 셋팅 시작(리액트 & 플레이캔버스) 08:12
Point and Click Project 살펴보기 04:00
캐릭터 이동시키기(1) 19:43
캐릭터 이동시키기(2) 16:39
리액트와 PlayCanvas 연결하기 미리보기 09:11
Play Canvas 시작 시 일어나는 일들 12:18
섹션 2. React & PlayCanvas 간단한 애플리케이션 구현(Single Play)
#2-1 Collision, Triggers, RigidBody(1) 13:11
#2-2 Collision, Triggers, RigidBody(2) 10:07
#2-3 Collision, Triggers, RigidBody(3) 10:51
#2-4 리액트와 PlayCanvas 상호작용하기(window.postMessage) 20:06
#2-5 Playcanvas Communication(app.fire) 미리보기 04:55
#2-6 Playcanvas Extension 추가 02:53
섹션 3. Nakama Client 연동
Nakama란? 17:06
Nakama Javscript Client 연동 11:38
#3-3 인증을 위한 UI 및 파일 구조 변경 16:50
#3-4 Create Socket 미리보기 05:01
#3-5 클라이언트에서 매치 생성하기(채널) 05:15
섹션 4. Nakama Server 연동
서버에서 간단하게 로그 남겨보기 09:42
서버에서 매치 생성하기(채널) 11:24
Authoritative Multiplayer 17:09
매치 참여하기(Match Join) 미리보기 05:54
매치 리스트 만들기(Match Listings) 14:07
섹션 5. Multiplayer 유저 Spawn 및 움직임 컨트롤(Multi Play)
구현하게 될 애플리케이션 소개 01:23
유저 위치 서버 저장 14:28
SendMatchState(1) 미리보기 08:56
SendMatchState(2) 11:50
SendMatchState(3) 12:30
유저 Spawn(유저 Match Join 할 때 유저 정보 추가하기) 08:58
나의 캐릭터 Spawn 해주기(1) 13:40
나의 캐릭터 Spawn 해주기(2) 13:40
상대방 캐릭터 Spawn 해주기 15:37
매치 나간 사람 Destroy 하기 18:48
OP_CODE 정리 04:07
캐릭터 움직일 때 나는 에러 해결 10:43
point and click 함수를 이용해 여러 엔티티를 컨트롤하기 10:36
장소 클릭 시 모든 캐릭터 같이 이동에 대한 해결책(태그 사용) 08:40
브라우저간 유저 위치 동기화 14:42
섹션 6. [부록] 도커 기본
도커를 사용하는 이유 04:51
도커란 무엇인가 02:26
윈도우에서 도커 설치하기 04:03
맥에서 도커 설치하기 03:26
도커를 사용할 때의 흐름 감잡기 04:59
도커 이미지로 도커 컨테이너 만들기 06:06
도커 이미지 생성하는 순서 02:55
도커 파일 만들기 09:05
도커파일로 도커 이미지 만들기 09:28
리액트를 위한 도커 파일 작성하기 13:38
생성한 이미지로 어플리케이션 실행 시 접근이 안 되는 이유 (포트 맵핑) 04:05
강의 게시일 : 2022년 07월 25일 (마지막 업데이트일 : 2022년 07월 19일)
수강평 총 6개
수강생분들이 직접 작성하신 수강평입니다.
4.2
6개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
천찬영 thumbnail
3
이유가 필요한 설명에 대해서는 부족한 느낌이고 단지 들으면서 따라가기에 급급했습니다. 아마 설명이 필요한 부분이 너무나도 많아서 그것들을 8시간으로 다 담아내시기가 애매하셨을것 같긴 합니다. 하지만 흥미가 생길만한 내용임에는 틀림없어서 나쁘진 않았습니다. 게임 구현을 위한 playcanvas나 nakama(server) 에서 제공하는 기능들을 많이 사용하는데 이것들이 정말 많이 필요하신분들이 아니라면 추천드리지 않습니다. 이 강의 외에도 따로 파고들어야 할게 더 필요할 내용들인것 같아서요. 흥미 위주의 배울거리가 아닌 실무용에는 적합하지 않을 것 같다는 생각입니다.
2023-02-14
김형진 thumbnail
5
평소 관심이 많던 부분인데 좋은강의 감사합니다.
2022-10-10
응애 나 아기 개발자 thumbnail
5
js와 리엑트만 배운상태에서 흥미로운것을 더 배우고싶어서 이 강의를 수강하게 되었는데 정말 잘 가르치시고 많은 것을 얻고갑니다 감사합니다.
2022-08-07
지식공유자 John Ahn
아기 개발자님 ~ 좋은 수강평 감사합니다.
2022-08-08
김언석 thumbnail
5
강사님! 강의를 참 잘 하시네요. 이해가 잘 돼서 어딘가는 쓸때가 있을거 같아요. 강의 듣는게 이렇게 즐거운 일인지는 오랜만에 느껴봅니다.
2023-06-12
seungwan thumbnail
5
playcanvas 강의 더 찍어주세요 ~~
2024-01-18