오르카의 아틀리에

UniRx에서 ObjectPool 사용하기

공대생 오르카 — Sat, 14 Dec 2019 14:51:14 +0900

object pool 패턴은 게임을 제작할 때 자주 사용하는 패턴 중 하나입니다. 프로그램에서 인스턴스를 생성할 때에는 생각보다 많은 비용이 듭니다. 특히, 큰 크기의 Prefab들을 그때그때 새로 생성해서 사용하는 것들이 그렇지요.

큰 용량의 Prefab을 한 프레임 안에서 여러 번 생성하게 되면, 한 프레임 안에서 많은 CPU 자원을 사용하게 된다는 의미이고, 이것은 프레임 저하와 잦은 생성(Instantiate)과 파괴(Destroy)를 통한 빈번한 GC 호출을 의미합니다.

물론, 작은 프로젝트나 취미 수준의 게임 개발에서는 필요 없는 기능일 수 있지만, 그런 와중에 성능을 올려야 한다면 가장 먼저 도입을 고려해야 할 만한 패턴입니다.

이번 포스팅에서는 UniRx를 이용해 ObjectPool 패턴을 제작하는 방법을 공유할까 합니다.

Object Pool 이란?

앞에서 오브젝트의 잦은 생성과 파괴는 게임 성능에 안 좋은 영향을 미친 다고 했습니다. 이런 상황을 해결하기 위한 솔루션은 간단합니다. 바로 "생성과 파괴를 하지 않는 것"입니다.

뭔 대단한 소리를 지껄이나 했네

별것 아니지만 성능에 매우 긍정적인 영향을 미칩니다.

Object Pool의 역할은 객체를 미리 생성해두고 다른 대상이 요청을 했을 때 미리 저장해둔 객체를 전달하고 다 쓴 객체는 반환받아 저장해두는 역할을 합니다. 우리는 이 패턴을 UniRx를 이용해 구현해볼 텐데, 다행스럽게도 UniRx에서 이에 대한 툴들을 제공하고 있습니다.

UniRx.Toolkit.ObjectPool

UniRx에서 Toolkit 네임스페이스 안에 ObjectPool이라는 친구가 있습니다. UniRx에서 제공하는 ObjectPool 템플릿입니다. 기본적인 선언 방법은 다음과 같습니다.

위처럼 Generic으로 풀링 할 객체의 타입을 정합니다. 이때 타입은 UnityEngine.Component를 상속받는 클래스여야 합니다.

오버라이딩해야 하는 함수들

UniRx는 소스를 직접 뜯어볼 수 있는 장점을 가지고 있습니다. ObjectPool이 어떻게 생겨먹었는지 살펴볼 수 있죠, 아래 코드는 ObjectPool 클래스 중 핵심적인 코드만 몇 개 발취한 것입니다.

그중에서 Rent()와 Return()을 살펴보겠습니다. ObjectPool을 사용하는 핵심적인 메소드이기 때문입니다. 잘 보면, Rent와 Return을 하기 전에 각각 OnBeforeRent()와 OnBeforeReturn()을 호출하고 있습니다. 이 함수들은 Virtual로 선언되어있고, 기본적으로 오브젝트를 켜고 끄는 기능을 하고 있습니다. 이 부분을 오버라이딩하면 좀 더 디테일하게 Pooling 되는 객체를 관리할 수 있죠.

저는 Pooling 한 오브젝트를 Rent()하고 활성화하기 전에 몇 가지 변수들을 인젝션 해야 했고, OnEnable타이밍에 사용해야 하기 때문에 Rent 한 순간이 아닌 인젝션 후에 SetActive 해야 했습니다.

따라서, 다음과 같이 함수를 오버라이딩해서 사용했죠.

특별히 Rent/Return후 전처리를 해야한다하면 이 부분을 오버라이딩해서 사용하면 됩니다. 특히 객체를 Pooling 할 경우 Rent후 세팅을 해주거나 Return 하기 전에 데이터를 리셋하는 로직이 필요한 경우가 많은데 그때 주로 이용하면 좋을 것 같습니다.

UniRx에서 First()와 Take(1) 중 어느 것을 써야하는가

공대생 오르카 — Sun, 13 Oct 2019 01:29:18 +0900

개인 프로젝트를 하던 중, 다음과 같은 에러를 만났습니다.

InvalidOperationException: sequence is empty
System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw () (at <7d97106330684add86d080ecf65bfe69>:0)
UniRx.InternalUtil.ExceptionExtensions.Throw (System.Exception exception) (at Assets/Plugins/UniRx/Scripts/InternalUtil/ExceptionExtensions.cs:10)
UniRx.Stubs+<>c.<.cctor>b__3_1 (System.Exception ex) (at Assets/Plugins/UniRx/Scripts/Observer.cs:496)
UniRx.Observer+Subscribe1[T].OnError (System.Exception error) (at Assets/Plugins/UniRx/Scripts/Observer.cs:173) UniRx.Operators.FirstObservable1+First[T].OnCompleted () (at Assets/Plugins/UniRx/Scripts/Operators/First.cs:83)
UniRx.Operators.WhereObservable1+Where[T].OnCompleted () (at Assets/Plugins/UniRx/Scripts/Operators/Where.cs:101) UniRx.Operators.TakeUntilObservable2+TakeUntil+TakeUntilOther[T,TOther].OnNext (TOther value) (at Assets/Plugins/UniRx/Scripts/Operators/TakeUntil.cs:84)
UniRx.InternalUtil.ListObserver1[T].OnNext (T value) (at Assets/Plugins/UniRx/Scripts/InternalUtil/ListObserver.cs:39) UniRx.Subject1[T].OnNext (T value) (at Assets/Plugins/UniRx/Scripts/Subjects/Subject.cs:62)
UniRx.Triggers.ObservableEnableTrigger.OnDisable () (at Assets/Plugins/UniRx/Scripts/UnityEngineBridge/Triggers/ObservableEnableTrigger.cs:28)

스택에 First.cs:83가 찍힌걸 보니 First를 사용한 곳에서 OnCompleted가 흐를 때 뭔가 문제가 있나 봅니다.

UniRx에서 여러개의 Observable을 합성하는 방법

공대생 오르카 — Wed, 11 Sep 2019 22:27:22 +0900

비단 UniRx 뿐만 아니라 Rx로 프로그래밍을 하다 보면, 필연적으로 여러 개의 Observable을 동시에 구독하는 것처럼 동작하게 만들어야 할 필요가 있습니다.

예를 들어 비밀번호 확인을 위해 2개의 input필드가 있고, 그 값이 바뀔 때마다 비밀번호가 유효한 규칙으로 작성되었는지 확인하고 싶을 때를 생각해봅시다. 2개의 input 필드를 각각 구독하고 유효한 규칙인지 판단해도 되지만, 2개의 input Observable을 합성하고 그것을 구독하는 방법도 있을 것입니다. 이런 상황처럼 실제로 UniRx를 이용하여 게임 로직을 작성하다 보면, 여러 개의 ReactiveProperty나 Subject를 동시에 구독해서 처리해야 하는 상황들이 많이 나오게 됩니다.

0. Zip

말 그대로 2개의 스트림을 하나로 압축합니다. 그림으로 설명하면 다음과 같습니다.

Zip의 동작

보이는 것처럼 타겟 Observable에 흘러온 데이터를 1:1로 대응해서 흘리는 Observable을 만듭니다. C, D 데이터가 들어오는 것을 보면 어느 한쪽에 쌍을 이룰 데이터가 들어오지 않으면 해당 다른 쪽 데이터를 보관하는 것을 알 수 있습니다. 거기에 한번 흘려진 데이터는 버려집니다.

1. ZipLatest

이름을 통해 쉽게 예측할 수 있을 것 같습니다. Zip이긴 한데 Latest한 데이터를 이용하는 친구겠죠. 그림으로 표현하면 다음과 같습니다.

ZipLatest의 동작

그냥 Zip과는 다르게 3D라는 데이터가 흐른 뒤 더 이상 데이터가 흐르지 않고 있습니다. 두 번째 Observable에 최신 데이터가 남아있지 않기 때문이죠. 또한, 두 번째 Observable에 흐른 C라는 데이터는 맞는 짝을 찾지 못하고 소멸했습니다.

2. CombineLatest

이 친구는 Zip과는 다르게 한번 합성해서 흘려보낸 데이터를 버리지 않는다는 특징이 있습니다. 그림으로 표현하면 다음과 같습니다.

CombineLatest의 동작

연결된 두 개의 스트림 중 어느 한 곳에서 데이터가 흐르면 합성된 Observable에도 데이터가 흐르며, 데이터의 내용은 각 스트림에 흐른 최신 데이터가 이용됩니다. 현제 프로젝트에서 ZipLatest와 더불어 가장 많이 사용하고 있는 스트림입니다. 하나의 뷰를 여러 모델이 참조돼서 업데이트되어야 할 때 주로 사용하고 있습니다.

3. Merge

말 그대로 Observable을 합쳐줍니다. 그림으로 확인하면 다음과 같습니다.

Merge의 동작

아무 처리 없이 N개의 스트림에 흐르는 데이터를 전부 하나의 Observable로 흐르게 해 주는 것이기 때문에 모든 스트림의 타입이 같아야 합니다. 여러 개의 Button이 한 가지 동작을 한다고 했을 때 정도에 사용할 수 있을 것 같습니다.

4. Concat

Array에서 Concat을 사용해보신 분이라면 익숙할 것입니다. 하나의 스트림이 끝나면 뒤에 추가한 스트림이 흐르기 시작합니다. 그림으로 보도록 하죠.

Concat의 동작

첫 Observable이 완료될 때까지 그 데이터를 전달하고 OnComplete되면 두 번째 Observable의 데이터를 흘리기 시작합니다. 모든 Observable이 OnComplete 되면 종료됩니다. 현제 프로젝트에서는 잘 사용하지 않았지만 네트워크가 붙으면 사용할 수 있을 것 같습니다.

5. WithLatestFrom

언듯 보면 CombineLatest와 같아 보이지만, 특징이 한 가지 있습니다. 그림을 보면서 살펴보도록 합시다.

WithLatestFrom의 동작

CombineLatest는 합성된 Observable에 데이터가 흐르는 순간이 타겟이 되는 Observable 중 어디든 데이터가 흐르는 순간이었지만, WithLatestFrom은 첫 번째 Observable에 데이터가 흐르는 순간입니다. 만약 Latest한 데이터가 없다면 데이터는 흐르지 않습니다.

6. Amb

Amb는 N개의 Observable 중 가장 먼저 데이터가 흐른 Observable을 반환합니다. 그림을 보도록 하죠.

Amb의 동작

그림처럼 가장 먼저 A라는 데이터가 세 번째 Observable에 다른 Observable보다 먼저 흘렀으므로 Amb의 합성 Observable에는 세 번째에 흐르는 데이터만 흐르게 됩니다.

어느날 Unity 패키지 의존성이 박살났다

공대생 오르카 — Sun, 11 Aug 2019 16:55:20 +0900

회사일이 너무 바빠서 한동안 개인 프로젝트를 진행하지 못했었습니다. 잠을 좀 줄여서라도 다시 진행해보려고 묵혀둔 프로젝트를 오픈했는데... 시작부터 에러 메시지가 저를 반겼습니다. (이상한 일이죠... 그냥 나는 저장했던 프로젝트를 다시 켰을 뿐인걸??)

Project has invalid dependencies 에러 팝업

대략 무슨 내용인고하니, 프로젝트가 valid하지 못한 디펜던시를 가지고 있다는 것. 나는 그간 프로젝트의 세팅을 건든 적도 없고, 추가적인 플러그인을 받지도 않았는데 무슨 X소리인지 모르겠습니다. (덕분에 이 메세지를 보고 대략 한 1분 정도 멍 때린 건 비밀...)

Retry나 Continue를 눌러도 Editor가 켜지지 않아서 일단 프로젝트의 뭔가를 변경하려면 직접 세팅 파일들의 경로를 찾아서 수정해야했습니. 정말 기막힌 상황....

일단 방법은 있는 것 같다

일단 Dependency에 관련된 에러 내용이니 프로젝트에서 사용하는 패키지 목록이 적혀있는 친구를 찾아봅시다. 이런 목록들은 주로 "manifest.json"이나 "package.json"이라는 이름으로 관리되고 있을 겁니다.

manifest.json 고올든 정답

manifest.json가 정답인 듯하군요.

{project_name}/Package/manifest.json

이 경로에 있는 manifest.json을 열어주면 다음과 같은 Json이 저장되어있는 것을 확인할 수 있습니다.

{
    "dependencies": {
        "com.unity.ads": "2.0.8",
        "com.unity.analytics": "3.3.2",
        "com.unity.collab-proxy": "1.2.16",
        "com.unity.package-manager-ui": "2.1.2",
        "com.unity.purchasing": "2.0.6",
        "com.unity.textmeshpro": "2.0.0",
        "com.unity.modules.ai": "1.0.0",
        "com.unity.modules.animation": "1.0.0",
        "com.unity.modules.assetbundle": "1.0.0",
        "com.unity.modules.audio": "1.0.0",
        "com.unity.modules.cloth": "1.0.0",
        "com.unity.modules.director": "1.0.0",
        "com.unity.modules.imageconversion": "1.0.0",
        "com.unity.modules.imgui": "1.0.0",
        "com.unity.modules.jsonserialize": "1.0.0",
        "com.unity.modules.particlesystem": "1.0.0",
        "com.unity.modules.physics": "1.0.0",
        "com.unity.modules.physics2d": "1.0.0",
        "com.unity.modules.screencapture": "1.0.0",
        "com.unity.modules.terrain": "1.0.0",
        "com.unity.modules.terrainphysics": "1.0.0",
        "com.unity.modules.ui": "1.0.0",
        "com.unity.modules.uielements": "1.0.0",
        "com.unity.modules.umbra": "1.0.0",
        "com.unity.modules.unityanalytics": "1.0.0",
        "com.unity.modules.unitywebrequest": "1.0.0",
        "com.unity.modules.unitywebrequestassetbundle": "1.0.0",
        "com.unity.modules.unitywebrequestaudio": "1.0.0",
        "com.unity.modules.unitywebrequesttexture": "1.0.0",
        "com.unity.modules.unitywebrequestwww": "1.0.0",
        "com.unity.modules.vehicles": "1.0.0",
        "com.unity.modules.video": "1.0.0",
        "com.unity.modules.vr": "1.0.0",
        "com.unity.modules.wind": "1.0.0",
        "com.unity.modules.xr": "1.0.0"
    }
}

여기서 팝업에 적혀있던 모듈과 같은 이름들을 제거해 줍시다. 저 같은 경우는 tilemap과 timeline이라는 친구가 있어서 삭제했습니다.

이 정도로만 작업하고 프로젝트를 열어도 괜찮다고 생각합니다.... 만, 혹시나 하는 마음에 저는 에디터 캐시들도 날리고 열었습니다.

유니티의 캐시는

C:User/{user_name}/AppData/Local/Unity/cache

에 저장되어있습니다. 해당 폴더를 날려도 좋고 필요한 파일만 날려도 좋습니다. 저는 그냥 다 날렸습니다.

이렇게 해서 다시 에디터를 열었지만 좀 많이 찜찜합니다. 프로젝트의 버전을 올린 것도, 세팅을 바꾼 것도 없는데 스스로 박살나 있었습니다... 역시 최신 버전은 고민을 좀 많이 하고 사용하는 게 좋을 것 같습니다.

티스토리에 Github 그래프 위젯 만들기

공대생 오르카 — Mon, 10 Jun 2019 06:45:04 +0900

기획서 쓰다가 딴짓하고 싶어서 쓰는 간단한 포스팅이다.

얼마 전에 프라치노의 공간이라는 Tistory 유료 테마를 적용했다. 그래서 블로그에 이것저것 다시 꾸미기 시작했는데, 그중 하나가 Github Contribute 위젯이다.

깃허브 My Page에 보이는 Contribute time-map

깃허브는 자신이 언제, 얼마나 Github 커뮤니티에 기여했는지 위 그림처럼 도식화해준다.

팬 게임 제작에 들어간 순간부터 1일 1커밋 운동을 하고 있어서 그런지, 블로그에 해당 그래프를 간단하게 보여줬으면(자랑할 수 있으면) 했다. Github를 둘러보면 관련된 여러 레포들이 보이는데 그중에서도 github-calendar.js라는 친구를 이용했다.

IonicaBizau/github-calendar

:bar_chart: Embed your GitHub calendar everywhere. - IonicaBizau/github-calendar

github.com

대략 읽어보면 username을 기반으로 contribute calendar를 긁어와서 예쁘게 태그를 만들어주는 친구인 것 같다.

https://ionicabizau.github.io/github-calendar/example/를 보면 Embed도 제공하고 있어서 이 친구를 이용하기로 했다.

무엇보다 여타 다른 친구들은 주로 iFrame을 이용해서 비슷한 기능을 제공하는데... 이 친구는 svg로 그려주고 있어서 마음에 들었다.

example에 있는 소스를 조금 응용하고, Tistory Sidebar에서 재공되는 Html 배너 출력을 이용하면 Calendar widget은 금방 제작할 수 있다.

그런데 웹이 이렇게 원큐에 끝날리가 없지... 그냥 예제 그대로 적용하면 다음과 같이 보인다.

CSS가 테마랑 뒤섞여서 이상하게 보인다

responsive를 걸어서 Calendar는 딱 보기 좋게 나오지만, 다른 정보들이 영... CSS가 테마에 적용되는 친구들과 꼬여버려서 이런 사단이 났으니 해결 방법은 심플하다. 정리하면 된다... 귀찮을 뿐...

귀찮더라도 !important 를 이용해서 필요 없는 정보들을 정리하면 다음과 같아진다.

Streak 같은 재미있는 정보들이 없어졌지만 딱, 이 Layout이 보기 깔끔하게 위젯으로 사용할만한 것 같다.

Unity MonoBehaviour에서 유용하게 쓰는 Attribute 정리

공대생 오르카 — Sun, 26 May 2019 04:21:11 +0900

*너무 포스팅을 안 해서 느끼는 죄책감에 작성하는 포스팅

최근 팬 게임을 본격적으로 만들기 시작했다. 보너스 받은 걸로 와콤 액정 태블릿도 구입해서 진행 중인데, 아직은 시스템을 제작하고 있는 상황이다...

기반을 닦고 있다 보니 나중에 아트 + 세팅 작업에 필요한 도구들을 만들거나, Component에 박혀있는 변수들을 정리하는 일이 많다. 옛날부터 몇몇 유용한 Attribute들을 이용하여 작업했었는데 오랜만에 기반 작업에 들어간 거라 거진 다 까먹었다. 그래서 리마인드를 위한 정리 포스팅을 진행해본다. (철저하게 개인적으로 사용하는 용도로 정리, 다른 사람은 어떻게 사용하는지 모릅니다 >__<)

0. CreateAssetMenu

주로 스크립터블 오브젝트(Scriptable Object)를 작성하고 에셋을 찍어내기 위해 사용한다.

1. ContextMenu

컴포넌트에서 해당 함수를 임의로 실행하고 싶을 때 사용한다. 보통 셋업을 하는 메소들을 제작해둬서 사용하는데 유용하다. 혹은, 실행 중 디버깅용/상황 재현용으로 사용한다. (플레이 모드에 상관없이 실행시킬 수 있다는 장점이 있다.)

2. MenuItem

ContextMenu와 비슷한 기능을 Menu Bar에 올릴 수 있다. 하지만 Static function이어야 한다.

3. RequireComponent

함께 필요한 다른 컴포넌트가 자동으로 추가된다. 보통 해당 컴포넌트에서 해당 게임 오브젝트의 다른 컴포넌트를 GetComponent로 가져오지만 null이면 안될 때 사용합니다. 일종의 실수 방지 목적으로 사용한다.

4. Serializable

커스텀 클래스를 제작하고 MonoBehaviour에 멤버로 작성한 뒤 인스펙터에서 편집하고 싶을 때 사용. 커스텀하게 작성한 클래스를 직렬 화할 수 있어야 편집할 수 있음.

5. SerializeField

private필드를 강제로 serialize 한다. private 필드를 inspector에서도 편집이 가능하게 만들고 싶을 때 사용한다. (하지만 유니티에서 SerializeField를 사용한 private 필드보다는 public이 성능상 이점이 있다고 이야기한 걸 주워들은 것 같다.)

6. Header

Inspector에 보이는 변수 묶음에 텍스트를 써서 필드의 Context를 알릴 수 있다. 보통 Component에서 사용하는 멤버들을 정리할 때 사용함.

7. Space

Inspector에 보이는 변수 묶음에 텍스트를 써서 필드의 Context를 알릴 수 있다. 보통 Component에서 사용하는 멤버들을 정리할 때 사용함.

8. Range

Inspector에서 값을 변경할 때 슬라이드 바를 이용할 수 있도록 만듦. 이름처럼 변수의 범위를 지정할 수 있어서 유용하게 사용할 수 있음.

9. Tooltip

에디터에 디테일을 더하고 싶을 때 사용. 변수에 대한 자세한 설명을 달 수 있어 3일 뒤의 자신이나 다른 기획, 아트가 이 컴포넌트를 사용하고 세팅해야 할 때 설정해줌.

정리

Name	설명	tip
CreateAssetMenu	Assets > Create에 메뉴 추가	ScriptableObject Asset 생성에 유용
ContextMenu	컴포넌트 설정에 메뉴 추가	임의의 함수 실행에 유용(non-static)
MenuItem	메뉴바에 메뉴 추가	임의의 함수 실행에 유용(static)
RequireComponent	꼭 같이 붙어있어야하는 컴포넌트 추가	GetComponent에서 Null 검사하기 싫다면...
Serializable	커스텀한 클래스를 Inspecter에 표시
SerializeField	private 한 맴버를 Inspecter에 표시
Header	멤버의 카테고리를 분류 가능
Space	Inspecter에서 멤버와 멤버 사이 간격 주기	Inspecter 정리용
Range	Inspecter에서 변수 세팅에 범위를 줌	실수 방지
Tooltip	멤버에 대한 디테일한 설명	Inspecter용 주석

출장 다녀와서 쓰는 산업 기능 요원 훈련소 이야기

공대생 오르카 — Mon, 01 Apr 2019 23:37:02 +0900

이 팁은 [진짜]다.

일정이 훈련소 퇴소 후 바로 출장이 잡혀있었기 때문에 출장을 다녀와서야 후기를 남겨봅니다.

훈련이나 생활하는 건 연대나 중대별로 살짝 다르다고 알고 있고, 시간이 지나면서 바뀌는 것들도 있기 때문에 그런 것보다는 한 달 동안 훈련소 생활하면서 필요하거나 정말 도움이 되었던 꿀팁들을 위주로 써볼까 합니다.

# 챙기면 좋은 것들 (준비물)

- 칫솔(세면도구) ★★★★

칫솔이나 세면도구 외에도 기본적인 것들은 전부 보급이 되지만, 보급받았던 칫솔은 솔이 조금 억새서 잇몸이 많이 아팠습니다. 세면도구로 비누를 보급해주기는 하는데 샴푸, 린스 등등 비누 쓰기 싫으시면 챙겨가는 게 좋습니다. 다 챙기시기 귀찮으시면 싸제 여행용 세면도구를 낭낭하게 챙겨가는 것도 좋습니다.

- 책/공책 ★★★

훈련소에서는 기본적으로 오락거리가 별로 없습니다. 전자기기가 없는 건 물론이고 공익과 병특들은 훈련기간 동안 다치면 곤란하기 때문에 주말에도 밖에 나가서 축구나 농 구하는 건 불가능합니다.

특히, '동화기'라고 해서 입소하고 3~4일 동안은 훈련보다는 정신교육과 보급품 전파를 주로 하기 때문에 정~~ 말 죽을 맛입니다. 저는 '동화기'가 가장 힘들었습니다. 아무것도 하지 않고 대기한다는 게 정말 힘듭니다. '나는 어디인가 여긴 누군가'라는 생각이 절로 납니다. 이때 책이나 공책이 있다면 정말 도움이 많이 됩니다.

물론, 부대별로 북카페가 있어 책을 언제든 가져가서 읽을 수 있지만, 자신이 관심 있는 분야의 책이 있을지는 미지수 이기 때문에 2~3권 정도는 챙겨가는 것이 좋습니다.

- 물통(텀블러) ★★

훈련소에는 전우조라는 개념이 있습니다. 생활관 밖으로 이동할 때 3명 이상 조를 이뤄서 이동을 하는 것인데요. 물을 뜨는 곳은 밖에 있기 때문에 물 한잔 하고 싶을 때 전우조 모으기도 귀찮기 때문에 다들 물통을 많이 이용합니다. 보통 훈련 때 보급받는 생수 페트병을 몰래 재사용하거나 수통을 이용하는데 수통과 페드병의 위생이 찝찝하다면 챙겨가면 좋습니다.

- 시계 ★★

제가 속해있던 중대는 마이크 데스크 앞에만 시계가 있어서 시간 알기가 애매했습니다. 물론 항상 전파사항들은 '집합 N분 전' 같이 지금 몇 시인지 몰라도 되도록 전파돼 기는 해서 크게 불편하지는 않았지만 훈련을 나가면 가끔 시간이 궁금할 때 불편했습니다. 그 외에는 뭐 굳이 X샥, 카X오 같은 브랜드 시계를 구매해야 하는 정도는 아니고 그냥 다이소에서 5000원짜리 손목시계를 사서 가면 삶의 질이 쪼끔 올라가는 정도입니다.

- 위장 크림 ★

군대에서 보급하는 위장크림은 피부에 썩 좋지 못하다고 소문이 나있습니다. 저는 운이 좋아서 미세먼지 덕분에 위장크림을 써본 적이 없지만, 피부를 신경 쓰신다면 싸제 위장크림 챙겨가는 것도 나쁘지 않습니다.

- 팔꿈치 무릎 보호대 ★★★

사격은 엎드려쏴를 기본으로 합니다. 사격뿐만 아니라 뒤로 가서 받는 훈련들(각개 숙달, 종합)은 엎드리는 경우가 많은데 이때 보호대를 쓰지 않으면 팔꿈치/무릎이 아픕니다. 챙겨가시는 것이 좋습니다.

- 휴지/물티슈 ★★★

휴지도 두루마리 휴지 2개씩 보급해줍니다만.... 솔직히 부족했습니다. 물론 공용 휴지도 화장실 앞에 걸어두긴 하는데 여행용 티슈로 2~3개 더 챙겨가시는 게 좋습니다.

- 코골이 마개 ★★★★ or ★★

일단 옆에서 코를 골아도 상관없이 잘 수 있는 사람이라면 이어플러그로 충분하겠지만, 자신이 밤귀가 예민하다 라고 생각하면 코골이 마개를 조금 챙겨가시는 게 좋습니다. (코에 넣어 숨쉬는 구멍을 만들어주는 '코골이 마개'나 입을 벌리지 않도록 고정해주는 '입 벌림 방지 밴드'가 있습니다.)

- 면봉 ★★

귀 파는 거라면 손톱깎이 세트 보급품에 포함되어있어 문제없지만, 사격을 하고 나면 총기 손질을 하게 되는데 면봉이 있으면 구석구석 기름칠하기가 편합니다.

- 우표/편지지/풀 ★★★★

저는 편지를 잘 쓰는 편이 아니고 당시 여자 친구도 없었어서 편지를 쓰지 않았지만, 여자 친구가 있는 분대원들은 거진 매일 편지를 썼습니다. (그만큼, 훈련을 본격적으로 받기 전까지 편지, 책 이런 게 없으면 버티기... 힘듭니다) 우표는 훈련소 들어가서 사용할 우표를 산다고 하면 아마 420원짜리 우표를 줄 텐데 그거 사서 들어가시면 됩니다. 더 저렴한 걸 사면 우표를 두장 붙여야 합니다. 사실 편지지, 편지 봉투는 군용으로 있기 때문에 크게 상관없지만 우표는 없으면 군사우편으로 보내야 하는데 시간이 좀 오래 걸립니다. 편지를 쓰실거라면 우표 꼭 구매해서 들어가셔야 합니다.

- 인터넷 편지 부탁하기 ★★★

저는 그냥 조용하게 들어갔다 나오려고 해서 적극적으로 알리지 않았는데 인편이 오면 심심할 때 읽는 맛이 쏠쏠합니다. 적어도 지인이나 부모님에게 뉴스 기사 제목이라도 긁어서 보내달라고 하시는 게 좋습니다. 분대원들이랑 그거 가지고 돌려 보면서 이야기 나눌 수 있고 좋습니다. (세상 돌아가는 걸 알 수 있는 건 그것뿐....)

- 큰 가방 ★

돌아갈 때 보급품을 많이 받아가게 됩니다. 전투복, 전투화 등등 가방을 충분하게 들고 오지 않으면 주로 야봉이라는 봉투에 싸서 들고 가는데 아무래도 비닐봉지라 들고 다니기 불편합니다. (뭐 어차피 다들 퇴소한다는 설렘에 그런 불편함 정도야 감수하는....) 더블백같은 가방을 여분으로 들고 오면 좋습니다.

# 훈련소 깨알 팁

- 훈련

훈련은 꾀를 부리면 최대한 편하게는 받을 수 있습니다. 그런데 공익과 병특의 훈련은 원래 훈련 강도가 낮은 편이기 때문에 허리나 다리가 진짜 많이 아픈게 아니면 빠지지 않는 게 낫다고 생각합니다. (훈련을 참관하는 것보다 받는게 시간이 더 빨리 갑니다)

- 이동간 차등제

공익과 병특들은 '이동 간 차등제'라는 제도가 있습니다. 걷는 게 힘든 훈련병들을 위해 조금 일찍 훈련장으로 출발해서 느린 걸음으로 훈련장까지 이동하는 제도입니다. 제식이 없고, 속도가 느려서 발목이나 무릎, 허리가 안 좋은 훈련병들이 주로 이용했습니다.

- 열외

훈련소에서 기본적으로 이수해야 하는 훈련 최소 시간이 있는데 이 훈련시간에서 30교시가 빠지게 되면 귀가조치라고 합니다. 하루에 기본적으로 10교시로 잡고 있기 때문에 단순 계산으로 3일을 넘어서 훈련을 내리 빠지게 되면 귀가라는 이야기입니다.

대부분 의무과 때문에 빠지게 되거나 정말 걷는 게 안 되는 환자들은 훈련하러 이동할 때 막사 대기를 받게 됩니다. 때문에 자신이 몇 교시 정도 빠졌는지 잘 기억해두는 것이 좋습니다. 조금 위험하다 싶으면 소대장님과 면담해서 상담받으면 됩니다.

막사 대기를 하게 되면 할 게 없습니다. 기본적으로 아파서 대기하는 사람들이기 때문에 뭘 시키지 않습니다. 개인적으로 버티기 너무 힘들었습니다. 아프셔도 막사 대기보다는 훈련장까지는 이동해서 참관이라도 하시는 게 시간이 잘 갑니다.

- 의무과

군대에서 아프면 개손해입니다. 일단 응급이 아니라면 저녁에 의무과를 신청해서 다음날 오전/오후에 의무과에 가서 진료를 받게 됩니다. 일단 아프면 적어도 반나절은 참아야 한다는 소립니다. 참지 마시고 아프면 의무과 신청 바로바로 하시는 것이 좋습니다.

Unity iOS Could not produce class with ID 에러 해결법

공대생 오르카 — Fri, 19 Oct 2018 19:25:00 +0900

회사에서 신규 슬롯을 제작하고 iOS로 빌드를 한 뒤 해당 게임을 들어갔는데 AssetBundle을 로드하다가 크래시가 나는 상황이 벌어졌다. Console App을 이용해 디바이스 로그를 확인해보니 다음과 같은 메시지가 찍혀있었다.

뒷 문장을 읽어보면, 플레이어 세팅에서 'Strip Engine Code'를 비활성화 시켜봐라 라는데... 일단 Strip Engine Code라는 기능이 무엇인지 몰랐기 때문에 찾아보니 IL2CPP를 사용하면서 iOS에서 빌드 사이즈를 줄이기 위한 기능이었다. (자세한 내용은 여기서 참고)

간단하게 설명하면, 유니티엔진 관련 코드 중 런타임에서는 사용되지 않을 코드들을 제외하고 빌드하는 옵션이다. 만약, 에셋 번들을 이용하여 다이나믹하게 컨텐츠를 다운받게될 경우 게임 빌드에는 포함되어 있지 않지만, 다운로드된 컨텐츠 안에서는 사용되는 친구들이 있을 경우 크래시를 던지게 된다.

해결법은?

해결법은 두가지 정도가 있다.

첫 번째는 로그에 있는 것처럼 'Strip Engine Code'를 비활성화 시키면 된다. Player Setting > iOS 탭에 Optimization 섹션에 위치하고 있다.

하지만, 빌드 파일 사이즈를 줄여주는 고마운 기능을 그냥 꺼버리자니 너무 아까울 수밖에 없다. 두 번째 방법이 귀찮기는 하지만 두 마리의 토끼를 잡을 수 있는 해결 방법이다.

두 번째 방법은 'link.xml'을 작성하는 방법이다.

위 xml이 작성한 요소들을 어셈블리(DLL)에 포함할 것임을 명시해주는 xml이다. Assets 폴더 안에 작성하면 된다. 문법은 여기을 참조.

문제가 되는 클래스를 어떻게 찾지?

위에 적힌 로그처럼 크래시가 났을 때 해당 ID 값을 같이 뿌려준다. 이 ID는 YAML Class ID Reference에 명시된 클래스들의 ID이다. 위 처럼 64번이면 MeshColider이다.

Script compilation and assembly definition files을 사용해보았다

공대생 오르카 — Sun, 05 Aug 2018 09:21:08 +0900

Unity 2017.3의 새로운 피쳐 중 스크립트 컴파일 및 어셈블리 정의 파일(Script compilation and assembly definition files 이하 SCADF)이라는 것이 생겼습니다.

이 시스템을 도입한 이유는 '유저에게 스크립트가 어셈블리로 컴파일되는 방법을 정의하게 하고, 컴파일 결과물을 분리할 수 있게 만들어 결과적으로 컴파일이 필요한 구획만 컴파일해 컴파일 시간을 줄이고 싶다!'라는 이유입니다.

일단 말로 들었을 때 정말 어썸한 기능입니다. 프로젝트가 커져서 많은 스크립트를 들고 있으면 자연스럽게 컴파일 타임이 늘어나게 됩니다. 이 시스템을 도입하면 컴파일 타임이 줄어들 것이라고 기대됩니다. 흔히 격는 코드 수정 후 유니티 하단에 동글뱅이가 돌아가는 시간이 줄어든다는 것이죠.

그래서 한번 이 기능을 조사&사용해보았고 후기를 공유하고자 합니다.

이 기능을 한마디로 정리하면,

리스크가 있는 기능이다!

라고 할 수 있습니다.

Example

인터넷에 떠도는 예제가 있습니다. 여기에서 다운받아서 실행해 보실 수 있습니다.

예제를 간단하게 설명하면 다량의 코드를 많이 만들고 그냥 컴파일하는 시간과 SCADF를 이용해 컴파일하는 시간을 비교한 것입니다. 각각 최악의 경우와 최상의 경우가 있습니다.

프로젝트를 다운받고 실행해보면 위와 같은 탭이 하나 있을 것입니다.

Interdependent Scripts

interdependent는 최악의 경우입니다. 코드를 보면 아시겠지만 60개의 메소드를 가진 800여 라인의 스크립트 파일을 15개씩 15개의 폴더로 구분해서 생성합니다. 컴파일 타임은 저의 맥북 기준으로 9초였습니다.

컴파일 타임을 확인했다면 Assembly Definition Files를 만들어 줍시다. 만들게 되면 동시에 .scadf파일이 만들어지고 컴파일을 진행합니다. 초기 컴파일이 저의 맥북 기준으로 21초가 걸렸군요. 컴파일 타임이 약 2배 조금 넘게 증가했습니다.

하지만, 주목할 점은 edit and compile 타임이겠죠? 일단 0번째 스크립트들을 살짝 변경하고 저장한 뒤 컴파일 타임을 살펴봅시다. 역시 저의 맥북 기준으로 22초 정도 걸렸습니다. 왜 빨라지지 않았을까요?

interdependent는 15개의 폴더간의 종속성이 일렬로 구성되어있습니다. 1번째 폴더의 스크립트들은 0번째 스크립트를 알아야하고, 2번째 폴더의 스크립트들은 1번째 폴더의 스크립트들을 알아야합니다. 결과적으로 2번째 폴더의 스크립트는 0번과 1번을 전부 알아야겠죠?

그렇다면, 결과적으로 0번째 스크립트들을 알아야하는 친구들은 0번을 제외한 나머지 전부가 됩니다. 때문에 0번째 스크립트가 업데이트 되면 0번을 알아야하는 친구들이 전부 업데이트되어야할 것입니다. 그림으로 나타내면 다음과 같겠죠. 특정 노드에 업데이트가 일어나면 화살표로 연결된 친구들도 컴파일 되어야할겁니다.

그럼 14번째 스크립트를 건들면 어떻게 될까요? 저의 맥북 기준으로는 7초가 나왔습니다. 연결된 하위 노드들이 없으니 자기 자신만 컴파일 하면 되겠지요. 12번째 스크립트를 건들면 9초가 좀 넘게 나왔습니다. 즉 그 이상으로 올라가면 원래 컴파일 타임보다 늘어나니 손해라는 계산이 나오네요.

Independent Scripts

independent는 최상의 경우입니다. 말 그대로 스크립트 간의 종속성이 없기 때문에 SCADF의 특성을 최대한 살릴 수 있습니다.

컴파일 타임은 마찬가지로 9초였습니다. Assembly Definition Files를 만들어 줍시다. 만들고나면 0번째 스크립트를 고쳐봅시다. 결과가 어떨까요? 저의 맥북에서는 6초 정도 컴파일 타임이 기록되었습니다. 약 2/3로 줄어든 것을 볼 수 있습니다. 원리를 이해하셨을 테니 그림을 보면 이해가 가실 겁니다.

그 어느 스크립트를 수정하더라도 종속성이 걸린 친구들이 없기 때문에 추가 컴파일이 일어나지 않기 때문에 컴파일 타임이 줄어든 것입니다.

결론

결론을 쓰자면 최상의 경우에는 확실히 컴파일 타임에 이득을 볼 수 있습니다. 하지만, 실제로는 스크립트별로 종속성이 묶여있을 수밖에 없습니다. 그럼 해결책은 무엇일까요?

네, 좋은 경험이라고 생각하고 잘 나누셔야 합니다.... 종속성 같은 경우는 프로젝트별로 다 다르기 때문에... 어썰수가... 그래도 가이드라인이라면 Standard Asset같은 절대로 건드이지 않을 것 같은 친구들을 위주로 한 묶음 묶어버리면 컴파일 타임이 줄어든다고 합니다. 이것도 그런 에셋들이 많다는 가정하에 갰지요...

[번역] Unity 2018.2 2D관련 업데이트

공대생 오르카 — Sat, 14 Jul 2018 10:11:06 +0900

Unity 2018.2가 열렸습니다. 여기를 참고해보면 자세한 내용을 확인해 볼 수 있습니다. 지금 2D게임을 만들고 있고, 앞으로도 아마 혼자 개발할때는 2D 위주로 개발하게 될 것 같으니, 2D관련 업데이트 내용만 잠깐 훑어보도록합시다.

Pixel Perfect Camera (Preview package)

Pixel Perfect 카메라가 프리뷰 패키지로 추가되었습니다. 먼저 원문을 잠깐 읽어봅시다.

Try the Pixel Perfect Preview package to stay true to your pixel art vision. The Pixel Perfect Camera component will help you get perfect, crisp pixels – regardless of the screen size – by making all the calculations automatically for you.

Your sprites will even benefit from the feature when they are in motion or rotating, always keeping a sharp pixelation, without having to add interpolation to smoothen the edges as illustrated below.

대략 요약해보면 '자동으로 계산해서 화면에 딱 맞는 픽셀들을 제공한다'라는 모양인데 아래 이미지를 보면 한번에 이해하실 수 있을 겁니다.

원래 이미지를 그냥 회전시키면 2번째 그림처럼 돌아가 있을 겁니다.

하지만, Pixel Perfect 카메라를 이용하면 자동으로 픽셀라이즈 해주기 때문에 세번째 그림처럼 이미지를 재공받을 수 있다는 겁니다.직접 써보지는 않았지만 아마 이전에 이런 기능을 사용하려면 Asset Store에 있는 플러그인을 받아 사용했어야할텐데 이제 패키기 형태로 유니티가 직접 제공하는 듯합니다.

2D Sprite Renderer “Sort by Pivot Point”

Pivot Point로 소팅하는 기능이 2D Sprite Renderer에 추가되었다고 합니다.

Traditionally, the distance between the center of a Sprite Renderer and the axis is used to determine which sprite would be rendered last and therefore appear at the front of the image.

With this release, you can use the pivot point instead of the center of the sprite as the reference point in the various sorting methods, such as arranging by distance to the top of the screen. For example, in top-down RPG games, you need the bottom of the sprite to determine the rendering order of the sprite.

The new pivot-point configuration lets you set criteria that better suit your game.

말그대로 Pivot Point를 기준으로 어느 것을 아래쪽에 그릴지 위에 그릴지 결정하는 기능인데, 예를 들어 Top-Down RPG같은 장르에 유용할 것이라고 합니다. 확실히 타일 한칸보다 큰 오브젝트들을 그려야할때 유용할 것 같습니다.

2D Hexagonal Tilemaps

유니티에 육각형 타일맵이 빌트인 되었습니다.

You can now build Hexagonal Tilemaps. This includes support for flat-top and point-top Hexagonal Tiles, which are especially useful for making strategy games or digital board-games.

기존에 제공하던 타일맵과 비슷하게 사용하면 될 것처럼 보입니다. 육각 타일맵은 항상 관리하기 귀찮았는데 이렇게 빌트인으로 제공해주니 좋아 보이네요.

SVG Importer (Preview package)

SVG 임포터가 프리뷰 패키지 형식으로 추가되었습니다. SVG는 벡터 그래픽으로 크게 확대해도 화질이 뭉개지지 않는다는 장점을 가지고 있죠. 원문을 먼저 읽어봅시다.

This feature lets you import Scalable Vector Graphics (SVG) directly into your projects. The SVG Importer allows you to create sprite assets with a very small file size that will retain their quality at any resolution.

The SVG importer supports the most common features of the SVG 1.1 specification, such as gradients, fills, clipping paths, dashed lines, and rounded corners. Vector graphics sprites imported in this manner are supported by the Unity 2D tools.

Once an SVG file is imported, the vector data is tessellated into triangles and a sprite is generated. This sprite can then be used by the 2D system. The source for the SVG Importer can be found in the Editor folder of the package.

Get the SVG Importer as part of the Vector Graphics Preview package from the Package Manager.

대략 SVG 임포터를 추가했고 SVG 1.1 수준의 기능을 제공하지만 가져온 SVG는 Unity 2D Sprite System을 이용할 수 있도록 되어있다고 합니다. SVG를 이용하면 작은 용량으로도 큰 이미지를 깨짐 없이 재공할 수 있으니 한번 사용해볼법 합니다만, 아직 Preview이기 때문에 실제 프로젝트에 넣는 것보다는 테스트용 프로젝트에 고려해볼 법 한것 같습니다.

New 2D APIs

You can use the Vector Graphics API to create or manipulate vector data directly in the code.

The new 2D Atlas API lets you write custom tools to create or update atlases. For example, you could create personalized character textures using the player’s profile picture, or you could optimize the atlas based on the player’s configuration.

새로운 기능들이 추가되었기 때문에 API도 추가되었는데 SVG가 사용 가능해졌으니 당연히 벡터기반 그래픽 API들이 업데이트가 되어었겠죠! 코드를 통해 벡터 데이터에 접근하거나 데이터를 생성할 수 있다고합니다. (개 힘들 것 같지만 ㅠㅜ)

또한 2D Atlas API도 업데이트 되었습니다. API를 통해 아틀라스를 제작하거나 업데이트하는 툴을 만들 수 있다고 하네요.

아이패드와 리디북스 덕분에 책읽는 빈도가 늘었다

공대생 오르카 — Fri, 13 Jul 2018 19:48:20 +0900

최근 아이패드 6세대를 구입했다.

eBook 리더를 하나 구입하기 위해 여러 기종을 구경하던 중에는 '리디북스 페이퍼 프로'[이하 리페프]가 눈에 들어왔지만, 아무래도 소설책과 기술 서적을 병행해서 이용할 것 같아 태블릿으로 눈을 돌렸다. (e-ink를 사용하는 eBook 리더는 특성상 PDF를 읽는 데는 적합하지 않은 것 같다)

논문을 읽을 수 있을 정도의 e-ink eBook 리더도 있긴했지만.... 가격이 미쳐있었다. 거진 100만원 정도의 가격대로 형성되어있었기 때문에 차라리 '아이패드 프로를 사지'하는 생각이 들 정도였다.

저가형으로 알아보고 있었을 때 새로 나온 샤오미 '미패드 4'가 눈에 들어왔는데 가성비는 정말 좋아보였으나 당시 구매대행 사이트를 통해서 20만원 중반대 가격이 나왔다. (분명 20만원이 안 넘는 걸로 알고 있었는데 후...)

거기다 개인 통관 번호도 발급받아야 했고 결국 귀찮아서 원하는 가격대를 좀 높여보니 아이패드 6세대를 대체할 수 있는 태블릿이 없었다. 뭐 일단은 당장 사서 쓰지는 않을 거지만 애플 펜슬을 지원하기도 하고...

그래서 그날 구매를 결정하고 '애플스토어 가로수길점'에서 픽업을 신청했다. 8시가 조금 넘은 시간에 신청해서 매장 마감 시간인 10시 전에 픽업 문자가 올지 걱정하고 있었는데 9시쯤 문자가 와서 바로 달려갔다.

eBook 앱으로는 '리디북스'로 정했는데 여러 앱을 사용해본 결과 원래 내가 가지고 있던 파일도 불러올 수 있고 inApp으로 사전 검색도 있어서 다른 앱을 일부러 여러 개 설치할 필요가 없다고 생각했기 때문이다.

물론, 리디북스에 원하는 서적이 없어서 난감하기도 했지만, 기술서적은 한빛에서 ebook으로 구매하고 리디에 밀어 넣으면 되니까 문제가 되지 않았다. (소설책이 없을 때는 초큼 아쉬움 ㅠㅜ)

실물책 to 전자책

당연하게도 지금까지 기술서적들은 앵간하면 실물 책을 구입했다. eBook 리더가 없기도 했지만, 일단 전공 책과 교양서적이 전부 실물 책이었기 때문이다.

다시 읽을지는 모르겠지만, 일단 구입해두기도 했고 공간만 차지하는 것 같아서 날을 잡아 실물 책을 스캔해서 PDF로 만드는 서비스를 이용해 볼까 한다. (이것도 귀찮아서 안 할 가능성이 있음...ㅎㅎ)

사용평

확실히 이 정도 가격에 아이패드를 즐길 수 있다는 게 가장 큰 장점인 것 같다.

확실히 라미네이팅이 안 되어 있어 실제 화면이 표면으로부터 멀어져 보이긴 한다. 하지만, 책을 주로 읽을 거라면 걸리적거릴 수준은 아닌 것 같다. (애플 펜슬로 필기를 할 것이 아니라면) 이 정도 가격으로도 책을 읽지 않을 때는 유튜브도 보고 넷플릭스도 보고 멀티미디어를 즐길 수 있다는 게 정말 좋은 것 같다. 핀터레스트 구경할 때도 좋고.

책을 읽을 때 단점은 물리 키가 없다는 것.

리페프는 물리 키가 있어서 페이지를 넘길 때 실수가 없는데 가끔 아이패드는 한 손으로 잡고 페이지를 넘기다 보면 앞으로 넘길 때가 있다. 이게 은근 불편해서 잘못 넘기게 되면 집중하고 읽고 있는데 흐름이 끊기는 기분이 든다. (아두이노로 물리키 만들어 버릴까) 생각해보니 모바일 배그 보조키처럼 하나 만들어두면 편할 것 같긴 하다.

하여튼, 아이패드와 리드북스를 이용한 뒤로는 출근길에 더는 쿠키런을 하지 않는다. 출퇴근 시간 합쳐서 약 40분 정도 되는 것 같은데 어찌 보면 짧은 시간이지만 하루하루 꾸준하게 읽을 수 있게 된 것 같다. 한 달에 2권 정도는 읽는 습관을 길러야지

*추가 : 아 생각하지 못한 단점이었는데 이 아이패드에는 뮤트 스위치가 없다. 처음에 뮤트 스위치 찾느라 한참걸렸다. 제어센터로 볼륨을 꺼주는 방법을 사용하고 있다.

UniRx Operator 관련 정리

공대생 오르카 — Tue, 19 Jun 2018 23:48:52 +0900

Observable Operator

Operator	When	Description
Observable.Return	값을 하나만 발행
Observable.Repeat	값을 반복해서 발행
Observable.Range	지정한 범위의 수치들 발행
Observable.Empty	더미 스트림을 만들어 사용하고 싶을 때	OnCompleted를 즉시 발행하게됨
Observable.EveryUpdate Observable.EveryFixedUpdate (etc...)	Life cycle에서 Update 부분의 로직을 작성하고 싶을 때	MainThreadDispatcher에서 코루틴이 돌기 때문에 Life cycle관리 주의! - UpdateAsObservable 을 사용 - 마지막에 AddTo(this.gameObject) 사용
Observable.Interval	일정 시간을 값으로 발행받고 싶을 때

Stream Filter

Filter	When	Description
Where	원하는 조건에만 발행하고 싶다	다른 언어에서는 Filter / Linq 참고
DistinctUntilChanged	메시지 값이 바뀔 때만 발행하고 싶다.
First	첫 메시지만 발행
Take	지정한 갯수만큼 발행	10이면 10개의 메시지만 발행
TakeWhile	조건이 맞지 않을 때까지 발행	스트림의 While 문
TakeUntil	지정한 스트림에서 메시지를 받을 때까지 발행
Skip	지정한 갯수만큼 무시
SkipWhile	조건이 맞지 않을 때까지 스킵
SkipUntil	지정한 스트림에서 메시지를 받을 때까지 스킵

Stream Control

Operator	When	Description
SelectMany	새로운 스트림(B)을 생성하고 그 스트림에서 발행되는 메시지를 원래의 스트림(A)에서 발행되는 것 처럼 변경할 때	다른 언어에서 FlatMap
Zip	각각의 스트림에 흐르는 메시지들을 하나씩 묶어서 동시에 처리하고 싶을 때	모든 메시지를 순서대로 보관
ZipLatest		각 스트림의 최신 메시지만 보관
CombineLatest		최신 메시지를 보관해 두었다가 각 스트림 중 하나라도 다시 발행되면 발행
Merge	여러개의 스트림을 정리/합성
Concat	스트림이 끝나면 다른 스트림으로 대체	순차적으로 스트림을 사용할 수 있다

개발자를 위한 디자인 관련 자료 모음

공대생 오르카 — Sun, 17 Jun 2018 22:34:00 +0900

대학교에서 모델링 수업을 들었을 때와 개구멍 노동부에서 영상 편집을 했을 때를 제외하고는 아트쪽 관련 공부를 재대로 해본적이 없다. 개발 공부만 해도 빡시긴하지만 조금 조금씩 꾸준히 해서 병특이 끝날즘에는 어느정도 아트도 커버할 수 있게 만들어보려고한다.

그런김에 이 포스팅에 디자인 관련 자료들을 정리해보려함 (Github에 하려고 했지만 추가할 때마다 커밋으로 묶여서 그냥 블로그에....)

0. 개발자를 위한 도트디자인 입문

[유유자적 라이프 - 김윤정님]

1. MortMort`s Pixel Art tutorial

잘생긴 외국인이 만든 Pixel Art관련 튜토리얼 영상들 URL

Asprite를 기반으로 설명하고 있음 뭐, 툴일 뿐이니 큰 상관은 없을 듯하다. [나중에 한글자막 달 수 있으면 달아줘야지]

Unity할 때 외워두면 유용한 Mathf 함수들

공대생 오르카 — Sun, 17 Jun 2018 19:31:03 +0900

유니티를 사용하다 보면 숫자를 계산할 때가 많습니다. 이 숫자들을 다룰 때 자주 사용하는 클래스가 Mathf 클래스입니다. 레퍼런스가 잘 되어있다고 하더라도 자주 사용하는 함수들을 외워두면 코드를 작성하는 시간을 크게 줄일 수 있을 것입니다. (무엇보다 구글 켜서 검색하는게 귀찮음...) 그래서 이번에는 알아두면 좋고, 나의 삽질 시간을 줄여줄 수 있는 유용한 Mathf 함수들을 정리해보려고 합니다.

0. 절댓값

Mathf.Abs(float num)

Abs은 num에 대한 절댓값을 반환해줍니다. 가끔 데이터의 부호를 때고 계산해야 할 때 편리하게 사용할 수 있습니다.

1. 최대/최솟값

Mathf.Clamp(float num, float min, float max)
Mathf.Clamp01(float num)

Clamp는 num 값을 min, max에 맞추어 재조정해줍니다. min보다 작으면 min값을, max 값보다 크면 max값을 반환합니다. 주로 특정 변수가 어떤 값 사이에 존재해야 할 때 프로퍼티로 빼고 set 쪽에서 필터링을 걸어줄 때 사용합니다.

2. 올림 / 버림 / 반올림

올림 - Mathf.Cell(float num)
버림 - Mathf.Floor(float num)
반올림 - Mathf.Round(float num)

함수 뒤에 ToInt를 붙여주면 반환 값이 int가 됩니다.

3. 근사 (Approximately)

Mathf.Approximately(float a, float b)

두 변수 a, b가 같은지(근사한지) 비교합니다. float은 부동 소수점이기 때문에 데이터들이 이리저리 가공되거나 특히, 물리를 사용하여 물체를 요리조리 가지고 놀다가 위치나 속력 같은 친구들 가지고 == 연산을 하게 되면 일치하지 않을 때가 있습니다. 이럴 때를 대비해서 float 데이터들은 Approximately를 이용하여 비교해야 합니다. 예를 들어 1.8f == 18.0f / 10.0f가 true를 반환하지 않을 수도 있습니다.

4. 선형 보간

Mathf.Lerp(float a, float b, float t)

함수를 먼저 설명하자면 a와 b 사이의 값 반환하는 함수입니다. 구체적으로는 $0 \le t \le 1$인 t를 통해 a와 b를 잇는 직선 $\overline{AB}$를 $t:1-t$로 분할하는 지점을 반환합니다. 왜 이런 것을 사용할까요? 조금 깊이 들어가는 감이 있지만, 일단 선형 보간에 대해 잠깐 살펴봅시다.

선형 보간법(線型補間法, linear interpolation)은 끝점의 값이 주어졌을 때 그 사이에 위치한 값을 추정하기 위하여 직선 거리에 따라 선형적으로 계산하는 방법이다.
- 위키 백과

쉽게 생각하면 중간에 있는 어느 값을 추정하는 방법론입니다. 그럼 어떤 상황에서 어느 중간값을 추정해야 할 필요가 생길까요? 예를 들어봅시다.

우리는 값이 틱!하고 바뀌는 상황을 보여줄 수도 있지만, 값이 바뀌는 "과정"을 보여주어야 할 경우도 있습니다. 예를 들어 상금을 타는 연출에서 자신의 소지금액에 상금이 '틱!'하고 합쳐지게 보여줄 수도 있지만, 숫자들이 '촤라라락'하는 느낌으로 변화해서 목표 금액에 도달하는 연출이 필요할 수도 있습니다. 이럴 때 시작 값과 마지막 값의 중간값들을 구해 사용할 수 있습니다.

5. 라디안

Mathf.Deg2Rad
Mathf.Rad2Deg

각각 라디안->각도, 각도->라디안으로 바꿀 때 필요한 상수의 읽기전용 변수입니다. Deg2Rad는 $2\pi / 360$이고 Rad2Deg는 $180/\pi$와 같습니다.

사실 보간에 관련된 함수들이 여럿 있지만, 이 부분은 서드파티 플러그인에서 지원하는 기능이 훨씬 다양하고 직관적이므로 다른 포스팅에서 그 원리와 함수들을 살펴보도록 하겠습니다.

수학으로 곡선을 그려보기 Part.1 [Hermite Curve]

공대생 오르카 — Sat, 09 Jun 2018 14:05:27 +0900

학교에서 들었던 컴퓨터 그래픽스 수업은 정말 지루했습니다... (지금까지 대학교생활에서 가장 재미없던 강의로 손에 꼽을 듯) 그래도 그중에서 재미있었던 파트를 꼽자면 <좌표계 변환>과 <커브>를 고를 수 있을 것 같습니다. 좌표계 변환은 이다음에 알아보기로 하고 지금은 <커브>에 관련해서 정리해보려 합니다.

수학적인 곡선

곡선은 수학적으로 어떻게 표현할 수 있을까요? 꺼무위키를 인용해 보면 다음과 같습니다.

...
좀 더 엄밀하게 말하자면 연속적인 순서쌍의 집합이나 선으로 동형사상이 있는 위상 공간 정도일 것이다.

조금 더 이해하기 쉽게 우리에게 친숙한 xy-평면인 $R^{2}$ 공간으로 생각한다면, 평면 위의 곡선은 어떠한 연속함수 $\varphi:\left[0,1\right]\to R^2$가 있어서 $S=\left\{\left(x,y\right)\in R^{2}\big|\left(x,y\right)\in\varphi\left(\left[0,1\right]\right)\right\}$의 형태로 나타내어지는 순서쌍의 집합으로 나타낼 수 있겠다.[1]
...
- 출처 : 나무위키

이렇게 된다면, 어떤 선을 그리고 그것을 연속함수로 표현할 수 있다면, 곡선을 그렸다고 말할 수 있을 것입니다.

곡선을 표현하기 위해서는 연속함수를 작성하면 된다는 것을 알았습니다. 그렇다면 어떻게 원하는 곡선을 표현할 수 있는 연속함수를 매번 찾을 수 있을까요? 사람들은 이런 문제를 해결하기 위해 여러 가지 방법론을 연구하고 만들어 왔습니다.

곡선의 표현

유한한 길이의 곡선을 만든다고 가정을 해보면, 두 점 사이를 어떻게 연속적으로 채워 넣을 것인지 고민해보면 됩니다. 여기서 연속적으로 채워 넣는 행위는 크게 보간(Interpolation)과 근사(Approximation)로 나뉘게됩니다. 보간의 특징은 주어진 점을 통과하는 곡선을 그리게 된다는 것이고, 근사는 양 끝점(시작점과 마지막점)을 제외한 점을 통과하지 않는다는 특징이 있습니다. 이번 포스팅을 통해 여러 가지 곡선의 표현방법을 공부해볼 것입니다.

바로 방법론에 들어가기 전에 몇가지 알아 두어야하는 요소들이 있습니다. 바로, 지역성(Locality)과 연속성(Continuity)입니다. 먼저 지역성을 살펴봅시다.

지역성

곡선 표현에서 지역성이란, 제어점을 움직일 때 다른 구간에 미치는 영향력이라고 보면 됩니다. 우리는 제어점을 조절하여 원하는 곡선을 표현하게 됩니다. 편집할 때 다른 구간에 영향을 적게 주어야 편집하기 편하겠죠? 이 영향력이 적을수록 좋다고 말하고, 국부제어가 된다고 하며 지역성(Locality)가 높다고 말합니다. 일반적으로 차수가 높은 다항식을 이용하면 지역성이 떨어지기 때문에 3차 다항식을 사용하는 것이 일반적입니다.

연속성

수학에서의 연속성은 "부드러운 정도"를 나타낸다고 생각하면 편합니다. 곡선 표현에서도 마찬가지이며 부드러움의 종류에 따라 연속성을 분류하여 표현하고 있습니다. 이 분류에 따라서 곡선의 수학적인 특징들을 알 수 있게 됩니다. 대략적인 분류는 다음과 같습니다.

$C^0$ 연속 : 두 곡선이 단순히 연결, $G^0$ 연속과 닮음
$C^1$ 연속 : 접선벡터(Tangent Vector)의 방향과 크기가 일치
$C^2$ 연속 : 양쪽 곡선의 곡률이 동일, 1차 및 2차 도함수가 동일

$C^n$ 연속 이외에도 $G^n$연속도 있지만 일단 $C^n$ 연속까지만 설명하도록 하고 본격적으로 곡선을 다루어봅시다.

곡선을 배우기 시작하면 가장 먼저 배우는 곡선이 에르밋 곡선과 베지어 곡선일 것입니다. 두 곡선은 보간과 근사를 대표하는 가장 기본적인 곡선 표현 방법입니다.

에르밋 곡선

에르밋 곡선은 두 점과 두 개의 벡터를 통해 나타냅니다. 또한, 위에서 설명한 지역성 이슈와 $C^2$ 연속을 만족하기 위해서 3차 곡선을 통해 표현합니다.

$P(u) = a_0 + a_1 u + a_2 u^2 + a_3 u^3$

위 식은 $a_0, a_1, a_2, a_3$라는 벡터들을 조절해서 곡선을 그릴 수 있지만, 특정 변수를 조정한다고 해서 어떤 모양으로 변화할지 예측하기 힘듭니다. 즉 표현은 할 수 있지만, 우리가 직관적으로 다루기 어렵습니다.

또한, 에르밋 곡선은 두 개의 점과 두 개의 벡터를 통해 나타낸다고 했습니다. 그 때문에 다음과 같이 변형하여 사용하게 됩니다.

$\begin{array}{} P(0) &=& P_0 &=& a_0 \\ P(1) &=& P_1 &=& a_0 + a_1 + a_2 + a_3 \\P^\prime(0) &=& {P^\prime}_0 &=& a_1 \\P^\prime(1) &=& {P^\prime}_1 &=& a_1 + 2a_2 + 3a_3 \end{array}$

함수와 도함수에 0과 1을 넣어 계수들만 뽑아냈습니다. 위 식을 각 계수들에 대해서 풀어보면

$\begin{array}{} a_0&=&{P_0}\\ a_1&=&{P_1}\\a_2&=&-3{P_0}+3{P_1}-2{{P^\prime}_0}-{{P^\prime}_1}\\a_3&=&2{P_0}-2{P_1}+{{P^\prime}_0}-{{P^\prime}_1}\end{array}$

이 식을 이용해 식을 풀어쓰고 Matrix form으로 만들면 다음과 같습니다.

$\begin{array}{} P(u) &=& a_0 + a_1 u + a_2 u^2 + a_3 u^3 \\ &=& {P_0} + {P_1}u + (-3{P_0}+3{P_1}-2{{P^\prime}_0}-{{P^\prime}_1}){u^2} + (2{P_0}-2{P_1}+{{P^\prime}_0}-{{P^\prime}_1}){u^3}\\ &=& (1-3{u^2}+2{u^2}){P_0} + (3{u^2}-2{u^3}){P_1} + (u-2{u^2}+{u^3}){{P^\prime}_0} + (-{u^2}+{u^3}){{P^\prime}_1} \\ &=& \begin{bmatrix} 1 - 3{u^2} + 2{u^2} & 3{u^2} - 2{u^3} & u - 2{u^2} + {u^3} & -{u^2} + {u^3} \end{bmatrix} \begin{bmatrix} P_0 \\ P_1 \\ {{P^\prime}_0} \\ {{P^\prime}_1} \end{bmatrix} \\ &=& \begin{bmatrix}u^3 & u^2 & u^1 & 1 \end{bmatrix} \begin{bmatrix} 2 & -2 & 1 & 1 \\ -3 & 3 & -2 & -1 \\ 0 & 0 & 1 & 0 \\ 1 & 0 & 0 & 0 \end{bmatrix} \begin{bmatrix} P_0 \\ P_1 \\ {{P^\prime}_0} \\ {{P^\prime}_1} \end{bmatrix} \end{array}$

수식이 장황했지만, 결과적으로 행렬 3개를 얻었습니다. u의 n차들로 이루어진 행렬, 상수들로 이루어진 4 by 4 행렬 그리고 $P_0, P_1, {{P^\prime}_0}, {{P^\prime}_1}$로 이루어진 행렬이 있습니다. 이 행렬들의 곱으로 곡선의 함수를 표현했습니다.

$u$는 결국 $0 \le u \le 1$이고 우리가 채워 넣어야 할 두 점 사이를 의미합니다. 상수들의 행렬은 조절할 수도 필요도 없겠죠. 그렇다면 우리는 $P_0, P_1, {{P^\prime}_0}, {{P^\prime}_1}$로 이루어진 행렬을 조절해 $P(u)$를 조절할 수 있게 되었습니다.

각각의 변수를 살펴보면 $P_0, P_1$는 양 끝 점이고, ${{P^\prime}_0}, {{P^\prime}_1}$는 각각의 접선 벡터를 의미하므로 $P_0, P_1, {{P^\prime}_0}, {{P^\prime}_1}$를 가지고 3차 곡선을 만들 수 있게 되는 것입니다!

에르밋 커브를 순차적으로 만들어서 아래처럼 더 많은 Segment를 줄 수도 있습니다.

사전 설명이 좀 많았기 때문에 이번 파트는 여기까지 하도록 하겠습니다. 다음에는 근사를 이용해 곡선을 그리는 베지어 커브와 그 단점들을 극복하는 곡선들을 정리해 보도록 하겠습니다.

예능 자막의 재구성 - 무한도전편 [형이 왜 거기서]

공대생 오르카 — Tue, 03 Apr 2018 04:18:39 +0900

윈도우 데스크탑에 용량이 좀 부족해서 이리저리 폴더를 정리하다가 옛날에 사용했던 자막 파일들이 눈에 들어와서 포스팅을 새롭게 해보려 합니다. 포스팅을 안한 두세가지 정도의 자막 템플릿이 있는 것 같은데 레이어 좀 다듬는 데 시간이 걸릴 것 같습니다. 일단 가장 추가 변경 없이 사용할 수 있는 '형이 왜 거기서 나와…? 재구성해보도록 합시다.

살펴보기

'형이 왜 거기서 나와...?' 자막을 살펴보면 핑크색 계열의 컬러와 꽃, Sparkle 정도의 요소들을 조합해서 만든 폰트라는 것을 알 수 있다. 생각보다 훨씬 간단하게 제작할 수 있는 자막입니다.

준비물

준비물을 정리해서 또 파일로 올리겠지만 위에서 언급했던 요소들을 적당히 구글링으로 구해서 사용하면 될 것 같습니다.

자막 재구성

1. 먼저 '형이 왜 거기서 나와...?' 텍스트를 작성한다.
- '형'과 '거기서'가 비슷한 효과가 들어가고 '이 왜'와 '나와...?'가 비슷한 효과를 가지니 각각 따로 분리해서 제작하도록 합시다. (이텔릭, 바탕체가 얇아 1px 획을 추가로 줌)

2. 텍스트의 획, 그라데이션, 외부 광선을 넣어준다.
- 획 : 2px, #4f0243
- 외부광선 : 5px, #ff00cc
- 그라데이션 오버레이 : 눈대중... >_<;;

3. 꽃과 Sparkle을 구해주자
- 적당하게 구글링을 해서 원하는 꽃을 찾거나 첨부된 PSD에 있는 파일을 쓰면됩니다.

짜잔!

다시 정리하면서 느낀거지만 어썸하게 쉽게 만들 수 있는 자막 중 하나인것 같습니다... 포스팅하기도 민망하네... 여튼 완성본은 아래 PSD에 포함되어 있습니다. 사용법은 대략 '뜬금없는 인물이 등장했을 때' 사용하면 됩니다. 자세한 상황과 응용법은 꺼무위키를 참고하는게 좋을 것 같습니다.

invalid-file

Javascript 정규식(Regex) 분석기

공대생 오르카 — Tue, 03 Apr 2018 02:53:11 +0900

최근 플러그인이나 툴을 만들때 사용자가 입력한 string을 일정 규칙에 따라 파싱할 일이 생겨서 정규식에 대해 좀 뒤적거려봤다.

정규식에 익숙하지 않다면 정규식을 활용한 소스코드를 읽고 이해하기는 힘들 겠지만, 정규식을 알고 있다면 작성해야하는 소스코드라인이 확 줄어버리기 때문에 대량의 문자열을 처리하는 웹이나 데이터 사이언스 분야에서는 필수가 아닐까 싶다.

하지만, 가독성만큼은 거의... 멸망에 가깝다고할 수 있다. 완벽하게 익혀서 술술 읽을 수 있는 것이 아니라면 대략 어떤 형태인지 주석이라고 달아두는 것이 유지 보수가 편할 것이라고 생각한다. 그러나 이번에 다른 오픈소스나 Gist를 좀 뒤적거리면서 느낀건.... 그렇게 주석을 써둔 사람이 없다는 거다.

그래서 (1)정규식이 아직 익숙하지 않고, 내가 아닌 누군가가 작성해둔 (2)정규식을 좀 더 편리하게 분석해서 (3)시각화해볼 수 있는 툴을 몇가지 소개해볼까한다.

Regexper

가장 인상적이었던 툴이다. Javascript 기준의 regex 구문을 집어 넣으면 아래와 같이 Flow 형식으로 그림을 그려 표현해준다. 가장 시각적으로 확인하기 쉬웠던 분석 툴이다. SVG/PNG 파일을 다운받거나 링크를 걸수도 있어 블로그나 문서에 가져다 사용하기도 편리해보인다.

링크

Regexr

이 툴은 분석기보다는 정규식을 학습하기 좋은 사이트이다. Expression에 정규식을 작성하면 Text에 작성된 내용에서 정규식과 Match되는 문자열에 하이라이트가 생긴다. 정규식 문법을 하나하나 작성해보면서 어떤식으로 적용되는지 눈으로 확인한다면 빠르게 정규식을 익힐 수 있을 것이다.

GDC18 기념 무료 게임 사운드 30GB 모음집

공대생 오르카 — Mon, 26 Mar 2018 15:40:32 +0900

다운로드 : https://goo.gl/nDyRgX

올해 GDC18에서도 SONNISS에서 무료로 30GB 상당의 사운드 파일을 배포하고 있다. 다운로드 링크와 드랍 박스, 구글 드라이브, Torrent로도 배포하고 있으니 저장공간이 여유가 있다면 쟁여두고 찬찬히 살펴보는 것도 좋을것 같다.

매년 GDC 마다 이렇게 30GB씩 배포하는데 그동안 받았던 것들도 정리해 놔야 될 것 같다.

// 뭔가 길게 쓸까 했다가 작년이랑 같은 내용이 될 것같아 이만 생략!

[번역] 유니티의 예약 폴더들이 가지고 있는 기능들

공대생 오르카 — Sun, 18 Mar 2018 00:47:34 +0900

원문: http://wiki.unity3d.com/index.php/Special_Folder_Names_in_your_Assets_Folder

유니티 에셋 폴더의 예약된 이름들 유니티에서 몇몇 폴더 이름은 특별한 속성을 가지고 있다.

숨겨진 폴더들 - 점(.)으로 시작하는 폴더(ex. “.UnitTests/”, “.svn/”)는 유니티에 의해 무시된다. 이 폴더에 들어 있는 어떠한 에셋도 임포트되지 않으면 어떠한 스크립트도 컴파일되지 않는다. 또한 프로젝트 뷰에서도 보이지 않는다.

1. Standard Assets

이 폴더에 있는 스크립트들은 가장 먼저 컴파일된다. 그로므로 스크립트를 Standard Assets 폴더에 두는 것은 C# 스크립트가 .js 스크립트에 접근할 수 있게 하거나 또는 .js 스크립트가 C# 스크립트에 접근할 수 있게 하기를 위한 한 방법이다. (언어에 따라 Assembly-CSharp-firstpass, Assembly-UnityScript-firstpass, Assembly-Boo-firstpass 중의 하나로 출력된다.)

2. Pro Standard Assets

Standard Assets 폴더와 같지만 Pro 버전의 Unity 에서만 의미를 가지는 폴더이다. 여기에 있는 에셋들은 Render Texture나 Screen-space 효과 등과 같은 Pro-only 기능에서만 사용된다는 것을 의미한다.

3. Editor

Editor 폴더는 작성한 스크립트가 유니티 에디터 스크립팅 API에 접근할 수 있도록 허가해주는 특별한 폴더 이름이다. 만약 스크립트가 UnityEditor 네임스페이스의 클래스나 기능을 사용한다면, Editor라는 폴더 안에 위치해야 한다.

*참고 : 만약 UnityEditor 네임스페이스에 있는 기능을 일부에서 사용했지만 컴파일했을 때 해당 기능을 제외하고 컴파일하고 싶다면 전처리사를 이용하여 UnityEditor와 관련된 라인들을 제외하고 컴파일할 수도 있다.

Editor 폴더 안의 스크립트들을 게임 빌드에는 포함되지 않을 것이다. 오직 유니티 에디터에서만 사용된다. 프로젝트에 여러개의 Editor 폴더가 존재해도 된다.

* 주의: 특수 폴더에 위치하지 않은 Editor 폴더는 프로젝트 어디에서 위치/포함 될 수 있다. 하지만 “Standard Assets”, “Pro Standard Assets”, “Plugins” 안에 위치할 경우, 이 폴더들의 직접적인 자식이어야 한다. 그렇지 않으면 정상적으로 처리되지 않는다. 예를 들어 “My Entension/Scripts/Editor”는 OK이다. 하지만 특수 폴더에 위치할 경우 반드시 ‘Standard Assets/Editor/MyExtension/Scripts”, 또는 “Pro Standard Assets/Editor/My Extension/Scripts”, 또는 “Plugins/Editor/My Extension/Scripts”이어야 한다.

4. Plugins

"Plugin” 폴더는 스크립트에서 접근하기를 원하는 네이티브 플러그인들이 위치하는 곳이다. 이것들은 자동으로 빌드에 포함될 것이다. 이 폴더는 어떠한 다른 폴더 안에 들어가 있으면 안된다. (Assets 폴더 최상위에 위치해야 한다)

Windows에서는 네이티브 플러그인들이 .dll 파일들로 존재한다. Mac OS X에서는 .bundle 파일들로 존재한다. Linux에서는 .so 파일들로 존재한다. Standard Assets 폴더와 같이 이 곳의 스크립트들은 먼저 컴파일되며, Plugins 폴더 밖의 스크립트(어떠한 언어라도)에서 접근이 가능하다.

5. Resources

Resources 폴더는 스크립트에서 일반적인 직접 참조하는 대신 파일 경로나 이름으로 에셋들에 접근할 수 있게 해주는 특수 폴더이다. 이러한 이유로 사용할 때 주의 사항이 있다. Resources 폴더의 모든 에들은 비록 사용되지 않더라도 빌드에 포함된다. 그 이유는 이 에셋들은 스크립트에 의해 사용되기 때문에 유니티는 리소스 기반의 에셋들이 사용되는지 사용되지 않는지 판단할 수 없기 때문이다. - 참고

프로젝트에 복수의 Resources 폴더를 가질 수 있다. 한 Resources 폴더의 어떠한 이름을 가지는 에셋을 넣어두고 또 다른 Resources 폴더에 같은 이름을 가지는 에셋을 넣어두는 것은 추천하지 않는다.

게임이 한번 빌드되고 나면 모든 Resources 폴더의 모든 에셋들이 에셋을 위한 아카이브로 패킹된다. 이는 기술적으로 최종 빌드에서는 더이상 Resources 폴더가 존재하지 않는 다는 것을 의미한다. 비록 코드에서 이들을 마치 프로젝트에 존재하던 경로를 통해 접근하긴 하지만 말이다. 에셋들이 MonoBehavior 스크립트의 변수로 접근될 경우, 이 에셋들은 MonoBehaviour 스크립트가 Instantiate될 때 (즉, 게임 오브젝트나 프리팹이 씬에 존재하게 될 때) 메모리에 한번에 로드 된다는 것을 주목하자.

참고 관련글 : 유니티의 Resources Folder에 관하여

만약 에셋이 너무 크고 이것이 메모리에 로딩될 때 이에 대한 더 많은 제어를 하고 싶다면 이렇게 동작하기를 원치 않을 것이다. 그럴 경우 큰 에셋들을 Resources 폴더에 넣고 Resources.Load를 통해 불러오는 것을 고려해보자. 에셋이 더 이상 사용되지 않을 경우에는 오브젝트에 대해 Object.Destory를 호출한 후 Resources.UnloadUnusedAsset를 호출함으로써 메모리를 해제할 수 있다.

6. StreamingAssets

이곳에 위치한 파일들은 어떠한 변경도 없이 빌드 폴더에 복사된다 (최종 빌드 파일에 포함되어야 하는 모바일과 웹빌드는 제외). 이들의 경로는 플랫폼 마다 다를 수 있으며 Application.streamingAssetsPath()를 통해 접근할 수 있다.

* 참고 : 유니티는 생각보다 버그가 좀 많다. 예를 들어 비디오 클립을 사용할 때 Gradle을 이용하여 빌드하게된다면 인코딩-디코딩 과정에 문제가 있어 클립이 망가져 버린다. 이럴 때 StreamingAssets 폴더를 이용하면 압축을 거치지 않기 때문에 온전한 파일을 얻을 수 있다.

7. Gizmos

Gizmos.DrawIcon에 사용되는 모든 텍스쳐/아이콘들을 가지는 폴더. 이 폴더의 텍스쳐 에셋들은 이름으로 불려질 수 잇으며, 에디터에서 기즈모로써 화면에 그려진다.

8. WebPlayerTemplates

웹 빌드에 사용되는 디폴트 웹페이지를 교체하기 위해 사용된다. 여기에 위치하는 스크립트들은 전혀 컴파일 되지 않을 것이다. 이 폴더는 Assets 폴더의 최상위에 위치해야 한다.

[번역] 유니티의 Resource Folder에 관하여

공대생 오르카 — Wed, 14 Mar 2018 22:44:41 +0900

The Resource folder

이건 Unity5에서 에셋, 리소스 그리고 리소스 관리에 관한 아티클 스리즈의 세 번째 챕터입니다.

이 챕터에서는 리소스 시스템에 관해 설명합니다. 리소스 시스템은 개발자가 "Resource"라는 이름의 하나 이상의 폴더에 Asset을 저장하고 Resource API를 사용하여 런타임에 이러한 Asset에서 개체를 로드하거나 언로드 합니다..

2.1 Resource System에 대한 모범 사례

쓰지마세요!

이렇게 말하는데에는 몇가지 이유가 있습니다.

1. 리소스 폴더를 사용하면 세분화된 메모리 관리가 더욱 어려워집니다.

2. 리소스 폴더를 부적절하게 사용하면 애플리케이션 시작 시간과 빌드 길이가 증가합니다. (리소스 폴더의 수가 증가함에 따라 이러한 폴더 내의 Asset 관리가 매우 어려워집니다.)

3. 리소스 시스템은 사용자 정의 컨텐츠를 특정 플랫폼으로 제공하는 프로젝트의 기능을 저하시키고, 추가 컨텐츠 업그레이드 가능성을 제거합니다. (AssetBundleVariants는 디바이스 별로 콘텐츠를 조정하기 위한 Unity의 기본 도구입니다.)

2.2. Resource System의 적절한 사용

좋은 개발 관행을 저해하지 않고 자원 시스템이 도움이 될 수 있는 두가지 사용 사례가 있습니다.

1. 리소스 폴더는 간편하기 때문에 빠른 프로토 타입 제작이 가능한 훌륭한 시스템입니다. 하지만 프로젝트가 전체 프로덕션으로 전환되면 리소스 폴더의 사용이 제거되어야 합니다.

2. 리소스 폴더는 다음과 같은 경우 사소한 경우에 유용할 수 있습니다.

- 프로젝트의 수명이 다할 때까지 일반적으로 필요함

- 메모리 집약적이지 않음

- 패치 적용이 쉽지 않거나 플랫폼이나 장치에 따라 달라지지 않음

이 두번째 사례의 예로는 Prefab을 호스팅 하는 데 사용되는 MonobeviourSingletons또는 FacebookAppID와 같은 타사 구성 데이터를 포함하는 ScriptableOjects가 있습니다.

2.3 Resources 직렬화

프로젝트가 생성될 때 "Resource"라는 이름의 모든 폴더에 있는 Assets 및 Object가 단일 연속 파일로 결합됩니다. 이 파일은 AssetBundle과 유사하게 메타 데이터 및 색인 정보도 포함합니다. AssetBundle설명서에 설명되는 이 색인은 지정된 개체의 이름을 적절한 파일 GUID및 로컬 오프셋 ID로 확인하는 데 사용되는 직렬화된 룩업 트리(Serialized Lookup Tree)를 포함합니다. 이 트리는 특정 바이트에서도 사용됩니다.

대부분의 플랫폼에서 Lookup data의 구조는 균형잡힌 탐색 트리(Balanced Search Tree)로 프로그래머라면 알고 있듯이, 이 트리의 복잡도는 O(N*logN)입니다. 이로인해 리소스 폴더의 개체 수가 증가함에 따라 인덱스 로드 시간도 선형 이상으로 더욱 길어집니다. (보라색이 N*logN 그래프)

이 작업은 스킵할 수 없으며 응용 프로그램 시작 시 초기 스플래시 화면이 표시된 상태에서 수행됩니다. 실제로는 리소스 폴더에 포함된 대부분의 개체가 애플리케이션의 첫번째 장면에 로드할 필요가 거의 없음에도 불구하고 10,000개의 자산이 포함된 리소스 시스템을 초기화하면 로우 엔드 모바일 장치에서 몇초 동안 소비됩니다.

요약

무턱대고 리소스폴더에 많은 에셋과 오브젝트를 때려박고 사용하다보면, 리소스 폴더는 직렬화해서 관리하기 때문에 필요하지 않은 타이밍에도 직렬화된 리소스들을 전부 로드해서 사용하게 되고, 이때문에 원치않는 타이밍에 필요없는 리소스도 메모리에 올려 관리하는 비효율성을 보여줄 수 있다.. 거기에 리소스 서치 알고리즘도 N*logN이기 때문에 갯수가 많으면 많을 수록 느려지게된다. 라는 이야기이다.

하지만 또 무턱대고 Resources System이 구리다! 라는 것이 아니라 유용하게 사용할 수 있는 몇가지 상황들이 있으니 잘 걸러서 유용한 부분에서만 사용하고, 자신의 프로젝트 볼륨을 생각해서 최대한 AssetBundle을 사용하는 방향으로 구조를 잡으면 될 것 같다.

Unity VideoPlayer가 Gradle 빌드에서 작동하지 않는 이슈

공대생 오르카 — Mon, 12 Feb 2018 15:12:45 +0900

요즘 어느 정도 볼륨이 있는 게임을 하다 보면 AssetBundle을 다운받는 동안 해당 게임 관련 동영상을 틀어준다거나 튜토리얼, 세계관 같은 것들을 영상으로 틀어주는 경우가 가끔 있다. 그 외에도 학부 프로젝트를 하다보면 유니티 안에서 동영상으로 대략 때우거나 VR 관련 영상을 재생 해야 하는 경우가 생기는데 이때 유니티 내장 Video Player를 사용하곤 한다.

회사에서도 라이브 운영 중 바뀐 시스템에 대해서 간단하게 소개하기 위해 Video Player를 사용하게 되었는데 에디터에서는 잘 작동했으나 디바이스에서는 어째 잘 작동하지 않았다. 에디터에서는 분명히 잘 작동했기 때문에 디바이스의 로그를 찍어보기로 했다. 결과는?

AndroidVideoMedia OpenExtractor: file is compressed, not supported

라는 에러를 던지고 있었다. 빌드를 하면서 압축이된 영상이 제대로 풀리지 않는 것인가 해서 세팅의 차이를 알아보기 위해 새로 프로젝트를 만들어서 VideoPlayer만 넣고 빌드를 해보았다. 결과는 어느 PlayerSetting을 바꾸어 봐도 성공적.... (이게...아닌데...)

일단 세팅을 킵해두고, AssetBundle을 이용하면 해결될까 싶어 돌려봤지만 Unity 로드맵을 보았을 때 아직 지원하지 않는 기능이었다. 결과적으로 이것저것 삽질해본 결과 Gradle 빌드때 사용하는 압축이 문제인 것으로 결론 났다.

해결방법은 생각보다 간단했는데 Gradle은 건들지 않고, 재생할 비디오 클립을 StreamingAssets에 집어넣은 뒤 Unity Player에 "Application.streamingAssetsPath"을 이용한 경로를 넘겨서 로드하는 방법을 사용하면 된다.

Unity에서 iPhone X를 대응하는 간편한 방법

공대생 오르카 — Fri, 05 Jan 2018 01:19:17 +0900

시작하면서

얼마 전까지 iOS에서 가장 핫한 이슈였으며 골칫거리였던 주제는 iPhone X의 탈모 디자인이었다. 각진 사각형이거나 살짝 라운드가 들어간 기존의 안드로이드나 iOS의 화면과는 다르게 화면 상단 부분에 1)M자 탈모처럼 생긴 검은 영역이 생겼기 때문이다. 탈모도 문제였지만 2)물리 홈버튼을 제거하면서 생겨난 홈바가 터치 화면의 일정 영역을 차지했고, 이 영역 또한 고려해 프로그램을 작성해야 했다.

우리는 이 두 개의 요소를 고려해 대응할 필요가 있다. (그래야 피쳐드를 받...읍읍) 이런 대응은 일반적인 iOS 개발은 기존에 있었던 Auto layout 정책을 잘 따랐다면 쉽게 대응할 수 있다고는 한다.

하지만, 게임은 주로 상용화된 게임 엔진을 이용하여 제작하는 경우가 많기 때문에 빌드 사이에 트릭을 섞어 쓰거나 사용하는 엔진이 자동으로 잘 지원해주기를 기도해야 한다.

물론, 아무 것도 안하고 엔진에서 마법을 부려주는 일은 없다.

하지만 고맙게도 Unity 2017.2p3 이상부터는 적어도 편하게 iPhone X를 대응 할 수 있도록 도와주는 기능을 추가하였다. 여기서 추가된 기능을 통해 좀 더 간편하게 iPhone X를 지원하면서도 탈모 디자인이 적용된 모습을 에디터 내부에서 편하게 확인해볼 수 있는 플러그인을 제작해보았고 배웠던 것을 공유해보고자 한다.

Unity의 지원

Unity는 2017.2p3 버전부터 iPhone X를 지원할 수 있는 기능을 High level에서 지원한다. SafeArea라는 API인데 실행되고 있는 디바이스의 SafeArea 즉, 안전한 영역의 크기를 Rect 타입으로 반환받을 수 있다. (그 외에도 iOS.DeviceGeneration.iPhoneX를 통해 디바이스 필터링을 할 수 있다.)

Screen.SafeArea를 통해 얻어온 값으로 조절이 필요한 UGUI 영역을 조절하는 방법을 통해 보다 깔끔한 UI Layout으로 iPhone X를 지원할 수 있다. 코어 코드는 다음과 같다.

Screen.SafeArea는 Static이기 때문에 쉽게 값을 가져올 수 있고, 각각의 값들을 이용하여 조정할 UGUI RectTransform의 Anchor를 조정하게 된다. 따라서 안전 영역에 들어가야만 하는 UI들을 한데 묶고 Anchor Min Max를 조정하면 딱 알맞게 UI들을 안전 영역 안으로 집어넣을 수 있게 된다.

플러그인 소개

이런 기능들을 정리하고 또, 탈모가 적용된 모습을 빌드해서 확인하는 것보다 Editor에서 바로바로 확인해 볼 수 있으면 좋을 것 같아 관련 기능을 지원하는 플러그인을 제작하였다.

플러그인 : UnitySafeAreaControl ler

위 이미지처럼 플러그인을 통해 UI를 안전 영역 안으로 넣어 버림과 동시에 Editor에서도 탈모 모양을 확인해 볼 수 있다. 사용 방법을 간단하게 소개하면

1) 위 스크립트를 Canvas에 붙인다 (해당 캔버스 하위에 Notch와 Frame 리소스가 들어가니 참고!)
2) SafeArea가 업데이트될 타이밍을 선택한 뒤에
3) SafeArea에 들어가야할 UGUI의 묶음들을 리스트로 만들어 엘리먼트에 각각 붙인다. (순서는 상관 없다)
4) 원하는 Test Device Type을 선택하고 Show Safe-Area를 클릭하면

마치며

그 외에도 iOS.DeviceGeneration.iPhoneX 라는 Enum을 통해 디바이스 분기를 타서 직접 Anchor를 조절할 수도 있지만, 탈모가 꼭 iPhone X가 끝이라는 법이 없으니 일단 최대한 확장성 있게 대응하는 것이 좋을 것 같다. 모두 즐거운 코딩을!

iOS 빌드할 때 Your development team has reached the maximum number of registered iPhone devices. 문제

공대생 오르카 — Wed, 27 Dec 2017 23:26:26 +0900

2년 만에 핸드폰을 iPhone으로 교체했다. 요즘 iPhone X에 대응하게 해주면서 Editor 안에서 테스트를 해볼 수 있게 해주는 Unity 플러그인을 하나 제작 중이다. 제작을 어느정도 끝내고 당연하게도 iOS를 빌드 하는 순간 다음과 같은 매세지를 던졌다.

Your development team has reached the maximum number of registered iPhone devices.

해석할 필요도 없이 그냥 '네가 사용할 수 있는 iPhone 디바이스 개수를 초과했다' 정도이다. 그런데 나는 최근에 아이폰 빌드를 시도한 적도 없는데 이게 뭔 X소리인지... 게다가 Xcode 7 이후부터는 어느 정도 제약이 있지만, 무료로 iOS 빌드를 해서 디바이스에 넣어볼 수 있다고 알고 있는데 이상한 노릇이었다.

그래서 곧장 Apple Developer 사이트에 들어가 보았다. 지난번에 사용한 뒤로 시간이 좀 많이 지나서인지 UI가 좀 바뀌었고 다음과 같은 화면을 볼 수 있었다.

개발자 프로그램을 다시 살리라는 문구이다. 그렇다. 저번에 잠깐(?) 개발자 프로그램에 등록해서 사용한 적이 있는데 갱신을 하라는 것이다. 인터넷을 여러 둘러봤더니 나와 같은 증상을 겪는 사람들의 공통적인 특징이

개발자 프로그램에 가입하고 무료 계정에서 지원하는 디바이스 개수를 초과해서 사용하다가 중간에 프로그램이 해지되어 무료계정으로 전환 되었다.

라는 상황이 삼위일체 한다는 점이다.

...

그렇다.

개발자 계정이 해지되면 우리 착한 애플 행님덜이 기존에 등록했던 디바이스 정보를 다시 결제하기 전까지 날리지 않고 보관하고 있으신 것이다....

하... 해결 방법은 1)애플 개발자 센터에 이메일을 보내거나, 2)새로운 개발자 계정을 만들거나 다시 3)애플 개발자 프로그램에 재등록 하는 것인데... 그냥 나중에 등록해야겠다...

오늘의 교훈

애플 개발자 프로그램이 해지당하기 전에 갱신할 것이 아니면 정리를 해두는 편이 신상에 좋다. ~~(꼬우면 계속 결제하던가...)~~

Unity3d 스크린 캡쳐 후 Slack로 보내주는 Plugin 제작기

공대생 오르카 — Sun, 24 Dec 2017 16:54:17 +0900

작업을 하다 보면 Unity에서 세팅한 오브젝트나 씬이 실제 디바이스 위에서는 어떤 느낌으로 보일지 궁금해진다. 만들어진 아트 작업물을 Unity 에디터 위에 그대로 올렸다 하더라도 실제 디바이스 위에 결과물을 올려두면 에디터에서는 느끼지 못했던 느낌들이나 개선점이 있기 마련이다. 그 때문에 나는 작업 중간중간 스크린샷을 통해 그런 느낌들을 하나하나 체크해가면서 작업하고 있다.

실제로 이 작업은 크게 3-step으로 이루어진다.

1) 화면 캡쳐
2) 비율에 맞게 캡쳐본 자르기
3) 디바이스에 전송해서 느낌보기

정도일 것이다. 손이 빠른 아티스트라면 고민 없이 쓱싹 해치우고 올려보겠지만, 나는 편집에 그리 손이 빠른 편이 아니라 작업을 할 때마다 불편함을 느낄 수밖에 없었다. 자세히 보면 작업의 난이도가 단순하고, 프로세스가 명확해서 코드를 통해 쉽게 자동화할 수 있으리라 판단했고, 자신의 장점을 살려 Unity 플러그인으로 제작해보기로 했다.

1~2 Step : 화면 캡쳐 / 비율에 맞게 자르기

Unity에서 화면을 캡쳐하는 방법은 여러 가지가 있다. 카메라에 스크립트를 달아 캡쳐하는 방식도 있고 Unity에서 제공하는 화면 캡쳐 API를 사용할 수도 있다. 나는 에디터를 확장시켜서 플러그인용 윈도우를 하나 만들 것이고, 카메라가 2개이상 달려있는 경우도 있었기 때문에 Unity에서 제공하는 API를 사용하기로 했다. (사실 귀찮아서...)

Unity 2017에서는 API가 살짝 달라졌기 때문에 분기를 태워주어야 하지만 비교적 간단하게 Game Scene을 캡쳐할 수 있었습니다. 단점이 있다면 1) 속도가 생각보다 느린 편이고, 2) 화질이 실제 렌더링 된 것보다 좋지 못했습니다. Unity 내부에서 뭔가 다른 알고리즘으로 돌리나 봅니다.

코드를 통해 캡쳐하는 것이기 때문에 기존에 대략 캡쳐하고 비율에 맞게 잘라내기를 했던 작업이 불필요해졌습니다. :)

3 Step : 디바이스에 전송하기

실제 디바이스에 캡쳐한 사진을 보내는 방법은 여러 가지가 있지만, 그중에서 가장 Bot을 만들기 쉬운 방법으로 Slack을 택했습니다. Slack은 기본적으로 무료이고, Bot에 관련된 API를 비교적 쉽게 사용할 수 있기 때문에 선택했습니다.

이런 코드로 진행되는데 Slack은 Bot을 등록하고 Bot의 토큰과 필요한 정보들을 정해진 Url로 쏘는 과정이 필요하기 때문에 간단하게 Image만 업로드 가능한 Slack Helper를 제작했다.

Slack Helper는 위 코드와 같고, 읽어보면 알겠지만, WWW를 통해 원하는 정보를 착착 담아서 Url로 데이터를 쏘기 위해서는 일단 Slack에 Bot을 만들어 token을 가져와야한다. 방법은 이곳을 참조 (개발자라면 api 문서를 읽는 정도의 삽질은 필요하다고 생각)

Non-playmode에서 Coroutine

그런데 문제가 하나 있다. Slack API는 물론이고 Unity 캡쳐 API가 느리기 때문에 기다리는 동작에서 코루틴을 사용하게되는데 아는 사람은 알겠지만 일반적인 Coroutine은 Play 중이지 않으면 사용할 수 없다. 그래서 Coroutine을 Non-playmode에서 사용하기 위해 트릭을 사용하는데 이미 Asset Store에도 등록되어있다. 그냥 다운로드를 해서 사용하면 된다.

결과

플러그인은 깃허브에 공유하고 있고, 이곳에서 확인 가능하다.

기본적으로 Unity API를 사용하기 때문에 백업으로 저장될 곳의 파일 경로와 Slack bot의 token, 그리고 채널의 이름과 원한다면 코멘트도 한줄 작성할 수 있다. 작성이 끝나면 언제든지 카메라 모양의 버튼을 통해 캡쳐가 진행된다.

- 당연하겠지만 화면의 해상도가 높을 수록 캡쳐가 늦어진다.

Unity Android 블루투스 플러그인 제작 & 사용법

공대생 오르카 — Sun, 08 Oct 2017 17:39:34 +0900

지난번에 해커톤 때 사용하다 남은 아두이노를 이용하여 간단하게 DIY 할 수 있는 VR 컨트롤러를 제작해보았고, Unity와 연동해서 사용할 수 있도록 Bluetooth 플러그인을 제작했었다. 그런데 기록용으로 블로그에 글을 남겼었더니 생각보다 많은 사람(?)들이 질문을 남겨주었고, 돌이켜보니 내가 하던 프로젝트에 굉장히 의존적으로 제작되었기 때문에 다른 사람들이 코드를 가져다가 사용하기가 좀 불편했었다.

그래서 이번 길었던 연휴에 틈틈이 짬을 내서 다시 코드를 수정했고 기존에 Java 단에서 처리되었던 패킷 검사 기능들을 Unity C# 스크립트와 에디터 상에서 어느 정도 간단하게 컨트롤 할 수 있는 방식으로 개선되었다. (오래전에 만든 코드이고 그냥 훅~하고 짜서 주석이 없어서 그런지 코드가 엉망진창.... 읽는 데만 조금 시간이 걸렸다.) 이번 포스팅을 통해 어떤 방식으로 플러그인이 개선되었는지와 주로 질문이 나왔던 부분에 대해 설명하고, 사용법에 대해서 간단하게 설명하는 시간을 가지면 될 것 같다.

개선점

일단, 기존에는 $[32바이트 데이터]# 형태로 이루어져 있던 패킷 검사기를 Unity에서 유동적으로 조절할 수 있도록 개선되었다. $와 #대신 원하는 문자를 패킷의 시작과 끝을 표현하는 데 사용할 수 있고, 안에 들어가는 데이터의 길이도 조절할 수 있다. 또한, 비교적 간단하게 데이터를 구분할 수 있게 '\n'으로만 데이터를 구분하는 작업도 만들어 두었다. (사용법은 아래에서 설명) 덕분에 플러그인을 사용하는 사람이 입맛에 맞게 데이터를 분리하는 방법을 정할 수 있다.

자주나온 질문

일단,

첫 번째로 자주나온 질문인 오타 문제는 이번에 용어와 컨벤션을 통일하면서 해결했다.

두 번째는 보통 34바이트 규격으로 만들어진 패킷 때문에 발생한 문제들이었는데 개선 사항을 통해 더이상 문제가 될 것 같지는 않다.

세 번째로 BAUD RATE에 관련된 질문이었는데 이 설정값은 블루투스 모듈과 칩셋 사이에서 데이터를 얼마만큼의 주기로 가져가 뿌릴 것인지에 대한 설정이므로 유니티에서 신경쓸 것이 없다.

일단 개선사항을 통해서 대부분의 데이터 파싱 로직을 유니티로 끌어 올렸기 때문에 코드만 읽을 줄 안다면 쉽게 쉽게 사용할 수 있을 것같다.

사용법

일단, 사용법을 Github Readme에 작성해둘 것이다. (아마 이 포스팅이 좀 더 간단하게 작성될 예정)

데모씬의 하이러키 구조이다. 항상 있는 카메라의 자식으로 플러그인 오브젝트들을 끼워 넣었다. 기능들을 사용하고 싶다면 Bluetooth와 Model이 씬 위에 있으면 된다. 간단하게 $[2바이트]# 패킷 구조로 세팅해두어 사용했고 정수 2개를 받아 'X Axis'와 'Y Axis'에 각각 뿌려주고 Character를 해당 값의 속도를 가지도록 만들어준다. 조이스틱을 이용하면 캐릭터를 컨트롤 할 수 있는 구조로 되어있다.

먼저 패킷의 구조를 정해보자 BluetoothModel의 인스펙터를 살펴보면 다음과 같은데

'Is Packeted Data'라는 친구는 $[32바이트 데이터]#처럼 앞뒤 구분이 있게 전송되는 데이터인지 체크하는 부분이다. False로 세팅해두면 '\n'을 기준으로 데이터를 파싱한다.

'Packet Size'를 통해 'Start Char'와 'End Char'를 포함한 패킷의 길이를 설정할 수 있고, 시작과 끝을 구분할 수 있다. Mac Addresses는 주변 디바이스들의 정보를 보여준다. (아마 사용하는 일은 없을 것이다.)

이렇게 사용하고 원하는 부분에서 옵저버 패턴으로 모델을 구독하게되면 데이터가 파싱될 때마다 데이터를 넘겨주니 입맛대로 가공해서 View로 뿌려주면 된다.

FSM이 우리를 구원하리라

공대생 오르카 — Sun, 17 Sep 2017 19:19:33 +0900

게임 프로그래밍을 공부했다면, 혹은 CS를 2학년까지 수료했거나 이산수학같은 과목을 들었다면 FSM이라는 친구를 한번 쯤은 들어봤을 것이다. FSM은 무신교가 종교를 강요하고 다니는 사람을 비꼬기 위해 만든 날아다니는 스파게티 괴물(Flying Spaghetti Monster)라는 친구도 있지만 CS에서, 수학에서는 유한 상태 기계(Finite State Machine)이라는 친구이다.

앞으로 주변에있는 Sample 크기 이상의 게임을 만들때는 FSM이라는 개념을 알아두면 게임을 구성하고 진행하는데 많은 도움이 될 것이고, 이미 어느정도 만들어져있는 프로젝트에 참여하게된다면 이미 FSM을 적극적으로 활용하고 있는 경우가 많을 것이다. 때문에라도 FSM을 배우고 이것을 게임엔진에서 어떻게 구현할수있는 지를 익혀두면 많은 도움이 될 것이다. 실제로 병역 특례 면접을 보던 회사들중에 FSM에 대해서 알고 있냐는 질문을 많이 받았고, 지금 입사한 회사에서도 FSM을 적극적으로 이용하고 있다.

FSM이란 무엇인가?

유한 상태 기계는 유한한 갯수의 상태(State)를 가지고 있는 기계라는 의미로, 기계는 한 개의 상태만 유지할 수 있고 그 상태에 맞는 특별한 이벤트나 상황이 되었을 때 다른 상태로 전이하여 자신의 일을 수행하는 특징을 가진다. 수학적으로는 상태 하나 하나가 Node로 이루어져 있고, 상태와 상태 사이의 전이는 Edge로 이루어져있는 '그래프'의 모양을 띄게된다. 역시 말로하는 것보다는 그림으로 보는게 이해가 빠르므로 아래의 그림을 살펴보자

게임의 전체적인 그림을 FSM으로 나타낸 것이다. '시작 화면', '대기 화면', '인 게임'은 각각의 상태들이고 '게임 시작 버튼 Click', '던전 입장 버튼 Click', '사망', '클리어'는 각각의 상태가 전이되는 조건들을 나타낸 것이다. 큰 그림에서 게임에 필요한 상태들을 먼저 정의하고 그 상태들의 전이 조건들을 정해둔다면, 각 상태별로 진행해야하는 로직들이나 필요한 객체들을 차례차례 구현해나가면 된다.

FSM은 어떻게 만드나요?

여러가지 방법이 있을 수 있다. 기본적으로는 State 패턴이라는 친구로 상태를 만들고 전이조건들을 만들어 사용을 한다. 하지만 유니티에서는 Coroutine을 이용한 상태 조절을 사용하는 것같다. 코루틴 하나를 상태로 보고 Enum으로 정의해두었다가 Enum to String을 통하여 다른 코루틴으로 넘어갈 수 있게 만들어 마치 FSM이 작동하는 것처럼 보이게 할 수 있다. 실제로 코루틴을 설명하거나 강의 영상의 샘플들을 보면 코루틴으로 FSM을 만드는 예제가 여럿있다.

코루틴에 대해서 좀더 알아보고 싶거나 코루틴을 이용하여 어떻게 FSM을 만들 수 있는지는 아래에 있는 피피티를 통해한번 훑어볼 수 있다. FSM은 슬라이드 뒤 쪽 예시에서 살펴볼 수 있음 (이미 어느정도 지식이 있다면 넘어가도 좋음)

유니티 코루틴 깊이알고 재미있게 쓰기. from Lee Dustin

FSM이 커지면 관리는?

하지만, 코드로만 FSM을 제작하고 유지보수하고 확장하려고하면 여러가지 문제가 있을 수 있다. 단편적으로 상태와 전이 조건이 많이질 수록 한번에 전체적인 FSM의 형태를 떠올리기가 쉽지 않다. 그래프의 형태를 코드로만 확인하려하기 때문에 당연한 일이다. 그럼 좀 더 편리한 방법은 없을까?

FSM은 오래 전부터 게임프로그래밍에 사용해왔기 때문에 도움을 줄 여러가지 툴이 있다. 대표적으로 유니티의 Playmaker나 nodeCanvas같은 유료플러그인 들이다. 이 플러그인들은 FSM을 눈으로 볼 수 있는 그래프 형태로 만들고 안에서 돌아가는 로직들 까지도 노드를 이용해서 제작할 수 있게 만들어져있다. FSM을 코드뿐만 아니라 그래프의 형태로 눈에 익히고 사용할 수 있도록 도와주는 것이다.

위 두가지 툴은 현업에서도 사용할 수 있을 만큼 잘 만들어진 플러그인이기 때문에 가격도 조금 있는 편이다. 하지만 확실하게 FSM 하나가 어떤 플로우를 가지고 동작하는지 눈으로 파학하기 편하고 그만큼 코드를 작성하는데 편리한 점이 많다. 물론 꼼꼼한 주석과 문서화를 통해 이런 툴을 사용하지 않고도 FSM을 만들고 관리할 수는 있지만 세상은 돈을 지불한 만큼 편해지기는 한다.

마치며

이번 디자인 패턴은 원래 State 패턴에 대해서 다루려했지만, Unity는 Coroutine이라는 개념과 잘 만들어져있는 여러 플러그인이 있기 때문에 State 패턴을 직접 코드로 만져보는 것이 아니라 FSM이라는 친구가 있다는 점과 대략 어떻게 동작하는 개념이며, 코드로는 유니티에서 코루틴과 Enum을 사용하여 제작하고 이 것이 불편하다면 이미 잘 만들어져있는 플러그인이 있다는 것을 아는 것으로 충분하다고 생각하여 대략적인 개념만 소개했다.

요약하면

0. FSM이라는 친구는 게임을 만들면서 보게될 친구이고, ~~ 이러한 개념으로 이루어져있다
1. 이 친구는 State 패턴을 사용하거나 유니티에서 Coroutine + Enum을 통해 구현하고 있다
2. 이 것이 불편하면 유니티에는 FSM을 간단하게 작성할 수 있는 툴이 많다

정도일 것 같다.

UniRx 활용하기(3) - 변수의 변화를 관찰하자

공대생 오르카 — Sat, 05 Aug 2017 12:33:00 +0900

UniRx에서는 여러가지 애플리케이션 패턴 중에서도 MV(R)P 패턴을 권장한다. 다른 서드파티 라이브러리를 통하여 MVVM을 활용하는 방법도 있는 것같지만 일단 공식 Github Readme에서 추천하는 패턴은 MV(R)P이다. 안드로이드나 WPF 개발에 대해서 다루어보았다면 MVP패턴과 다른 패턴들에 대해서 들어보았을 것이다. 기본적인 지식은 Realm의 기술 블로그에서 알아 볼 수 있다.

MV(R)P?!

위 그림은 공식 Github Readme에 사용된 그림이다. 게임을 UI를 통해 유저와 게임을 이어주고 게임에 관련된 정보들(점수, 적, 아이템 등)을 컨트롤하는 과정이라고 생각하면 View를 통해 Input을 받고, Model 값을 표시해 줄 수 있다. 그 중간에서 Presenter는 View와 Model을 구독하고 적절한 로직을 처리하여 View와 Model을 업데이트하는 역할을 한다.

음... 그럼 Presenter는 View는 uGUI와 Object들에 대한 이벤트를 구독해서 처리한다고 치고, Model과는 어떻게 상호작용을 할 수 있을까? UniRx는 이 부분을 원활하게 처리하기 위해 ReactiveProperty라는 것을 제공한다.

ReactiveProperty?!

직역해서 보면 '반응하는 프로퍼티(속성)'정도일까? 말 그대로 ReactiveProperty는 값이 변화할 때마다 스트림에 메시지를 전달하게 된다. 같은 종류의 Model들을 모아두는 클래스를 하나 만들고 해당 객체에 접근하여 ReactiveProperty에 접근하여 구독하게 되면 그 값이 변할 때마다 알 수 있게 되는 것이다.

정리해보면 View는 일어나는 이벤트에 대해서 구독하고 Model은 값의 변화를 감지하는 구독을 하게 되는 것이다. 보통 View에서 이벤트를 감지하고 적절한 로직을 수행한 뒤 Model을 업데이트해야 한다면 업데이트하고, Model은 변화가 일어났으니 Model 구독 로직에서 View를 업데이트하는 행동을 취해주면 하나의 사이클이 완성된다. 간단한 예제 코드를 보도록 하자.

간단하게 축약한 예제이기 때문에 조금만 읽어보면 어떻게 동작하는지 보일 거라고 생각한다. Click Event전달과 Model 변경 알림 부분을 분리시켜 좀 더 느슨하게 연결하였고, Text에 바인드는 자주 사용하는 패턴이기 때문에 별도의 오퍼레이터로 빼둔 것을 알 수 있다.

활용은 어떻게?!

예제와 같이 활용하면 된다. Generic을 지원하지만, 대부분의 Game data는 string, float, int일 것이니 기본 타입들만 사용해서도 충분히 Model을 제작 가능하다. 저장해야하는 Model들이 많아지면 가독성이 떨어지거나 대량의 비슷한 ReactiveProperty들을 반복 구독해야 하는 일이 생기지 않을까? 라고 생각할 수도 있겠지만, UniRx는 Collection, Dictionary타입도 ReactiveDictionary<T>, ReactiveCollection<T> 같은 형태로 제공하고 있기 때문에 적절하게 사용한다면, 코드를 간결하게 만들 수있다.

또한, 보통의 경우에는 Presenter가 View는 SerializeField를 이용하여 '참조'하게되고, Model의 같은 경우는 Model을 관리하는 Singleton 패턴의 ModelManager를 사용하거나, 직접 Presenter 내부에 생성하여 가지고 있는 형태를 하는 것이 일반적이다. (개인적으로 여러 Presenter와 공유하는 Model이 있을 수 있으니 ModelManager를 활용하는 편이 좋을 것으로 생각한다.)

특히, 게임에 따라 Model의 크기가 클 수도 있고, 저장 기능은 거의 필수적이기 때문에 Model을 저장해두었다가 불러올 수 있는 작업을 해야 한다. ReactiveDictionary<T>를 XML로 전환하여 저장하는 메소드를 만들어 두면, 자동 저장이나 명시적인 저장을 구현할 때 편리할 것이고 저장된 자료를 Load하는 메소드를 만들어 두면, 생성자에서 그 메소드를 활용하여 불러오기 기능을 구현할 수도 있다. 저장을 지원하지 않는 게임이 아닌 이상 이런 메소드들을 구상하고 구현하는 것이 좋고 어떤 구조로 저장할 것인지 생각하여 메소드들을 만들어두면 나중에 필요할 때마다 사용할 수 있을 것이다.

Unity를 Visual Studio for Mac 와 함께 사용하기

공대생 오르카 — Fri, 28 Jul 2017 17:59:18 +0900

몇 번 블로그에 언급했듯이 요즘 병역 특례를 구하고 있고, 면접 일정도 몇 개 잡혀서 준비하고 있다. 노트북을 지참하라고 하길래 Unity와 기타 코딩 테스트를 볼 수 있는 환경으로 세팅했다. 원래는 Unity와 Visual studio Code를 연동하고 Unity를 서포트해줄 수 있는 익스텐션들을 설치하여 사용했다.

개인적으로 모노 에디터를 싫어하는 편이고(워낙 안 좋은 기억이 많아서...) 세팅 방법도 포스팅했던 적이 있었던 만큼 편리하게 사용했던 기억이 있다. 최근에는 Windows 위에서 작업하느라 그냥 Visual Studio를 이용했는데 노트북은 MacOS라 다시 세팅했다. 서론이 좀 길었던 것 같지만 요점은 드디어 Visual Studio for Mac이 나왔더라는 점이다. 조금 지난 이야기이긴 하지만....

Visual Studio for Mac?!

모바일과 클라우드 위주의 개발을 위한 IDE라고 말하고 있는 것으로 보아 Xamarin의 냄새가 난다. (킁킁) 역시나 Xamarin을 통한 모바일 개발을 지원하고 있고, F#/C#/HTML/CSS등을 지원한다. (이거 완전 자마린 스튜디오 아니냐?) 공식 소개 문서에서 지원하는 기능들을 살펴보자. 해당 내용은 공식 소개문서에 작성되어있다.

Visual Studio for Mac is a modern, sophisticated IDE with many features for creating mobile, desktop, and web applications. It supports development of the following:

Mobile with .NET: Android, iOS, tvOS, watchOS

Mac desktop apps

.NET Core applications

ASP.NET Core Web applications

Cross-platform Unity games

간단하게 살펴보면 Xamarin Studio 기반인 만큼 Xamarin을 통해 모바일 개발을 지원한다. Android/iOS는 물론, tvOS/watchOS 까지! 또한, MacOS Desktop 앱을 제작하는 것도 가능, HTML/CSS를 통해 ASP.NET 개발도 지원하고, 무엇보다 Unity 또한 지원한다고 명시되어있다.

Visual Studio for Mac과 Unity?

5번을 보면 알겠지만 Unity와의 연동을 지원한다. 설치하고 플러그인 목록을 보면 Unity를 위한 툴들이 이미 설정되어 있다. 추가적으로 플러그인을 다운 받아야 했던 VSC보다 훨씬 편해진 편이다. 때문에 Unity와의 연동도 정말 편해졌고 Visual Studio for Mac을 설치할 때 안드로이드 SDK와 구글 플래이 SDK도 같이 다운 받아지기 때문에 Visual Studio for Mac을 이용하면 Unity 개발에서 안드로이드/iOS를 한큐에 해결할 수 있다.

설치법

VSC에비해 어썸하게 간단해졌다. 여기에 접속하면 Visual Studio for Mac을 다운받을 수 있다. dmg파일을 다운로드 받았으면 다른 프로그램처럼 설치해주면 된다. 기타 SDK까지 4기가 정도 다운받은 것 같다. 주의할 점이 있다면 권한을 위해 중간중간 패스워드를 묻는 창이 나타난다. 그냥 설치해두고 신경 꺼두고 있다가는 낭패를 볼 수도 ㅎㅎ... 이렇게 설치가 끝났으면 끝난 거다. 이러고 Unity 설정에서 External tool을 Visual Studio로 변경하면 된다.

이렇게 설정하고 나면 스크립트를 더블클릭했을 때 Visual Studio for Mac으로 넘어가 작업하게 된다. 기본적인 Unity API들이 인텔리센싱되고있기 때문에 편리하게 작업할 수 있을 것이다. 아래는 전체적인 화면이다. 꽤 깔끔하고 Dark/White 테마 중 마음에 드는 것을 사용할 수 있다. 예쁘고 생각보다 빠르고 잘 작동한다. ~~Mono에디터를 대체하는 좋은 친구가 될 것 같다.~~

절대 아니다. 아직 안정화가 필요한건지... 복사할 때 버퍼도 이상해져서 잘 안될때가 많고 무엇보다 한글이 씹힌다. 글자 단위로 씹히는 것이 아니라 조합자 하나가 씹힘.... 네이티브라 그런지 VSCode보다 기본 램은 더 잡아먹고있고, 자동 스타일링도 뭔가 설정이 부족하고 이상하게 동작하는 경우가 많다.

결론 : 아직은 ㅎㅎ 그냥 VSCode 쓰세요

* 자마린 스튜디오에서 어느점이 더 향상되었는지 알고싶다면 이곳을 참조

Cocos2d-x 시작하기 - 설치 및 생성

공대생 오르카 — Thu, 20 Jul 2017 11:28:26 +0900

최근 병역특례를 보충역 TO로 알아보고 있다. 사실 특정한 대회나 외부활동에 참여하기 위해 자소서를 쓰고, 면접을 보고하는 일은 익숙하지만 이렇게 직접 회사들에게 이력서를 돌리고 결과를 기다리는 일은 처음이라 살짝 막막하기도 하고 취준생의 마음을 조금 이나마 이해할 수 있을 것 같아졌다. 그래도 보충역이라 그런지 아니면 타이밍이 좋았던 거인지 생각보다 몇 군데에서 면접을 보자고 연락이 왔고 덕분에 요즘은 면접공부 중이다.

포트폴리오에는 Unity나 C#에 관한 내용을 위주로 작성했다. (실제로 대외 활동에서 빠르게 결과를 내는 게 Unity가 쉬우니까...) 연락이 온 업체들은 전부 Unity를 쓰지 않는다...?! 출시한 게임들이 주로 Cocos2d-x 위주인 것이다. 지금 신작은 어떤 것을 이용하여 개발하는지는 모르겠으나 일단 면접 기간까지 일주일 정도 긴 시간을 주셨으니 Cocos를 보고 가는 것이 최소한의 예의라고 생각해서 공부를 시작했다. 이거랑 기본적인 학과 지식을 복습하는 것도 힘들지만...

Cocos가 진입 장벽이 언리얼이나 유니티 보다 높다고해서 일단 간단한 기능의 게임을 모작하는 수준정도로 공부해볼 예정이다. 그래서 일단 Cocos 한번 해보기로했고 Mac에서 개발하는 것을 가정하고 설치 및 프로젝트 생성에대해 정리해보겠다. (모작 게임을 완성하면 소스 공개할듯)

Cocos2d-x 설치

버전은 2.x 와 3.x가 있다. 파이썬과 비슷한 느낌인데 일단 3.x 버전을 사용하기로했다. 정확한 버전은 3.15.1 버전이다. 해당 파일은 Cocos2d-x download 패이지에서 다운받을 수 있다.

다운을 받았으면 압축을 풀고 적당한 위치에 배치한다. (나는 그냥 다운로드 폴더에 두었다.) 해당 폴더로 들어가면 익숙한 이름의 setup.py가 보인다. 실행시키면 Cocos의 셋업이 시작된다. Setup 중 필요한 것은 Android SDK와 Android SDK ROOT, ANT ROOT 패스를 알려달라고 한다. 안드로이드 빌드를 하고 싶다면 당연하게도 전부 설치하고 패스를 알려주면 된다. Android SDK는 Android Studio를 통해 쉽게 설치할 수 있고, Ant는 Homebrew를 통해 쉽게 설치 가능하다.

셋업이 완료되면 마지막 줄에 어떤 명령어를 실행하라는 문구가 뜬다. Cocos를 위한 환경 변수들을 저장하는 명령어이다.

'Source /User/계정/.profile'같은 느낌으로 출력될 것이다. (여담으로 Mac 에서는 iTerm과 oh-my-zsh를 사용하자 터미널 생활이 어썸하게 편리해진다) 여기까지 설정하고 나면 프로파일에 Cocos 환경변수들이 추가된 것을 알 수 있다.

프로젝트 생성

프로젝트는 터미널에서 Cocos 명령어를 통해 생성할 수도있고 Xcode에 Cocos 템플릿을 추기사키면 Xcode에서도 바로 생성할 수 있는 모양이다. 추가 적으로 작업할 것이 있기 때문에 터미널을 통해 프로젝트를 만들어보자.

cocos new CocosTest -p com.company.cocosTest -l cpp -d ./cocosTest

이 명령어를 이용하면 프로젝트가 생성된다. 메시지를 잘 읽어보면 기본적으로 만들어져있는 Hello world 수준의 프로젝트를 복사해서 가져오는 것이라는 것을 알 수 있다. 생성된 프로젝트 폴더로 이동해보자.

프로젝트 빌드

프로젝트를 빌드하는 방법으로는 크게 두가지가 있는 것같다.

1. 터미널에서 명령어 실행
2. 해당 IDE를 통해 빌드

2번 방법은 직관적이고 폴더만 찾아보면 바로 알만하기 때문에 1번을 이용해보자. 명령어는 다음과같다.

cocos run -p ios
cocos run -p android

아이폰을 연결해 두지 않았다면 시뮬레이터가 필요할 것이다. 시뮬레이터는 Xcode의 환경설정에서 다운 받아 사용할 수 있다. 시뮬레이터의 용량이 조금 되지만 받고나면 잘 빌드가 되서 시뮬레이터위에 Cocos 앱이 올라갈 것이다.

하지만, 안타깝게도 3.15.1 버전에는 이 부분에 버그가 있다. 해당 버전에서 시뮬레이터에 빌드를 하게되면 특정위치에서 에러를 뿜을 것이다. 잘 보면 float 과 IOS 버전에 관련된 것인데 어떤 설정을 하더라도 고쳐지지 않을 것이다. 왜냐면 코드상의 문제이기 때문....(내부 코드를 바꿔야하는 삽질은 정말 싫다 ㅠㅜ) 다행이도 해당 이슈는 이미 알려져 있고 다음 버전인 3.16 버전에서 수정된 코드가 적용될 것이라고한다. 이슈 링크를 타고가면 어떻게 고쳐야하는지 알려준다.

PATH/cocos2d-x-3.15.1/tools/cocos2d-console/plugins/plugin_run/project_run.py

간단하게 설명하면 PATH/cocos2d-x-3.15.1/tools/cocos2d-console/plugins/plugin_run 경로에 있는 project_run.py 에 있는 코드를 일부 수정해주면 된다. 자세한 수정사항은 여기를 참조하면 된다. 이렇게 고치고 나면 정상적으로 빌드가된다.

UniRx 활용하기(2) - A와 B 사이의 일 처리하기

공대생 오르카 — Sat, 08 Jul 2017 16:24:28 +0900

이벤트를 처리하다 보면 A가 일어난 후에 B가 일어나기까지 반복작업해야 하는 일을 만들어야 할 때가 있다. 예를 들어 (예제의 내용이지만) 마우스 드래그를 표현할 때 마우스 버튼이 눌리고 때어질 때까지 마우스의 움직임을 캡처하여 오브젝트의 회전에 반영하는 상황이나 특정 조합키를 입력해서 캐릭터의 춤동작 애니메이션을 재생하고 다른 특별한 입력이 있을 때까지 애니메이션을 반복 재생하는 상황이 있을 수 있겠다.

우선 기존의 프로그래밍 방법을 유니티 초심자의 입장에서 생각해보자. 마우스 드래그를 보게 되면 (1)오브젝트의 Update 문에 마우스의 위치와 오브젝트의 Rotation을 연동시키는 코드를 삽입하고 또, (2)마우스 버튼이 눌렸을 때와 릴리즈될 때를 캐치하여 bool 변수(isDraged 정도)를 통해 그 연동 구문을 활성화/비활성화할 수 있게 해두는 정도를 생각할 수 있을 것이다.

어때 보이는가? 상당히 귀찮아 보인다. 또한 어떤 조건에서 드래그 구문을 실행하는지도 '마우스와 오브젝트 Rotation을 연동하는 로직'만 보고는 알기 힘들다. (실행을 결정하는 부분이 외부에 메소드 형태로 있으니...) 이런 요소들이 한 구문에 있다면 이 로직이 어떤 로직이고 어떠어떠한 조건에서 실행되는지 한눈에 파악할 수 있을 것이다. UniRx는 그걸 가능하게 한다. UniRx는 어떻게 이런 로직들을 보기 좋게 처리할 수 있을까?

SkipUntil

인자를 통해 지정한 스트림에 메시지가 올때 까지 해당 스트림의 메시지를 스킵한다.

기본적으로 특정 이벤트가 발생하기 전까지 메시지를 스킵하는 오퍼레이터다. 계속 마우스 드래그 예제를 이용하면, 마우스 버튼이 눌릴 때까지 EveryUpdate 스트림에 들어오는 모든 메시지를 무시할 수 있는 것이다.

TakeUntil

인자를 통해 지정한 스트림에 메시지가오면 OnCompleted를 통해 스트림을 종료한다.

이 오퍼레이터는 스트림을 어디까지 실행할 것인지를 결정한다. 이 오퍼레이터를 사용하면 마우스 버튼이 릴리즈되기 전까지만 스트림에서 메시지를 받을 수 있다. 즉, 위에 설명한 SkipUntil과 함께 사용하면 마우스 버튼이 눌릴때 부터 릴리즈되기 전까지만 Update 스트림의 메시지를 받을 수 있는 것이다.

하지만 문제가 있다. 이렇게 사용하게 되면 TakeUntil을 통해 구독한 스트림에 OnCompleted가 들어오기 때문에 스트림이 종료된다. 즉, 프로그램 실행 시간에서 단 한 번만 드래그할게 아니면 다른 추가적인 조치를 취해야한다.

Repeat

스트림이 OnCompleted를 통해 종료될때 다시한번 Subscribe한다

이 오퍼레이터를 통해 TakeUntil이 스트림을 종료시키면 다시한번 초기 상태로 Subscribe하게 만들 수 있다. 이 3가지 오퍼레이터를 조합하면

1. SkipUntil : 버튼이 눌릴 때까지 아무 것도 하지 않다가

2. Subscribe : 버튼이 눌린 후에 로직을 처리하고

3. TakeUntil : 처리 중에 버튼이 때지면 로직을 멈추고 스트림을 종료

4. Repeat : 종료 후 다시 재구독

이런 작업이 가능하다는 것이다. 샘플 코드를 보고 어떻게 사용했는지 자세히 보자.

이런 식으로 처리하면된다. 이것은 마우스 드래그의 예제 였지만, 확장시켜 A 이벤트와 B이벤트 사이의 일을 한 구문으로 처리할 수 있게된다. 자세한 예제 모음집은 이곳을 통해 확인할 수 있다.

언리얼 엔진 Actor와 Pawn과 Character의 차이점

공대생 오르카 — Thu, 06 Jul 2017 07:34:15 +0900

언리얼 엔진을 사용해보기 시작하면서 가장 불편했던 점은 첫째로 자료가 거의 대부분 블루프린트 샘플들 위주이고 구성 요소들이 유니티와 뭔가 비슷하면서도 다른 느낌을 받았기 때문이다. 나와 같은 사람들을 위해 언리얼을 공부하기로 마음먹었지만 처음에 햇갈려서 개념이 잡히지 않았던 요소들을 하나하나 포스팅해가며 공유해볼까한다.

유니티 vs 언리얼

놀랍게도 언리얼 공식문서에서 "유니티 개발자를 위한 언리얼 엔진4"라는 탭을 만들어 유니티 개발자들이 유니티에서 사용하던 개념들을 언리얼에 있는 개념과 매핑할 수 있도록 친절하게 만든 문서가 있다. 일단 여기에서 설명된 표를 따르면 다음과 같다.

카테고리	유니티	언리얼 4	비고
게임 플레이 유형	Component	Component
	Game Object	Actor / Pawn	1 : 2
	Prefab	Blueprint class
메시	Mesh	Static Mesh
메시	Skinned Mesh	Skeletal Mesh
머티리얼	Shader	Material / Material Editor	1 : 2
머티리얼	Material	Material Instance
이펙트	Particle Effect	Effect / Paticle / Cascade	1 : 3
이펙트	Shuriken	Cascade
게임 UI	UI(uGUI)	UMG
프로그래밍	C#	C++
피직스	Raycast	Line Trace / Shape Trace	1 : 2
피직스	Rigid Body	Collision /Physics	1 : 2

표를 보면 알겠지만, 상당히 많은 부분이 닮아있지만 용어가 조금씩 다르고 유니티 측에서는 1개인것이 언리얼에서는 2개 3개인 것이 있다. 오늘은 그중에서 GameObject 쪽을 한번 살펴보도록하자.

유니티를 사용해보았으면 알겠지만, 마음만 먹으면 GameObject들로만 이리저리 굴려서 게임을 만들 수 있다. GameObject에 C# Script를 이용한 컴포넌트들과 Unity 제공 컴포넌트들을 붙여서 로직을 만든다. 그런데 언리얼에서는 GameObject의 역할을 하는 것이 2개로 표현되어있다. 이 둘은 뭐가 다를까?

Actor

액터는 언리얼 엔진의 레벨에 배치할 수 있는 오브젝트를 의미

그야말로 GameObject인 느낌이다. GameObject처럼 레벨에 배치할 수 있는 모든 오브젝트를 의미하며 여기에 컴포넌트들을 붙여서 액터가 어떻게 행동할지 결정해준다는 느낌이다.

그런데 액터가 GameObject와 비슷하다면 Pawn은 뭘까?

Pawn

폰은 플레이어나 AI가 제어할 수 있는 모든 액터의 베이스

게임을 하게되면 내가 조작할 수 있는 오브젝트들이 있다. 대표적으로 내가 키보드를 통해 움직임을 명령하는 캐릭터같은 플레이어(혹은 AI)가 명령을 내리고 그것에 따라서 움직이는 액터들을 Pawn이라고 하는 것! 따라서 Actor보다 더 구체적으로 정의된 오브젝트 클래스라는 것이다. 그럼 소스에서 한번 APawn의 정의를 타고 들어가보자.

위와 같이 Pawn을 생성하면 자동으로 상속받아지는 APawn이라는 클래스를 타고 들어가보면, AActor클래스를 상속받는 다는 것을 알 수 있다. AActor는 모든 액터 클래스의 베이스 클래스 이므로 Pawn은 '조금 더 구체적인 액터'인 것이다.

이 외에도 Character라는 친구가 있는데 이 친구는 APawn에서 좀 더 복잡한 애니메이션을 위해 파생된 클래스라고한다. 예를들어 점프하고 수영하고, 하늘을 날아다니는 에니메이션들과 그 에니메이션들을 블렌딩하는 작업 등등 복잡한 에니매이션을 처리할 수 있도록 고안되었다고한다.

한장요약

`Actor > Pawn > Chracter`인 모습을 잘 나타낸다.

UniRx 활용하기(1) - Where과 Select 사용하기

공대생 오르카 — Mon, 03 Jul 2017 19:36:24 +0900

저번 포스팅에서는 UniRx가 모든 것을 스트림으로 보는 프로그래밍 방식이고, 스트림을 어떻게 만들고 사용하는지에 대해서 공부했었다.

UniRx는 이렇게 만든 스트림을 여러가지 오퍼레이터를 통해 필터링하여 원하는 데이터들만 가지고 원하는 타이밍에 원하는 작업을 수행할 수 있도록 만들 수 있다. 사실 얼마나 이 필터링 작업을 자유롭게 하는지에따라 UniRx를 다루는 실력이 나누어질거라고 생각한다. ~~(물론 나는 초짜)~~ 이번에는 스트림을 필터하는 친구들 중에서도 가장 기본이되는 Where과 Select에 대해서 알아보도록하자.

Where

조건에 맞는 메세지만 필터링하는 오퍼레이터

무작정 구독한 스트림에서 오는 모든 메세지를 원하는 것은 아닐 것이다. 만약 0~9까지의 숫자들이 넘어 오는 스트림에서 5 이상의 숫자들에만 반응 하고 싶다면? 이럴 때 Where 오퍼레이터를 사용하면 완벽하다.

만약, Where 오퍼레이터를 사용하지 않는다면 Subscribe쪽에서 if문으로 필터링을 하고 처리하면 될것이다. 하지만 이렇게된다면 Subscribe에서 작성하는 코드가 상대적으로 깔끔하지 못하다. 우리는 그래서 Where구문을 사용하여 필터링 처리를 하고 Subscribe를 하게된다. 이렇게되면 원하는 메세지에만 집중할 수 있고 전체적인 라인수도 짧아지며 Subscribe 내부 구문들이 훨신 더 깔끔해진다.

위 코드는 직접 만든 UniRx 샘플들 중 하나이다. Where(_ => Input.GetMouseButtonDown(0))를 통해 마우스 왼쪽 버튼이 눌렀을 때만 필터링하고 있다. Where은 이 구문이 True일 때만 통과된다는 의미이다.

Select

메세지 요소를 변환하는 오퍼레이터

Where을 통해 메세지 중 원하는 메세지와 원치 않는 메세지를 구분했다면 Select를 통해서는 원하는 메세지 중에서도 그 내용을 미리 가공해서 사용하고 싶을 때 사용하는 오퍼레이터이다. 이것도 물론 Subscribe에서 처리할 수 있지만 위와 같은 이유로 Select 오퍼레이터를 사용하여 처리한다.

이건 Drag를 처리하는 구문 중 하나인데 Select를 통해 원하는 메세지를 Vector2 형식으로 변환하고 있다. 마우스가 눌린 X축과 Y축 각각을 2차원 벡터로 변환하여 사용하는 구문이다. 이렇게 단일 값만 변환할 수도 있지만 SelectMany를 이용하여 단순히 값을 변환하는 것이 아니라 다른 스트림에 흐르는 메시지로 가져와 변환 시킬 수도 있다. (이 오퍼레이터는 아직 적극적으로 사용해보지 않아서 깊게 이해되는 편은 아님)

Unreal Engine 안드로이드 라이브러리 적용법

공대생 오르카 — Sun, 02 Jul 2017 07:38:05 +0900

언리얼이 확실히 무료화를 선언한 뒤 학생이나 인디게임 개발자가 좀 더 쉽게 접근할 수 있게 된 것은 사실이지만 경쟁 엔진인 유니티보다 자료를 찾는 것에 있어서 힘이든 것이 사실이다. 지금까지 주류 사용처가 기업이었기 때문인게 아닌가 싶다.

특히 모바일 자료는 정말 찾기 힘든데 Android에서 Bluetooth를 이용하기 위해서 여러 자료를 찾아보았지만 쉽게 자료를 찾을 수는 없었다. (구글을 사용하면 원하는 자료가 적고, 엔진소스를 읽으면서 공부하자니 광활한 소스코드에 우주미아가 된 것 같았다.)

사실, 결국 알아내었고 플러그인을 만들어서 경험과 코드를 공유하려 하고 있지만, 이것이 현업에서 사용하거나 언리얼 엔진이 권장하는 통상적인 방법인지는 아직 잘 모르겠다. 여튼 나처럼 언리얼 엔진은 초심자이지만 모바일로 빌드할 때 안드로이드의 코드나 기능을 사용하고 싶어하는 사람을 위해 포스팅을 남긴다.

준비물

일단 유니티처럼 원하는 안드로이드 기능을 구현한 jar 파일이 필요하다. 그냥 생 java 파일로도 가능하지만 그렇게 관리하다가 파일하나 유실하면 대략 난감하니 앵간하면 jar을 사용하도록 하자. (예제에서는 파일이 2개뿐이라 그냥 java파일을 사용했다 패키징...귀찮아...)

유니티는 aar도 지원한다고 하지만 일단 내가 필요했던 기능은 jar로도 간편하게 구현할 수 있기 때문에 java 파일만 사용했다. 응?! static library가 필요하다면 추가할 수 있으니 챙겨두도록 하자.

폴더 배치

뒤에 설명할 부분에서 잘 처리한다면 어느 폴더에 배치해도 상관없을 것 같지만, 예제에서는 Source 폴더 밖에 ThirdPartyLibraries/Android 폴더를 만들어두고 그 안에 패키지명으로 폴더 패스를 구성하여 배치하였다.

유니티에서 안드로이드 빌드를 하게 되면 비슷한 과정을 거치는 것같다. jar이나 안드로이드 관련 파일들을 복사해서 안드로이드 프로젝트에 맞게 재배치 하는 것처럼 보이기 때문이다. 하지만, 유니티 처럼 "Assets/Plugin/Android 경로에 있는 것만 복사한다"는 조약이 없는 것 같으므로 우리가 필요한 파일 패스를 직접 알려주어 Copy 해야 한다. 이 기능은 Unreal Plugin Language (UPL) 을 이용하여 간단하게 해결할 수 있다.

UPL이란?

언리얼에서 플러그인과 패키징할때 글로벌한 세팅들을 할 수 있게 해주는 친구이다. 예를 들어 안드로이드 매니페스트를 수정한다든지 iOS의 plist를 수정한다든지 패키징에 포함될 파일들의 경로를 설정한다든지의 작업을 할 수 있게 해준다. github에 있는 Unreal Engine 레포의

UnrealEngine/Engine/Source/Programs/UnrealBuildTool/System/UnrealPluginLanguage.cs

를 살펴보면 UPL 태그들이 어떤 역할을 하는지에 대한 설명이 주석으로 달려있다. 대신 일단 예제로 만든 UPL의 소스를 살짝 맛보자. (직접 링크를 걸고 싶지만 언리얼 멤버쉽에 가입하고 깃허브와 연동해야만 볼 수 있는 private 레포이기 때문에 경로만 남겨둔다.)

위 소스는 내가 만든 예제에서 사용한 UPL 코드인데 여기서 사용한 태그들만 의미를 좀 보자

<androidManifestUpdates>를 보자면 안드로이드 기능을 이용하는 데 필요한 권한을 업데이트 하고있는 모습이다. 이 태그를 통해 퍼미션 뿐만 아니라 다른 안드로이드 매니페스트 구문들을 업데이트할 수 있다. 다른 태그들도 비슷하다 주로 해당 파일의 특정 위치에서 내용을 삽입하겠다 혹은 파일을 어디에서 어디로 카피하겠다 라는 수준의 구문들이다.

<proguardAdditions>를 통해서는 추가할 패키지들의 프로가드 설정을 할 수 있다.

<prebuildCopies>는 빌드 되기 전 파일들을 카피할 수 있다.

<gameActivityOOOAdditions>들은 GameActivity의 000 부분에서 추가적인 자바코드를 삽입할 수 있다. 예제에서는 Import 부분과 Class 내부의 자바코드를 추가 수정하였고, 뿐만 아니라 Activity 생명 주기에 필요한 함수들에도 코드를 삽입할 수 있도록 별도의 태그들이 준비되어있다. 자세한 태그 분류들은 위에서 설명한 경로를 통해 주석으로 확인할 수 있다.

마무리

Unreal에서 유니티에 비해 특별하게 작업해야 하는 정도는 이 정도이다. 이렇게 작업한 뒤 JNI를 이용하여 필요한 함수들을 만들어 내고 작업하면 된다. 아직 모든 기능을 구현한 것은 아니지만, 코드상으로는 문제가 없어 빌드가 되는 예제 프로젝트의 링크를 남겨 둘 테니 부끄럽지만 읽어보고 도움이 되었으면 좋겠다.

UniRx 입문하기 - 기본적인 사용법

공대생 오르카 — Sat, 01 Jul 2017 14:46:18 +0900

"아 이런 것이 있구나"하고 접했던 것은 오래되었지만 최근 들어 천천히 공부를 시작한 것이 UniRx이다. 일본인이 만든 Unity용 Reactive 프로그래밍 라이브러리 같은데 Unity는 .NET 버전도 낮고, .NET용 Rx는 무거운 감이 있어서 Unity에서 사용할 수 있게끔 만들었다고 한다. (일본에서 만들어서인지 검색하면 절반은 일본어 자료라 일본어를 읽지 못하는 입장에서는 대략 난감....)

Reactive Programming(Rx)이란?

이쪽 분야 프로그래밍은 많이 접해본 것이 아니지만, 초심자의 눈으로 보기에는 객체지향(OOP)이 모든 것을 "객체"로 보고 객체를 만들고 이용해서 프로그래밍했다면, Rx는 모든 것을 "스트림"으로 보고 스트림을 만들고 구독해서 데이터가 어떻게 변하고 어떤 이밴트가 발생했는지 캐치하여 프로그래밍하는 느낌이다. 또한, 이 프로그래밍 방식은 모든 것이 옵저버 패턴처럼(?!) 구현되어있다. (옵저버 패턴을 이용해 스트림을 구독(Subscribe)하여 이루어진다.)

UniRx의 기본적인 사용법

이 포스팅에서 다루어 볼 것은 어디까지 기초적인 사용법이다. 아직 공부하고 있는 프로그래밍 방법이고, 생소하다보니 학습이 조금 걸리는 편... 어느정도 이해가되면 Github에 예제들을 정리해서 올릴 예정이다.

초심자로서 Rx가 모든 것을 스트림으로 보고 프로그래밍하는 느낌이라고 설명했는데 그럼

이 "스트림"이라는 친구를 어떻게 만들고 사용할까?

라는 생각이 든다. 여러 예제를 훑어 본 결과 UniRx에서는 크게 2가지 방법을 사용한 것 같다 (넓게 봤을 때는 그냥 한가지 인 것 같지만...)

첫번째 방법

UniRx에서 기본으로 제공하고 있는 "ReactiveProperty" 템플릿을 이용하는 방법이다. 이 변수를 선언해두고 Subscribe를 하면 이 변수의 값이 변할 때마다 스트림을 통해 통보받을 수 있다. 그럼 이 변수가 변화되었다는 것을 가지고 UI를 업데이트한다든가 특정한 상황인지 필터링해보고 맞다면 어떠 어떠한 처리를 한다고 프로그래밍할 수 있을 것이다. 코드를 보자, 간단한 타이머 예제이다.

주석에 대략적으로 적어났으니 어떻게 사용하면 되는지 약간 감이 올거라고 생각한다. 이 방법은 결국 뒤에서 설명할 것을 UniRx에서 잘 다듬어 놓은 것으로 생각하는데 int나 다른 기본 변수들의 변화를 감지하는 쪽이라면 이쪽이 훨씬 더 편리할 것이다.

다음 방법

Subject를 만들고 AsObservable 메소드를 통해 구독할 수 있게 만든 뒤 OnNext, OnError, OnCompleted를 이용하여 원하는 타이밍에 스트림으로 메시지를 보내는 방식이다. 코드를 살짝 보자.

코드를 보면 StreamTest에서 Subject를 만들고, 구독할 수 있게 AsObservable() 메소드를 통해 IObservable을 반환하고있다.

정리해서 그림으로 나타내면 이정도 일것같다.

물론 좀 더 활용하기 위해서 구독시 스트림에 여러 가지 필터링을 걸거나 스킵, 변환, 딜레이등을 이용하여 사용하지만, 기초 지식은 이 정도 인 것 같다. OOP나 절차 지향적인 프로그래밍 방법들'만' 다루어본 사람이 갑자기 이런 방식을 다루기 시작하면 사용방법이 익숙치 않아 조금 고생하는 편이다.

UniRx의 장점

UniRx의 장점이라면 여러 가지가 있을 수 있지만, 현재 초심자의 눈에는 Update문에 의존하지 않아도 된다는 점이다. 예제 코드를 보면 알 수 있듯 스트림 구독은 보통 한 번만 진행해두면 되므로 Start 안에서 이루어지고 있다. 이게 바로 Rx의 장점 중 하나겠지만 UniRx를 사용한다면 어떤 상황인지 판별하고 어떤 특수한 행동을 하는 여러 루틴을 객체 내부의 Update에서 판단하고 처리하는 것이 아니라

원하는 상황을 알 수 있을 만한 스트림을 구독하고 필터링해서 한 덩어리 안에서 처리할 수 있다는 점이다.

그 외에도 여러가지 장점과 활용법이 박민근님의 PPT에 잘 녹아있다. 약 200 페이지 정도의 분량이지만, 한장 한장이 큼직하게 이루어져 있어서 읽어보기에 무리가 없을 것 같다. (나도 이걸 참고해서 공부 중)

유니티 Monobehaviour 생명주기(Life cycle)

공대생 오르카 — Wed, 28 Jun 2017 06:41:42 +0900

저번 주에 소프트웨어 마에스트로에서 만난 사람들과 술자리를 가졌었다. 다들 오랜만에 보는 얼굴들이었는데 문득 1단계 때 옆자리였던 형을 보니 '유니티 생명주기'에 대해 알려주면서 트러뷸 슈팅을 도와주었던 기억이 났다. 생각도 다시 한번 정리해볼 겸 간단하게 포스팅해볼 생각이다.

유니티에서 생명주기?

유니티에서 자신이 제작한 스크립트의 대부분은 'Monobehaviour'라는 친구를 상속받아 만들어진다. 스크립트를 만들면 자동으로 상속받는 형태이니 유니티의 기본 클래스 형태라고 봐도 좋을 것이다. 이 'Monobehaviour'가 Scene에서 살아가는 일정한 흐름이 있다. 엔진에서 자동으로 호출해주는 함수들인데 이 패턴의 흐름을 모아 '생명 주기(Life cycle)'라고 한다. 일단 그림으로 먼저 알아보자.

대략적으로 위와 같은 Flow를 가진다. 첫 'Awake', 'OnEnable', 'Start'함수는 객체가 생성될때 1회 호출되는 함수라고 생각하면 편하다. 단, OnEnable은 스크립트에서 객체를 활성화/비활성화시킬 경우가 있는데 객체가 활성화 되었을 때 마다 호출되는 함수이다.

옆자리 형의 트러블슈팅을 도와줄때 바로 이 문제에서 발생되었다.

??? : 집에서는 잘 되었는데 그대로 노트북에서 작업하니까 NullReferenceExeption을 던진다

는 이야기였다.

코드를 살펴보니 문제는 즉, A라는 객체의 Awake에서 B라는 객체가 Awake될 때 동적 생성하는 멤버에 접근하려고 했는데 바로 여기서 문제가 발생한 것이다. 다른 객체에서 동적 생성한 멤버를 참조하고 싶다면 Awake가 아니라 Awake가 모두 실행되었음이 보장된 Start 쪽에서 처리하는 것이 바람직할 것이다.

집에서는 B 객체의 동적 할당이 먼저 일어나서 무사히 넘어갔지만, 항상 그런 동작이 보장된 것은 아니다. 생명주기를 기억했다가 어느 타이밍에 내가 무엇을 했을 때 동작이 보장되는지 생각해 둘 필요가 있다. 여담으로 Update를 살펴보고 넘어가자.

Update가 3개?

희한하게도 Update가 3가지 종류가 있다. 'FixedUpdate', 'Update', 'LastUpdate'다.

1. 가장 기본적인것이 Update로 매 프레임 마다 실행된다. 일반적으로 유니티를 처음 시작했다면 이 부분에서 거의 모든 로직을 처리할 것이다. (아님 곰보)

2. 그 뒤에 있는 LastUpdate가 바로 Update다음으로 실행된다. Update에서의 결과가 전부 반영된 뒤 작업하고 싶다면 LastUpdate에서 작업하는 것이 맞을 것이다.

3. FixedUpdate는 고정된 프레임 주기로 호출되는 함수들이다. Update는 디바이스의 성능이나 게임의 최적화 상황에 따라 framerate가 변하게 되는데 이렇게 되면 프레임 사이 사이의 시간 간격이 다르게 적용된다. 이렇게 되면 물리적인 계산이 필요할 때 상당한 오차가 발생할 수 있다. 그래서 시간 간격이 고정된 FixedUpdate에서 처리해주는 것이 좋다.

이렇게 미리 생명 주기를 파악하고 내가 원하는 동작이 어느 동작이 보장되고나서 실행되는지 알고 있어야 삽질을 줄일 수 있을 것이다.

소프트웨어 마에스트로 프로젝트 발표 PPT 공유

공대생 오르카 — Fri, 23 Jun 2017 08:35:21 +0900

우연히 NDC PPT 자료를 찾아보기 위해 슬라이드 쉐어를 방문했다가 내가 만들었던 소프트웨어 마에스트로 프로젝트 PPT를 발견했다. 사실 일 년은 더 지난 자료지만 발견한 김에 결과물 갤러리에 간단하게 공유하고자 한다. (PPT를 보고 있자니 PPT 만들면서 연습하면서 했던 고통들이 떠오른다...)

01. 얼굴인식 스마트 도어락 : KICOM

SW Maestro 프로젝트 발표 : Kinect를 이용한 도어락 시스템 Kicom from 상현 김

첫 프로젝트, 고재관 멘토님과 서로 다른 분야의 팀원들과 모여서 처음으로 Kinect도 처음 해보고, WPF도 처음 해봤던 프로젝트

02. 체험형 융합 교육 게임 : 태권도

SW Maestro 프로젝트 발표 : Kinect를 이용한 태권도 게임 TaekwonMaestro from 상현 김

좋다면 좋은 추억 나쁘다면 나쁜 추억을 가지고 있는 두 번째 프로젝트 고생을 엄청 심하게 했었지만 그만큼 배운 것이 많았던 프로젝트

03. Open source APM for Go : 고니(Goni)

2단계 프로젝트였던 고니(Goni)는 업로드하는 것을 깜빡했던 것 같다. 찾아보고 추가할 예정

*번외 : Kinect v2

마이크로소프트의 동작인식 센서 키넥트 v2 from 상현 김

2단계 프로젝트 초반에 Kinect와 필요한 여러 개의 자료들에 대해서 스터디? 브리핑? 하는 시간이 있었는데 그때 사용한 PPT

안드로이드에서 블루투스 데이터가 손실될 때 해결법

공대생 오르카 — Tue, 06 Jun 2017 09:19:21 +0900

얼마 전 건강검진에서 간 수치가 높게 나오고 백내장이 의심된다고 했다. 한동안 개인 공부 겸으로 진행했던 DIY VR Controller를 진행하지 못하고 있다가 재검사 후 정상 판정이 나와서 마음 놓고 다시 진행해 보았다. 진행하면서 가장 짜증 났던 부분이 몇 개가 있었는데 그중 가장 유용할 것 같은 문제와 문제 해결법을 공유해보고자 한다.

블루투스의 데이터가 손실된다고?

DIY VR Controller는 <센서-아두이노-블루투스-안드로이드-유니티>가 서로 연결되어 작동한다. 센서와 아두이노에서는 MPU-9250 DMP 라이브러리를 통해 해결하였고, 안드로이드와 유니티는 유니티에서 안드로이드용 플러그인 제작방법을 익히면서 해결하였다. 문제는 블루투스와 안드로이드에 있었다. 블루투스에서 전달받은 데이터가 유니티 위에서 손실된 값으로 보여진 것이다. 아니 병렬 통신도 아니고 직렬 통신인 블루투스에서 데이터 손실이? 의아해했지만 눈에 보이는 값을 보면 손실이 일어나는 것이 분명했다.

처음에는 Baud Rate의 문제일까 싶어 Static한 문자열을 넘겨받는 실험을 해보았고, 결과는 위 그래프와 같다. 각 Baud Rate를 바꾸어가며 일정량 이상의 패킷을 전송했고, 그중 손상된 패킷과 그렇지 않은 패킷을 카운팅하여 비율로 나타내었다.

19200 rate에서 유독 많은 손실률을 보인 것만 뺀다면 대략적으로 10% 내외의 손실률을 보유하고 있었다. 일단, Baud Rate는 문제가 아니었다. 하지만 10%라는 손실률은 유저를 거슬리게 하는데 충분하다. VR은 대략 90fps를 유지하는 것이 권장되고 있고 측정 결과 DMP 라이브러리를 사용하면 약 0.02초에 한번씩 패킷을 송출하게 된다. VR이 대략 90fps로 렌더링 된다고 가정했을 때 10%인 9프레임 내외가 이상한 값을 렌더링하게 된다면 충분히 눈에 거슬릴 수 있는 수준이었다.

문제는 유니티?!

아두이노에서 송출되는 데이터는 문제가 될 여지가 없어 보인다. 그렇다면 블루투스-안드로이드 영역이나 안드로이드-유니티 영역에서 문제가 발생하는 것일 텐데 처음에는 수정과 확인이 편리한 유니티 영역부터 다시 검토해보았다. 하지만 유니티 역시 문자열로 받은 데이터를 바이트로 변환하고 새로 큐에 저장하여 사용하였기 때문에 별로 문제가 되는 부분을 찾기 힘들었다. 결국, 알아보기 편하게 데이터 해석 로직을 안드로이드 코드로 전부 이전하고 다시 한 번 천천히 코드의 흐름을 읽으면서 파악해 나가기로 했다.

공식... 예제님?!

역시 천천히 분석해보면 답은 나오는 법! 그간 플러그인은 'BluetoothChat'이라는 안드로이드 예제를 참고하여 만들었는데 이 예제에 문제점이 있었다. 해당 예제는 사람이 블루투스를 이용하여 짧은 문자열을 주고받기 위한 예제였기 때문에 데이터를 연속적으로 빠르게 주고 받는 경우에 대한 대비가 되어있지 않았다. ~~(예제는 최대한 간결한게 좋으니 이해는 하지만.... 이건 또 이거대로 빡치네)~~

예제를 살펴보면 Main Thread가 가지고 있는 Sub Thread에서 블루투스와의 커넥션을 유지하고 블루투스의 메세지를 읽어 Main Thread에 보내 처리할 수 있도록 하고 있었다. 문제는 여기서 발생하는데 버퍼 데이터를 그냥 참조해서 넘기고 있었다는 것... 그렇다, 서로 다른 두 개의 Thread에서 데이터를 참조 형식으로 공유하고 있어 Main Thread가 버퍼를 해석하고 유니티로 전송하는 도중에 Sub Thread가 다시 버퍼를 초기화하고 메세지를 읽어올 수 있었다. (OS 시간에 배웠던 대참사 캐이스가 눈앞에서 벌어지는 상황이었다.)

해결법

해결법은 원론적으로 보면 'Mutex'같은 것을 사용하는 방법이 있겠지만 조금 다른 트릭을 사용했다. 바로 큐와 Arraycopy를 이용하는 방법이다. 버퍼를 읽어드린 뒤 바로 버퍼와 같은 길이의 배열을 동적 할당하고 큐에 저장한다. 그 뒤에 Arraycopy를 이용하여 버퍼에 있는 내용을 복사하면 끝! 큐에 들어간 이 친구를 꺼내주면서 Main Thread에 넘기고 처리하면 Sub와 Main이 같은 값을 이용하여 작업하지만 메모리 영역은 겹치지 않아 안전하게 작업을 처리할 수 있게 된다. 코드로 보면

사실 큐를 사용하는 것은 별 의미 없는 부분일 수도 있지만 순수하게 new로 할당한 위치만을 저장했다가 핸들러로 넘기고 싶어서 사용했다. 이런 방법 이외에도 애초에 데이터를 읽어서 저장하는 버퍼를 원형 큐로 제작하여 만들 수도 있을 것 같다.

Unity Android Bluetooth 플러그인 만드는 법

공대생 오르카 — Wed, 31 May 2017 22:39:11 +0900

이 포스팅 이후에 다시 플러그인을 개선시켜 결과물 갤러리에 포스팅 해두었습니다.
여기를 통해 확인 가능합니다.

DIY VR 컨트롤러를 만들던 도중에 아두이노에서 받은 여러 가지 센서값들 Unity/Unreal의 Android 프로젝트에서 받아 활용하기 위해서는 블루투스나 WIFI 모듈을 이용한 통신을 해야 한다. Unreal은 Unity와는 다르게 아직 생각보다 자료가 적어 난항을 겪다가 Unity로 먼저 예시를 만들기로 했다. ~~(Unity로 하다보니 Unreal도 어떻게 접근해야 하는지 알겠다는 건 함정)~~

어쨌든, Unity Android 프로젝트에서 디바이스에 연결된 Bluetooth를 이용하기 위해서는 Plugin을 만드는 절차가 필요하다. 원래대로라면 JNI를 사용하여야 하지만, Unity가 이에 관련된 래퍼 클래스를 제공하고 있어 생각보다 손쉽게 Plugin을 만들 수 있었다.

(해당 유니티 매뉴얼 )

그 방법은 바로 UnityJavaClass를 이용하는 방법이다. Bluetooth에 관련된 플러그인들이 이미 에셋 스토어를 통해 배포되고 있지만, 공부 목적으로 만들고 있으니 직접 제작해보기로했다. ~~(이 방법과 JNI를 이용하는 방법을 익혀야 Unreal에서도 써먹을 수가 있지 크흠...)~~

준비작업

Unity Android Plugin을 제작하는데 필요한 물건들은 java class와 Manifest 파일 그것들과 인테그레이션되는 Unity 스크립트가 필요하다. 필요한 안드로이드 기능들과 UntiyPlayer를 이용하여 Unity와 인테그레이션된 java파일들을 jar로 패키징하여 Manifest와 함께 Plugins>Android 폴더에 집어넣게되면 사용 준비 끝!

주의할 점은 jar로 패키징할때 android studio나 eclipse를 이용하여 패키징해야 한다는 점... 누가 cmd에서 jar 명령어로 패징한다면 된다고한 글을 보고 줄기차게 따라 하다가 '지정된 경로에 해당 클래스를 찾을 수 없다'는 에러와 3시간 동안 씨름했다. 여튼 플러그인을 jar로 패키징하려면 android studio를 이용하자 (방법은 여기에 자세히 설명됨)

*해당 방법으로 패키징할때 lint에러를 던진다면 여기를 참조하기 바람

구조

대략적인 구조는 위 그림처럼 간단하게 UML 스타일로 도식화해보았다. 노란색 영역이 Plugin에서 구현된 영역이고, 파란색 영역이 Plugin을 활용하는 Unity Script 영역 그리고 초록색 영역이 해당 기능을 Android에서 구현한 부분이다.

대략 해설을 해보면 BluetoothController가 Bluetooth를 이용하여 Android영역에 요청을 날리고, 결과를 BluetoothModel에서 업데이트 받는 방식다. 업데이트를 받았다면 컨트롤러는 옵저버를 상속받기 때문에 Model의 변경 시점을 파악하고, 변경된 데이터를 받아와 처리해서 View를 업데이트할 수 있다. 간단한 구조다.

구현 코드는 대략 완성이 되었는데 Java 메소드를 호출하는 스크립트 부분을 어떤 패턴을 이용할지에 대해 고민을 많이 했다. 이 부분을 싱글톤을 사용하여 해당 java 메소드를 호출하는 유일한 객체로 만들어줄지, 아니면 보다 커플링을 줄이기 위해 유일함을 포기해서 디자인할 것인지. 이것을 MVC 패턴과 어떻게 연결해야 할지에 대한 고민이 대부분이었다.

코드 설명

이 글에서는 모든 소스코드를 설명하지는 않을 것이다. 분량도 분량이지만 안드로이드 블루투스 통신 예제인 'BluetoothChat'을 많이 참고하여 제작할 수 있는 플러그인이고, 공부하는 면에서도 방향만 대략 설명하고 스스로 코드를 읽으면서 이해하는 편이 더 좋을 것으로 생각한다. BluetoothChat에 대한 예제는 오래된 예제라 설명하는 블로그가 많으니 내가 직접 작성한 C#코드를 위주로 설명하려 한다.

위 코드는 두 개의 클래스로 분리되어있다. 블루투스와의 연결을 관리하고 있는 BluetoothService와 이것을 서브 쓰레드로 가지고 있으며 UnityPlayerActivity를 상속받고 있는 BluetoothPlugin이다. 먼저, BluetoothService는 3개의 쓰레드들 가지고 블루투스와의 연결을 관리한다. BluetoothPlugin에서 연결 요청을 보내고 handler를 통해 결과를 받아보게 된다. 통신 결과나 연결 상태, 결과를 상황에 따라 UnityPlayer.UnitySendMessage() 메소드를 이용해 Unity 스크립트로 매핑하여 보낼 수 있게된다.

그럼 이제 어떻게 이 플러그인을 활용했는지 살펴보자. 만들 때 MVC 패턴을 만들도록 유도하여 제작하였기 때문에 Controller와 View정도만 추가로 제작하여 사용하면 될것같다. github에는 좀 더 한눈에 보여주기 위해 Controller와 View의 역할을 합쳐 간단하게 제작하였음을 알린다. 그럼 코드를 살펴보자.

UML처럼 BluetoothModel과 Bluetooth를 가지고 있고, Model로부터 데이터를 받아 Text를 업데이트 하고 있다. Model에서는 Android에서 메세지를 보낼 때마다 업데이트하는 것이 아닌 일정 규격의 패킷이 전송된 것을 감지하면 메시지 큐에 집어넣고, 메시지 큐에 데이터가 업데이트되었다고 알람을 보낸다. 이렇게 하면, 통신 속도에 따라 중간에 데이터가 손실되는 일 없이 안전하게 Bluetooth로 부터 데이터를 전송받고 화면에 표시해 줄 수 있다.

결과

보는 것 처럼 잘 작동합니다. 조이스틱 하나를 트리거(방아쇠)형식으로 사용할 것이기 때문에 특정 방향으로 조이스틱을 당기면 TRIGGER_STATE를 반환할 수 있도록 제작하여 테스한 모습니다.

이 포스팅 이후에 다시 플러그인을 개선시켜 결과물 갤러리에 포스팅 해두었습니다.
여기를 통해 확인 가능합니다.

배포

Github

이번엔 파일이 아니라 Github를 통해 배포합니다. 링크로 들어가서 [Clone or download]를 통해 zip 파일로 다운받아 사용하시면 될것같습니다.

옵저버 패턴 [Observer Pattern] : 정보는 뿌릴태니 알아서 들으렴!

공대생 오르카 — Mon, 29 May 2017 21:44:05 +0900

오랜만에 다시 디자인 패턴을 포스팅하는 것 같다. 마찬가지로 C++가 아닌 C#이나 Javascript, Python을 이용하여 프로그래밍하다가 C++을 하려니 간단한 예제인데도 포인터로 실수 좀 했다 ㅎㅎ... 이번 패턴은 옵저버 패턴이다. 직역하면 관찰자, 감시자 정도일 것 같은데 이름만 들어서는 감시하는 객체가 빡시게 일할 것 같지만 사실 감시당하는 객체 쪽에서 열심히 일해주어야 한다. (처음 배울 때 관찰당하는 객체와 하는 객체의 역할이 헷갈려서 고생 좀 했었지...) 기본적인 메커니즘은 '관찰하고 싶은 객체'가 '관찰당하고 싶은 객체'에게 "나 널 관찰하고 싶어!"라고 알려주면, '관찰 당하고 싶은 객체'가 기억해 두었다가 특정 사건이나 변화가 일어날 때 '관찰하고 싶은 객체'에게 찾아가 알려주는 방식이다. 그림으로 보자면 다음과 같다고 할 수 있다.

이렇게 관찰당하는 사람이 자발적으로 알려준다는 점에서 우리가 일반적으로 알고 있는 '관찰자'의 이미지와는 조금 다르다고 할 수 있다. 여튼 이 패턴은 게임개발에서도 아주 자주 사용하는 패턴 중의 하나이다. 업적 시스템이나 캐릭터 체력이나 상태 관련 UI 업데이트 등에서 사용하고 있고, 익히알고있는 MVC 패턴에서 M과 V를 느슨하게 연결하게 해주는 패턴이기도 하다. 그렇다면 어떤 구조로 이루어져 있을까? UML을 통해 살펴보자.

UML

글로 간단하게 설명하자면, Observable은 관찰당할 클래스가 상속받는 클래스이다. ObserverList를 이용해 자신을 관찰하는 옵저버들을 가지고 있고, Observer는 AddObserver()를 이용하여 ObserverList에 스스로 등록하게 된다. 그리하여 ConcreteObservable의 여러 Method를 통해 특정 상태가 바뀌거나 이벤트가 발생했을 때 ObserverList에 있는 Observer들의 Notify() 메소드를 호출하여 알려 줄 수 있게 되는 것이다. 심플하게 작동한다. 물론 도전과제처럼 원하는 작업이 끝나면 RemoveObserver()를 이용하여 더이상 관찰하지 않아도 된다. 글로 대강 이해가 되었으면 소스코드를 살펴보자.

소스코드

첫 번째 소스코드를 보면 Observer와 Observable에 대한 함수들이 정의되어있고 함수들은 가상 함수로 선언되어있다. 일단 ObserverList는 사용하기 무난한 STL Vector를 이용하였고, Observer는 간단하게 Notify만 정의되어있다. 위 클래스를 상속받은 ConcreteClass를 살펴보자.

두 번째 소스코드는 이해를 조금이나마 더 쉽게 하기 위해 '유저의 상태'와 '게임 오버 판넬'로 예시를 들었다.

UserModel은 상속받은 클래스의 가상함수를 구현하고 있는 것을 볼 수 있고. vector에 Observer들을 저장하고 지우는 코드이니 이 부분은 간단할 것이다. AttackByEnemy()를 통해 공격받은 공격력과 관통력, 방어력을 이용하여 남은 HP를 계산하고 HP가 0이 되면 이 이벤트를 GameOverView를 Notify()를 통해 전달한다.

사실 이 방법을 사용하면 한번에 여러 가지 정보나 이벤트를 전달하긴 힘들 것이다. 그래서 특별한 상황에서는 다른 방법을 사용할 수 있는데 다음과 같다.

보면 바로 알 수 있겠지만, Notify의 파라메터에 Observable을 넘겨서 원하는 상태 변수에 접근할 수 있도록 도와줄 수도 있다. (이 경우에는 상태 변수에 접근할 수 있는 메소드들을 만들어 주어야겠지만...)

왜 사용할까?

답은 간단하다. 눈치가 빠르다면 코드를 읽을 때 눈치를 챘을 수도 있다. 상태 변화를 수신해야 하는 객체가 여러 개거나 전달 받아야 할 정보가 많을수록 객체들이 많아질 수 있고, 그렇게 되면 객체들의 연결이 복잡해지고 강하게 연결될 가능성이 크다. 때문에 옵저버 패턴을 이용하여 최대한 느슨하게 연결할 수 있도록 도와주기 때문이다.

MPU-9250 DMP 라이브러리와 사용법

공대생 오르카 — Tue, 23 May 2017 01:05:07 +0900

이번 학기 동안 거의 영상 편집이랑 요양 위주로 생활을 했기 때문에 다소 프로그래밍 감이 떨어졌다. 다시 프로그래밍 감을 살려보기 위해 평소에 만들어 보고 싶었던 DIY VR 컨트롤러를 만들기로 했다. 마침 저번 해커톤 때 사용하고 남은 아두이노와 조이스틱, HC-06이 남아있어서 활용해보기로 했다. 기울기와 위치를 측정해줄 IMU 센서가 없었기 때문에 아두이노 쇼핑몰에서 'MPU-9250'와 추가 '조이스틱'을 구매했고, 장착할 센서가 많기 때문에 편리하게 GND와 VCC를 확장할 수 있는 '아두이노 센서 확장 실드 5.0'을 구매해서 사용하였다.

문제가 발생?!

센서를 보다 쉽게 다루기 위해 MPU-9250관련 라이브러리들을 살펴보았다. 아두이노에 사용되는 센서 라이브러 중 가장 유명한 'I2Cdevlib' 레포를 살펴보았지만 위 사진처럼 6축 센서인 'MPU-6050' 이나 'MPU-9150' 라이브러리만 남겨져 있었다. 그래서 개인이 파일 형태로 배포하고있는 수정본들을 여러개 다운받아서 테스트해보았지만 하나같이 잘 작동하지 않았다. 심지어 레딧에 남겨진 글에는 지금 사용하고 있는 9250대신 6050센서를 구입해 사용하거나 직접 9150의 라이브러리를 고쳐서 사용해야 한다는 답변이 있었다. 다시 센서를 구매하기는 조금 꺼려졌기 때문에 9150 라이브러리를 수정하여 사용해보기로 했다. (3축이나 더 있는 센서를 버리고 6축을 사는게 좀...)

해결법?!

의외로 9150 라이브러리를 포팅하는 것은 간단했다. 레지스터 맵과 기타 코드들의 네이밍을 9250식으로 바꾸어주고, 데이터 필터 중 하드웨어에서 지원하는 DMP(Digital Motion Processing)를 사용하기 위해 9150을 위한 9축 DMP 라이브러리도 약간 수정을 가했다. 그것도 나름 간단하게 몇 가지만 조정하여 수정 가능했다. MPU-9250 라이브러리는 아래 링크에 있다.

MPU9250_DMP6.zip

위 파일을 다운로드 받게되면 필요한 의존성 라이브러리와 함께 패키징되어있다. ~~(그렇다고해봐야 math helper와 기본 I2Cdev 라이브러리)~~

'MPU9250.cpp' 에는 raw 파일을 읽을 때 필요한 함수들이 구현되어있다. raw 값을 이용하여 자신이 원하는 필터를 사용하고 싶다면 이 파일만 사용해도 충분하다. 하지만 DMP를 사용하기 위해서는 'MPU9250_9Axis_MotionApps41.h'가 추가로 필요하다. (필요한 코드가 내부에 구현되어있다) 추가로 구현되어야 하는 메소드들이 #define문으로 구별되어있기 때문에 ino파일 안에서는 'MPU9250_9Axis_MotionApps41.h'만 include하여 사용하면 된다. 기본적인 사용 방법은 MPU9250_DMP6.ino 파일만 살펴봐도 쉽게 알 수 있다. 원하는 데이터의 함수를 관련 변수들과 함께 넘겨 데이터를 제공받는 형태이다. C++코드에 대해 어느정도 지식만 있어도 라이브러리를 쭉한번 살펴보면 어떤식으로 구성되어있는지 파악하기는 편리할 것이다.

나아가서

일단 DIY VR 컨트롤러를 제작하기 위해서 시작했다. 필요한 것은 RPY 값들과 중력가속도를 제외한 순수 가속도 값인데, DMP를 통해 어렵지 않게 값들을 얻어 사용할 수 있었다. ~~(정확도에 대한 실험은 후에 DMP vs Madgwick 필터 성능을 비교할 예정)~~ 얻은 값을 사용할 수 있을 만큼의 오차를 가지고 있다고 가정하고 개발을 하고 있다. 원래는 언리얼 엔진을 이용하여 만든 게임과 연동하려고 했지만.... 언리얼 Android에서 Bluetooth와 시리얼 통신을 어떻게 하는지에 대한 자료가 없다... 유니티는 블루투스 플러그인까지 에셋 스토어에 있었던 것 같은데... 조금만 더 방법을 찾아보고 언리얼을 이용하여 개발할지 유니티를 이용하고 언리얼은 나중에 방법을 강구할지 생각해봐야 할 것 같다.

언리얼 서밋 2017 참관 후기

공대생 오르카 — Mon, 24 Apr 2017 20:32:50 +0900

지난 4월 22일, 코엑스에서 열린 언리얼 서밋(Unreal Summit) 2017을 다녀왔습니다. 올해로 세 번째 서밋 참가인데 이번에 얼리버드로 신청하려다가 입금을 깜박해서 다시 일반티켓을 구매하여 참가하게 되었습니다. 이번 서밋은 규모가 좀 커졌는지 지난 서밋들과는 다르게 '코엑스 그랜드볼룸'에서 진행되었습다. 오전 세션에는 기조연설이나 언리얼 로드맵같은 통합 세션들이 준비되어있었기 때문에 오후 세션만 참가할까 하다가 선착순 50명에게 '파라곤 장패드'를 준다고 하기에 아침 운동할 겸 일찍 출발했습니다.

사실 받기 전에는 예쁜 캐릭터의 장패드였으면 좋겠다고 생각했지만 역시나 홈페이지에 있던 것처럼 파라곤 영웅 스틸(Steel)이 그려져 있는 장패드였습니다. ~~(예쁜 캐릭터 많은데 왜...ㅠㅜ)~~ 첫 세션까지 남는 시간에 준비되어있는 부스를 얼추 다 돌고나니 스티커 몇 개와 머그컵, 언리얼 티셔츠등 기념품을 좀 챙길 수 있었습니다.

기조연설

기조연설을 통해 '팀 스위니'대표님은 언리얼이 지난 1년 동안 어떤 성과를 얻었고 게임과 게임 이외의 분야에서 어떤 역할을 하고 있는지 자랑(?!)하는 시간을 가졌습니다. 올해는 더 특별하게 철권 시리즈의 아버지인 '하라다 카츠히로'님께서 '철권 시리즈의 캐릭터 개발 철학'에 대해 이야기했습니다. 기조연설을 통해 특유의 개그를 곁들여 '반다이 남코에서 캐릭터를 만들어내는 프로세스'에 대해 설명해주시는 시간을 가졌었습니다.

1st Session : 'Character Art Pipeline for Paragon'

NDC2017과 겹치는 세션들이 몇 개 있었기 때문에 나는 최대한 NDC에서 볼 수 없는 세션 위주로 들으려 했습니다. 첫 번째 세션은 바로 페이스북에서도 세션 퀄리티가 높다고 홍보하신 'Character Art Pipeline for Paragon'. 홍보하신 대로 PPT의 퀄리티도 높고 의도한 것인지는 모르겠지만, 한국인 캐릭터인 '신비'를 주로 이용하여 캐릭터 제작과정을 보여주셨습니다. 언리얼의 최신기술을 가장빠르게 사용하여 만드는 게임인 만큼 신기하고 편리해 보이는 기능들을 많이 사용하면서 제작하는 것 같았습니다. 덕분에 빠르게 고퀄리티의 개성있는 캐릭터를 생성해서 테스트하고 있다고 합니다. ~~(실상은 그냥 아티스트가 갈려나가는 것 같지만...)~~

2nd Session : 블레이드2로 알아보는 Unreal Engine 4 & Vulkan API

다음으로 들었던 세션은 '블레이드2로 알아보는 Unreal Engine 4 & Vulkan API'라는 세션을 들었습니다. 시간표상으로 저에게 애매한 세션들만 있었기 때문에 그나마 프로그래머를 위한 세션을 듣기로 했습니다. 처음에는 블레이드2에서 이용한 Vulkan API 사용 팁을 들을 수 있을까 해서 찾아왔지만, 아직 출시를 앞두고 있는 게임이고, 최적화를 시작한지 별로 지나지 않아 Vulkan API에 대한 간략한 소개 정도(?)로 끝난 세션이었습니다. 원했던 것보다 살짝 가벼워서 조금 아쉬움이 남는 세션이었습니다. 전문가를 위한 언리얼 서밋에서 좀 더 깊이 다룰 수 있으면 좋을 것 같다는 생각이 드네요.

조기 퇴근

사실 뒤에 있는 'Technical Improvements in UE4 for Robo Recall and Beyond' 세션을 듣고 싶었는데 갑자기 당일날 선릉에서 약속이 생기는 바람에 듣지 못하고 퇴근하게 되었습니다. 원하는 세션을 전부 듣지는 못했지만 그래도 기념품은 쏠쏠하게 챙겨서 나쁘지 않았던것 같습니다. 외부 부스가 같은 장소에서 진행되었던 'Deview'보다 미흡한 것 같아서 조금 아쉽지만 저번 서밋보다는 다채로워진 것 같아서 괜찮았습니다.

NDC2017 참관 신청이 시작되었습니다

공대생 오르카 — Mon, 03 Apr 2017 14:51:09 +0900

재미있는 세션들과 전시회, 길거리 공연까지 볼거리가 많은 '넥슨 개발자 컨퍼런스 NDC 2017'의 참관 신청이 시작되었습니다. 컨퍼런스 진행 날짜는 4월 25일부터 27일까지 3일간 진행되고, ~~참관 신청 기간은 4월 3일부터 10일까지 일주일 동안 참관신청을 받고 있습니다.~~

~~참관 신청은 여기서 진행되고 있습니다.~~

~~현재 스캐쥴은 오류로 인해 페이지가 닫혀있지만, 오류 수정 후 조만간 다시 공개될 예정입니다.~~

~~시간표는 오류 수정 후 아마 이곳에서 확인할 수 있을 겁니다.~~

항상 이 시즌에 게임 관련 컨퍼런스들이 집중되어 있는 느낌이라 한동안 참관하느라 바빠질 것같습니다. (NDC, Ureal Summit, Unite etc)이번에도 재미있고 유익한 세션이 많기를 바라며...

[2017.4.18일 수정]

NDC17의 스캐쥴이 공개되었고 '이곳'에서 확인할 수 있습니다.

아트북

페이스북 메시지를 이용해서 문의한 결과 올해도 어김없이 NDC 아트북을 준비했다고합니다. 보통 매일 컨퍼런스 시작 전 선착순으로 배포됩니다. NDC16에서는 '한빛 미디어'와 함께해서 무료 배부 뿐만 아니라 유료 판매까지 했는데 올해에는 어떻게할지 모르겠네요.

가는 길

항상 그랬던것 처럼 판교 넥슨 본사에서 진행됩니다.

참고 글

0. 지난 NDC 길거리 공연 모음집
1. 지난 NDC 리플래이

예능 자막의 재구성 - 마리텔편 [말풍선]

공대생 오르카 — Thu, 23 Mar 2017 00:31:07 +0900

'마이 리틀 텔레비전'이 만들기도 쉽고 개성이 있다 보니까 예능 자막의 재구성 시리즈에서 자주 다루는 것 같습니다. 이번에 만들어볼 마리텔 자막은 바로 말풍선입니다. 주로 강조하는 대화문을 작성할 때 사용하는 것으로 보입니다. 일반적으로 사용하는 'Bang!'할 것 같은 말풍선에 테두리를 두껍게 하고 흰색 텍스트에 강조할 단어를 노란색으로 처리하여 눈에 잘 띄게 만들어 둔 자막입니다.

말풍선만 잘 구하면 생각보다 편하게 만들 수 있고, 포스팅 끝에 파일을 공유할 것 입니다. 준비물, 완성본을 따로 업로드할 것이니 웬만하면 준비물을 이용하여 직접 제작해보는 것을 추천합니다. (이래야 다른 자막들도 보고 만들 수 있게되겠죠?)

invalid-file

말풍선 자막 재구성

1. 먼저 준비물 파일을 다운 받습니다.
2. 준비물 파일을 열어보면 말풍선 태두리와 사용 폰트, 사용한 색상이 보일겁니다. (폰트는 원하는거 사용가능)

3. 먼저 1번 준비물인 태두리를 원하는 프로젝트 파일에 가져옵니다.
4. 레이어 스타일에서 '획'과 '색상 오버레이'를 사용합니다.
5. 3번 준비물에서 각각 왼쪽 색상이 '색상 오버레이', 오른쪽이 '획' 색상입니다.
6. '획'옵션에서 위치를 '안쪽'으로 설정하고 진행해야 원하는 말풍선을 얻을 수 있습니다.

7. 그 위로 원하는 텍스트를 입력 해줍니다.
8. 강조할 단어를 밝은 노란색으로 설정하여 입력하면 완료!

완성본

간단하게 말풍선을 만들어 보았습다. 불타는 모양의 png 파일을 활용하여 화내는 느낌을 만들어 볼 수도 있을겁니다.

invalid-file

언리얼 서밋 2017 얼리버드가 시작되었습니다

공대생 오르카 — Wed, 22 Mar 2017 19:32:31 +0900

2015년부터 꾸준히 참여했던 언리얼 서밋이 '언리얼 서밋 2017'로 다시 돌아왔다. 언리얼 서밋은 에픽게임즈에서 주최하는 언리얼 엔진 관련 컨퍼런스로 매년 유료로 개최하고있다. 나름 경쟁(?) 엔진인 유니티 엔진의 UNITE와 비슷하다고 보면된다. 나는 UNITE보다 티캣비가 저렴하고, 관심있는 엔진이기 때문에 이번에도 참여할 것같다.

현재는 얼리버드가 오픈되어있다. 컨퍼런스일은 2017년 4월 22일로 역시나 토요일이다. 조금 특이한건 이전 서밋들은 세종대에서 진행되었지만 이번 언리얼 서밋 2017은 코엑스 그랜드볼룸에서 진행되는 것같다. 접근성은 저번보다 조금 상승했다는 느낌이다.

스캐줄

스케쥴이 아직 완성된것은 아니지만 흥미로운 주제들이 몇개보인다. 최근에 에픽 게임즈에서 공개했던 'Robo Recall' 관련 세션들인데 VR게임, 콘텐츠 관련 저보들을 얻어갈 수 있을것같다. 그외에도 '튜토리얼만 쌓여가는 유니티 개발자를 위한 조언'이나 '언리얼 엔진 4로 포토리얼리스틱 배경 만들기'가 눈에 띄는 것같다. 미정인 세션들을 조금 더 기다려봐야겠지만 눈에 띄는 세션 위주로 들을 예정이다.

가격

가격은 작년보다 살짝 오른편이다. 고급 세션들과 기념품, 고급 도시락까지 지원하는걸 생각하면 나쁘지 않은 가격이지만 가격이 오른것은 학생이보기에 조금 아쉬운일이다. (그래도 상당히 저렴한 편이라고 생각) 기록이 남아있어선지 이번에는 학생증을 제시하지 않아도 학생 얼리버드로 구매가 바로되었다.

자세한 사항은 언리얼 서밋 홈페이지 에서 지속적으로 업데이트되니 공식 홈페이지에서 확인하자.

트위치의 게임 판매는 어떤 의미를 가지는가

공대생 오르카 — Wed, 01 Mar 2017 20:37:16 +0900

최근 게임 스트리밍 플랫폼 '트위치'가 여러 가지 기능이나 서비스를 도입하기 시작했다. 그중 가장 눈에 띄는 서비스는 바로 방송 중인 게임 구매할 수 있는 기능인 '게임 커머스' 서비스이다. 스트리밍 플랫폼인 트위치가 게임 판매를 한다는 것 자체만으로 놀라운 일이지만, 이 서비스는 단순히 놀라운 도전이라기보다 그간 있었던 어느 사소한 논쟁의 종지부를 찍을 수 있는 실험에 가깝다고 생각한다.

트위치 Blog : 트위치 게임 커머스가 곧 찾아옵니다

어떤 논쟁?!

한창 인터넷 방송, 게임 실황 스트리밍이 인기를 얻어가면서 게임 제작자와 스트리머 사이에 있었던 작은 마찰이 하나 있었다. 바로 '게임 실황 방송'이 게임의 실질적인 판매에 어떤 영향을 미치는지에 관한 것인데 크게 두 가지 의견으로 나뉘었다.

'스트리머의 역량을 통해 게임 플래이에 조미료를 뿌려 게임을 홍보하기 때문에 판매 수익에 긍정적인 영향을 끼친다.'

'스토리 위주의 게임은 방송을 통해 스토리나 엔딩 영상이 유출되는 것은 수익에 긍정적인 영향을 미칠 수 없으며 저작권법 침해의 소지가 있다.'

라는 두 의견이었다.

개인적으로 두가지 의견이나 근거들이 이해할 수 있는 수준이기 때문에 어느 의견을 적극적으로 지지한다는 편은 아니다.

뭐가 문제?!

이 논란의 핵심은 바로 '스트리머의 게임 플레이 영상'이 '게임 판매에 직접적이면서 긍정적인 효과'를 불러오는가? 이다. 사실 게임 방송과 게임 실황 영상들이 게임 구매에 긍정적인 영향을 불러올린다면 (간단하게 매출이 상승한다면) 게임 제작사가 스트리밍 방송을 반대할 이유가 없다. (물론 자본주의 관점에서)

문제는 지금까지 이런 상관관계를 확인해볼 방법이 없었다는 것이다. 직접적인 데이터가 없으니 서로 논리만 통해서 싸우고 있던 격이다. 그런데 바로 트위치의 '게임 커머스' 서비스가 이런 논란을 해결할 데이터를 수집할 수 있는 방법이 되어서 나타난 것이다. 만약 트위치의 '게임 커머스'가 유의미한 관계가 있다는 것을 판매량을 통해 증명해 준다면, 기타 다른 트위치의 서비스인 '게임 제작자가 자신이 만든 게임을 방송하는 방에 쿠폰을 뿌리는 기능'같은 여러 기능을 통해 win-win하는 그림도 그려나갈 수 있을 것이라고 생각한다.

과연, 트위치를 통해 이 논쟁은 해결될 수 있을까?

무료로 사용할 수 있는 게임 효과음(오디오) 모음

공대생 오르카 — Tue, 28 Feb 2017 17:01:27 +0900

만약 프로그래밍만 할 줄 아는 게임 개발자라면 게임 그래픽이나 사운드같은 요소들에 대해 항상 고민하고 있을 것이다. 학생이거나 인디게임을 개발하는 사람이라면 더욱 그럴 것이다. 나 또한 컴퓨터 공학과 학생으로서 그래픽을 잘 만진다든가 사운드를 잘 만져서 리소스를 뚝딱하고 만들어 낼 수 있는게 아니다 보니, 자연스레 무료로 사용할 수 있는 에셋이 있으면 감사하는 마음으로 사용하고 있다.

얼마전, 페이스북을 통해 20GB정도의 무료 게임 오디오를 구할 수 있게되었고 정말 괜찮은 자료인것 같아서 공유하려고 포스팅을 남긴다.

어떤 오디오파일?

어제, 그러니 2월 27일부터 GDC2017이 시작되었다. 이 오디오 모음집은 GDC2017을 기념하여 Sonniss로부터 제공받아 무료로 배포하는 효과음이다. 개인적, 상업적으로 사용할 수 있으며 모든게 무료라고 한다. 다만, 추가 1GB정도 되는 여분을 받고 싶으면 페이스북에 친구 추가해서 어디에 사용할 것인지 알려달라고 한다. (필수 사항은 아닌것 같기는 하지만 잘 사용했다면 감사의 인사 한마디 남기는 것도 좋을 듯?)

GDC2017 무료 오디오 다운로드하러 가기

음악은 여러 경로(드롭박스/구글드라이브/토렌트/다이렉트링크)를 통해 받을 수 있다. 일단 나는 마침 구글드라이브를 싸게 업그레이드해놓아서 구글드라이브에 추가해두었다. 홈페이지 안에서 트랙리스트를 확인 할 수도있다.

참고자료

추가로 아래 링크는 무료로 효과음을 공유하는 사이트 모음집, 나름 잘 정리되어있어서 참고해서 사용하는 것도 나쁘지 않을 것같다.

참고자료 링크

제목(Title)에서 그래픽 투명도가 반영되지 않는 버그 해결법

공대생 오르카 — Thu, 16 Feb 2017 22:09:21 +0900

이번 포스팅에서 다뤄볼 Premiere Pro의 아주 그지같은 버그는 (물론 가장 짜증 나는 건 VFR임 ^^) 바로, 제목(Title)에서 외부에서 만든 그래픽 소스를 가져올 때 알파 채널이 제대로 반영되지 않는 문제점이다.

저번 '예능 자막의 재구성' 포스팅에서 마이 리틀 텔레비전의 오글거리는 자막을 재구성해보았는데 마지막 부분에서 큰따옴표에 투명도를 넣어 조절하면 쓸만한 퀄리티가될 것이라고 했다. 그런데 사실 포토샵에서나 쓸모있는 부분이고 이걸 Premiere Pro로 가져오면 응~ 안돼~ 한 번이라도 시도해보았다면 다음과 같은 현상을 볼 수 있을 것이다.

응? 큰따옴표 어디감?

나도 모른다. 더욱 신기한 건 불투명도를 98로 해두면 사라지고 99로 하면 안 사라진다. 여러 의미로 Premiere Pro는 X나 신기한 놈인 것 같다. 짜증 나기는 하지만 그냥 시퀸스에 png 파일로 가져다 사용했었다. 뭐 제목(Title)에 알파값을 해석하는 놈이 일을 안하나 보나... 이렇게 생각했다.

그런데 생각할수록 짜증이 났다. 자막을 통으로 Photoshop에서 제작하여 가져올 경우에는 모르겠지만, 저번처럼 대사 자막 같은 틀은 Photoshop에서 작업하고 글자는 Premiere Pro에서 작업하는 것이 편한 경우에는 상당히 불편하다. 그냥 시퀸스에 올려두자고? 사실 그래도 된다. 그런대 제목(Title) 안에서 작업하면 좋은 점은, 정렬 기능을 이용하여 글자를 맞추기가 용이하다. 또, 상식적으로 생각해도 같이 사용할 물건은 같은 작업환경에서 다루는 것이 좋지 않겠는가? 짜증 나서 직접 해결법을 이리저리 찾아봤다. 놀랍게도 이미 조금 알려진 버그이지만 역시나.... 고냥 무시함... 그냥 시퀸스에 가져다 써라 라는 답변만 주구장창 달려있다. 그래서 직접 꼼수를 만들었다.

어떤 꼼수?

텍스쳐를 이용하는 꼼수이다. 위 그림처럼 그냥 제목(Title)에서 알파값이 있는 그래픽을 불러오면 어중간한 알파값들은 전부 없는 처리가된다. 해결 방법? 꼼수는 다음과같다.

1. 그래픽 유형을 그래픽에서 사각형으로 바꾼다.
2. 칠 메뉴에서 텍스쳐를 체크한다.
3. 텍스쳐를 고른다 (당연히 사용하고 싶은 그래픽을 가져온다)
4. 성공적

적당하게 완료했다. 유의할 점이라고 하면 텍스쳐를 기준으로 객체의 크기가 결정되는 것이 아니기 때문에 처음에 사용할 그래픽을 가져와서 비율을 먼저 맞춘 뒤에 텍스쳐를 입히면 좋다.

마치며

아 근데 이것도 귀찮아... 그냥 바로 알파값 해석해주란 말이야 이 어도비놈들아 ㅠㅜ

React와 Redux에 관한 공부 자료

공대생 오르카 — Tue, 14 Feb 2017 00:11:02 +0900

옛날에 React Native를 사용하여 모바일 앱을 개발한 적이 있다. 지금도 나오고 있는 물건이고, 첫 모바일 개발 경험치고 썩 나쁘지 않은 물건이였기 때문에 여유가 된다면 계속 공부해보고 싶은 물건중 하나이다. 하지만, 사실 모바일 개발은 커녕 게임 개발도 쉬엄쉬엄하고 있는 터라 React를 다시 공부하고 있지는 않지만 친구가 React 관련 좋은 공부자료를 공유해서 간단하게 React와 Redux에 관하여 공부할 거리를 정리 & 공유하는 포스팅을 작성해보려한다.

침고할만한 자료

네이버 D2 블로그 포스팅 - React 적용 가이드

웹 개발에 관련된 것들은 네이버 D2 포스팅에 정말 양질의 글들이 많이 올라오는 편이다. 아무래도 네이버에서 주력으로 개발하고 있는 분야이기 때문인것같다. 블로그 포스팅 전문을 살펴보면, 기본적인 React 설치법 부터 간단한 폴더 구성과 역할, React와 Redux가 어떻게 동작하는지 간단하게 서술되어있다. 예제코드를 통해 어떤 방식으로 움직이고 어떤 방식으로 시작해야하는지에 관한 가벼운 인사이트를 얻을 수 있는 포스팅이다. (사실 이전에 작성한 React Native 시작하기 보다 더 어썸한 포스팅)

github Redux 도큐멘트 페이지

네이버 D2 포스팅에도 걸려있는 링크지만 이 페이지를 통해 대략적으로 Redux의 개념을 잡고갈 수 있어서 좋았다. 한글 번역도 그나마 잘 되어있는 편이라 읽기도 편한 수준이다. 포스팅과 마찬가지로 한번쯤 쭉 훑고 지나갈만한 문서이기 때문에 링크를 걸어둔다.

How to get started react native redux

해외 포스트인데 React native로 Redux를 어떻게 시작해야하는지 간단하게 소개하고있다.

Redux with React Native - United Nations 발표 자료

Redux with React Native from Dan Jensen

14페이지 짜리 간단한 PPT이다. 주로 말하는 방식으로 PPT를 진행했는지 여러 설명보다 코드 캡쳐본이 더 많은 편디이다. 하지만 예제로 만든 프로젝트도 링크가 결려있으니 타고 들어가서 적당하게 따라하다보면 도움이 좀 되는 것같다.

Intergrating Data with React native

다른 글과 별 차이가 있는 글은 아니지만 포스팅에 있는 차트가 괜찮아서 추가하는 링크이다. 시각적으로 확인하고 싶을 때 한번 들러서 훑는것이 좋을듯하다.

*이 글은 주기적으로 업데이트할 예정이다.

공부 자료를 수집하고 있는 포스팅이기 때문에 자주 글이 업데이트 될 예정이다. 게임 개발이 좀 더 시급한편이라 모바일 앱 개발을 신경 쓸 수 있을지 모르겠지만... React native는 탐나기는 하는 스킬이기 때문에...

자막에 사용할만한 무료 폰트 추천

공대생 오르카 — Thu, 09 Feb 2017 04:41:23 +0900

자막 작업을 하면서 기본 폰트만 이용한다면.... 결과가 끔찍할거다. 다행히도 수 많은 폰트들이 있고 그걸 사용하면 예쁜 글씨로 자막을 만들 수있다. 하지만 저작권은 정말 중요하다. 창작물(영상, 사진)에서 해당 폰트로 보이는 글자들이 나왔다고해서 저작권을 어겼다는 증거가 될 수는 없지만, 실제로 폰트 저작권에 대해 소송이 걸리는 사례들이 많기 때문에 잘못되면 귀찮아 질 수도있다. (뭐 이럴때에는 대부분 혐의없음으로 처리되긴하지만 귀찮은건 매한가지)

정말 예쁜 폰트들은 유료인 경우가 많지만, 무료 폰트의 경우도 쓸만한 폰트들이 여럿 있기 때문에 주로 무료 폰트들을 애용하는 편이다. 요즘에는 기업들이 나서서 상업적으로도 무료로 사용가능한 폰트들을 많이 만들고 있고 좋은 정보들은 공유해보고 싶어서 자막 작업에 쓸만한 폰트들을 포스팅해본다.

1. 미생체

요즘 애용하고 있는 폰트이다. 윤태호 작가님의 손글씨로 만든 폰트로 비상업적, 상업적인 목적으로도 사용가능하다. 최근 포스팅이였던 '예능 자막의 재구성 - 마리텔편 [오글거리는 자막]'에서도 이 폰트를 사용했다.

미생체 다운 받으러가기

2. tvN 10주년 '즐거운 이야기체'

이 폰트 또한 요즘 애용하기 시작한 폰트이다. 케이블 채널 tvN에서 10주년 기념으로 제작한 폰트이다. 실제로 보면 tvN에서 사용하는 경우를 자주 볼 수있다. 이 폰트 또한 비상업적, 상업적인 목적으로 이용가능하다. 미생체와 같이 손글씨 느낌의 자막을 만들고 싶을 때 사용한다. 또한, 딩벳기호도 지원하는 폰트이기 때문에 필요한 특수기호들이 있으면 사용할 수도있다.

즐거운 이야기체 다운 받으러가기

3. 배달의 민족 한나/주아/도현/연성체

많은 사람들이 사용하고 있는 '배달의 민족'에서 제작한 4가지 폰트이다. 나는 '한나는 11살체'를 가장 애용하고 있으며, 그다음으로 '연성체'를 애용하고 있다. '한나는 11살체'는 무난한 고딕체 느낌을 내고 싶을 때 주로 사용하고, '연성체'는 간판에 사용하던 붓글씨 느낌을 내고 싶을 때 사용하는 편이다. (+추가로 '도현체'는 썸네일에서 주로 사용하는 편)

한나/주아/도현/연성체 다운 받으러 가기

4. 티몬 몬소리체

쿠팡과 더불어 양대 '소셜커머스' 서비스였던(?) 티몬에서 제작한 무료 폰트이다. 영문 전용 폰트도 있지만 영문은 더 좋은 폰트들도 있고 애초에 영어로 자막을 잘 만들지 않아서 '몬소리체'만 사용하고 있다. 고딕보다는 조금 부드러운 느낌을 내면서 두툼한 폰트를 사용하고 싶을 때 애용하고 있는 폰트 중 하나이다.

티몬 몬소리체 다운 받으러 가기

5. 윤고래체

윤디자인의 '한글날 한글 폰트 공모2015'에서 수상한 폰트이다. 최근에 알게된 폰트로 비상업적, 상업적으로 사용할 수 있으며 손글씨 느낌을 내고싶을 때 미생체와 더불어 사용하고 있는 폰트 중 하나이다.

윤고래체 다운 받으러 가기

6. 고문서 서체

윤디자인에서 제작한 무료 폰트로 글씨체 보다는 영문에 대체되어있는 기호들을 주로 사용한다. '고문서'가 컨셉인 만큼 영어폰트가 필요없다는 느낌. 당초문이나 건축문 정도가 가장 사용할 수 있는 범위가 큰것같다.

고문서 서체 다운 받으러 가기

프리미어 프로에서 크로마키 활용법

공대생 오르카 — Wed, 08 Feb 2017 14:42:05 +0900

[ 출처 - (따튜브 영상) 노오오오잼!!! ]

가끔 티비를 보거나 유튜브 영상을 둘러보기만 해도 배경이 투명하면서 움직이는 영상을 합성한 영상(?!)이 가끔 보인다. 주로 폭발하는 부분이나 불타는 부분, 날씨, 분위기를 표현하는 특수효과를 위해 사용하는 것으로 보인다. 인터넷 방송을 좀 봤다고 하면 '크로마키'라는 단어를 들어본적은 있을 텐데 바로 그 기법을 사용하는 것이다. 최근에 이 기능을 사용해 보았는데, 간단한 방법으로 단순한 이미지를 사용하는 것보다 좀 더 느낌 있는 영상 자막을 만들 수 있는 것 같아서 방법을 공유하려고 한다.

크로마키(Chroma key)란?

간단하게 말하면 한 영상에서 '좁은 범위'의 색을 제거하여 배경을 투명하게 만드는 기술이다. 뒷 배경을 파란색이나 녹색을 배경으로 촬영을 하고 소프트웨어적으로 이 파란색이나 녹색을 제거하여 원하는 물체의 움직임만 따낼 수 있게 된다. 서양에서는 주로 녹색을 사용하고 우리나라에서는 주로 파란색을 사용한다.

크로마키 소스는 어디서 얻나?

당연하게도 직접 촬영을 하는 방법이 있지만, 현실적으로 무리이고 특수효과 같은 것은 Youtube에 'free green chroma key effect'정도의 키워드를 이용하여 검색하면 찾을 수 있다. (Youtube 영상을 다운로드하는 방법은 주제와 벗어나므로 다른 블로그들을 통해 알아보는게 좋을 것 같다.)

추천하는 채널은 [HD Green Scree n ] 이나 [Green S creen A nimation ] 정도이다. 돌아다니면서 혹은 키워드를 추가해보면서 원하는 영상을 찾으면 된다.

프리미어 프로에서 사용법

사용법은 간단하다.

1. 먼저 합성될 영상과 합성할 영상을 준비한다.
2. 합성될 영상위에 합성할 영상을 옮겨 놓는다.

3. 적당한 위치에 올려두고, [효과 패널]에 가보자. [효과 패널 -> 비디오 효과 -> 키잉 -> 울트라 키]를 드래그하여 합성할 영상에 적용한다.

4. 합성할 영상을 클릭하고 [효과 컨트롤]패널을 살펴보자, 울트라 키 섹션이 생긴것을 알 수 있다.
5. 중요한 것은 '키 색상'이다. 키 색상으로 선택된 색 영역이 투명하게 변한다. 옆에 스포이드 아이콘을 눌러 영상에서 지울 색을 선택하자.

이렇게하면 어썸하게 배경이 사라진 영상을 볼 수있다. 이렇게 했는데도 지워져야하는 색이 조금 남았다? 효과컨트롤에서 '설정'의 값을 조절하면 된다. 조금 많이 지워졌다고하면 낮음, 덜 지워졌다고하면 높음, 애매하다고하면 사용자 지정 설정이있다.

활용법?

나도 그렇게 이 기능을 많이 활용해본것은 아니지만, 맨 처음 따튜브에서 활용한 것처럼 화를 내는 상황에서 주로 활용할 수 있을 것같고, 눈오는 장면이나 화면이 갑자기 얼어버리는 효과등으로 썰렁한 개그를 첬을때 정색하는 타이밍에 사용해줘도 좋을 것같다.