개발노트

useRef를 import해주기

useRef를 할당 해주기

useRef 연결 해주기

useRef 사용

어떻게 우리에게 DOM구조로 보여졌을까?

1. DOM tree 생성(html 을 파싱하여 DOM 노드로 이뤄진 트리 생성)

2. Render tree 생성(css을 파싱하여 CSSOM생성/ DOM +CSSOM = Render tree)

3. Layout(Render tree 노드들의 위치 결정)

4. Paint(그려서 보여주기)

문제는 변화가 생길때마다, 다시 tree를 전부 생성한다는 것(예를들어 인스타에서 우리가 좋아요를 누르면 좋아요를 누른 부분만 바뀌면 좋은데 그게 아니라 전체가 다시 다 tree가 생성되어서 보여진다는 것)

virtual DOM

virtual DOM은 어느 부분이 바뀌면 그 바뀐 부분을 바로 반영하지 않고 DIFFING 알고리즘을 통하여 어떤 부분이 달라졌는지 체크를 함. 그리고 그 전과 비교하여 바뀌어진 부분을 RE-RENDER하여 바뀐 부분만 바꿔주는 형식으로 진행이됨.

어떻게?

왼쪽과 다르게 오른쪽에서는 SPAN이 하나가 추가 되었는데 자바 스크립트의 객체 형식으로 하여 children에 데이터 하나가 추가가된걸 확인할수 있음

(우선 렌더링  되지않고 메모리에서 동작 =>이후 달라진 부분 한번에 적용하는 방식으로 동작됨)

따라서, 계속 상호작용을 가지고 가면서 지속적으로 페이지가 바뀌는 경우에 더욱 효율적으로 dom관리를 할 수 있게 됨.

공중에서 도약하기

도약하는 원리

rigidbodyComponent안에 SetForce라는 함수가 숨겨져있는데 이 함수를 이용하면 rigidbodyComponent를 가진 객체를 원하는 방향으로 힘을 가할 수 있음.(공중에서 leftalt 라는 keydownevent가 발생하면 RigidbodyComponent:SetForce(Vector2(x방향,y방향)로 중력을 조절하면 밑으로 떨어지지 않고 점프를 할 때마다 위로 둥둥 뜨게 할 수 있음.)

setforce함수의 위치

해당 Component는 Player가 장애물 피하기 맵의 공중에서 LeftAlt키 입력시 해당 방향으로 점프되게끔 하기 위해서 Component를 새로 만들어서 이름을 설정해주었고, Entity Event Handler에서 KeyDownEvent를 눌렀을 때 해당 이벤트가 발생할 때의 상황을 처리해주는 방식으로 중력을 조정함.

handlekeydownevent사용방법

해당 Entity Event Handler: 에서 ‘+’ 를 누른다음, KeyDownEvent를 눌러 해당 이벤트가 발생할 시 상황은 다음과 같이 처리.

Component의 목적은 공중에서 LeftAlt 키를 누를시 위로 뛰어오르게끔 연출하는 것이므로 위에 Property에서 설정했듯이 Mode = “Avoid_Obstacle” 즉 장애물 피하기 모드일경우에만 해당 처리가 하도록 if문을 통해 만들어주었음. 그 뒤 점프시에 카메라가 바로 따라가줘야 장애물을 보고 피할 수 있으므로_UserService.LocalPlayer.CameraComponent.Damping.x(y) (카메라 반응속도)를 짧게 낮춰 카메라가 플레이어를 빠르게 따라갈 수 있도록 설정해준 코드임.

KeyDownEvent의 parameter로 key가 들어오므로. key == KeyboardKey.LeftAlt를 통해 LeftAlt가 눌릴경우를 확인해주고 _UserService.LocalPlayer.PlayerControllerComponent.LookDirectionX (플레이어가 왼쪽을 바라보면 -1, 오른쪽을 바라보면 +1)이 나오는것을 통해 바라보는 방향의 상단쪽으로 힘을 가해 공중에서 도약하는것처럼 연출해줌.

떨어지는 장애물 만들기

장애물에 중력을 부여하는 원리

"중력"을 부여해여하는데 이 중력을 부여 하려면 중력값을 가지도록 하는 Component인 RigidbodyComponent를 해당 장애물에 추가를 해줘야한다. 또한, 장애물이 그저 중력만 갖고있다면 떨어지다가 Tile과 만나면 그대로 멈추고 아무 동작을 하지 않아야하며 장애물이 바닥에 떨어지고 다시 위로 respawn 되어 떨어지게 만들어야 한다.

따라서 Trap이 떨어지는 Trap_Falling_Component를 만들어 장애물에 추가해주고 위의 내용을 작업해줘야함.

장애물 위치에 따라 해당 entity y좌표 설정하기

해당 장애물이 특정 y좌표보다 아래로 떨어지게 될 경우 자신이 설정한 바닥의 y좌표보다 조금 높게 설정해준다. (해당 Entity를 다시 위로 옮겨주면 된다. )

Position.y 가 지정한 y좌표보다 더 낮게 진행될 경우 MovementComponent:SetPosition을 통해 올려준다.

이 때 MovementComponent:SetPosition을 사용하기 위해서는 장애물 엔티티에 MovementComponent를 추가해 주어야한다.

장애물 구현할때 tip!

장애물이 매번 같은 라인에서 같은 주기로 떨어지게 된다면 굉장히 난이도가 쉬워진다.

math.random 함수를 이용해 x좌표를 좌우로 바꾼다.

또 주기를 바꾸기 위해 wait(math.random())을 통해 period 또한 바꿔준다.

그러면 다양한 타이밍에 다양한 장소로 스폰되어 다시 떨어지게 된다.

떨어지는 것을 방지하기 위해

1. RigidbodyComponent의 Gravity를 잠시 0으로 바꾼 뒤

2. wait()함수를 통해 랜덤한 시간을 대기하게 하고

3. 다시 Gravity를 적절하게 맞추어 떨어지게끔 연출한다.

충돌 기능 구현하기

장애물에 맞으면 hp가 감소하고, hp가 0이될시 플레이어 상태를 조정하게 만들어야함.

충돌기능은 triggercomponent가 이미 존재하고 있으므로 이것을 확장시켜 새로운 component인 trap_trigger_component를 제작한다. 

component를 새로 만들었다면 먼저 해당 trap의 데미지를 조정할 수 있도록 property에 damage를 넣어줌. 

작동로직

TriggerEvent가 발생→ 해당 TriggerEvent가 발생한 대상이 Player인지 확인 → (맞을 시) 플레이어의 Hp - Trap의 데미지가 0보다 클 때 : HP만 감소, 0보다 작거나 같을 때 : 플레이어 사망 및 5초후 부활 설정

TriggerEvent 발생 시 충돌 기능 구현하기

Trigger Event 발생시, 대상이 Player인지 확인해준다.

if문을 통해 TriggerBodyEntity의 ID가 Player의 ID와 맞는지 확인

Trigger Event가 발생했을 때, player가 잠깐 장애물과 떨어진 후, 키 입력을 하면 동시에 2번의 Trigger Event가 발생해 Hp가 2배로 차감되는 경우가 생길 수 있음.

 mydesk→  create scripts→ create component 후 Take_Damage_Component를 생성.

DefaultPlayer의 Property에 방금 만든 Take_Damage_Component를 추가시키고 Property에 boolean take_damage_period =true  를 통해, 현재 player가 period가 참일 경우에만 Trap과 충돌하여 hp가 깎이도록 구현하기.

Trap_Trigger_Component로 다시 돌아가서

player에게 take_damage_period가 true값을 가지고 현재 플레이어의 hp- trap이 가지고있는 데미지 값이 0보다 작거나 같다면, 플레이어는 사망 상태여야함.

그리고 먼저 장애물에 부딪혔으므로 take_damage_period=false로 바꿔 두번 triiger event가 발생하지 않게 해주기.

그 후에 player의 상태를 죽음(triggerbodyentity.statecomponent:changestate("DEAD")로 만들어주는데 이때 죽은 상태에서 좌우 점프가 가능함으로

그런것이 불가능하게 따로 이렇게 함수를 만들어 실행시켜준다.

PlayerDead 함수 만들기

Function: 에 “+”를 눌러 New 를 눌러 새로운 함수 PlayerDead를 만들어준다.

movementcomponent에서 inputspeed와 jumpforce도 0으로 바꿔 움직일수없게 만들어주는 함수

또한 대기시간을 wait(5)를통해 5초 기다리게 하고 다시 플레이어의 상태를 

triggerbodyentity.statecomponent:changestate("IDEL")을 통해 IDEL상태로 만들어주기

다시 플레이어를 시작점으로 보내기위해 triggerbodyentity.movementcomponent:setposition(vector2(3.4,-4))로 시작점으로 보내주고 플레이어의 hp 를 maxhp로 설정

TriggerBodyEntity.Take_Damage_Component.Take_Damage_Period = true 를 통해 Player의 데미지를 받는 주기를 다시 True로 설정해 Trap과 닿으면 Hp가 깎이도록 설정해준다.

또한 inputspeed와 jumpforce,mode가 다 0이거나 nil로 되어있으므로 다시 돌려주는 playerAlive()라는 함수를 실행시켜주는데 이때 이 함수는

InputSpeed,JumpForce,Mode를 원래대로 바꿔주는 함수

장애물과 닿았을때는 뒤로 밀려나기

⇒ TriggerBodyEntity.RigidbodyComponent:SetForce(Vector2(-1 * _UserService.LocalPlayer.PlayerControllerComponent.LookDirectionX,3)) 의 Vector2의 값을 -1*LookDirectionX 으로 설정

→ 바라보는 방향의 뒤로 힘을 가해주면서 뒤로 밀려나게 된다.

포션 기능 구현하기

defaultplayer에 PotionTriggerComponent와 Take_Potion_Component를 추가

Potion Entity에 PotionTriggerComponent(ExtendTriggerComponent)를 추가

구현 해야 할 사항들

해당 포션과 TriggerEvent 발생 시, heal의 양에 따라 hp를 PlayerComponent.Hp + heal 만큼 증가시켜주기

포션 또한 여러 번 TriggerEvent가 발생할 수 있으므로 장애물과 마찬가지로 period를 적용시켜 일정 시간 내에 다시 TriggerEvent가 발생하는걸 방지해주기

TriggerEvent 발생시 visible과 enable을 false로 바꿔주기

플레이어와 장애물이 닿으면서 TriggerEvent가 발생하면 플레이어가 잠깐 뒤로 밀려나게 되고 다시 생성되는 과정에서 체력 회복이 두 번 되는 경우를 방지하기 위해 period를 도입하기

포션을 먹었을 때 회복 후 hp가 최대치 이상인 경우, 플레이어의 hp 최대치까지만 회복하고, 그렇지 않은 경우, 플레이어의 hp는 heal의 양만큼만 회복하게하기

Take_Potion_Component 추가하기

현재 player가 period가 참일 경우에만 Potion과 충돌하여 hp 회복하게하기

포탈 구현하기

포탈 만드는 방법은 포탈 모델을 이용하여 만들거나 직접 포탈을 만드는 방법 두 가지가 있음.

1. 포탈 모델을 이용하여 만드는 방법

Model List에서 Portal을 선택하여 Scene에 배치하기

2. 직접 포탈을 만드는 방법

맵 만드는 방법

Scene Maker > Create Entity > Create New Map을 통해 다른 맵을 만들 수 있으며, 포탈을 통해 맵을 이동할 수 있음. 위에 나온 방식으로 포탈을 만들어준 후

Portal Component에서 PortalEntityRef을 통해 목적지 포탈을 설정해주면 됨. (기본 값은 none)

success_portal의 PortalEntityRef은 none으로 두면 됨.

이 실습에서는 결승점에 도달하여 오른쪽의 포탈에 가면, 목적지인 Success_Map의 success_portal로 이동됨.

UI 구현하기

HP바 나타나게 하기 & HP바 조정하기

SliderComponent의 Value값을 Hp/MaxHp 비율에 맞게 조정해준다면, Player가 데미지를 입었을때 감소되고, 포션을 먹었을때 증가하게 연출이 가능하게됨.

알아두면 유용할 것들

Model

모델: 엔티티에 컴포넌트를 추가해 모델화 할 수 있음.

original model: 빈 엔티티에서 컴포넌트들을 추가해 새로운 무언가를 만든 것.

child model: 기존 엔티티에서 상세 컴포넌트만 바뀐 것으로, 기존 엔티티에서 파생된 모델.

<부모자식 모델관계>

자식 모델의 기존 엔티티를 부모 모델이라 생각하면 됨. 부모 모델이 자식 모델의 상위 개념임. 

자식모델에서는 자신보다 상위모델인 부모 모델에서 추가한 컴포넌트를 삭제할 수 없음. 반대로 부모 모델에 새로운 어떤 컴포넌트 추가시 자식 모델에도 추가됨.

모델과 관련된 기능들

revert: 어떤 기능을 모델 전체에 추가시 사용

apply: 부모 모델에서 추가된 기능을 현재 모델에 추가시 사용.

동적 spawn: 필드 단위별로 스폰할 몬스터와 스폰할 몬스터의 수를 설정하면, 해당 조건에 맞춰 몬스터가 생성되는 스폰 시스템

(동적 spawn구현시 spawnbymodelid함수 사용)

엔티티 동적 생성

동적생성?

개발자가 모든 설정을 수동으로 작업해 엔티티를 생성하는 것이 아니라, 알아서 엔티티가 자동으로 생성되도록 하는 것

[ball 엔티티의 동적 생성 예시 코드]

TweenLineComponent 설정

BallComponent 코드

Start() : TweenLineComponent에서 설정한 Duration을 로컬 변수 duration에 받아 엔티티의 움직임이 시작되고 duration만큼 기다렸다 사라지게 함.

MoveComponent 코드

Spawn() : 스폰할 엔티티의 모델을 가져와 엔티티에 포함된 BallComponent의 Start 함수를 호출함. 이 때 스폰할 엔티티에는 무조건 BallComponent가 포함되어 있어야하고, BallComponent에는 Start 함수가 존재해야함.

HandleKeyDownEvent(KeyDownEvent event) : 키를 조작했을 때의 동작을 설정함.

UI에디터의 이해

게임에서는 UI를 GUI라고 부르기도함. 주로 어떤 행동의 입출력을 담당함.

UI의 구성

1.모델리스트: 메이커에서 제공하는 다양한 UI Preset 활용 가능

2.UI 경로 정보: 선택된 UI엔티티의 경로 정보를 얻어오는 기능

3.캔버스: UI엔티티의 배치 및 편집을 작업하는 공간

4.기본 도구: 이미지& 버튼등의 UI엔티티 배치 가능

5.UI Group의 선택,추가,삭제 기능 제공

UI엔티티를 통해 UI를 편집하기 위해서는 가장 먼저 조작할 UI엔티티가 필요함.

UI 엔티티를 생성하기 위한 방법은 2가지가 존재함.

UI엔티티 생성법

기본 UI모델을 선택해 배치하는 방법

UI Preset을 활용하는 방법

기본 UI엔티티

기본 UI 엔티티는 기본 도구를 통해 배치할 수 있음.

기본 도구에 추가되어있는 기본 UI 엔티티로는

이미지, 버튼, 스크롤뷰, 텍스트, 입력텍스트의 5가지 요소가 존재합니다.

각 엔티티들은 해당 요소를 포함하는 컴포넌트들을 가지고 있으며,

기본 UI 엔티티간의 조합을 통해 특정 기능을 수행하는 UI 제작이 가능합니다.

UI Preset

자주 사용하는 UI들, 스크립트가 포함되어 있습니다.

스크립트를 이용한 UI 엔티티 제어

UI엔티티를 생성하였다면, UI엔티티에 접근해 엔티티를 제어해야함.

월드에서의 엔티티로의 접근법과 동일.

상황과 조건에 따른 UI노출처리

UI 엔티티는 화면의 입출력을 담당하는 엔티티여서, 상황과 조건에 따라 UI를 띄우거나 숨길 수 있어야 함

Entity 함수인 setEnable 을 통해 알림 팝업 및 토스트 메시지를 띄우는 기능을 구현할 수 있음.

void ShowToastMessage ()
{
    local toastUIEntity = _EntityService:GetEntityByPath("/ui/.../EntityPath")
    toastUIEntity:SetEnable(true)
}
 
void HideToastMessage ()
{
    local toastUIEntity = _EntityService:GetEntityByPath("/ui/.../EntityPath")
    toastUIEntity:SetEnable(false)
}

함수에 따라 toastUIEntity:SetEnable() 의 boolean 값을 바꿔줌으로써 토스트메시지가 상황에 따라 출력되거나 숨겨지도록 할 수 있음.

UI Group활용 방법

UI의 효율적인 관리를 위해 UI Group으로 연관 기능이 있는 UI엔티티끼리 묶어 관리함.

그룹에 텍스트를 추가하는 방법

UITransformComponent 

UI는 MOD 상에서 가상의 좌표계 역할을 함.

따라서 UI 위치 좌표는 PosX PosY를 통해 설정할 수 있음.

좌표를 기준으로 중앙 또는 상하좌우를 선택할 수 있음

UITransformComponent 는 배치한 텍스트 박스의 위치와 크기를 설정할 수 있는 컴포넌트

SpriteGUIRendererComponent

다양한 속성값을 통해 텍스트박스의 배경색, 배경, 리소스 경로 설정 등

텍스트박스를 예쁘게 꾸며볼 수 있음.

텍스트 박스에 이미지 추가하기

1. 메이커의 UI 버튼을 눌러 UI 에디터로 이동하여 UIGroup 에서 해당 그룹으로 이동

2. 좌측의 기본도구에서 이미지를 클릭해 이미지 UI를 추가

3. spritrenderercomponent의 imageRUID 프로퍼티의 우측 버튼을 클릭해 spritepicker메뉴 선택

4. 프로퍼티를 조정해 이미지 UI의 크기와 위치를 설정해줍니다.

이렇게 스타일을 줄때 따로 만들어서 삽입하면 더

간편하게 코딩 가능함.

따로 css파일을 만들어준후에

이렇게 classname으로 불러와서 사용도 가능함 근데 class로 해도 되긴하지만 경고 문자가 뜸으로

className으로 쓰는거 추천

이렇게 터미널에서 스타일 컴포넌트를 설치하고 컴포넌트를 불러와서 이런식으로도 디자인 가능

node.js다운

npm(node package manager)

자바스크립트 라이브러리들을 설치하고 버전을 관리함.

yarn(페이스북에서 npm의 약점들을 보완한 라이브러리 관리도구)

cmd창에서 yarn 설치 이때 yarn이 잘 다운이 됐는지 버전확인을 할때 에러가 날수 있으므로 환경변수 설정을 해줘야할수도있음.

vscode에서 yarn을 사용하려고 하면 

이러한 오류가 뜰수도 있음

이럴땐 windows powershell을 관지라모드로 실행시켜서

이런식으로 변경을 해준후에 다시 vscode에서 yarn을 실행시켜주면 오류가 해결!

React

유저 인터페이스를 만들기 위한 자바스크립트 라이브러리

페이스북에서 만든 오픈소스 라이브러리

ux: user experience (사용자 경험)

ui: user interface(사용자 인터페이스)

프레임워크: 전체 설계와 구현을 주도

라이브러리: 불러와 사용되는 도구

즉 react는 ui담당임으로 프레임워크가 아니라 라이브러리임.

jsx문법

하나의 요소로 감쌈

이렇게 div태그로 감싸면 의미없는 div태그가 하나 추가되는거임 이래서

이렇게 fragment태그로 감싸주면 나중에 fragment태그가 저절로 생략이됨.

이것을 축약형으로쓸수있음.

이렇게 축약형으로 사용이 가능함 코드 깔끔해짐.

조건부 렌더링하는 방법

논리 연산자를 이용하여 코드를 더 줄일수있음.

num이 1이 맞으면 num은 1이맞습니다를 return하고 1이 아니면 num은 1이 아닙니다를 return함.