[MOD회고록] 1주차 회고록

김강민·2022년 7월 11일
MOD강의멋쟁이사자처럼메이플프로젝트MOD
0

프로젝트 MOD

목록 보기
1/4


본 포스트는 방중 서포터즈 활동을 하게 된 Project MOD에서 제공하는 강의에 대한 요약입니다.

Chapter 1. 기본의 이해

[MOD기본화면]

좌측 위 탭

  1. 홈 : 최근 플레이 게임, 즐겨찾기, 나의 제작 월드, 그룹 제작 월드 바로가기 제공

  2. 플레이 : 플랫폼 내 게임 리스트 확인 및 플레이 기능

  3. 아바타 : 캐릭터 꾸미기 기능

  4. 만들기 : 게임 만들기 기능

  1. 배경 : 다양한 배경 화면으로 아웃게임 화면 설정 기능
  2. 더보기 : MOD포럼, 개발자 사이트, 건의하기 기능
  • 설정: 클라이언트 설정 기능

월드 만들기 내 옵션

상단 메뉴

  1. File

MOD 파일은 서버에 저장되기 때문에 언제 어디서나 다른 기기를 통해 접근 가능, 만약 본인의 게임을 다른 사람에게 제공하고 싶다면 Export, Import 기능을 통해 MOD프로젝트를 파일로 저장해 제공 가능.
Revision 기능을 통해 버전 추가 가능

  1. Edit

객체의 수정 기능 제공(Undo, Redo, Cut, Copy 등)

  1. Create

객체 및 데이터의 추가 - 상단바를 포함해 좌, 우측 패널을 통해서도 Create 가능

  1. Panels

기본적인 패널로 Model List, Scene, Scene Maker, Console, Workspace, Property가 제공, 이외에도 Map Layer, History, Debug 기능 등을 사용자에 맞게 패널들을 관리할 수 있음.

  1. Window

도킹이 불가능한 팝업 리스트들을 사용할 수 있음. (Map List, MapleStory Map, Script Manager)

  • 특히 Maplestory Map에선 실제 메이플스토리의 맵들을 불러와 사용할 수 있음.
  1. Debug

스크립트 개발 시 생기는 문제점을 디버깅할 수 있음.

  1. Help

개발자 센터, 버그 리포트, Resource Search 기능

맵 메이킹 도구

  1. 좌, 우 화살표

Undo, Redo

  1. 커서

객체 지정 및 이동 + 우클릭을 통해 지우기 기능

  1. 화면 이동 커서

화면 스크롤

  1. 지우개 커서

객체 삭제

  1. 플레이 버튼

제작한 월드 플레이

  1. 디버깅

디버깅 기능 제공

  1. 멀티클라이언트 기능

한 기기에서 클라이언트를 두 개 실행해 멀티 기능이 잘 동작하는지 확인

패널

  1. Scene

Scene에서는 현재 맵을 수정, UI버튼 클릭 시에는 UI 수정

  • 그리드 정보
    정교한 타일링 가능

  • 발판 정보
    맵의 지형이 어떻게 형성이 되었는지 확인 가능

  • 여기서 시작 버튼
    시작할 지점 선택

  • 모바일 시뮬레이터
    모바일에서의 화면 시뮬레이션, 모바일에서 플레이 버튼 누를 시 가상 패드와 버튼 활성화

  • 성능 통계
    메모리, 마우스 커서 좌표 등

Model List


타일, 객체, 몬스터, 배경 등 다양한 모델 선택 후 설치 가능
기본적인 오브젝트는 움직임이 없는 이미지지만, 몬스터는 움직임
아래 슬라이드를 조정해 모델들의 크기 조정 가능

Foothold는 발판 정보를 가지고 있는 객체

Foothold선택 후 우클릭 -> Foothold Edit 기능으로 Foothold도 기능 및 외형 수정 가능

새 그룹 추가

본인이 원하는 모델들을 추가해 그룹화

Scene Maker 및 Workspace

Scene Maker

모델들에게 일종의 계층 관계를 부여해 편의성 확장

WorkSpace

사용한 모델을 자동으로 추가
개인의 편의에 따라 분류해 파일 탐색 기능 (+Property를 수정한 객체도 따로 저장해 필요할 때마다 사용 가능)

Property


객체의 속성 설정

Addcomponent -> TweenLineComponent를 통해 움직이지 않던 객체 움직이게 할 수 있음

Climbable Component를 통해 탈 수 없던 객체도 사다리와 같이 탈 수 있음

Property Editor를 사용하지 않고도 크기 및 길이 등과 같이 Scene에서 직관적으로 보이는 속성들은 Handler를 통해 바로 수정 가능

Map Layer

기본적으로 하나의 레이어에는 하나의 타일만 사용 가능하나, 레이어를 추가해 한 Scene에 다른 레이어를 추가

레이어의 순서에 따라 Scene에서의 정렬이 바뀜

같은 레이어에서는 Property에 SpriteRendererComponent -> OrderInLayer를 통해 앞 뒤 배치 변경 가능

Console


Workspace -> Create Component 기능을 통해 Component Script 생성 가능

Component Script는 Property, Function, Entity Event Handler로 나뉨

위와 같이 Property를 수정하면 Property -> Add Component에 내가 제작한 Component 사용 가능

Funtion
해당 Script를 적용했을 때 나타나는 기능

Entity Event Handler
이 Entity에서 발생되는 이벤트 설정 (ex, Button Click Event)

  • Workspace의 Export to 기능을 통해 제작한 스크립트를 파일 단위, 텍스트 단위로 공유 가능

Sprite Picker


객체 선택 후 SpriteRUID를 통해 Sprite Picker 팝업
Sprite Picker에서는 원하는 이미지를 검색해 교체 가능
내 리소스를 통해 자주 쓰는 리소스 설정해 사용 가능

ResourceStorage

Panel -> ResourceStorage

내 리소스를 통해 자주 사용하는 리소스 등록 후 데이터 수정하며 사용 가능.
+버튼을 클릭해 로컬에 저장된 이미지를 불러와 사용할 수도 있음.
스프라이트 슬라이스를 통해 이미지 속성 수정도 가능

Chapter 1 소감

평소에도 메이플을 즐겨하는 유저 중 한 명이었고 어릴 때 문득 나도 이 게임을 만들 수 있으면 좋겠다는 생각을 막연하게 했었다. 좋은 기회가 생겨 MOD에 서포터즈로 참여하게 되었는데, Chapter 1 강의를 듣자마자 든 생각은 내가 상상한 것 이상으로 많은 기능을 제공하고 있어 메이플로 상상한 모든 것을 펼칠 수 있는 공간이라는 생각이 들었다. 수많은 기능들을 내가 모두 활용할 수 있을까 하는 두려움도 들지만 내가 구상한 게임을 잘 만든다면 정말 재밌을 것 같다는 생각도 들었다. 게임회사의 업무를 체험해볼 수 있는 기회가 정말 드문데, 이번 MOD 활동을 통해 게임 회사에 대한 많은 것을 배워갈 수 있었으면 좋겠다.

본 포스트는 방중 서포터즈 활동을 하게 된 Project MOD에서 제공하는 강의에 대한 요약입니다.

Chapter 2. 기본 개념의 이해

기본 개념의 이해는 이론 위주의 강의로 제공된다.

Entity


(배경은 내 원픽 츄츄 아일랜드)

월드를 구성하는 기본 요소(오브젝트)
NPC, Monster, 지형, 배경, 월드 등이 모두 엔티티에 포함된다.

Entity의 역할: Entity 내 Component가 결정

  • Component는 기능 단위를 그 기능에 특화되게 만들어 놓은 형태
  • Component를 추가함으로써 Entity는 그 Component의 기능을 가짐

    다음과 같이 포탈을 설치한 후 PortalComponent의 값을 수정해주면 포탈을 탈 수 있음. 포탈이 아닌 다른 Entity에도 PortalComponent를 추가해 수정하면 포탈로써 기능할 수 있음
    (위 사진에서 선택된 조형물도 Portal Component를 추가해 포탈처럼 이용 가능)

Entity의 특징
(1) 월드 내 모든 Entity는 Scene Maker에서 확인 가능
(2) SceneMaker내에서 Entity의 계층 관계를 설정해 부모-자식 클래스처럼 사용할 수 있음

  • 이 경우 자식 Entity를 움직일 경우 독립적으로 움직이지만 부모 Entity를 움직일 경우 자식 Entity도 따라 움직임
  • 만약 부모 Entity가 Enable 상태라면 자식 Entity도 Enable
    -> 이걸 활용해 두 가지 Entity를 결합한 상태의 배경을 만들 수 있음

    (전)

    (후)
    Entity에 계층 관계를 주었기 때문에 부모의 Entity만 조작해도 자식 Entity가 같이 움직임

Property

Property의 역할: Entity의 고유 특성 설정

  • 포탈의 경우 포탈을 타면 어디로 갈지의 세부적인 내용 설정

Property는 Component의 내용
Property는 Component별로 다르게 설정되어 있음

Component

Component는 Entity의 기능을 설명해 줌. 어떤 원리로 작동하는지는 확인할 수 없음
Component는 Entity에 속해 있고, 여러 가지 기능을 나타낼 수 있다


(MOD에서 기본적으로 제공하는 Component List)
Workspace -> BaseEnvironment -> NativeScripts -> MODComponent로 접근

Component 예시 (1)

  • NameTagComponent

    (NameTagComponent Disable)

    (NameTagComponent Inable)

    Component를 수정함으로써 위와 같이 이름, 폰트 크기, 폰트 색깔, 글씨 배경, 네임태그 위치 등 설정 가능

    NameTagComponent가 없는 몬스터에게도 AddComponent로 Component를 추가해 구현할 수 있음


앞서 설명한 Component들은 각각의 Entity에 속해 다양하게 존재하지만 위 사진의 MODService와 MODLogic은 월드 상에 하나만 존재함
MODService: MOD프로그램에서 유저가 제어하기 힘든 부분을 제공 (Ex/Date, User, Log, Camera 등), 서비스는 유저가 재가공하거나 내용 변경이 불가함
MODLogic: 게임 중 로직 담당 (Ex/ Util, UI, Emotion 등), 로직은 크리에이터가 직접 로직을 제작하거나 변경 가능

Model

Model이란? 어떤 Entity와 어떤 Component의 집합체. 모듈화 된 집합을 모델이라고 부름.
Entity를 만들기 위해선 Scene Maker에서 Create Entity를 한 뒤, Component, 이미지 등을 삽입해 제작해야 함. 이런 과정을 생략하기 위해 도장처럼 미리 만들어 놓은 것들이 Model

(Model List)
모델들은 월드 상에 배치하면 Entity가 됨.


내가 수정한 Entity의 모습을 모델로 만들 수 있음
생성된 모델은 Workspace에 저장
-> 작업의 생산성 향상

Chapter 2 소감

이번 강의에서는 Entity, Property, Component, Model에 대해 알아보았다. 뭔가 알 것도 같지만 헷갈리는 개념들을 정리할 수 있었고, 앞서 강의에서 생략한 자세한 설명을 들을 수 있어 작업할 때 더욱 효율적으로 할 수 있을 것 같다. 1강이 50분인데 반해 2강은 30분 정도 강의를 진행해주셨는데, 짧은 시간인데도 필요한 부분만 명확하게 설명해주셔서 정리하기 편했다.

본 포스트는 방중 서포터즈 활동을 하게 된 Project MOD에서 제공하는 강의에 대한 요약입니다.

Chapter 3. 기본 컴포넌트의 이해

1. Transform Component

Transform Component는 오브젝트가 월드 어디에 표시되는지에 대한 정보

관련 용어

  • Position : 좌표, 위치에 대한 속성값 조정
  • Scale : 물체의 크기, 크기에 대한 속성값을 x, y, z축 기반으로 조정 (default: 1)
  • rotation : 회전 값 (2D 게임에서는 Z축으로 회전함, 각도는 degree)

오브젝트의 위치는 마우스로도 조절이 가능하지만, 정밀한 조절을 위해 Transform Component 내 Property 값 조절

오브젝트의 계층(부모-자식) 관계에 따라 부모 값을 바꾸면 자식 값이 영향을 받음
자식의 좌표는 부모 좌표 기준 상대 좌표로 표기
자식의 좌표 = 자신의 좌표 + 부모의 좌표

  • Position : 상대 좌표
  • WorldPosition : 절대 좌표
  • ZRotation : 상대 rotation
  • WorldZRotation : 절대 rotation

1-2. Transform Component의 함수 활용

Translate 함수

TranslateFunction은 Entity의 위치를 이동시킬 때 사용, Entity가 배치된 위치를 원점으로 삼아 상대적으로 입력한 값만큼 이동.

void OnBeginPlay()
{
self.Entity.TransformComponent:Translate(4,5)  -- 배치된 엔티티 위치를 기준으로 X 좌표를 4, Y 좌표를 5만큼 이동합니다.
log("move on")  --  이동이 되면 콘솔 창에 Move On을 출력합니다.
}

(예시 코드)

Rotate함수

Rotate Function은 엔티티를 반시계방향으로 회전시킬 때 사용. Entity가 배치된 위치에서 입력한 값만큼 왼쪽으로 회전.

void OnBeginPlay()
{
self.Entity.TransformComponent:Rotate(6) -- 배치된 엔티티 위치를 기준으로 6만큼 반시계 방향으로 회전합니다.
log("Move On") -- 실행이 완료되면 콘솔 창에 Move On을 출력합니다.
}

2. SpriteRenderer Component

SpriteRenderer Component는 어떤 이미지를 표시할 것인가를 의미.

  • SpriteRUID : 오브젝트의 고유한 번호. 이미지를 id 형태로 관리하는 것
  • FlipX / FlipY : X축과 Y축을 기준으로 뒤집음. (좌우반전 / 상하반전)
  • Color : 오브젝트에 색깔을 입힐 수 있음. (원본 이미지의 색에 혼합돼서 출력됨.)
  • DrawMode
    • Simple : 기본적인 형태
    • Tile : 동일한 형태를 계속 이어나가는 오브젝트(예: 바닥 or 벽)
  • TiledSize : 배치할 타일(오브젝트 하나)의 개수
  • PlayRate : (Animate 속성을 갖고 있는 오브젝트의 경우) 속도 조절
  • StartFrameIndex : (Animate 속성을 갖고 있는 오브젝트의 경우) 시작 이미지 인덱스
  • EndFrameIndex : (Animate 속성을 갖고 있는 오브젝트의 경우) 종료 이미지 인덱스

Animation

: 이미지 여러 개로 구성되어 있는 오브젝트

(움직이는 효과로 사용할 수 있음)


위 다섯 개의 이미지가 합쳐져 Animation으로 사용

DrawMode


DrawMode를 Tiled로 변경하고 TiledSize를 조절하면 원하는 개수의 오브젝트를 만들 수 있음

Chapter 3 소감

Chapter 3 에서는 프로젝트를 진행하는 데 가장 많이 사용될 것 같은 요소인 자주 쓰이는 Component에 대해 알아보았다. Component의 이름은 각기 다르고 이름만 보고서는 어떤 역할을 하는 Component인지 유추하기 쉽지 않다. 그래서 Component를 하나 하나 만져가면서 배워야 하는 부분인데, 강의 교안을 통해 필수적인 Component에 어떤 Property가 있는지 자세히 알 수 있었다.

Chapter 4. 지형과 레이어의 이해

MOD지형은 메이플스토리 맵을 쉽게 재현할 수 있도록 유사하게 작동함.

MOD 지형 특징✅

지형을 추가하는 방법으로는 작은 타일을 추가하는 방법, 큰 타일을 추가하는 방법, 타일 간 연결을 통해 대각선 타일을 추가하는 방법이 있다.

  • grid의 교점: 작은 타일 추가
  • grid의 중점: 큰 사각형 타일 추가
  • 클릭+드래그 : 자유로운 타일 구성 가능, 대각선 타일 또한 표현 가능. 마우스 우클릭으로 지울 수 있음.
  • 좀 더 볼륨감 있는 타일 표현: Box fill

Custom Foothold Component✅

타일이 아니더라도 custom foothold component를 이용해 foothold 모델을 사용해 발판을 만들 수 있다.

*foothold : 캐릭터&몬스터들이 밟고 다니는 발판 정보

Tile Map Component✅

  • Scene Maker → World → maps → map이름 → TileMap 해당 TileMap의 Property를 확인 할 수 있다.
  • Color : 컬러 변경 가능(오버레이)
  • TileSetRUID : Sprite Picker를 이용해 원하는 타일로 변경 가능

위 컴포넌트들의 활용✅

File → Setting → 만들기 → 발판 정보 보기를 선택하면 빨간색 border가 생긴다.

마우스 우클릭 → edit foothold 로 foothold를 편집할 수 있다. (model에 포함되어 있는 foothold도 편집할 수 있다.)

여기서 마우스 우클릭으로 add point, delete point, exit edit foothold 등의 기능을 사용할 수 있다.

위 오브젝트에 내장되어 있는 foothold 개수는 총 9개이다.

Property > CustomFootholdComponent > edgeLists에서 Foothold edge 개수를 확인할 수 있고, 각 엣지에 대해 상세 편집도 할 수 있다.

  • FootholdDrag : 해당 foothold의 마찰력
  • FootholdForce : 해당 foothold를 밟고 있는 힘
  • FootholdWalks : 해당 foothold를 밟고 있을 때 이동 속도

Map Layer

Map Layer : 화면 상 입체적인 효과를 부여하는 기능

Map Layer 패널에서 레이어의 구성요소 확인이 가능하다.

  • 하나의 맵에 최대 10개까지의 레이어를 추가할 수 있다.
  • 활성화/비활성화는 레이어에 포함된 오브젝트들에 대해서도 적용된다.
  • 마우스 우클릭 > Duplicate로 레이어 복제도 가능.
  • 특정 엔티티의 레이어를 변경하고 싶으면 특정 엔티티의 Property에서 레이어를 변경하면 된다.

메이커에서의 엔티티 순서는 레이어 우선순위 적용 규칙을 따른다.

  1. Map Layer (SpriteRendererComponent의 SortingLayer)

  2. SpriteRenderer Component의 OrderInLayer 프로퍼티

  3. Transform Component의 Position Z값

위 순서에 맞게 레이어를 sorting 해주면 된다.

Chapter 4 소감

Chapter4에서는 지형과 레이어에 대한 학습을 진행했다. 개인적으로 앞서 배운 내용들보다 더 중요한 내용으로 느껴졌는데, 바로 레이어 때문이다. 레이어에 대한 이해가 없이 작업하는 것은 모래로 성을 쌓는 것이나 마찬가지다. 겉으로는 멀쩡해 보이지만 속을 들여다보면 뒤죽박죽 섞여있을 수 있다. 강의 마지막에 배웠던 레이어 정렬 방식에 반하여 본인 마음대로 레이어를 정렬한다면 팀 작업에서 다른 팀원들에게 불편함을 초래할 수 있다. MOD Maker를 통해 직접 레이어를 정렬해가며 정렬 규칙을 익혔다.

Chapter 5. 자주 사용하는 컴포넌트

본 챕터에서는 자주 사용하는 컴포넌트에 대해 학습한다.

1. Tween 컴포넌트

Tween컴포넌트는 TweenCircularComponent, TweenFloatingComponent, TweenLineComponent로 나뉜다.

Tween 컴포넌트를 잘 활용할 수 있는 장애물 설치를 하면서 응요해보고자 한다.

1-1. TweenCircularComponent

TweenCircularComponent는 원점을 중심으로 원운동하는 컴포넌트이다.


위 사진처럼 사다리 사이에 원 운동을 하는 장애물을 넣어 보았다.

1-2. TweenFloatingComponent

TweenCircularComponent는 원점을 중심으로 부유운동하는 컴포넌트이다.

부유 정도를 조절하면 장애물로 활용할 수 있을 것 같아 장애물에 활용해보았다.


위와 같이 장애물을 설치해서 구현했다.

TweenFloatingComponent의 특징은 위아래로 움직이기 때문에 장애물로 활용할 경우 위아래 기준 중심에 위치하는 것이 좋다는 것이다.

1-3. TweenLineComponent

TweenLineComponent는 원점에서 목적지까지 선형운동을 하는 컴포넌트이다.

TweenLineComponent는 다른 TweenComponent와 다르게 목적지의 위치를 지정해줘야 작동한다.

2. RigidBodyComponent

RigidBodyComponent는 강체의 물리적 속성을 컨트롤할 수 있는 컴포넌트이다.


강체의 중력값, 세로 방향 Foothold, 아래 점프 스피드 등 물리적 움직임과 관련된 것을 컨트롤할 수 있다.

3. MovementComponent

MovementComponent는 이동 속도와 점프, 활성화 여부를 조절하는 컴포넌트이다.

4. TriggerComponent

TriggerComponent는 엔티티의 충돌을 감지하는 컴포넌트이다.
충돌체를 포함하고 있는 엔티티의 충돌 영역이 서로 교차했을 때 충돌이 일어난다.
충돌체는 TriggerComponent나 HitComponent를 가지고 있을 경우 자동으로 생성된다.
두 컴포넌트는 다음의 차이를 가진다.

  • HitComponent: 피격의 범위를 설정할 때 충돌체 사용
  • TriggerComponent: 충돌이 일어나는 범위를 설정할 때 충돌체 사용

충돌체 크기 / 위치 편집

  • Collider : 프로퍼티 에디터의 Edit 버튼을 누를 경우 엔티티에 충돌체가 나타남, 드래그 or 핸들러 조절을 통해 충돌체 크기 설정 가능
  • BoxOffset & ColliderOffset : 충돌체의 위치 설정
  • BoxSize : ColliderType이 Box일 경우 충돌체의 크기 설정
  • CircleRadius : ColliderType이 Circle일 경우 충돌체의 크기를 설정
  • ColliderType : 충돌체의 형태 선택, Box의 경우 충돌체를 사각형으로, Circle의 경우 원형으로 변경
  • IsLegacy : TransformComponent에 영향을 받을지 여부를 설정

Entity Event System을 통해 충돌 시 액션을 추가할 수도 있다.
액션 추가는 다음 과정을 통해 이뤄진다.

  1. 충돌 이벤트 발생
  2. 액션을 수행할 핸들러를 Entity에 등록
  3. TriggerComponent를 통해 이벤트 발생 시 핸들러로 등록한 함수의 호출

  • TriggerEnterEvent : 엔티티 간 처음 충돌이 발생했을 때 1회 발생
  • TriggerStayEvent : 엔티티가 충돌 중이면, 프레임마다 발생
  • TriggerLeaveEvent : 엔티티가 충돌되었다가 충돌이 끝났을 때 1회 발생

이후 TriggerComponent를 활용한 충돌 이벤트 발생 시 액션을 수행하는 응용이 있으나, 이해가 잘 되지 않아 개발자 센터 문서를 참고했다.


충돌을 처리하는 방법 중 확장 TriggerComponent를 활용한 충돌 처리를 실습해보았다.


위 사진에 나타나듯 구체 장애물에 ExtendTriggerComponent를 추가했고

캐릭터랑 부딪혔을 때 충돌처리를 받을 수 있었다.

DefaultPlayer는 HitComponent가 추가되어 있기 때문에 충돌체로 인식되고, 이에 따라 처리 로그를 받을 수 있었다.

Chapter 5 소감

챕터 5에서는 자주 사용하는 컴포넌트를 학습했는데, 위에 나온 Tween Component나 RigidBodyComponent는 이해가 쉬웠으나, 충돌 처리를 하는 TriggerComponent에선 생소한 단어들도 많이 보여서 직접 실습하면서 익혔다.
TriggerComponent가 더 어렵게 느껴진 이유는 충돌 처리를 하는 부분인데, 피격 시 넉백 처리를 상상하고 충돌 처리를 공부하다 보니 실제 메이플과 다른 부분이 있어 이해가 늦어졌다. 다만, 직접 사용해보니 다른 Component보다 더 잘 이해됐다.
후에 학습에서도 잘 익혀지지 않는 부분은 MOD를 이용해 직접 만들어 보며 익히면 개발할 때 큰 도움이 될 것 같다.

profile
김강민
Gimga네 둘째
다음 포스트

[MOD회고록] 2주차 회고록

0개의 댓글