MSPark's Blog

NoSQL DB 중 MongoDB를 설치해보고 간단히 사용해보는 방법에 대해 정리해보자.

일단 MongoDB를 설치해야 한다.

www.mongodb.com/try/download/community

위에 사이트에 들어가서 Available Downloads를 내가 원하는 환경에 맞게 설정하고 다운 받으면 된다.

개인적으로는 현재 가장 높은 버전인 4.4.2(current) / Windows / zip 으로 설정하고 다운 받았다.

(굳이 설치를 할 필요는 없어보여서...)

나는 zip으로 다운 받았으므로 zip 기준으로 설명하겠다.

압축파일을 적당한 위치에 풀면 bin 폴더가 나온다.

그중 mongod.exe.를 실행하면 MongoDB 서버가 실행된다.

그리고 mongo.exe를 실행하면 MongoDB 서버에 접속할 수 있다.

접속 후에 간단한 명령어를 실행해보면 된다.

`show dbs` 명령어를 입력하면 무슨 db들이 있는지 나온다.

내가 따로 추가하고 싶다면 `use 원하는DB명` 를 입력하면 해당 DB명으로 전환된다.

그 뒤에는 `db.collection.함수'와 같은 형식으로 insert, find, remove 등을 사용하면 된다.

Typescript를 제대로 공부하고 싶어졌다.

Typescript로 뭘 만들어볼까 하다가 일단 NodeJS를 이용하여 간단한 서버부터 해보기로 했다.

그러면서 지금까지 Git을 잘 활용해보지 못했는데 Git도 한번 현란하게 사용해보고 싶어졌다.

일단 Typescirpt 설치방법부터 다시 정리해보자.

사실 이전에 Phaser엔진을 다룰때 환경설정을 해본적이 있으나 뭔가 새로운것을 도입해보고 싶은게

개인 프로젝트의 덕력이니 약간 다른방식으로 개발환경을 구축해보자.

이전에는 nvm을 이용하여 node 버전관리를 했었는데 찾아보니까 요즘에는 n이라는게 잘나가는것 같은데

맥이나 리눅스만 사용가능한것 같고 찾아보니 윈도우에서는 nodist라는 녀석이 있었다.

nvm-windows는 이전에 사용해봤으니 nodist를 사용해보기로 결정했다.

https://github.com/nullivex/nodist

설치방법을 보니 Chocolatey를 이용해서 설치하는 방법이 있었다.

이전에 본적이 있었는데 윈도우 환경에서 개발할 때 설치가 필요한 것들을 모아놓은 솔루션이라고 한다.

그래서 먼저 Chocolatey를 설치해보기로 했다.

https://chocolatey.org/install

설명에 나온대로 PowerShell을 관리자 권한으로 실행하였고

설치하는 명령어를 복사해서 실행하면 끝!

이제 choco라고 실행해보면 설치가 되었음을 알 수 있다.

이제 nodist를 설치해보자!

choco install nodist

참고로 관리자 권한으로 실행한 PowerShell에서 실행하지 않으면

뭐라뭐라 하면서 안 될수도 있는데 그래도 할래?

(중간에 ChocolateyInstall.ps1를 사용할 것인가 등등의 이유 때문인듯)

라고 물어보길래 그냥 PowerShell에서 설치했고 중간에 Yes도 해주었음...

설치완료!

테스트 삼아 nodist dist 명령을 실행해보니 node 버전들이 나왔다.

13.1.0 이라니...

열심히 설치는 했지만 가장 최신버전을 설치할 것이다. ㅋㅋㅋ

nodist + latest 라고 치면 된다.

npm은 nodist npm + latest

굉장히 직관적인데..

+는 설치, -는 제거, 그냥 입력은 해당 버전으로 switch이다.

매우 간단한듯!

github 레퍼지토리를 하나 생성하고 리드미컬하게 README.md파일을 올려보자.

덕력이 발휘되어서 코딩 시작전에 markdown 문법을 다시 공부하고있다.

정신차리고 다시 코딩에 집중해보자. ㅎㅎ

typescript 설치

npm install -g typescript

npm outdated -g typescript를 이용하면 최신 버전이 나왔나 확인할 수 있음.

만약 최신버전이 나왔다면??

npm uninstall -g typescript

npm cache clean

npm install -g typescript

하면 다시 새로운 typescript가 설치된다.

간단한 console.log 찍는 ts 파일을 만들고 tsc를 돌려본다.

js파일이 뽑혀나왔다!

node로 js파일을 실행시켜보았다.

콘솔 로그가 찍혔다.

잘 되는듯 하다. ㅎㅎㅎ

이제는 쉽게 실행시킬 수 있게끔 tsconfig.json을 추가하는 것이다.

tsc --init으로 tsconfig.json을 생성해주자.

빡세게 타입 검사를 하기 위해 noImplicitAny를 true도 수정하고 진행해보자.

실행을 위한 tasks도 만들어주었다.

vscode의 terminal이 powershell이면 이전에 chocolatey로 설치할 때 처럼 뭔가 권한문제가 발생하는 것 같아서

그냥 console창을 기본 terminal로 두고 작업하기로 함 ㅎㅎ

하여튼 이제부터 본격적으로 시작!

어차피 막 공부하려고 만든 녀석이니까 하고 싶은대로 막 해보고 git도 막 이상하게 써보면서 익숙해져야겠다.

간혹 가다가 특정 본의 위치부터 하위 본들까지의 물리를 끄고 싶을 때가 있다.

찾아보니 USkeletalMeshComponent::TermBodiesBelow라는 함수가 있었다.

설명은 Terminate physics on all bodies below the named bone, effectively disabling collision forever.

말 그대로 해당 이름의 본부터 하위 본들 모두의 물리를 제거한다는 것이다.

물리를 제거하기 때문에 그만큼 그 뒤로 물리 계산이 줄게 되니 효과적으로 영원히 충돌을 막을 수 있다.

코드를 보면 Body 사이의 Constraint를 제거하고 모든 Body들도 제거한다.

내가 넘겨준 본의 Body까지 제거한 다는 것을 기억해두자!

참고로 다시 복구 하는 것은 안된다.

엔진 코드에서 검색해보면 HideBone()과 같은 함수들도 찾을 수 있는데 여러가지 버전이 있는 것 같다.

궁금해서 테스트 삼아 사용해봤는데 렌더링되는 부분까지 제거된다.

물리만 끄고 싶을 때는 TermBodiesBelow를 사용하고 렌더링까지 고려해야 할 때는 HideBone()류의 함수를 고려해보자.

당연하지만 블루프린트도 있으니 블루프린트로 작업하시는 분들도 이용해보시길!

https://docs.unrealengine.com/en-US/API/Runtime/Engine/Components/USkeletalMeshComponent/TermBodiesBelow/index.html

이번에 언리얼엔진 4를 이용해서 개발하는 프로젝트에 참여하게 되어서

언리얼엔진 4를 공부해보려고 한다.

가장 처음은 역시 개발환경 구축하기이다.

언리얼은 문서화가 잘되어 있어서 문서만 보고 따라해도 될 정도이기는 하지만

개인적인 공부의 용도와 기록의 용도로써 블로그에 남겨보도록 하자!

개발 셋업 관련 문서

이 문서대로 설정하면 된다!!

우선 언리얼 소스를 다운받아보자!

언리얼 엔진 소스 코드 내려받기

우선 언리얼 엔진 코드에 접근하기 위해서는 GitHub에 가입하고 언리얼 계정과 연동하여서

코드에 접근할 수 있는 권한을 먼저 얻어야 한다.

GitHub의에서 언리얼 엔진 4 코드 접근하기

개인적으로 release 브랜치를 이용하기로 결정했다.

release 브랜치는 굉장히 안정적인 버전이기 때문에 언리얼 엔진 공부를 하기 좋다고 판단하였다.

공부하다가 실수로 잘못 건드리거나 release 브랜치가 업데이트 되면 merge 하기 쉽게 하기 위해

release 브랜치를 fork 받아 내 개인 계정에 repository를 하나 파고 clone을 받았다.

Visual Studio Community 2017은 이미 설치했던 상태여서 추가 설치는 하지 않았다.

대신 .Net Framework나 Unreal 관련 모듈을 다시 설치하기는 했다. (수정/제거 기능을 통해 다시 설치)

맨 위에 첨부한 개발 셋업에 있는대로 Visual Studio 설정과 UnrealVS도 설치해주었다.

Clone이 완료되면 해당 폴더의 Setup.bat을 실행해 컨텐츠 / 요구사항 설치등을 진행한다.

그후 GenerateProjectFiles.bat을 실행하면 현재 설치된 Visual Studio 버전에 맞게 솔루션 / 프로젝트 파일을 생성해준다.

완료되면 UE4.sln이 생성되는데 해당 솔루션을 열고 Developer Editor / Win64 타겟으로 빌드를 하면 된다.

(내 노트북이 사양이 좋은건 아니라서 엄청 오래걸렸음 ㅠㅠ)

UE4 프로젝트를 시작 프로젝트로 두고 실행하면 언리얼 에디터가 실행된다!

일단 개발환경은 만들었으니 이제 본격적으로 공부해보자

리얼 타임 레이 트레이싱 데모가 나오고 있는 시점이지만 아직 PBR을 프로젝트에서 써보지도 못한 시점이다.

그래서 개인적으로 공부해보고 있는데 설명이 잘 되어 있는 사이트를 찾아서 공유한다.

http://www.codinglabs.net/article_physically_based_rendering.aspx

PBR을 이해하기 위해 꼭 필요한 용어들이 정리되어 있고

Rendering Equation의 간략 버전을 통해서 설명한다.

그리기 이 식을 실제로 코딩하기 위해서 필요한 것들도 설명한다.

최대한 계산을 줄이기 위해 미리 계산해 놓을 수 있는 부분들은 계산해 놓고 데이터화 해놔야 하는데

주변의 Radiance들을 저장해놓기 위해서 환경맵을 이용한다. (그래서 PBR에서 환경맵이 중요하다고 하는듯)

여러곳의 환경맵을 저장하기에는 데이터등이 많이 들기 때문에 SH(Spherical Hamonics)를 이용해서 이를 간략화 해서 저장하고 사용하는 것 같다.

그 뒤에 볼 것이 바로 아래에 있는

http://www.codinglabs.net/article_physically_based_rendering_cook_torrance.aspx

이 글로 위에서 본 기초를 바탕으로 Cook-Torrance 모델을 어떻게 적용하는지와 각 항들의 의미가 정리되어 있다.

이 글을 보고 예전에 NDC에 PBR 관련 발표를 보니 이해하는데 도움이 되었다.

하지만 아직 실제로 만들어 본것도 아니고 완전히 이해가 된 것도 아니니... 계속 공부해보자.

구글에서 2d game engine을 검색해보니 2d game engine 순위를 매겨놓은 곳이 있었다.

https://www.slant.co/topics/341/~best-2d-game-engines

그중 Godot 엔진이 눈에 띄어서 들어가보게 되었다.

이유는 Python과 거의 유사한 GDscript를 이용해서 개발할 수 있다는 점이다.

Python 언어도 배워볼겸 해보면 좋을것 같았다.

https://godotengine.org/

사이트에 들어가보니 생각보다 오래된 엔진이였고 버전이 3.0이 나온지 얼마되지 않았다.

2D게임 뿐만 아니라 3D게임 개발도 가능해보인다.

https://godotengine.org/features

기능 설명만 봐도 게임 개발 환경을 쉽게 구축하고 쉽게 만들 수 있도록 잘 정리해 놓은것 같다.

실제로 다운받아보니 exe 파일하나만 존재하고 실행해보면 Editor가 실행된다.

예전에 잠깐 써봤던 LOVE엔진처럼 심플해보여서 마음에 들었다.

LOVE도 괜찮기는 했는데 Lua로 만들어야 했고 Editor 기능이 부실했었는데

Godot은 python같은 언어를 사용하고 Editor도 굉장히 좋아보인다.

사용 언어인 GDscript는 python 문법인데 godot 엔진에서 필요한 선형대수학등등 몇가지가 기본 내장된 python 언어로 보면 된다.

튜토리얼을 해보고 있는 중인데 Unity등 최신엔진과 비슷한 느낌이다.

대신 서로 이벤트를 주고 받거나 하는 부분은 좀 더 배워야 할 듯 하다.

http://docs.godotengine.org/en/3.0/

의 step by step 부분을 보면 될 것이다!

요즘 윈도우 태블릿에서 DirectX11로 이것저것 만들어보기 위한 간단한 프레임워크?를 다시 만들어보고 있는 중이다.

예전에는 assimp를 붙였었는데 새로 만들어보는김에 assimp보다 심플할것 같기도 해서 FBX SDK를 이용해보기로 했다.

Unity 에셋스토어등에 FBX로 된 에셋들도 많으니 테스트 환경을 만드는데 괜찮을것 같다.

FBX SDK를 사용하는 방법에 대해 간단하게 알아보자.

일단 FBX SDK를 다운받는다.

https://www.autodesk.com/developer-network/platform-technologies/fbx-sdk-2019-0

글쓰는 시점의 최신버전은 2019.0이다.

내 개발환경은 윈도우10 / VS 2017을 사용하고 있다.

그런데 다운 받는곳을 보니 VS 2015용까지만 있어서 당황했는데 VS2015용을 받아서 사용하면 잘 된다.

설치하고 해당 폴더에 가보면 include / lib / samples가 있다.

적용하고자 하는 프로젝트에다가 include 파일을 복사해서 넣고 자신의 프로젝트에 맞게 library 파일을 가져다가 사용하기만 하면 된다.

기본 흐름은 sample 파일들을 보면 알 수 있다.

간단한 흐름을 정리해보면...

1. FbxManager를 생성한다.

2. Fbx 파일을 로드하기 위한 Scene을 하나 생성한다.

3. Fbx 파일을 로드하기 위한 FbxImporter를 하나 생성한다.

4. FbxImporter에 로드하려는 파일명을 넣어준다.

5. Importer를 이용해 Scene을 로드한다.

6. RootNode부터 순회하면서 원하는 정보를 얻는다.

  * Vertex / Normal / Tangent등 Attribute를 비교해가면서 얻어가면 된다.

7. 위에서 생성했던 리소스들을 정리해주자!

FBX SDK 사용에 관련해서 검색을 해보고 좋아보이는 링크들을 올려본다.

http://ozlael.egloos.com/4041764

https://www.gamedev.net/articles/programming/graphics/how-to-work-with-fbx-sdk-r3582

http://www.walkerb.net/blog/dx-4/

윈도우 태블릿을 구매하고 DirectX11 코딩을 위해 환경설정을 했다.

Visual Studio 2017을 설치할 때 이전에 개발할 때 사용했던 SDK보다 높은 버전의 Window SDK를 설치했었기 때문에

SDK 버전만 맞춰주니 빌드가 잘 되었다.

그런데 실행해 보니 DirectX11 초기화가 실패했다.

처음에는 막연히 태블릿이 지원안하나 하고 봤는데 이론상 DirectX12까지 지원하는 내장 그래픽 카드였다.

그래서 드라이버에 문제가 있나 하고 보니 최신 드라이버가 설치되어있었다.

다시 에러를 보니 HRESULT값이 0x887a002d였다.

관련 검색을 해보니 내가 추가한 Flag와 관련이 있었다.

DEBUG 모드로 실행할 때 D3D11_CREATE_DEVICE_DEBUG flag를 추가하고 Device를 초기화했는데

이때 윈도우 상에 그래픽 진단 도구가 설치되어 있지 않으면 초기화때 실패한다.

이를 해결하기 위해서는 아래 링크에 들어가서 설치하면 된다.

https://docs.microsoft.com/ko-kr/windows/uwp/gaming/use-the-directx-runtime-and-visual-studio-graphics-diagnostic-features

간단히 요약하면 아래와 같다.

1. 설정으로 이동하여 시스템을 선택하고 앱 및 기능을 선택하고 선택적 기능 관리를 클릭합니다.
2. 기능 추가를 클릭합니다.
3. 선택적 기능 목록에서 그래픽 도구를 선택한 다음 설치를 클릭합니다.

아마 Release 모드로 실행했으면 되었을 것만 같은 느낌이다.

Phaser 개발을 위한 준비를 해보자.

우선 브라우저는 크롬을 사용할 예정이다.

Web 컨텐츠를 띄우기 위해 간단한 서빙용 서버를 하나 띄워야하는데

Typescript도 사용해볼겸해서 NodeJS를 이용하기로 결정했다. (Python의 SimpleHTTPServer로도 가능)

1. nvm 설치

NodeJS 버전을 뭘 깔아야 할지 모르겠어서 일단 nvm(Node Version Manager)를 설치했다.

nvm은 원하는 Node 버전을 골라 설치할 수도 있고 설치된 버전중 어떤 버전을 사용할 것인지 정할 수도 있게 해준다.

나는 윈도우에서 개발중이므로 https://github.com/coreybutler/nvm-windows 여기서 다운받았다.

맥이나 다른 플랫폼이면 그냥 nvm을 받으면 된다.

2. NodeJS 설치

nvm install "latest"를 실행해 최신 버전을 설치해본다.

그냥 개인 개발이니까 쿨하게 최신 버전을 설치해보자. ㅎㅎ

9.11.1이라니 버전이 많이 올라갔구나...

3. Typescript 설치

npm install -g typescript

(typescript 모듈을 글로벌하게 설치한다!)

4. 막 이것 저것 설정하고 해야 하지만 귀찮다.

누군가 github에 기본틀을 만들어 놓지는 않았을까??

검색해보자.

https://github.com/troyedwardsjr/phaser3-typescript-webpack

기본 틀이 만들어져 있고 webpack으로 빌드를 내는 부분까지 만들어져 있다!

받아서 해보자!

크으 잘 된다.

zip 파일 다운받아서 코드랑 에셋만 쳐내고 기본 틀 만들어서 git 사용하자! ㅋㅋㅋ

잘 되기는 하는데 아직 TypeScript 연동이 제대로 되어 있지 않은 것 같다.

일단 Javascript로 진행하자!!!

https://github.com/nkholski/phaser3-es6-webpack

마찬가지로 잘 정리되어 있는 곳이 있어 땡겨쓰기로 함!

https://snowbillr.github.io/blog/2018-04-09-a-modern-web-development-setup-for-phaser-3/

Phaser 튜토리얼에도 올라왔는데

처음부터 설정하는 과정을 적어준 블로그가 있어서 공유한다.

아직 이런 설정하는게 익숙치 않은데 참고해서 한땀 한땀 해봐야겠다. ㅎㅎ

간단하고 가볍게 2D 게임을 만들어 보고 싶었다.

이럴때 보통 Unity2D를 사용하고는 한다.

윈도우 태블릿으로 간단한 게임을 만들어 보는데 Unity2D보다 가벼운건 없을까 하고 찾아보다가

Phaser Framework를 찾게 되었다.

개인적으로 Python 공부겸 해서 Pygame을 해볼까 하다가 지속적으로 발전되고 있는 것 같기도 하고

HTML5를 사용하다 보니 웹에서 바로 켜볼 수 있는것과 조금이나마 Javascript / Typescript를 사용해본적이 있어

Phaser를 사용해보기로 했다.

https://phaser.io/

게임 개발에 필요한 기능들은 다 있고 도큐먼트나 튜토리얼도 잘 되어있다.

그리고 사용자들이 글을 많이 올려줘서 쉽게 개발해볼 수 있을 것 같다.

좀 해보다가 아니다 싶으면 다른 엔진을 찾아보거나 Unity로 가야될 것 같지만

일단 사용해보자!

https://phaser.io/tutorials/making-your-first-phaser-3-game/index

참고해서 기본 게임 하나를 만들어봐야겠다.