[20171126] Character Building Scene

시간을 지나치게 소모한 감이 없지 않지만, 그럭 저럭 Character Build 를 위한 U.I가 모양을 갖추었습니다.

지난 작업에서 구성된 U.I는 간편하긴 합니다만...

1. 직관성이 떨어지는데다가
2. 너무나 성의가 느껴지지 않는 U.I 라서

...부득이하게 약간의 시간을 투자해버렸네요.

몸통은 빼고 얼굴 위주로 편집하도록 작업했습니다.

< Character Building U.I >

여건이 된다면 유저에게 보상으로 신체 파츠를 줄 수도 있겠네요.
( o_o)y-~

아주 무난한 형태의 U.I 입니다만 참고한 모델은 엄연히 존재합니다.

< Salt and Sanctuary - Head Parts Select U.I >

이 형태의 장점은 각각의 파츠에 이름을 붙일 필요가 없다는 겁니다.

아래의 Dark Soul 1 처럼 만들었다면 이름 붙인다고 머리좀 쥐어 뜯었겠지요.

( @_@)y-~

< Dark Soul 1 - Head Parts Select U.I >

이제...

1. 만들어진 Parts 목록을 저장하고
2. 저장된 Data 와 함께 게임이 시작 되도록

...작업해야겠네요.

날씨가 춥네요.
다들 감기 조심하세요.
( '_')y-~

[20171124] 작게 보면 그럴싸해.

휑~! ...한 화면이라도.
작게 보면 그럴싸~합니다.

저의 경우에는...
작은 화면을 보면서 뿌듯해 하다보면 개발하는 감각에 혼란이 발생하더군요.
( @_@)y-~

Character Build 를 위한 Scene을 작업중입니다.
U.I 정보를 외부로 Export 하지 않고 코드만으로 위치를 지정하는 것은 지루하기 짝이 없는 작업이지만, 작업이 완료되어 잘 자리잡힌 모습을 보는 것은 매우 기분 좋은 일입니다.

< Rogue - Character Building Scene >

Character Build U.I 를 어떻게 제공하는 것이 좋을지 고민중입니다.
"과감하게 빼버려도 괜찮을까?" ...부터
"어디까지 편집할 수 있어야 할까?" ...까지.


오랜만에 "루비이야기" 프로젝트를 빌드해서 돌려봤습니다.
이전에 어떻게 처리했었는지 확인해야할 것이 있었거든요.

오프닝 화면부터 만감이 교차합니다.

"이걸 도대체 내가 어떻게 만들었을까."

...라고 말입니다.

< The Fable of Ruby >

오늘도 열심히 작업중입니다.
( '_')y-~

[20171122] HUD

간략하게 HUD를 넣어보았습니다.
완전히~! "톨네코의 대모험 - 이상한 던전" 스타일 입니다.

작업 내역은...

1. 초상화
2. LV
3. HP : Text
4. HP : Gauge
5. Floor

...정보를 출력하기 위한 삽질과 실제 출력 입니다.

지난 작업과정에서 쌓여온 임시 코드와 형태만 갖추어놓은 코드를 사용가능한 코드로 조정하는 작업이 대부분이었네요.

< HUD >

내일은 Character Builder 를 작업할 예정입니다.
아~~~주 간단하게 만들 예정입니다.
( '_')y-~

[20171121] Zone with shadow

몇시에 잠들건 일단 잠들면 아주 기절해 버려서 자꾸 오후에 일어나게 됩니다.
오후에 일어나니 일을 마무리 하고 나면 새벽이거나, 지금 처럼 아침을 맞이하게 되네요.
( T_T)y-~

작업은 잘 되었습니다.

Game 에 Shadow 와 Light 를 적용해서 다음과 같은 모습이 되었습니다.
제가 애정하는 게임인 "톨네코의 대모험 - 이상한 던전" 에서 사용한 것과 거의 같은 방식입니다.

< Zone with shadow >

작정하고 System Copy를 하고 있는 만큼 가져다 쓸 수 있는 것은 모두 가져다 쓸 생각입니다.
시간이 좀 더 있다면 제대로 시야 시스템을 구축하고 싶었습니다만... 남겨진 시간이 얼마 없네요.
( '_')y-~

완성되면 이 게임에서 요만큼, 저게임에서 요만큼 해서 프랑캔슈타인이 되어있겠죠?

[20171120] 9 Slice Light Node

이상하게 시간이 빠르게 흐르는 것처럼 느껴지네요.
아침에 올린 포스팅이 마치 어제 올린것처럼 느껴집니다.
더 쉬어야 하는 걸까요?
@_@

작업 이야기로 들어가면.

사각형 형태이긴 합니다만 다양한 크기에 대응해야 하기에 흔히 "9 등분" 이라고 부르는 방식을 적용했습니다.

방에 들어선 유저를 가장 먼저 맞이해줄 겁니다.

< 9 Slice Light Node >

이제 다시 Game Code 를 만질 수 있겠네요.
먼저 열심히 작업한 Shadow Node 와 Light Node 를 적용해야겠습니다.
일단 자고.
그 전에 뭔가 먹고 말이죠.

배고파요.
( '_')y-~

[20171119] Use texture instead fragment shader

하루 죽은듯이 기절해 있다가 다시 작업을 시작했습니다.

너무 많이 자서 오늘이 월요일인줄 알았네요. @_@

어떤 계통의 프로그래밍을 하건 기본 이상의 수준에 도달하면 알게 되는것이 있습니다.

1. 상당부분의 실시간 연산은 미리 연산해놓은 데이터로 대체할 수 있다.
2. 1의 연장선상에서 연산량과 메모리사용량은 상당부분 상호 교환이 가능하다.

...뭐 기본적인 이야기지요.

~( o_o)~

그런 취지에서 fragment shader 에서 하던 연산을 Texture값으로 대체하는 작업을 하였습니다.

< 상단 원 : fragment shaer 사용 >

< 하단 원 : 미리 만든 Texture 사용 >

Texture 이미지만 조정하면 Light 의 형태를 조정할 수 있다는 점에서 편의성이 있고,

fragment shader 코드를 손대지 않아도 됨으로 디버깅할 여지도 줄어들 것으로 기대하고 있습니다.

할 수만 있다면 코드량은 적으면 적을수록 좋으니까요.

그러면 이어서 본작업 갑니다.

( '_')y-~

[20171117] Shadow, Light and Terrain

지난번에...

"다음은 다양한 모양의 Light를 출력하는 작업입니다."

...라고 했었습니다만.

해당 작업의 우선순위가 그리 높은 것 같지 않아서 더 중요하다고 생각한 작업을 진행했습니다.

이 작업은...

1. 화면안에 보이는 Terrain Node를 화면 크기만큼 Texture Render 하고
2. 그 결과물에 GrayScale 을 적용해서 기본 그림자 영역을 만든뒤
3. 지난 작업에서 만든 LightNode 를 적용해서 LightNode 영역 만큼을 지워낸

...결과물입니다.

< Shadow, Light and Terrain >

나름 구상했던 것과 비슷하게 나와서 만족 스럽네요.

위에 보이는 원형 LightNode는 Player 가 길 영역을 지날때 활용될 녀석입니다.

이제 방 영역에 들어갔을때 사용될 모서리가 라운딩 처리된 사각형 LightNode를 만들어야 겠네요.

지난번에 이야기한 "다양한 모양의 Light" 에 해당하는 녀석입니다.

( '_')y-~

[20171116] Multi Light

여러개의 Light를 지원하는 Shadow Node를 만들었습니다.

이 작업은...

1. 버퍼를 알파가 살짝 들어간 검정색으로 클리어 하고
2. Light Node와 영역이 겹치는 버퍼의 알파값을 제거

...하였습니다.

기본 기능은 "Dicer" project를 하면서 만들어 두었기에 빨리 마무리 되었네요.

다음은 다양한 모양의 Light를 출력하는 작업입니다.
( '_')y-~

[20171115] Light with Sprite

"Dicer Project" 를 시작하던 시절에 갈증을 해소하고자 진행했던 Shader 작업을 정리했습니다.

Sprite node에 custome shader 를 설정해서 light 처럼 활용하는 기능입니다.

진작 이 작업을 했었다면 "루비이야기" 도 좀더 연출이 괜찮은 게임이 되었겠다 싶습니다.
딱히 어려운 작업도 아니었는데 말입니다.
( T_T)y-~

< Light effect with sprite node >

이제 맵에 쓰일 시야 기능을 작업해야겠습니다.
이 녀석과 비슷하게 보여지는 기능이지만, 이 녀석을 만든 방식으로는 만들 수 없습니다.

삽질하러 갑니다.
( '_')y-~

[20171113] Strange line of tile map

오래전에 해결했던 문제를 다시 마주할 일이 있었습니다.

"이런 사소한걸 정리하는게 무슨 의미가 있겠어."
"아냐 누군가 절박한 사람에겐 도움이 될거야."
...라고 30분쯤 고민하다가 귀차니즘을 극복하고 적어봅니다.

cocos2d-x 에서 Tmx 관련 Class 를 사용하거나 SpriteBatchNode 를 사용해서 Tile map 을 Render 할때 타일의 경계면에 심기를 몹시 불편하게 만드는 라인이 보일 때가 있습니다.

< Strange line of tile map >

이 문제의 원인은 Texture에 있을 가능성이 매우 높으며 Vertex가 특정 공간을 커버하지 못해서 발생할 가능성은 낮은편입니다.

빈공간이 있어서 생긴 문제라면 Vertex의 크기와 위치를 조정하는 것으로 해결될겁니다.

이 문제를 해결하기 위해 Vertex를 약간 겹치게 한다고 해도 원인이 Texture에 있을경우 이 문제를 해결할 수 없습니다.


Tile을 만드실때...

타일 주변의 1px을 타일의 경계면 색상과 동일하게 칠해주는것

...이 가장 간단한 해결방법입니다.
( 노가다가 동반되서 아닐 수도 있습니다. ( '_')y-~ )
( 그럴땐 Texture Filter 쪽을 디벼보세요. 참고 )


이 방법으로 해결하는 이유는 이 문제가...
Vertex가 Render 되는 과정에서 정해진 Texture값 그대로 그려지지 않을 수 있기 때문입니다.
즉 아주 미세한 수준에서...

1. Tex 값이 모자르거나
2. Tex 값이 넘거나
3. Texture Filter 때문에 Src 값 자체가 변하거나.

...할 수 있습니다.


그리고 1px 를 칠해주는 것으로 문제가 되는 2번과 3번의 경우에 대응할 수 있습니다.


그래서 Tile이 실질적으로 어떤 모양이 되어야 하냐면

< 1번 : Tile 주변에 1px 를 칠하지 않았다. >

< 2번 : Tile 주변에 1px 를 칠했다. >

1번 이미지 처럼 타일을 그리면 안됩니다.
2번 이미지 처럼 주변 1px를 채워주시면 됩니다.

그리고 당연하게도...
경계면 색상이 동일한 Tile이 있을 경우 1px를 채우지 않고 Tile을 연속되게 배치하셔도 됩니다.

물론 주변 1px의 색을 맞춰주는 것을 잊지 맙시다.

< 칠하세요 1px >

[20171112] Apply Tile

Texture Render 로 찍어낸  Tile Pattern을 png 파일로 Export 한 뒤에
Map에 적용해보았습니다.

그럭 저럭 이전보다는 쓸만한 것 같아서 흡족하네요.
( +_+)y-~

< Apply Tile Pattern >

지난번에 만든 Test Scene 선택 기능이 많은 도움이 되었습니다.
Tool 을 만들어서 작업을 하는게 아니다보니 Test Scene이 Tool 처럼 활용되고 있네요.

개발을 지속하다 보면 언젠가 정말 Tool을 만들 날도 오겠죠.

이제 바닥 Tile을 출력시키고 다음 할 작업을 골라 봐야 겠습니다.
( '_')y-~

[20171110] 독백 #2

2년정도 더 1인 개발을 계속하면 어디까지 작업해볼 수 있을까.
가능성 낮은 이야기지만 흥미는 생기는구나.

난 아마도 지난 시절의 기술들을 하나씩 경험해 가는 중이겠지.
( '_')y-~

[20171110] Tile Pattern Generator

Tile Pattern을 생성해서 Texture Render 하였습니다.

index 값은 다르지만 형태가 같은 Tile이 존재합니다.

귀찮으니 그냥 두기로 합니다.

( '_')y-~

작업의 진행은 다음과 같았습니다.

1. 기본 타일을 뿌리고

< Step 1 - Base View >

2. 가로 세로 4방향에 맞추어 타일을 조정합니다.

< Step 2 - Apply Direction >

3. 대각선의 위치에 다른 타일이 있을경우 현재 타일에 영향을 주는지를 판단해서 타일을 조정합니다.

< Step 3 - Apply Diagonal Direction >

4. 단일 방향 타일일 경우에 각 모서리 타일을 직선형으로 조정해줍니다.

< Step 4 - Apply Base Diagonal View >

5. 가로 세로에 다른 타일이 있으나 그 사이의 대각선 방향에 타일이 없을 경우, 즉 90' 꺽이는 길의 형태가 될때 각 방향에 맞추어 타일을 조정해 줍니다.

< Step5 - ...End >

실시간으로 그려도 될 Tile을 뭐하러 Texture Render 하느냐는 의문을 가질 수 있습니다.

그에 대한 답은 다음과 같습니다.

< Just Render >

< Use Prerender to Texture >

수치에 낭비와 거품이 포함되어 있긴 하겠습니다만 상당량의 이득을 취할 수 있다는 것은 알 수 있습니다.

"더 이상의 자세한 설명은 생략한다."

[20171109] 작업 재개

지난 10월 31일 Prototype 작업을 마무리 하고
뭐하러 바싹 조여서 작업을 했는지 무색할 정도로 길게 휴식을 취했습니다.
( o_o)y-~

건강은 약간 회복했습니다.
하지만 Streamer 들이 "Getting over it" 을 하면서 고통받는 것을 구경하다 보니 수면패턴이 망가져버려서 상태는 영~~ 좋지 못합니다.

어쨋든 오늘! 11월 9일 작업을 재개 했습니다.

우선...
Scene Select 를 위한 Scene을 추가했습니다.

< Scene for Scene Select >

진작 여러 Test Scene이 있었지만 "몇 개나 더 추가 되겠어" 라며 그냥 넘어갔는데요.
한 개, 두 개 쌓이니 벌써 5개가 되어버렸습니다.
향후 Test 과정에 여러모로 도움이 되리라 믿습니다.



다음 작업은 보는 맛을 증대 시키기 위한 Tile 설정 작업입니다.
Tile 을 출력할때 주변 8방향의 타일의 구성에 따라서 자신의 Tile Pattern 이 정해집니다.
즉 2 의 8승 만큼의 Pattern 이 필요한 것이죠.
그래서 일단 Tile Pattern의 경우의 수를 뽑아냅니다.

< Number of case >

그리고 Texture Render 기능을 활용해서 Tile Pattern 들을 찍어내야 합니다.
현재는 아래와 같이 dummy 몇 개를 출력하는 상태입니다.

< Dummy render to Texture >

이제 실제 Tile Pattern 을 생성하는 작업을 진행해야겠네요.

날씨가 추워집니다.
다들 감기 조심하세요.
( '_')y-~