[모션으로 하는 공룡게임] Teachable Machine + T-Rex Game

만드는데 10분도 걸리지 않습니다. 몸으로 하는 공룡 게임.

 

친한 친구들이랑 해커톤 나갔다가! 쉬는 시간에 기분전환 겸 할 게임을 만들어봤습니다!!

2박 3일이라 시간이 많이 남더라고요! 만든 지 좀 되었지만 워낙 간단하니 쓱 한번 작성해봤습니다.

 

결과물

달리는 모션을 취하다가, 점프 모션을 취하면 점프가 됩니다!

생각보다 쉽고요! 점프 모션을 오래 취하면 체공시간이 길어집니다.

달리다가... 점프!!

 

Teachable Machine

대학교 2학년때 인공지능 수업 듣다가 알게 되었던 도구입니다.

인공지능 모듈을 데이터 생성, 데이터 조작, 모델 설계, 학습 등의 귀찮은 작업을 웹상에서 모두 진행한 뒤,

tensorflow.js 모델로 export까지 해줍니다.

 

Teachable Machine

 

포즈 프로젝트를 선택합니다.

웹캠을 이용해 연속 촬영으로 샘플을 만들 수 있습니다.

만들 당시에는 발로 마우스를 누르고 모션을 찍었던 것 같네요.

클래스 이름을 수정하고 학습 버튼을 누르면, 아래와 같은 사진처럼 됩니다.

미리보기도 할 수 있고요!

모델 내보내기를 누르면 모든 과정이 끝났습니다.

원래는 모델을 다운로드하여 path를 연결해도 되지만, 업로드해버리면 모델까지도 CDN처럼 이용할 수 있습니다.

위 내보내기 된 코드를 복사해 서보면 웹캠으로 실시간으로 라벨이 분류되는 루프와 canvas에 웹캠을 업데이트하는 코드들로 구성되어있다.

 

T-Rex Game

크롬의 코드를 분리한 아래의 Github Repository를 이용했습니다.

GitHub - wayou/t-rex-runner: the t-rex runner game extracted from chromium

요런 느낌으로 게임을 돌려볼 수 있습니다.

 

그럼 해당 게임의 코드와 내보 내기된 모델을 연결해봅시다.

 

연결!

그런데? 코드를 뜯어서 붙이려면 코드를 읽어야 하잖아요.

10분 만에 만들어야 하는데 코드 읽고 있으면,,, 그래서 이벤트를 이용하기로 했습니다.

 

점프키인 스페이스를 임의로 입력되게 만드려고 합니다.

 

그렇게 TA에서 export 한 코드의 predict함수를 수정해봤다.

• 점프 모션으로 예측되는 프레임에서 점프
• 달리기 모션으로 예측되는 프레임에서 달리기
• 빠른 반응을 위해 정확도가 85%가 넘는 선에서 점프한다. (자세를 바꾸는 과정에서는 애매한 정확도가 나옴)

꾸미기

점프하면 테두리 색이 삭 변하고, 아래 정확도 %가 뜨게 만들었다.

끝!