[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기

NCSOFT / A2 Seed
성낙호 / 조현철
자바스크립트로 쉽고 빠른 UE4 개발하기
Unreal.js

조현철
NCSOFT A2 Seed 프로그램팀
3년 차 개발자
React-UMG 개발, 발표
성낙호
NCSOFT A2 Seed AI Tech팀
18년 차 개발자
헥스플렉스 <더 보스:라 코사 노스트라>
레드덕 <AVA>, <Metro Conflict>
Unreal.js 개발, 발표
발표자 소개

발표에서 다룰 내용
1. Unreal.js
2. UI Development with Unreal.js

Unreal.js JavaScript powered Unreal Engine 4

언리얼 마켓플레이스에 무료 공개
언리얼 데브 그랜트 수상
https://github.com/ncsoft/unreal.js
Unreal.js – 오픈 소스 프로젝트

즐거운 개발
• 프로젝트 시작 초기의 가장 큰 고민거리
• 몇 번이나 갈아 엎게 될까?
• 어떤 일 때문에 좌절하고, 어떤 작업에 짜증날까?

고통스러운 (이제까지의) 현실
기획 = 생각 → 문서 작성 → 대기 → (튜닝 → 실행 → 대기)*
코딩 = 기획서 확인 → 코드 작성 → 디버그(빌드 → 대기 → 실행 → 대기 → 수정)*
아트 = 툴1 → 툴2 → 툴3 → 툴1 → 툴4 → ...

Silver bullet
기획자, 아티스트…
• 필요한 툴을 그때 그때 만들어 주는 개발자
• 잦은 변심에도 짜증 내지 않는 개발자
개발자…
• 빌드, 크래쉬 없이 개발할 수 있는 환경
• 생각하는 속도로 코딩할 수 있는 환경

현실
• 고통스러운 UE4 Tool Extension 만들기
• 고통스러운 C++ coding
• 고통스러운 Blueprinting

(커 보이는) 남의 떡
• JavaScript로 쉽게 만드는 Application
• Node.js
• VSCode (https://code.visualstudio.com/)
• Slack
• React-native (https://facebook.github.io/react-native/)

Imagine...
• 개발 과정의 수많은 "대기(wait)"를 없앨 수 있다면?
• 빌드, 크래쉬가 없어질 수 있다면?
• 코드를 고치면 바로 작동을 확인할 수 있다면?
• 필요로 하는 많은 툴을 webapp 만들 듯 만들어 낼 수 있다면?
• Web application 만드는 기분으로 UE4를 확장할 수 있다면?
• 내 게임에 맞춤형 데이터 에디터를 Native UE4처럼 만들 수 있다면?
• 게임 UI 제작, 보수가 기분 나쁘지 않은 일이 될 수 있다면?
• 최신 Web UI Framework을 사용하여 AAA 게임 UI를 만들 수 있다면?

Code like a ninja with JavaScript!
• 무정지 개발 – Zero build
• 코드 재활용 – DRY (Do not Repeat Yourself)
• 함수형 언어 – Closure (over lambda)
• 절차적 UI – Modern web development

REPL: Interactive Coding Window

왜 JavaScript?
Battle-proven
• Web era: First Class Language
High performance / Flexibility
• Node.js로 입증된 효용성
• Functional programming을 매우 손쉽게 구사 가능
Rich community
• npm: 무료로 사용 가능한 '엄청나게' 많은 재사용 가능한 코드
Rich IDE
• Visual Studio, Visual Studio Code, Chrome devtools

Profiling
V8의 강력하고 쉬운 프로파일링 도구.
보다 쉬운 최적화가 가능한 환경을 제공.

Do not reinvent the wheel
• Host 기능을 그대로 활용 및 확장
• Logic: Actor/Component
• UI: Slate / UMG
• Open source를 최대한 leverage!
• 널리 사용되는 빠른 스크립트 엔진 도입

Technical details
Unreal.js는 세심하게 설계된 Script Bridge Layer
1. Bridge
1. UE4  JS : Auto reflection (UCLASS, UFUNCTION, USTRUCT, UPROPERTY, …)
2. JS  UE4 : Type Declaration(UCLASS, UFUNCTION, USTRUCT, UPROPERTY, …)
2. JavaScript as a First class language
3. Node.js 유사 JavaScript 개발 환경
1. Auto completion, live reload
2. npm
3. Chrome devtools

Wiki
https://github.com/ncsoft/Unreal.js/wiki

Example
https://github.com/ncsoft/Unreal.js
https://github.com/ncsoft/Unreal.js-demo

Cyberpunk City Simulator by mflux
출처 : https://forums.unrealengine.com/showthread.php?97521-Cyberpunk-City-Simulator-(Procedural-UE4-JS)&p=455447#post455447

바뀌고.. 바뀌고.. 또 바뀌고….
한번에 끝나는 일이 거의 없음.
자잘한 수정사항이 많아서 빠른 개발
환경이 필수적임.
UI Development?

Previous work: UI
• Scaleform, Coherent UI, EA webkit, Awesomium, BLUI, …
• 별도의 UI process
• Engine과 상관 없는 renderer.
• Web스럽거나, 다시 만든 바퀴

UI 개발 방향
UIFast Iteration
Performance Productivity
Flexibility

UMG.js
SNew(SVerticalBox)
+ SVerticalBox::Slot()
[
SNew(STextBlock).Text(FText::FromString("A text")
)
]
+ SVerticalBox::Slot()
[
SNew(SCheckBox)
.IsChecked(this, &SPBMainWidget::HandleCheckBoxIs
Checked, &SPBMainWidget::bCheckboxValue)
.OnCheckStateChanged(this, &SPBMainWidget::OnChec
kBoxChanged, &SPBMainWidget::bCheckboxValue)
[
SNew(STextBlock).Text(FText::FromString("A ch
eckbox"))
]
]
UMG.div({'slot.size.size-rule': 'Fill'},
UMG(Button,{OnClicked:_ => fire()},"RUN"),
UMG(MultiLineEditableTextBox, {
'slot.size.size-rule': 'Fill',
WidgetStyle: {
'font.font-object' : GEngine.SmallFont,
'font.size': 20
},
Text: source,
$link: _elem => {
elem = _elem
},
$unlink: _ => {
}
})
)

초기 개발 방식 - Angular.js (In House Code!) + Jade + UMG.js
function rootScope(scope) {
scope.text = 'Hello Scope!'
scope.count = 0
scope.inc = () => scope.count++
scope.items = []
scope.discard = (item) => {
scope.items = _.filter(scope.items,
(i) => i != item)
}
scope.add = () => {
scope.items.push({key:Math.random(),
value:Math.random()})
}
_.range(0,10).forEach(()=>scope.add())
}
div
span.full
Button.full
text {{text}}
div.full
Button.full(fn.on-clicked="inc()")
text {{count}}
Button.full(fn.on-clicked="add()")
text Click button above!
span
text.yellow >
EditableText(Binding.Text='text',
fn.on-text-
changed='text = ^arguments[0]')
span
list.full(repeat='item in items',on-
click="discard(item)")
HorizontalBox.small
text.full {{item.key}}
text.full {{item.value}}

초기 개발 방식 - Angular.js (In House Code!) + Jade + UMG.js
• 높은 유지보수 비용.
• 높은 러닝 커브.
• 웹에서는 어떻게 쓰는지는 대충 알겠는데, 게임에서는 어떻게 써야하나.
• 앞의 세가지 이유로 생산성이 너무 떨어졌음.
일단은 UMG.js만 쓰기로 결정.

Only UMG.js
UMG.div({'slot.size.size-rule': 'Fill'},
UMG(Button,{OnClicked:_ => fire()},"RUN"),
UMG(MultiLineEditableTextBox, {
'slot.size.size-rule': 'Fill',
WidgetStyle: {
'font.font-object' : GEngine.SmallFont,
'font.size': 20
},
Text: source,
$link: _elem => {elem = _elem},
$unlink: _ => {}
})
)
Pros.
• 빠른 개발
• 비교적 쉬움
Cons.
• 정리되지 않는 코드
• 디버깅 지옥
• UMG Instance와 JS간의 Coupling
장점에 비해 단점이 너무 치명적.
Web에서 많이 쓰이는 UI Framework를 찾아보자.

• react-umg
• Github에 공개된 오픈소스.
• UMG에서 React를 사용할 수 있게 하는
React renderer의 POC 구현체.
그러던 와중…

React에 대해 간단하게 알아봅시다

• Facebook에서 공개한 자바스크립트 UI 라이브러리
• Custom Component를 만들고 조합하여 View를 손쉽게 만들 수 있음.
• DOM Dependency가 없음.
• 재사용성이 높음.
• 웹 뿐만 아니라 많은 플랫폼에서 이미 검증된 라이브러리.
• 수많은 오픈소스와 예제들.
- A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

React - One way Data Flow
• Data flows down
• Props is immutable
• States is mutable
• Event flows up
• Render by setState
setState()
Parent
Child ChildChild
props props props
event

class Timer extends React.Component {
constructor(props) {
super(props);
this.state = {secondsElapsed: 0};
}
tick() {
this.setState((prevState) => ({
secondsElapsed: prevState.secondsElapsed + 1
}));
}
componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return (
<div>Seconds Elapsed: {this.state.secondsElapsed}</div>
);
}
}
ReactDOM.render(<Timer />, mountNode);
class HelloMessage extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
ReactDOM.render(<HelloMessage name="Jane" />, mountNode);
React.createElement('div',
null,
'Hello ',
this.props.name)
Transform!

React - Component Lifecycle
출처 : https://velopert.com/1130

React-UMG
• A React renderer for Unreal Motion Graphics With Unreal.js
• https://github.com/ncsoft/React-UMG
• npm i --save react-umg
• Pure React.js를 사용하며, Web에서의 React.js와 유사한 개발 환경을 제공.
• React.js가 React DOM에 render 한다면, UE4에서는 React-UMG에 render.

React-UMG
• React Component는 대문자로, UMG element Type은 소문자를 사용.
• etc. UButton => uButton
• Web에서의 DOM Element를 UMG Widget이 대체.
• 웹 개발에 친숙한 element Type Naming
• UVerticalBox => div
• UHorizontalBox => span
• UTextBlock => text
• UImage => img
• UEditableText => input

React-UMG
• React Native에서 사용되는 Interface를 그대로 사용.
• UWidget을 상속받은 Class를 React Element로 Wrapping하여 사용.
• 미리 등록된 Widget Type에 맞는 UMG 인스턴스를 생성.
• Component를 Render할 때 마운트된 Component 대로 부모와 자식을 연결.

Real
Dom
Virtual
Dom
React
Components
setStatePatch
Event
Render
Web React-UMG
Virtual
Dom
React
Components
setStatePatch
Event
RenderUMG Widget
UMG Widget
UMG Widget
UMG Widget
…
Render할 대상만 다를 뿐 구조적으로 크게 다르지 않음.
React-UMG

class MyComponent extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {text:"MyComponent"};
}
OnTextChanged(value) {
this.setState({text: value});
}
render() {
return (
<div>
<uEditableTextBox Text={this.state.text} OnTextChanged={value=> this.OnTextChanged(value)}/>
<text Text={this.state.text}/>
</div>
)
}
}
Create a Component
let widget = ReactUMG.wrap(<MyComponent/>);
widget.AddToViewport();
return () => {
widget.RemoveFromViewport();
}
Draw With React-UMG
React-UMG

Make a Custom Widget Class Render With Custom Widget Class
React-UMG
class RadarWidget extends JavascriptWidget {
properties() {
this.size/*int*/;
this.speed/*float*/;
this.padding/*int*/;
}
OnPaint(context) {
let {size,speed,padding} = this
let r = size/2
let t = $time
let dx = (r - padding) * Math.cos(t * speed)
let dy = (r - padding) * Math.sin(t * speed)
context.DrawLine({X:r,Y:r},{X:r+dx,Y:r+dy},{G:1,A:1},true)
}
}
let Radar_C = uclass(RadarWidget)
ReactUMG.Register('uRadar',Radar_C)
class Radar extends React.Component {
render() {
return (
<div>
<uRadar {...this.props} {...this.state}/>
</div>
)
}
}

Dependency Injection
• React는 여러 플랫폼을 지원하기 위해 구현 클래스를 Injection할 수 있는
구조로 설계.
• DOM 환경에서 주입되는 Class와 React Native에서 주입되는 Class가 다름.
• React-UMG도 환경에 맞는 Component Class를 Injection.

Batching
• 컴포넌트가 여러 번 업데이트될 때, 마지막 한번만 렌더링하는 것이 효율적.
• React는 기본적으로 업데이트를 배치로 묶어서 처리.
• setState는 ReactUpdates.enqueueUpdate를 호출하여 Queue에 추가.
• 렌더링은 배치가 끝났을 때 ReactUpdates.batchedUpdates에 의해 한번에
처리.

Batching
ReactComponent.prototype.setState = function (partialState, callback) {
this.updater.enqueueSetState(this, partialState);
// ...
};
// updater
var ReactUpdateQueue = {
enqueueSetState: function (publicInstance, partialState) {
// ...
var queue = internalInstance._pendingStateQueue || (internalInstance._pendingStateQueue = []);
queue.push(partialState);
enqueueUpdate(internalInstance);
}
}
function enqueueUpdate(component) {
// ...
if (!batchingStrategy.isBatchingUpdates) {
batchingStrategy.batchedUpdates(enqueueUpdate, component);
return;
}
dirtyComponents.push(component);
}

Pooling
• 자주 할당되는 객체를 사용이 끝난 후 해제하지 않고 다시 사용함.
• React에서는 PooledClass 모듈을 통해 객체 풀링을 지원.
• Pooling에 추가된 Class는 getPooled 함수로 풀에서 인스턴트를 얻음.
• Pool에서 가져온 인스턴스는 사용이 끝난 후 release 함수 호출로 반환.

Transaction
• React의 Transaction은 어떤 함수를 실행하기 전과 후에 특정 동작을 수행할 수
있도록 감싸줌.
• 함수를 감싸는 Transaction Wrapper는 함수 수행 중에 예외가 나도 항상
호출되도록 되어 있어서 외부 자원의 상태를 안전하게 관리.
ReactUpdates.batchedUpdates(() => {
var transaction = ReactUpdates.ReactReconcileTransaction.getPooled();
transaction.perform(() => {
nextComponent.mountComponent(...);
});
ReactUpdates.ReactReconcileTransaction.release(transaction);
});

ReactUMGComponent
• UMG Widget의 Lifecycle 관리.
• mountComponent가 실행될 때 UMG Widget을 생성 후 부모 Widget에 Add
Child.
• UMG Widget이 Destroy 될 때 자동으로 React Component도 언마운트.
• UserWidget는 PanelWidget과 같은 위상에서 동작하도록 구현.
• PanelWidget의 AddChild와 UserWidget의 SetRootWidget이 같은 형태로
동작하도록 구현.

Garbage Collection
• JS에서 UE4 Instance를 가지고 있는 경우는 GC가 되지 않음.
• 주의해야 하는 점
• GC된 UE4 Instance에게 JS로 접근하는 경우
• UE4은 Destroy 됬는데 JS에서 Ref를 가지고 있는 경우

Container Component / Presentational Component
• Container Component
1. 데이터와 비즈니스 로직을 다룬다
2. Component Tree를 렌더링한다
• Presentational Component
1. 상태를 포함하지 않는다.
2. 컴포넌트 속성에 대한 Pure Function으로 구성한다
3. 표현만을 담당한다

출처: https://css-tricks.com/learning-react-redux/출처 : https://www.theodo.fr/blog/2016/03/getting-started-with-
react-redux-and-immutable-a-test-driven-tutorial-part-2
Redux

React-UMG 도입 후기
• 재사용성을 높이면서 반복되는 코드를 줄일 수 있었고 코드도 간결해짐.
• 뛰어난 생산성과 보다 쉬운 디버깅 환경.
• React의 Performance Cost Model이 단순해서 최적화하기가 쉬움.
• Container Component / Presentational Component
• View를 버리더라도 Logic은 재사용 가능해짐.
• Modding을 지원할 수 있는 기반을 마련할 수 있었음.

결론
• Unreal.js 쓰세요.
• UE4에서의 빠른 개발과 풍부한 표현을 보장해줍니다.
• React-UMG 쓰세요.
• 웹에서는 이미 대세인 React를 UE4에서 웹과 크게 다르지 않은 환경에서
개발 할 수 있습니다.

[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기

Recommended

More Related Content

What's hot

What's hot (20)

Similar to [NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기

Similar to [NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기 (20)

[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기

Editor's Notes