멋쟁이 사자처럼 X 넥슨 MSW Supporters Hackathon 4주차 회고록

이지현·2022년 7월 25일
0

MSW

목록 보기
5/5
post-thumbnail

✔️ To do List

일자내용확인
7/25(월)3-1. 공중에서 도약하기
7/26(화)3-2. 떨어지는 장애물 만들기
7/27(수)3-3. 충돌 기능 구현하기
7/28(목)3-4. 포션 기능 구현하기
 3-5. 포탈 구현하기
7/29(금)3-6. UI 구현하기

실습 3-1. 공중에서 도약하기

✔️ 공중도약 원리

SetForce 함수를 이용하여 rigidbodyComponent를 가진 객체를 원하는 방향으로 힘을 가할 수 있음
RigidbodyComponent:SetForce(Vector2(x방향,y방향) : 중력을 조절하면 밑으로 떨어지지 않고 점프를 할 때마다 위로 둥둥 뜨게 할 수 있음

  • 위 Component의 목적은 공중에서 Z키를 누를시 위로 뛰어오르게끔 연출하는 것이다. 따라서 위에 Property에서 설정했듯이 Mode = “Avoid_Obstacle” 즉 장애물 피하기 모드일경우에만 해당 처리가 하도록 if문을 통해 만들어주었다. 그 뒤 점프시에 카메라가 바로 따라가줘야 장애물을 보고 피할 수 있으므로_*UserService.LocalPlayer.CameraComponent.Damping.x(y)(카메라 반응속도)를 짧게 낮춰 카메라가 플레이어를 빠르게 따라갈 수 있도록 설정해준다.
  • KeyDownEvent의 parameter로 key가 들어오므로. key == KeyboardKey.Z를 통해 Z가 눌릴경우를 확인해주고 _UserService.LocalPlayer.PlayerControllerComponent.LookDirectionX(플레이어가 왼쪽을 바라보면 -1, 오른쪽을 바라보면 +1)이 나오는것을 통해 바라보는 방향의 상단쪽으로 힘을 가해 공중에서 도약하는것처럼 연출해주었다.

실습 3-2. 떨어지는 장애물 만들기

장애물이 떨어지게 만드려면 중력을 가지도록 해야한다.

  • 중력을 가지도록 하려면?
    • 중력값을 가지게 하는 Component인 RigidbodyComponent를 해당 장애물에 추가를 해준다. 또한, 장애물이 그저 중력만 갖고있다면 떨어지다가 Tile과 만나면 그대로 멈추고 아무 동작을 하지 않는다. 장애물이 바닥에 떨어지고 다시 위로 respawn 되어 떨어지게 만들어야 한다.
    • 따라서 Trap이 떨어지는 Trap_Falling_Component를 만들어 장애물에 추가해주고 위의 내용을 작업해준다.

  1. 장애물이 매번 같은 라인에서 같은 주기로 떨어지게 된다면 굉장히 난이도가 쉬워진다.
    ⇒ math.random 함수를 이용해 x좌표를 좌우로 바꾼다.
    ⇒ 또 주기를 바꾸기 위해 wait(math.random())을 통해 period 또한 바꿔준다.
    ⇒ 그러면 다양한 타이밍에 다양한 장소로 스폰되어 다시 떨어지게 된다.
  2. y좌표가 특정 좌표보다 크기가 줄어들 경우, self.Entity.MovementComponent:SetPosition(Vector2(,))를 통해 Entity를 옮겨주는 작업을 한다.
    ⇒ 떨어지는 것을 방지하기 위해 RigidbodyComponent의 Gravity를 잠시 0으로 바꾼 뒤
    ⇒ wait()함수를 통해 랜덤한 시간을 대기하게 하고
    ⇒ 다시 Gravity를 적절하게 맞추어 떨어지게끔 연출한다.

실습 3-3. 충돌 기능 구현하기

✔️ TrapTriggerComponent 제작(TriggerComponent 확장) : 장애물에 맞으면 HP 감소, HP가 0이 될 시 플레이어 상태를 조정함

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

  • player에게 Take_Damage_Periodtrue 값을 가지고, PlayerComponent.Hp - self.damage를 통해 현재 플레이어의 Hp - 해당 trap이 가지고 있는 데미지 값이 0보다 작거나 같다면, 플레이어는 사망 상태여야 한다.
  • 먼저 장애물에 부딪혔으므로 Take_damage_Period = false로 바꿔 두 번 trigger Event가 발생하지 않게 해준다.
  • 그 다음, Player의 StateTriggerBodyEntity.StateComponent:ChangeState("DEAD")로 만들어준다. 그런데 이 때 Player의 상태만 사망 상태로 만들어줄 뿐, 점프, 이동 등은 정상적으로 가능하다. 따라서 Player 사망 시 이동 및 점프가 불가능하도록 따로 함수를 만들어 실행시켜준다.
  • Player의 Take_Damage_Period == true : 부딪힐 수 있는 상태
  • Hp - damage가 0보다 작은 상황이 아닐때
    1. Take_Damage_Period = false로 바꿔줘 TriggerEvent가 연속으로 발생하는 경우 막기
    2. Player의 HP를 damage만큼 차감하기
    3. 장애물과 닿았을 때는 뒤로 밀려나기
    TriggerBodyEntity.RigidbodyComponent:SetForce(Vector2(-1 _UserService.LocalPlayer.PlayerControllerComponent.LookDirectionX,3))Vector2의 값을 -1LookDirectionX 으로 설정
    → 바라보는 방향의 뒤로 힘을 가해주면서 뒤로 밀려나게 된다.
  • wait(0.75) 사용
    ⇒ Player가 피격 후 0.75초동안 triggerEvent가 발생하지 않게 한다.
  • 이후 다시 Take_Damage_Period = true로 바꿔주면서 Player가 데미지를 입을 수 있는 상태로 바꿔준다.

✔️ TakeDamageComponent : DefaultPlayer의 Property에 방금 만든 TakeDamageComponent를 추가시키고 Property에 boolean TakeDamagePeriod = true 를 통해, 현재 player가 period가 참일 경우에만 Trap과 충돌하여 hp가 깎이도록 한다.

실습 3-4. 포션 기능 구현하기

✔️PotionTriggerComponent(ExtendTriggerComponent)

  • 해당 포션과 TriggerEvent 발생 시, heal의 양에 따라 hp를 PlayerComponent.Hp + heal 만큼 증가시킨다.
  • 포션 또한 짧은 순간에 여러 번 TriggerEvent가 발생할 수 있음
    ⇒ 장애물과 마찬가지로 period를 적용시켜 일정 시간 내에 다시 TriggerEvent가 발생 방지
  • 포션은 먹으면 사라지므로, TriggerEvent 발생시 visible과 enablefalse로 바꿔준다.
  • 플레이어와 장애물이 닿으면서 TriggerEvent가 발생하면 플레이어가 잠깐 뒤로 밀려나게 되고 다시 생성되는 과정에서 체력 회복이 두 번 되는 경우를 방지하기 위해 period를 도입한다.
  • 포션을 먹었을 때 회복 후 hp가 최대치 이상인 경우, 플레이어의 hp 최대치까지만 회복하고,
    그렇지 않은 경우, 플레이어의 hp는 heal의 양만큼만 회복한다.

✔️ TakePotionComponent

  • Property > boolean Take_Potion_Period = true
    ⇒ 현재 player가 period가 참일 경우에만 Potion과 충돌하여 hp 회복

실습 3-5. 포탈 구현하기

✔️ 포탈 : 한 지점에서 다른 지점으로 이동할 수 있도록 하는 것

✔️ 포탈 만드는 방법

∙ 포탈 모델 이용하기

Model List에서 포탈 선택해 배치(Portal Component 포함되어 있음)

∙ 직접 포탈 만들기

엔티티 배치 후, Add Component를 통해 PortalComponent를 직접 추가

∙ 2개의 포탈을 서로 연결시키는 법

Portal Component에서 PortalEntityRef를 통해 목적지 포탈 설정

실습 3-6. UI 구현하기

✔️ HP 바 구현하기

Hp_Bar의 SliderComponent를 연결한 myHp를 이용해 value값을 조정하였다. 값을 조정하기 위해 위와 같은 코드를 사용하여 현재Hp/최대Hp가 되어 비율로 Value값이 변경되고, Hp바도 그에따라 변화하게 되었다.

🎶완성된 장애물 피하기 미니게임🎶

profile
2023.09 ~ 티스토리 이전 / 2024.04 ~ 깃허브 블로그 이전

0개의 댓글