userkhk

블로그 이전

김효겸 — Fri, 8 Aug 2025 22:34:36 +0900

https://hyogyeomkim.tistory.com

포트폴리오_영상

김효겸 — Mon, 30 Dec 2024 01:37:33 +0900

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

RPG 프로젝트의 영상 입니다.

현재 알고 있는 지식을 활용하여 프로젝트를 작업하고자 했으며

영상물의 하단에 부가설명 자막을 첨부하였습니다.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

첫 3D RPG 프로젝트 입니다.

NPC 상호작용 -> 상점 -> 퀘스트 -> 몬스터 -> 보스

순서로 구성되어 있습니다.

소스코드 첨부 링크

https://userkhk.tistory.com/category/%EC%9C%A0%EB%8B%88%ED%8B%B0%20%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8/RPG%20%EB%93%80%ED%86%A0%EB%A6%AC%EC%96%BC

'유니티 프로젝트/RPG 듀토리얼' 카테고리의 글 목록

천리 길도 한 걸음부터

userkhk.tistory.com

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

모바일 게임 2D SpaceShooter 입니다.

조이스틱과 점프, 공격 세 버튼으로 구성되어 있으며

좌/우 에서 나오는 몬스터와 새의 공격을 피해,

새를 잡아 점수를 얻는 게임입니다.

소스코드 첨부 링크

https://userkhk.tistory.com/category/%EC%9C%A0%EB%8B%88%ED%8B%B0%20%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8/2D.SpaceShooter

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

처음 서적을 통하여 Unity 공부를 할 때, 진행했던 프로젝트 입니다.

소스코드를 살펴보니, GetComponent를 Update문 에서 활용을 하는 경우가 있거나

플레이어 관련 스크립트에 몬스터 관련 기능을 실행하는 함수가 있어 흐름도를 찾기 어렵거나 등

'왜 이랬지?' 라고 생각이 드는 기타적인 문제들이 많이 있었습니다.

현재 소스코드는 업로드할 예정은 없지만,

처음 Unity에 대해서 알게 되고,

혼자 책을 읽어가며 하나씩 찾던, 오랜 시간동안 공들였던(당시)

프로젝트인 만큼

인상이 깊게 남아 첨부하였습니다.

Land Of Memories - Stat & DataManager

김효겸 — Mon, 25 Nov 2024 12:01:15 +0900

안녕하세요.

이번 작업은 스탯 관련 작업을 하였습니다.

Exp, Level, Hp, Attack, Def

전체적인 흐름도는 다음과 같습니다.

1. 몬스터를 잡으면 Exp가 증가한다.

2. Exp가 최대치가 되면 Level이 증가한다.

3. Level이 증가하면 Stat Point가 증가한다.

4. Stat Point로 Hp, Attack, Def를 조절할 수 있다.

5. 값을 저장하면 즉시 반영된다.

6. 재접속 시 유지된다.

우선 기존 플레이어가 공격을 당해 실행될 Hi() 함수를 다음과 같이 수정했습니다.

현재 체력과 최대 체력을 playerStat에서 받아와서 계산을 하였는데요.

" playerStat" 스크립트를 보기 전 기존 DataManager에 추가 선언된 변수를 보겠습니다.

playerLevel : 플레이어 레벨 입니다.

playerStatPoint : 스탯 포인트입니다.

playerMaxHp : 플레이어 최대 체력입니다.

playerMaxAttack : 플레이어 최대 공격력입니다.

playerMaxDef : 플레이어 최대 방어력입니다.

playerMaxExp : 플레이어 최대 경험치입니다.

playerCurrentExp : 플레이어 최대 경험치입니다.

이 값을 이용해 데이터를 저장하고, 데이터를 불러올 것입니다.

다음은 PlayerStat 스크립트입니다.

각 레벨, 포인트, 체력, 공격력, 방어력, 경험치에 관련된

변수와 컴포넌트입니다.

구현 부분에서 설명을 이어가겠습니다.

초기 저장된 데이터를 불러와 각 선언 변수에 대입을 해주었습니다.

또한 반영 동기화를 위하여

받아온 text와 hpBar 같은 경우엔 fillAmount를 업데이트해주었습니다.

이후 데이터를 한번 저장해 주었습니다.

다음은 경험치가 오를 때 호출될 ExpUpdate 함수입니다.

경험치가 증가하게 되면 저장될 데이터 값을 변경해 주고

exp Bar 같은 경우엔 게이지를 나타낼 fillAmount를 업데이트해줍니다.

또한 text도 즉시 반영이 되어야 하기에 업데이트를 같이 해주었습니다.

다음 if문을 보면

playerMaxExp <= playerCurrentExp

(최대 경험치보다 현재 경험치가 크거나 같으면)

아래 코드블록이 실행됩니다.

level을 증가시켜 주고

저장될 데이터의 값을 변경해 줍니다.

level은 InGame UI와 Stat UI 두 곳에 Level Text가 존재하기에

두 곳 모두 업데이트를 해주었습니다.

차례대로 보자면

현재 경험치 초기화

최대 경험치 증가

스탯 포인트 증가

를 해주었습니다.

*현재는 스탯 포인트 증가량을 5로 설정해 주었습니다.

다음은 Stat UI의 감소 / 증가 버튼입니다.

HpLeftButton()부터 살펴보자면

최대 체력이 1000 보다 낮다면 return으로 실행을 시키지 않습니다.

즉, hp가 초기값 아래로 내려갈 수 없습니다.

이후 HpLeftButton()를 눌렀다면 현재 설정한 hp 값을 감소시킨다는 의미로

playerStatPoint를 증가시켜줍니다.

playerStatPointText.text = playerStatPoint.ToString()

로 텍스트에도 즉시 반영시켜 주었으며,

Hp 조절 값은 100으로 설정해 주었습니다.

반대로

HpRightButton()는

playerStatPoint가 0보다 작거나 같으면 return을 해 주었습니다.

즉 playerStatPoint가 1개 이상 있어야 동작을 하게 해주었습니다.

이후 로직은 HpLeftButton()와 반대입니다.

이하 동일

다음은 Reset 버튼을 눌리면 실행될 ResetPoint() 함수입니다.

변수 변경과 저장될 데이터 값 변경.

그리고 텍스트와 이미지를 업데이트해주었습니다.

추가 로직으로 if (playerMaxHp <= playerCurrentHp)을 걸어 주었는데

현재 체력이 1100일 때 최대 체력을 초기화하여 1000이 되면 꼬임 현상이 발생하여서

현재 체력이 최대 체력보다 높다면, 최대 체력으로 조정해 주었습니다.

마지막으로 SavePoint()입니다.

현재 스탯포인트, 체력, 공격력, 방어력을

전될 데이터 값에 반영해 주었습니다.

(exp는 Hit() 함수가 실행될 때 값이 저장됩니다)

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

현재 원하던 로직은 잘 구현이 되는 것 같습니다.

영상을 보면 아시겠지만 currentHp 같은 경우에는

현재 재접속하게 되면 maxHp 값으로 변경이 됩니다.

즉, 체력이 Full이 되는데요

데이터를 저장해서 같이 관리를 하려다가

체력 회복 스킬도 구상 중에 있고

재접속을 하였는데 Hp가 제로에 가까운 것보다는 가득 차있는 것이 좀 더 낫지 않을까 해서 내버려두었습니다.

초기 작성에는 하나씩 테스트하면서 하느라 어려움이 약간 있었는데

변수 값 변경 = 저장된 데이터 값 변경

+ 관련 동기화(텍스트, 이미지) 변경

의 구상이 잡히고 나니 한결 수월하게 작업을 했습니다.

확실히 신경 쓸게 많아진다는 건

완료했을 때 뿌듯함도 많아지는 것 같습니다!

왠지 기분 좋은 데요ㅎㅎ

다음 작업 목록은 씬 이동과 간단한 Sound를 추가해서 작업을 하도록 하겠습니다.

감사합니다!

다들 좋은 하루 보내세요!★

두뇌회전 & 순발력 게임

김효겸 — Mon, 25 Nov 2024 07:21:33 +0900

안녕하세요.

현재 Land Of Memories 프로젝트를 진행 중인데 요즘 이리저리 움직이게 되는 일이 많아서 작업을 많이 못했습니다.

내일부터는 다시 비교적 여유가 있을 것 같은데

요.

시작 전!

기분 전환 겸(?), 재미있을 것 같은 게임 아이디어가 떠올라서 즉시 프로젝트 작업을 해보기로 했습니다.

작업시간은 약 5시간 정도 걸렸는데, 코드 구현 작업은 의외로? 비교적? 수월하게 진행됐는데

부가적인.. 요소들이 시간을 많이 잡아먹었습니다.

우선 이 이미지 뭐 같이 보이시나요..

이번 프로젝트를 진행하면서 Image에 쓰일 Sprite를

픽셀 아트로 작업을 한건데..

여러분들이 생각하시는 그거 맞습니다

"티모"

살짝 실패했을 때 약 올리는? 것을 표현하려고 했습니다.

~~전 사실 직접 손으로 그리는 걸 더 잘 그립니다.~~

먼저 영상부터 보겠습니다.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

가장 먼저 OnEnable() 함수로 오브젝트가 활성화될 때 버튼 이벤트를 연결시켜주었습니다.

설명 / 플레이 / 종료

버튼에 맞게 오브젝트를 활성/비활성화해주어 해당 Panel로 넘어가는 모습을 구현해주었습니다.

'플레이' 버튼이 눌린 뒤 PlayGame()이 호출되면 playObj가 활성화되면서 PlayController 스크립트가 실행됩니다.

각 버튼 클릭 이벤트를 등록해주었고,

점수를 초기화해주는 로직과 StartCorutine으로 코루틴을 실행시킵니다.

실행되는 코루틴은 타이머를 구현하였습니다.

타이머가 0이 되어서 제한시간이 초과되면

StopCorutine으로 코루틴을 중지시키고

다시 하기 / 종료 UI가 활성화됩니다.

실질적인 로직은 OnEnable()에서 실행될 ChangeButtonColors() 함수입니다.

먼저 반복문 For부터 보겠습니다.

Random.Range로 colors 배열 값의 랜덤 값을 받아와 주었는데,

이는 레드, 옐로, 블루

세 가지 값 중 하나입니다.

정해진 컬러의 값을

buttons [i]. color = randomColor로 랜덤 색상을 적용시켜주었습니다.

이후 딕셔너리에 현재 넘버와 색상을 맵핑시켜 주어서

현재 플레이어가 각 차례대로 어떠한 색을 클릭해야 하는지 찾을 수 있게 저장을 해주었으며,

텍스트 또한 표기를 해주었습니다.

이어서 리스트(Text)를 섞는 함수 ShuffleList()입니다.

간단히 for 반복문을 통해서 랜덤의 값을 받아와 준 뒤

현재 해당 인덱스를 미리 temp에 저장하고

해당 인덱스에 랜덤값 인덱스를 저장하하여 바꿔 주었습니다.

각 0번 인덱스부터 list의 Count 전까지

무작위로 섞이게 됩니다.

딕셔너리에 키와 값으로 쌍으로 관리를 하니 이제 원하는 색을 찾는 건 쉬워졌습니다.

~~(사실 따로따로 랜덤으로 섞은 뒤, 현재 해당 Text의 Parent의 색이 원하는 컬러면 List에 따로 저장하는 로직을 구현했던 건 비밀입니다..)~~

currentClickIndex의 초기값은 1입니다.

현재 진행 단계 1~9를 나타내기 위함입니다.

현재 클릭한 버튼(clickedColor)이 클릭해야 하는 색상(correctColor)이라면

for문을 통해 현재 텍스트와 일치하는 텍스트를 찾아와 주었고

버튼의 컬러를 블랙으로 변경시켜주었습니다.

1번이 완료되면 currentClickIndex++ 2~9번까지 반복이 됩니다.

다음 else의 조건문은

현재 클릭한 버튼(clickedColor)이 클릭해야 하는 색상(correctColor)이 아니라면

의 로직으로 실패를 했을 때를 뜻합니다.

StartCorutine()을 통해서 코루틴이 시작되며

단순히 현재 버튼(레드, 옐로, 블루)의 컴포넌트 enabled = false로 기능을 없애주며

for문을 통해 재미 구현을 해보았습니다.

currentClickIndex가 9보다 크다면 완료가 된 것으로

currentClickIndex를 초기화해주며

현재, 최고 스코어를 업데이트해주었습니다.

이후 ChangeButtonColors() 함수를 실행시켜 위와 같은 로직이 반복됩니다.

다음은 Manager 스크립트로 게임의 흐름을 관리하였습니다.

Ready, Start 두 가지밖에 없으며

처음 로비 화면과, 제한시간이 초과 됐을 때는 Ready 상태로 아무런 로직이 실행되지 않고

오직 게임 플레이 상태일 때만 Start가 되게 해 주었습니다.

SoundManager 스크립트를 받아와 실행에 용이하게 해 주었으며

사운드 스크립트는 sfx와 bgm 각 AudioSource를 2개로 사용하였습니다.

또한 사운드 재생은 Manager에 접근하여 soundManager의 함수를 실행시키는 걸로 해주었습니다.

마지막으로 설명 화면에 들어갔을 때 '다음' 버튼을 클릭하는 ExplanationController 스크립트입니다.

이벤트 연결과 SetActive()로 활성화/비활성화를 해주었습니다.

총 5개의 스크립트로, 원하던 게임 아이디어를 구현해 보았습니다!

사실 초기에 잘못 생각했던 것이, 어느 정도 구현도나 흐름 등 운전하면서 생각해 왔기에

집에 오자마자 잠도 안 오겠다 1~2시간 정도면 뚝딱 만들겠지! 했던 게 큰 오산이었습니다.

알게 모르게 생각해야 할 것들도 많고, 코드적으로 가장 오래 걸렸던 부분이

Text와 배경 Color를 랜덤으로 섞고 각 1번 Text부터 9번 Text까지 순서대로 색을 맞추게 하는 로직이었습니다.

작업을 하면서 수정 및 테스트 등 시간이 많이 들었었는데, 다음부터는 좀 더 깊이 생각하고 흐름도를 그려내

작업을 하는 방식의 습관을 길러야겠습니다.

그래도 세상에 하나뿐인 제 게임이 만들어지니 좋습니다 ㅎㅎ

(이 프로젝트는 아이디어가 떠올라서 구현한 게임이기에 더 이상 추가작업이나 추가 글은 올리지 않을 예정입니다!)

감사합니다.

~~멀리서 좀 작게 보면 좀 그럴싸한데요?~~

Land Of Memories - Hp(Hit) - ObjectPool

김효겸 — Thu, 21 Nov 2024 22:52:41 +0900

이번 작업은 몬스터의 HP Bar 관련 구현과 Hit() 함수

플레이어의 HP Bar 관련 구현과 Hit() 함수를 다뤘습니다.

바로 본론으로 들어가, Monster의 하이어라키 계층구조부터 살펴보겠습니다.

Canvas를 World Space로 하여 3D 공간에 렌더링 되게 하였습니다.

Canvas Render Mode

Screen Space - Overlay

일반적인 UI 모드로 카메라에 영향을 받지 않고 항상 화면 위에 고정인 형태

화면 크기에 따라 UI 요소의 크기가 조정

(메인 메뉴 UI 같은)

Screen Space - Camera

특정 카메라 기준으로 렌더링 됨

Ui가 카메라 위치와 회전에 따라 움직일 수 있음

(2D 미니맵 같은)

World Space

Canvas가 게임 오브젝트처럼 취급되며 이 Ui 요소는 3D 오브젝트와 상호작용 할 수 있음

(3D 환경에서 사용, 공간에서 위치 및 크기 조정 가능)

먼저 monster 스크립트부터 살펴보겠습니다.

monsterSproteRenderer : 몬스터 피격 효과를 주기 위해 받아온 컴포넌트입니다.

hpBarBackGround : 몬스터가 죽으면 비활성화하기 위해 받아온 오브젝트입니다.

hpBar : fillAmount을 게이지처럼 사용하기 위함입니다.

monsterHp : 현재 최대 체력입니다.

(스텟의 체력을 높이게 되면 이 최대 체력을 올려주고 데이터를 저장할 예정입니다)

monsterCurrent : 몬스터의 현재 체력입니다.

pool : 오브젝트 풀링을 사용하기 위해 선언한 List 변수입니다.

boomEffectPrefab : 몬스터가 죽게 되면 실행시킬 함수가 담겨 있는 스크립트입니다.

다음은 Hit가 될 때 함수를 보겠습니다.

damage가 입력되면

현재 체력에 damage를 빼 줍니다.

(ex 100 - 10 = 90)

다음은 체력 비율을 계산해 주었습니다.

(ex 90 / 100 = 0.9)

그다음 fillAmount를 비율 계산을 한 값으로 설정해 주었습니다.

StartCoroutine()으로 실행될 MonsterSpriteEffet()는

몬스터의 피격 효과를 나타내 주기 위함입니다.

다음 StartCorutine() 다음을 보자면

현재 체력이 0보다 작거나 같으면 몬스터가 죽는 로직이 실행되게 변경하였습니다.

(기존 monsterCurrentHp 변수는 선언되어있지 않고 monsterHp 만 있었음)

우선 GameObject effect = GetObj()를 살펴보기 전에!

effect.transform.position = transform.position

(effect의 위치를 죽은 몬스터의 위치로 가져옵니다.)

effect.SetActive(true);

(effect를 활성화해줍니다.)

hpBarBackGround.gameObject.SetActive(false);

(몬스터는 죽었으니 게이지바는 비활성화해줍니다.)

다음은 ObjectPool을 구현해 보았습니다.

AddObject() 함수가 호출이 되면

Instantiate를 이용해 Object를 생성해 냅니다.

그 이후 List에 담아 준 뒤 return으로 반환해 줍니다.

GetObj()

for 반복문을 통하여 활성화되어있지 않은 오브젝트를 검사합니다.

활성화 되어 있지 않은 인덱스에 검출이 되면 즉시 return으로 함수를 종료하며 pool [i]를 반환합니다.

만일 for문 안에 return이 실행되지 않는다면 현재 비활성화되어 있는 오브젝트가 없는 것으로 판단하고

AddObject() 함수를 호출에 새로 생성해 주는 구현입니다.

현재 effect 오브젝트는 총 10개를 담아 두었습니다.

사실상 현재 구현으로는 10개는커녕 2개도 연속으로 활성화하기가 힘든 상태이지만

스킬이나 공격력이 증가하면 넘어 버릴 수도 있으니 어림잡아 10개를 생성해 두었습니다.

*effect 관련 스크립트는 마지막에 하겠습니다.

다음은 Player 스크립트입니다.

위에서 부처 차례대로 보겠습니다.

hpBar : 플레이어의 화면 하단에 있는 HpBar

hpBarText : 화면 하단에 있는 HpBar Text

playerHp : 최대 체력

playerCurrenHp : 현재 체력

playerAtk : 플레이어 공격력

playerDef : 플레이어 방어력

입니다.

기존 몬스터를 감지하고 Hit()를 호출하는 로직에서

인자로 playerAtk(공격력)만 넣어 주었습니다.

이후 플레이어도 Hit가 되면 게이지바의 텍스트를 업데이트해주며

비율을 계산하여 fillAmount에 반영해 주었습니다.

마지막으로 BoomEffet입니다.

먼저 이 오브젝트(BoomEffect)가 활성화되면

OnEnable() 함수를 통해 StartCorutine으로 코루틴 EffetFire()가 실행됩니다.

alphaValues : 각 Color의 alpha 값을 조절할 배열입니다.

먼저 SetSpritesAlpha() 함수부터 보겠습니다.

인자로는 alphaValues의 각 인덱스로 접근하였습니다.

(0.1f, 0.2f, 0.3f...)

spritest [] : 현재 불 이미지가 총 5개입니다.

이 5개의 이미지를 alphaValues의 배열 인덱스 0부터 실행됩니다.

{ 0.1f, 0.2f, 0.3f, 0.4f, 0.5f, 0.4f, 0.3f, 0.2f, 0.1f, 0f }

이 끝나면 이 아래 로직인

EnableColliders(true) 함수가 실행되며

SetSpritesAlpha(1f)로 alpha가 1로 변경이 됩니다.

EnableColliders() 함수는 각 콜라이더를 파라미터 enabled에 맞게 true / fasle 해주는 함수 구현입니다.

(현재는 true)

마지막으로 enabled를 False로 초기화해주고

오브젝트도 비활성화해주었습니다.

이 콜라이더가 켜져 있을 때 플레이어가 감지된다면

Hit()를 호출하여 50의 Damage를 입게 해 줍니다.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

생각을 해보니

maxHp , Str, Def, Exp, Level 들 + 레벨업시 획득하는 스탯 포인트 들은 데이터를 저장하고

변경이 될 때 같이 업데이트를 해줘야 할 것 같습니다.

레벨업을 하고 스탯 포인트를 얻었는데, 갑자기 프로그램이 꺼지고 재 실행 했을 때

모두 초기화가 되어 있다면 너무 허무할 것 같습니다.. OTL

다음 작업은

maxHp , Str, Def, Exp, Level, StatPoint에 대해 집중 적으로 작업을 하고

씬 이동(StageLevel01) 되는 구현을 이어서 나가보겠습니다.

감사합니다.

Land Of Memories - Menu - Stage

김효겸 — Thu, 21 Nov 2024 12:10:34 +0900

안녕하세요.

이번글에서는 Menu - Stage와 DataManager의 stageLevel01이 동기화되는 작업을 구현하였습니다.

먼저 영상 부터 보시겠습니다.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

먼저 MenuStage 스크립트에서 관리할 변수들을 선언해 주었습니다.

아마 다 아시겠지만

인스펙터창 에서 자물쇠를 잠가 주시면

다른 오브젝트를 선택해도 인스펙터창이 변하지 않고

여러 개의 오브젝트를 한꺼번에 저장을 할 수 있습니다.!

satgeLevel01 or 02

각 1번과 2번 Frame입니다.

각 Frame에는 맵이 각 8개씩 담겨 있습니다.

StageLevel... 01 or 02... Img

해금의 여부를 알리는 자물쇠 이미지입니다.

stageLock... 01 or 02... Img

자물쇠 이미지 아래 Star 이미지입니다.

맵이 해금되었음을 시각적으로 알리는 이미지입니다.

다음으로 하단에 Public 함수를 생성했습니다.

데이터를 불러와 stageLevel01이 true라면

첫 번째 Level, Lock 이미지의 컬러를 변경해 주었습니다.

초기 Start() 함수에서 한번 실행되게 해 주었는데,

이유는 재접속 시 데이터를 체크하여 시각적인 표시를 해주기 위함입니다.

다음으로는 퀘스트가 완료 됐을 때를 알리는

PopupAnimation 스크립트의 ShowPopup() 함수 내에

checkNumber의 값이 4 일 때입니다.

stageLevel01의 값을 true로 변경시켜 주었던 코드인데

그 하단에 DataSave()와 함께

CheckStageLock() 함수를 실행시켜 주었습니다.

재접속 시에 사용하기 위함이지만

플레이 도중에도 즉시 반영되기 위하여 실행시켜주었습니다.

코드를 테스트를 하면서 작성하는 것을 제외하고

하하.. 이번 작업도 약간의 실수들이 있었는데요..

1. UI 및 오브젝트를 재배치하면서 Ctrl + D로 작업을 했었는데, 스크립트가 입혀져 있는 오브젝트를 복제하는 바람에 스크립트 순서도 및 꼬임 현상 발생.. ( '갑자기 왜 이러지?'라고 생각했습니다..)

2. public으로 선언된 배열의 특정 인덱스 값에만 접근하려고 했던 점입니다.

배열 자체를 복사하거나 참조로 전달하는 것이 기본 동작이란 것을 생각하지 못하고

오류가 나지 않았기에 "왜 안되지?"라는 생각과 함께 원인을 찾으려고 했습니다.

클래스를 new 키워드로 생성하여 원소에 접근을 하려고 했다가.. get, set을 만들어서 배열 자체를 리턴 받으려고 했다가..

사용하려는 스크립트에선 변수 하나 만을 필요로 하기에 개별로 관리를 하기로 했습니다.

3. 다운로드한 에셋들을 정리하면서 Sprite도 정리를 하였는데, Key 오브젝트의 Sprite도 같이 삭제된 점입니다.

key 오브젝트는 초기에 비활성화 상태이고

key 오브젝트가 활성화될 타이밍에 활성화가 되지 않아 단순히 코드부터 살펴봤는데요..

인스펙터창 혹은 하이어라키창 한 번만 봤어도 금방 알 수 있었던 문제를

Debug.Log를 찍어보며 호출이 되나 확인을 했었습니다

이 외에도 몇 가지가 있었던 것 같은데..

코드도 물론 중요하지만

"인스펙터 창과 하이어라키 창도 잘 확인하자!!"

이 한 가지만큼이라도 상기시키며 나아가겠습니다.

~~(물론 이것만 지킨다는건 아닙니다!)~~

감사합니다.

Land Of Memories - UI Design

김효겸 — Thu, 21 Nov 2024 08:33:27 +0900

안녕하세요.

추가 기능 구현에 들어가기에 앞서 UI의 디자인부터 작업해 보았습니다.

초기 상태

메뉴 & 스텟 클릭

현재는 버튼 클릭 기능 구현만 작업된 상태이며,

각 UI와 버튼에 대해 설명을 한 뒤 하나씩 차례대로 기능을 구현해 나가겠습니다.

화면 상단 좌측에 있는 Level 표시입니다.

플레이어의 경험치가 100이 되면 Level이 증가하며 경험치는 0으로 초기화됩니다.

화면 상단 중앙에 있는 맵 Text입니다.

플레이어가 현재 있는 맵의 위치를 나타 냅니다.

화면 하단 중앙에 있는 플레이어의 체력 HP Bar입니다.

스탯을 통해 최대치를 증가시킬 수 있으며

대미지를 입으면 체력이 깎이게 됩니다.

화면 하단 중앙에 있는 플레이어의 경험치 EXP Bar입니다.

사냥 및 퀘스트를 통해 경험치를 수급할 수 있으며,

범위는 00.00%부터 100.00%입니다.

화면 하단 우측에 있는 Menu 버튼입니다.

메뉴 버튼에는 현재 Stage 정보와 Stat 정보를 확인할 버튼이 존재합니다.

메뉴 버튼을 클릭하면 나타날 Frame입니다.

Stage, Stat 버튼을 생성해 놓은 상태이며,

Null로 표시된 부분은 앞으로 추가될 UI의 임시 공간입니다.

Stage 버튼을 누르면 팝업 될 Frame입니다.

현재 담긴 맵의 정보들이 거처해 있으며

맵의 이미지가 검은색으로 표시된 부분은, 아직 맵을 만들지 않아 임시 Black으로 처리해 놓았습니다.

Close 버튼으로 메뉴를 닫을 수 있으며,

오른쪽 가기 버튼으로 다음 Frame으로 이동할 수 있습니다.

Stat 버튼을 클릭하면 팝업 될 Frame입니다.

최상단엔 플레이어의 현재 Level을 표시하였으며,

아래로 체력, 힘, 방어를 표시해 두었습니다.

또한 Reset 버튼과 Save 버튼을 두어 올린 스탯을 저장하거나 초기화할 수 있게 배치를 하였습니다.

다음은 버튼을 클릭하면 실행될 스크립트를 살펴보겠습니다.

먼저 Menu 스크립트를 생성한 뒤

isMenuButtonClick으로 팝업이 됐는지 안 됐는지 판단해 주었습니다.

Menu 버튼을 누르면 isMenuButtonClick 은 True

한번 더 Menu 버튼을 누르면 isMenuButtonClick 은 False

로 다음 로직이 실행됩니다.

애니메이션은 DOTween을 이용했습니다.

각 실행될 OpenMenu() 함수와, CloseMenu() 함수입니다.

SetActive로 활성화/비활성화를 해주었으며

DoAnchorPos()를 사용해 애니메이션 이동,

DOScale()을 사용해 크기를 변형해 주었습니다.

OnClickMenuButton() 함수는 'Menu' 버튼에 On Click () 이벤트로 연결해 주었습니다.

isMenuButtonClick에 따라 OpenMenu() / CloseMenu()가 실행되도록 하기 위함입니다.

팝업 된 Menu Frame에서 'Stage' 버튼을 클릭하면 팝업 될 Frame을 컨트롤할

MenuStage 스크립트입니다.

OnClickOpenStageMenu(), OnClickCloseStageMenu()

함수를 보시면 DOScale만 이동을 하여 크기 조절 Tween만 실행하여 확장되는 구현을 해보았습니다.

*초기화 로직을 구현한 이유는, 플레이어가 stage02 Frame에서 Close 버튼을 눌러 Frame을 닫았을 시 다시 열게 되면 Frame 02가 아닌 Frame01이 팝업 되게 하기 위함입니다.

OnClickRightButton(), OnClickLeftButton() 버튼은 각 방향으로 Frame을 넘기기 위한 버튼입니다.

현재는 Stage Frame이 총 2개 가 존재하며

각 SetActive()로 활성화/비활성화를 해주었습니다.

다음은 Menu Frame에서 Stat 버튼을 클릭하면 실행될 함수를 담고 있는 MenuInven 스크립트입니다.

이번엔 DOAnchorPos()를 사용해 x축 -1500에서 -718로

왼쪽 카메라 영역 밖에서 카메라 영역 좌측에 위치하도록 구현했습니다.

해야 할 일

1. Stage 맵 해금 관련 DataManager의 StageLevel01과 동기화

2. Stat 및 Hp, Exp 구현

3. 각 맵의 퀘스트인 StageLevel01~... 을 통해서 씬 이동 구현

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

확실히 디자인이 약간이라도 적용이 되고 안되고의 차이는 매우 큰 것 같습니다!!

사운드 적용도 하면 조금 더 분위기가 살 것 같은데, 현재 우선순위가 있는 작업은 아니기에 약간 미루도록 하겠습니다..!

감사합니다.

*(추가) 수정

코드를 살펴보던 도중 Stat을 Inven으로 잘못 작성을 했습니다.

Inven 관련된 표기를 모두 Stat으로 바꿔 주었고

버튼에 연결된 OnClick()에는 Missing으로 연결이 해제되어 있어서

재연결을 해주었습니다.

생각해 보니 Inven도 있으면 좋을것 같기도 하고 Skill도 있으면 좀 더 역동감을 줄 것 같은데

이 부분은 게임의 전체 흐름을 봐서 필요 하다고 판단시 추가 기능 구현을 하도록 하겠습니다.

감사합니다.

Land Of Memories - Quest (2) - KeyObject

김효겸 — Wed, 20 Nov 2024 20:03:25 +0900

Cry Npc의 기능 구현과 Key Object의 기능 구현을 나누려고 일지를 나눈 이유도 있지만,

선언할 변수와 추가를 해야 할 것을 나누려는 이유도 있었습니다.

하지만 곰곰히 생각해 보니 초기 기획 흐름도에서 플레이어가 로그아웃을 하게 되면 '리셋'이 되고

추가 변수는 DataManager에 퀘스트가 완료 됐는지 판단할 변수와

Cry NPC는 이 변수를 가지고 조건을 걸어주면 되는 것이었습니다.

가장 먼저 DataManager에

'stageLevel01' 변수를 선언해 주었습니다.

초기 상태는 stageLevel01 = false로 해금 여부가 False 인 상태입니다.

다음은 KeyObjectController 스크립트의 선언 변수입니다.

popupAnimation

popupAnimation 스크립트의 Check 변수에 접근하기 위함입니다.

backGroundImage

간단한 기믹 게이지 요소의 백그라운드 이미지입니다.

cooldownImage

쿨다운을 나타낼 이미지입니다.

decreaseSpeed

이미지의 Amount를 조절할 때 사용할 값 변수입니다.

isPlayerTouch

플레이어가 열쇠 오브젝트에 닿았는지 판단할 변수입니다.

가장 먼저 OnTrigger로 Enter(터치하였을 때)와 Exit(떨어졌을 때)

를 검사해 주었습니다.

터치가 되면 판단할 Flag는 true로 변경해 주며

게이지 오브젝트를 활성화해줍니다.

터치가 떨어지면 판단할 Flag는 false로 변경해 주며

게이지 오브젝트는 비활성화해 줍니다.

다음은 Update() 함수입니다.

이미지의 fillAmount를 조절해 주었으며,

fillAmount가 0보다 작거나 0이 된다면

"PopupAnimation" 스크립트의 checkNumber는 4로 변경해 주었습니다.

만일 isPlayerTouch가 false로 떨어지게 된다면

fillAmount는 다시 1로 초기화해 주었습니다.

* fillAmount의 초기값의 1에서 0으로 0.1씩 감소시켜주고 있습니다.

다음은 팝업 된 UI를 애니메이션 시켜주는 PopupAnimation 스크립트입니다.

가장 먼저 Start 함수를 보자면 stageLevel01의 값을 받아와 주었는데

이 부분의 구현은, 재접속했을 시 조건을 검사하기 위함입니다.

다음은 UI가 팝업 될 때 실행될 OnEnable() 함수에서

checkNumber의 값을 정해주는 구현 부분입니다.

가장 먼저 stageLevel01이 true 라면

checkNumber의 값은 4가 됩니다.

이후 기존 로직은 checkNumber의 값이 4가 아닐 때 실행되게 해 주었습니다.

마지막으로 ShowPopup() 함수가 실행되는데

CheckNumber가 4 라면 실행이 되며

추가적으로 Animator 컴포넌트를 비활성화해주었고

CryNPC의 Sprite를 변경시켜 주었습니다.

CheckNumber가 4 일 때는 두 가지 경우입니다.

1. key 오브젝트와 상호작용 후 CheckNumber가 4로 변경되어 NPC를 클릭하면 실행

(게임 플레이 중에 조건 검사)

2. 저장된 데이터를 가져와 stageLevel01가 true 인지 판단해 CheckNumber를 4로 변경

(재접속했을 때 조건 검사)

예외 처리를 해주기 위하여 재접속 시에도 stageLevel01을 검사하여

true 일 시

텍스트, 스프라이트, 애니메이션 비활성화 등 상황에 맞게 변경해 주었습니다.

CRY NPC만 한다면 동작 구현은 잘 되었는데,

Helper Npc와 Cry Npc 모두 이 Awale가 실행되는 점에서

stageLevel01이 true 라면 checkNumber는 항상 4가 되는 문제가 있었습니다.

'스크립트를 새로 작성해서 작업을 할까?' 하다가

생각해 보니 간단한 조건문만 걸어주면 되어서

다음과 같이 parentObject.name을 검사해 해결하였습니다.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

현재 stageLevel01이라는 저장된 데이터 변수를 사용할 수 있습니다.

이 변수를 활용해

다음 스테이지로 넘어갈 수 있고

UI 상에 표시도 할 수 있게 되었습니다!

가장 먼저 플레이어의 UI의 레이아웃을 구성하고

다음 스테이지로 넘어가는 구현을 완료해 보겠습니다.

*빠르진 않더라도 천천히 한 걸음씩 포기 않고 나아 가겠습니다.

현재 폭탄 피하기나 두더지 잡기 퀘스트 등 생각나는 게 몇 가지 있는데

기능적으로 추가를 빨리 해보고 싶습니다 ㅎㅎ

감사합니다!

Land Of Memories - Quest (1)

김효겸 — Wed, 20 Nov 2024 03:01:05 +0900

이번 작업은

플레이어가 NPC와 상호작용 하여 퀘스트를 완료하는 작업 구현을 진행하며 작성할 것입니다.

또한 이 퀘스트를 완료하게 되면 다음 Stage(맵)으로 이동할 수 있는 구현을 할 예정입니다.

가장 먼저 배치된 Npc에 Box콜라이더를 입혀 주었습니다.

(다 아시겠지만 BoxCollider 2D 가 붙어야 합니다)

저처럼 일반 3D용 BoxCollider를 추가해서 레이가 감지가 안 되는 이유를 찾는 불상사가 없길 바랍니다.

다음은 기존 Npc (Helper)를 클릭했을 때 실행되는 스크립트에서 추가를 할 것입니다.

위와 같이 else if로 npc의 name을 검색하는 조건문을 추가해 주었으며,

로그를 찍어 확인을 해보았습니다.

NPC_Helper를 클릭했을 때와 달리 NPC_Cry를 클릭하면

stage01 CryNpc가 활성화됩니다.

활성화될 UI입니다.

총 5개의 대화를 주고받으며 퀘스트가 시작되는 구현을 해보았습니다.

다음은 기존 PopupAnimation 스크립트에

추가 선언된 변수입니다.

각 UI를 실행하도록 맡았으며 특이 사항은

nextButton, npcImage, npcSprite

는 첫 번째 활성화될 UI의 버튼, 이미지, 스프라이트입니다.

퀘스트가 진행 중이면 키 오브젝트가 활성화되면서,

NPC를 다시 클릭했을 때 다른 UI를 보여주기 위함입니다.

keyGameObject

퀘스트 진행 하면 자동으로 활성화되는 오브젝트입니다.

플레이어가 이 오브젝트와 상호작용을 한 뒤

다시 NPC에게 다가가면 감사의 인사를 건네받은 뒤

다음 스테이지로 가는 길이 열리게 됩니다.

checknumber

현재 팝업 되는 UI가 어떤 UI인지 판단할 변수입니다.

현재 NPC가 2 종류 (Helper, Cry)가 있습니다.

checkQuesting

퀘스트 중인지 판단할 불 변수입니다.

이 퀘스트가 진행 중이면 NPC를 클릭했을 때 다른 UI가 활성화됩니다.

또한 Header를 사용하였는데, 이는 특별한 기능은 아니고 개인적으로 인스펙터 창에서 보기 편리하기 위함입니다.

다음은 오브젝트가 활성화될 때 실행되는 OnEnabled() 함수입니다.

각 NPC의 이름을 검사하여 현재 어떤 UI가 활성화되어있는지 판단을 합니다.

else if 조건문에 한번 더 조건 검사를 하였는데,

이는 퀘스트 진행 전/후를 나뉘어서 구현을 하기 위함입니다.

이후 ShowPopup() 함수를 실행시킵니다.

다음은 ShowPopup() 함수입니다.

조건문을 크게 보자면

Helper NPC 클릭했을 때

Cry NPC 클릭했을 때

(퀘스트 전)

Cry Npc 클릭했을 때

(퀘스트 후)

입니다. 이후 애니메이션 실행 방식은 DOTween을 사용한 기존과 동일하게 하였습니다.

다음은 Close 버튼을 클릭하면 실행될 HidePopup() 함수입니다.

ShowPopup() 함수와 마찬가지로 cjeckNumber로 현재 어떤 UI가 활성화되어있는지 판단을 하여

각 맞는 UI를 비활성화시켜 주는 구현입니다.

다음 동작 구현은 반복 작업에 동일하기에 함수명으로 대체하겠습니다.

각 Public으로 선언하여 버튼의 OnClick 이벤트로 연결을 해 주었습니다.

그리고 퀘스트 대화 마지막에 Enter 버튼을 클릭하면 실행될

OnClickFiveEnterButton()과

퀘스트 중일 때 닫기 버튼인

OnClickQuestingCloseButton()

를 살펴보겠습니다.

먼저 OnClickFiveEnterButton() 함수가 호출되면 실행될

FiveEnterButton() 함수입니다.

대화 마지막에 도달하여, 퀘스트 진행을 하려고 Enter Button을 누르게 되면

키 오브젝트를 활성화, 퀘스트 진행 여부를 판단할 불 변수를 true, 그리고 UI를 숨기게 됩니다.

마지막으로 OnClickQuestingCloseButton() 호출되면 실행될

QuestingCloseButton() 함수입니다.

이 함수는 퀘스트가 진행 중일 때 팝업된 UI의 닫기 버튼입니다.

플레이어가 물어볼 땐 (1500, 0) 의 좌표에서 UI 애니메이션이 실행되며

NPC가 물어 볼 땐 (0, -600)의 좌표에서 UI 애니메이션이 실행됩니다.

흐름을 정리하자면 다음과 같습니다.

1. NPC를 클릭하면 NPC의 이름을 토대로 UI를 팝업 합니다.

2. 팝업 된 UI를 컨트롤하는 스크립트에서 한번 더 조건으로 검사를 하게 됩니다.

(이는 스크립트를 나누지 않고 추가 NPC가 있을 시 재사용하기 위함입니다.)

3. UI 내에는 크게 3가지가 있습니다.

(Text, nextButton, CloseButton) 각 기능에 맞게 OnClickEvent로 연결을 시켜 주었습니다.

4. 퀘스트를 수락하면, 퀘스트가 진행 중인지 판단을 합니다.

(퀘스트 진행 전/후 NPC와의 상호작용 팝업 UI가 달라집니다.)

5. 'key' 오브젝트가 활성화됩니다.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

Key 오브젝트와 플레이어가 상호작용을 한 뒤

NPC에게 다시 돌아가 퀘스트를 완료하는 작업을 하기 전!

생각 정리를 한번 하고 작업 구현에 들어가야 할 것 같아서,

두 번에 나누어서 일지를 작성하기로 했습니다.

감사합니다.

Land Of Memories - Pixel Art

김효겸 — Tue, 19 Nov 2024 21:02:57 +0900

이번 작업은 픽셀 아트를 이용해서 이미지를 만들어 보았습니다.

플레이어가 NPC와 상호작용 하여 퀘스트를 받는 구현을 구현하고자 했었는데

제가 원하는 Sprite를 찾질 못하였습니다.

(앉아서 울고 있는 아이 모습)

픽셀 아트 링크

https://www.pixilart.com/

Pixilart - Share & Create Art Online

Pixilart, free online drawing editor and social platform for everyone. Create game sprites, make pixel art, animated GIFs, share artwork and socialize online.

www.pixilart.com

이번 기회에 연습해보고자 작업을 진행했으며 완성된 모습은 이러합니다.

크기 32* 32

네.. 뭐.. 믿기 힘드시겠지만

머리는 뿌까 머리로.. 귀여움을 표현하려고 하였고

목과 팔 그리고 다리에 살짝 보이는 '살색'은 디테일입니다.

간단한 그림이어서 '한 2~30분 정도면 뚝딱 하겠지?'라고 생각했던 제가

그림을 그렸다 지웠다 어느새 2시간이 훌쩍 지나있었습니다.

~~질문은 받지 않겠습니다.~~

현재 이 Sprite로 구현하는 바는 다음과 같습니다.

퀘스트 NPC 기획안

글로 번호를 매겨서 작성을 하려다가 정리를 한번 하고 작업하는 것이 좋을 것 같아서

PPT로 NPC 퀘스트 내용의 전체적인 흐름을 작성해 보았습니다.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

다음 글에서

'퀘스트 NPC 기획안'을 토대로 작업을 구현해 보겠습니다.

감사합니다.

보다 보면 약간 애정(?) 귀여움(?)이 느껴지기도 합니다..