Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

5,964 views

Published on

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

https://github.com/ncsoft/Unreal.js
https://github.com/ncsoft/React-UMG

Demo Link -
https://youtu.be/3F0TGGqedkQ
https://youtu.be/kawyH68OB_g
https://youtu.be/EG99YW6P3rg

Published in: Engineering
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. NCSOFT / A2 Seed 성낙호 / 조현철 자바스크립트로 쉽고 빠른 UE4 개발하기 Unreal.js
  2. 2. 조현철 NCSOFT A2 Seed 프로그램팀 3년 차 개발자 React-UMG 개발, 발표 성낙호 NCSOFT A2 Seed AI Tech팀 18년 차 개발자 헥스플렉스 <더 보스:라 코사 노스트라> 레드덕 <AVA>, <Metro Conflict> Unreal.js 개발, 발표 발표자 소개
  3. 3. 발표에서 다룰 내용 1. Unreal.js 2. UI Development with Unreal.js
  4. 4. Unreal.js JavaScript powered Unreal Engine 4
  5. 5. 언리얼 마켓플레이스에 무료 공개 언리얼 데브 그랜트 수상 https://github.com/ncsoft/unreal.js Unreal.js – 오픈 소스 프로젝트
  6. 6. 즐거운 개발 • 프로젝트 시작 초기의 가장 큰 고민거리 • 몇 번이나 갈아 엎게 될까? • 어떤 일 때문에 좌절하고, 어떤 작업에 짜증날까?
  7. 7. 고통스러운 (이제까지의) 현실 기획 = 생각 → 문서 작성 → 대기 → (튜닝 → 실행 → 대기)* 코딩 = 기획서 확인 → 코드 작성 → 디버그(빌드 → 대기 → 실행 → 대기 → 수정)* 아트 = 툴1 → 툴2 → 툴3 → 툴1 → 툴4 → ...
  8. 8. Silver bullet 기획자, 아티스트… • 필요한 툴을 그때 그때 만들어 주는 개발자 • 잦은 변심에도 짜증 내지 않는 개발자 개발자… • 빌드, 크래쉬 없이 개발할 수 있는 환경 • 생각하는 속도로 코딩할 수 있는 환경
  9. 9. 현실 • 고통스러운 UE4 Tool Extension 만들기 • 고통스러운 C++ coding • 고통스러운 Blueprinting
  10. 10. (커 보이는) 남의 떡 • JavaScript로 쉽게 만드는 Application • Node.js • VSCode (https://code.visualstudio.com/) • Slack • React-native (https://facebook.github.io/react-native/)
  11. 11. Imagine... • 개발 과정의 수많은 "대기(wait)"를 없앨 수 있다면? • 빌드, 크래쉬가 없어질 수 있다면? • 코드를 고치면 바로 작동을 확인할 수 있다면? • 필요로 하는 많은 툴을 webapp 만들 듯 만들어 낼 수 있다면? • Web application 만드는 기분으로 UE4를 확장할 수 있다면? • 내 게임에 맞춤형 데이터 에디터를 Native UE4처럼 만들 수 있다면? • 게임 UI 제작, 보수가 기분 나쁘지 않은 일이 될 수 있다면? • 최신 Web UI Framework을 사용하여 AAA 게임 UI를 만들 수 있다면?
  12. 12. Code like a ninja with JavaScript! • 무정지 개발 – Zero build • 코드 재활용 – DRY (Do not Repeat Yourself) • 함수형 언어 – Closure (over lambda) • 절차적 UI – Modern web development
  13. 13. REPL: Interactive Coding Window
  14. 14. 왜 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
  15. 15. Debugging
  16. 16. Profiling V8의 강력하고 쉬운 프로파일링 도구. 보다 쉬운 최적화가 가능한 환경을 제공.
  17. 17. Do not reinvent the wheel • Host 기능을 그대로 활용 및 확장 • Logic: Actor/Component • UI: Slate / UMG • Open source를 최대한 leverage! • 널리 사용되는 빠른 스크립트 엔진 도입
  18. 18. 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
  19. 19. Wiki https://github.com/ncsoft/Unreal.js/wiki
  20. 20. Example https://github.com/ncsoft/Unreal.js https://github.com/ncsoft/Unreal.js-demo
  21. 21. Editor Extension
  22. 22. Cyberpunk City Simulator by mflux 출처 : https://forums.unrealengine.com/showthread.php?97521-Cyberpunk-City-Simulator-(Procedural-UE4-JS)&p=455447#post455447
  23. 23. UI Development with Unreal.js
  24. 24. 바뀌고.. 바뀌고.. 또 바뀌고…. 한번에 끝나는 일이 거의 없음. 자잘한 수정사항이 많아서 빠른 개발 환경이 필수적임. UI Development?
  25. 25. Slate UMG Previous work: UI
  26. 26. Previous work: UI • Scaleform, Coherent UI, EA webkit, Awesomium, BLUI, … • 별도의 UI process • Engine과 상관 없는 renderer. • Web스럽거나, 다시 만든 바퀴
  27. 27. UI 개발 방향 UIFast Iteration Performance Productivity Flexibility
  28. 28. 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: _ => { } }) )
  29. 29. 초기 개발 방식 - 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}}
  30. 30. 초기 개발 방식 - Angular.js (In House Code!) + Jade + UMG.js • 높은 유지보수 비용. • 높은 러닝 커브. • 웹에서는 어떻게 쓰는지는 대충 알겠는데, 게임에서는 어떻게 써야하나. • 앞의 세가지 이유로 생산성이 너무 떨어졌음. 일단은 UMG.js만 쓰기로 결정.
  31. 31. 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를 찾아보자.
  32. 32. • react-umg • Github에 공개된 오픈소스. • UMG에서 React를 사용할 수 있게 하는 React renderer의 POC 구현체. 그러던 와중…
  33. 33. React에 대해 간단하게 알아봅시다
  34. 34. • Facebook에서 공개한 자바스크립트 UI 라이브러리 • Custom Component를 만들고 조합하여 View를 손쉽게 만들 수 있음. • DOM Dependency가 없음. • 재사용성이 높음. • 웹 뿐만 아니라 많은 플랫폼에서 이미 검증된 라이브러리. • 수많은 오픈소스와 예제들. - A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
  35. 35. 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
  36. 36. 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!
  37. 37. React - Component Lifecycle 출처 : https://velopert.com/1130
  38. 38. React-UMG
  39. 39. 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.
  40. 40. 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
  41. 41. React-UMG • React Native에서 사용되는 Interface를 그대로 사용. • UWidget을 상속받은 Class를 React Element로 Wrapping하여 사용. • 미리 등록된 Widget Type에 맞는 UMG 인스턴스를 생성. • Component를 Render할 때 마운트된 Component 대로 부모와 자식을 연결.
  42. 42. 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
  43. 43. 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
  44. 44. 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> ) } }
  45. 45. Technical details
  46. 46. Dependency Injection • React는 여러 플랫폼을 지원하기 위해 구현 클래스를 Injection할 수 있는 구조로 설계. • DOM 환경에서 주입되는 Class와 React Native에서 주입되는 Class가 다름. • React-UMG도 환경에 맞는 Component Class를 Injection.
  47. 47. Batching • 컴포넌트가 여러 번 업데이트될 때, 마지막 한번만 렌더링하는 것이 효율적. • React는 기본적으로 업데이트를 배치로 묶어서 처리. • setState는 ReactUpdates.enqueueUpdate를 호출하여 Queue에 추가. • 렌더링은 배치가 끝났을 때 ReactUpdates.batchedUpdates에 의해 한번에 처리.
  48. 48. 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); }
  49. 49. Pooling • 자주 할당되는 객체를 사용이 끝난 후 해제하지 않고 다시 사용함. • React에서는 PooledClass 모듈을 통해 객체 풀링을 지원. • Pooling에 추가된 Class는 getPooled 함수로 풀에서 인스턴트를 얻음. • Pool에서 가져온 인스턴스는 사용이 끝난 후 release 함수 호출로 반환.
  50. 50. var TRANSACTION_WRAPPERS = [ON_UMG_READY_QUEUEING]; function ReactUMGReconcileTransaction() { this.reinitializeTransaction(); this.reactMountReady = CallbackQueue.getPooled(null); } var Mixin = { getTransactionWrappers: function() { return TRANSACTION_WRAPPERS; }, getReactMountReady: function() { return this.reactMountReady; }, getUpdateQueue: function() { return ReactUpdateQueue; }, destructor: function() { CallbackQueue.release(this.reactMountReady); this.reactMountReady = null; }, }; PooledClass.addPoolingTo(ReactUMGReconcileTransaction); Pooling
  51. 51. Transaction • React의 Transaction은 어떤 함수를 실행하기 전과 후에 특정 동작을 수행할 수 있도록 감싸줌. • 함수를 감싸는 Transaction Wrapper는 함수 수행 중에 예외가 나도 항상 호출되도록 되어 있어서 외부 자원의 상태를 안전하게 관리. ReactUpdates.batchedUpdates(() => { var transaction = ReactUpdates.ReactReconcileTransaction.getPooled(); transaction.perform(() => { nextComponent.mountComponent(...); }); ReactUpdates.ReactReconcileTransaction.release(transaction); });
  52. 52. ReactUMGComponent • UMG Widget의 Lifecycle 관리. • mountComponent가 실행될 때 UMG Widget을 생성 후 부모 Widget에 Add Child. • UMG Widget이 Destroy 될 때 자동으로 React Component도 언마운트. • UserWidget는 PanelWidget과 같은 위상에서 동작하도록 구현. • PanelWidget의 AddChild와 UserWidget의 SetRootWidget이 같은 형태로 동작하도록 구현.
  53. 53. Demo
  54. 54. Tip
  55. 55. Garbage Collection • JS에서 UE4 Instance를 가지고 있는 경우는 GC가 되지 않음. • 주의해야 하는 점 • GC된 UE4 Instance에게 JS로 접근하는 경우 • UE4은 Destroy 됬는데 JS에서 Ref를 가지고 있는 경우
  56. 56. Container Component / Presentational Component • Container Component 1. 데이터와 비즈니스 로직을 다룬다 2. Component Tree를 렌더링한다 • Presentational Component 1. 상태를 포함하지 않는다. 2. 컴포넌트 속성에 대한 Pure Function으로 구성한다 3. 표현만을 담당한다
  57. 57. 출처: 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
  58. 58. 도입 후기
  59. 59. React-UMG 도입 후기 • 재사용성을 높이면서 반복되는 코드를 줄일 수 있었고 코드도 간결해짐. • 뛰어난 생산성과 보다 쉬운 디버깅 환경. • React의 Performance Cost Model이 단순해서 최적화하기가 쉬움. • Container Component / Presentational Component • View를 버리더라도 Logic은 재사용 가능해짐. • Modding을 지원할 수 있는 기반을 마련할 수 있었음.
  60. 60. 결론
  61. 61. 결론 • Unreal.js 쓰세요. • UE4에서의 빠른 개발과 풍부한 표현을 보장해줍니다. • React-UMG 쓰세요. • 웹에서는 이미 대세인 React를 UE4에서 웹과 크게 다르지 않은 환경에서 개발 할 수 있습니다.
  62. 62. We are hiring!
  63. 63. 감사합니다.

×