Frostory - 로그 뷰어 - 인디 게임 개발 마이너 갤러리

인디 게임 개발 갤러리
마이너

자동 짤방 이미지

이미지가 없습니다.

자동 짤방으로 사용할 이미지를 등록해 주세요.

게임 제작 일지, 토론, 잡담, 리뷰, 생존 등 인디 게임 개발과 관련 된 내용을 작성해주세요

매니저

파베르(jaba001)

부매니저

김메가(scw97310…) dawnDev(onlygame) 얀테이(lose7560) 211214(tomatoss) noble(altshake) 하루카남편(darkalex…) dryrain(dryrain1…) 불타는키보드(1bnmaker) HisaCat(hisacat) l아일리l(identity…)

개설일

2016-01-14

[📜일지] Frostory - 로그 뷰어

특수한발가락

2021.01.20 02:44:09

조회 1619 추천 17 댓글 11

안녕하세요!

오늘은 저희 게임의 로그 뷰어에 대해 써보려고 합니다.

viewimage.php?id=2abcdd23dad63db0&no=24b0d769e1d32ca73cec82fa11d02831da48f5f7e7e334e6e7e5e9c8fbd562f9f63e964abbeeb7498175b8c66606f9d3cb621ba6f3bb91d29b37839cd609780b319427

현재 저희 게임의 로그 뷰어는 이런식으로 생겼는데요.

최초의 원격 로그는 Heroku를 사용해 단순히 텍스트를 남기는 것이었습니다.

이 단계에서는 크게 유용하게 쓰이지는 않았고, 단순히 공모전에 게임을 출품한 이후 로그가 찍힌걸 보면서 재밌어하는 수준이었습니다.

꽤 오랫동안 그냥 이대로 쓰고있다가 레벨 분석을 위해 로그를 시각화하는것에 대해 생각하게 됐을 무렵 Firebase에 대해 알게 됐습니다.

공짜 티어 계정에도 상당히 많은 트래픽과 많은 기능들을 제공해주더라구요.

(Heroku가 무료로 제공하는 로그 시스템은 며칠만 지나도 그냥 삭제되고 기능도 별로 없습니다)

이걸 사용해서 로그를 제대로 기록해보자고 생각하게 됐고, 어떻게 시각화를 할지 생각해보았습니다.

viewimage.php?id=2abcdd23dad63db0&no=24b0d769e1d32ca73cec82fa11d02831da48f5f7e7e334e6e7e5e9c8fbd562f9f63e964abbeeb7498175b8c66606f9d3cb621ba6f3bb91d1983ed3cc8f0e2c0b4a5779

저희 게임은 고정된 레벨을 가진 게임이고, Wave라는 이름의 작은 단위의 레벨이 모여 하나의 큰 레벨(스테이지)를 구성하게 됩니다.

그리고 Wave들은 Portal을 통해 서로 연결되어있습니다.

자연스럽게 Wave와 Portal 단위로 정보를 표시하면 좋겠다고 생각했습니다.

그럼 이제 Wave와 Portal에 대한 데이터가 필요한데, 로그 뷰어에 맵 데이터를 하드하게 박아놓으면 레벨이 변화하거나 추가될 때마다 유지보수를 해야할 것입니다.

그래서 로그를 바탕으로 뷰어 내에서 실시간으로 맵 데이터를 생성하는 방향으로 결정하게 되었습니다.

맵 데이터는 Wave를 정점으로, Portal을 간선으로 하는 그래프라고 할 수 있습니다.

그래서 그래프를 어떻게들 그리는지 구글링을 해봤습니다.

그런데 굉장히 방대하고 깊이있는 분야더라구요..

그래프 그리기에 대한 대학 수업자료같이 생긴거 몇 개 보다가 머리가 아파서 어짜피 저희만 볼거니 적당히 그리기로 했습니다.

보기 편하게 기본적으로 오른쪽으로 노드를 그려나가고, 자식이 둘 이상인 경우 자식이 가장 많은 노드를 오른쪽에, 나머지를 다른 각도로.

라는 룰로 그려보니 꽤 이해하기 쉬운 형태로 모양이 나오는 것 같았습니다.

그래서 만들어진게 저번 일지에 등장한 툴입니다.

viewimage.php?id=2abcdd23dad63db0&no=24b0d769e1d32ca73cec82fa11d02831da48f5f7e7e334e6e7e5e9c8fbd562f9f63e964abbeeb749c728e3aa660cf5d632f61e256df7f369ff200e4ab02685

그래프는 유니티 캔버스에 DataRenderer2D 라는 오픈소스를 사용해서 그렸습니다.

화면 왼쪽에는 유저 로그들이 토글로 뜨고, 이걸 누르면 오른쪽 그래프에 반영되는 식입니다.

아래에는 인게임 플레이타임에 기반한 타임라인이 있습니다.

viewimage.php?id=2abcdd23dad63db0&no=24b0d769e1d32ca73cec82fa11d02831da48f5f7e7e334e6e7e5e9c8fbd562f9f63e964abbeeb749c728e3aa660cf5d632f61e233da0a46cf9745e4ab02685

로그를 바탕으로 그래프를 동적으로 만들다보니 시간에 따라 자식이 가장 많은 노드가 변하기 때문에 타임라인을 쭉 땡기면 좀 있어보입니다.

그리고 파이어베이스가 제공하는 좋은 기능들 중에는 실시간 이벤트 수신도 있어서, 타임라인 오른쪽의 빨간 버튼을 누르면 실시간으로도 볼 수 있게 했습니다.

이 기능으로 BIC 전시 때는 유저가 플레이 하고 있으면 개발을 멈추고 보고 있기도 했습니다.

그래프 위에서 아이콘이 움직이는 걸 보면서 유저들이 저희 게임을 플레이하는 걸 상상하고 있으면 기분이 좋더라구요.

uc?export=view&id=18CKhNLB3N9GLiEiid2ObbNv2c4ZGKt3d

최근에는 이걸 타입스크립트로 재작성해서 웹으로 옮겼습니다.

분석을 더 편하게 하기 위해 더 많은 기능을 넣고싶기도 하고, 자잘한 수정을 할 때가 종종 생겼는데 유니티로 작업을 하는게 좀 무거웠거든요.

사실 웹개발을 안해봐서 빠르게 만드려고 익숙한 유니티로 했던건데, 막상 웹으로 해보니까 웹은 정말 신세계네요.

코드 수정 -> 컴파일 -> 결과물 확인까지 1초. 왜 이걸 처음에 유니티로 만들었을까요..

자바스크립트쪽엔 그래프를 그리기 위한 오픈소스 라이브러리도 잔뜩 있었는데 몇 개 보다가 라이브러리를 공부하는게 더 오래 걸릴 것 같아서 기존 코드들을 copy&paste 했습니다.

드로잉에는 p5.js 를 사용했습니다.

읽어주셔서 감사합니다!

-------------이전글---------------

--------------------------

고정닉 5

전체 댓글 0개

등록순 최신순 답글순

본문 보기

타인의 권리를 침해하거나 명예를 훼손하는 댓글은 운영원칙 및 관련 법률에 제재를 받을 수 있습니다.
Shift+Enter 키를 동시에 누르면 줄바꿈이 됩니다.

갤러리 리스트
번호	말머리	제목	글쓴이	작성일	조회	추천
-	설문	며느리, 사위되면 시댁, 처가에 잘할 것 같은 스타	운영자	25/10/13	-	-
-	AD	프로게이머가 될테야!!	운영자	25/10/01	-	-
174286	공지	인디 게임 개발 갤러리 규칙 - 질문 전 필독!!	*파베르*	24.12.04	5877	9
193761	공지	신문고 [3]	*파베르*	25.09.06	388	0
193433	공지	게임제작 초심자를 위한 글 모음 - Goranic	*파베르*	25.09.02	1976	7
123789	공지	뉴비 개임개발 하려는데 뭐부터 해야하나요 복사본 [22]	흉황	23.04.11	30555	54
196228	💬	개발 소식 끊긴 인디개발자들 보면 마음이 아픔 [1]	ㅇㅇ(61.99)	12:59	21	0
196227	💬	유니티 씬뷰 게임뷰 하이어라키 << 이게 사실 혁명임	Indie(115.138)	12:53	40	0
196226	💬	손목과 엄지가 좋지않아 아대를 하나 샀다 [6]	엔록	12:22	64	0
196225	💬	어리석은 영혼들 게임엔진업계는 원래 쓰레기장이다 [5]	Indie(221.144)	12:18	116	0
196224	💬	?????? = 유니티가 쓰레기라고라? [2]	ㅇㅇ	12:11	123	0
196223	📜일지	지형 새로 만들었다	Indie(211.248)	12:09	71	2
196222	💬	게임개발자들이 천재같다고 느끼는부분	NEMO	12:05	93	0
196221	🐣질문	혹시 플로라리움 소식 아는 사람 잇슴? [13]	김메가	11:01	235	0
196220	💬	사운드 디자이너인데.. (수정2) [17]	aogon(121.167)	10:58	242	2
196219	💬	빌드된 게임이 아니라, 개발 화면에서 FPS 낮추면 [8]	Indie(1.217)	10:31	191	0
196218	💬	인디 게임 개발은 수파베이스 안 쓰나요? [2]	Indie(1.217)	10:30	137	0
196217	💬	언리얼 컴퓨터 어느정도로 맞춰야함? [5]	ㅇㅇㅇ(125.130)	10:08	152	0
196216	🐣질문	스팀 여권인증은 [2]	ㅇㅇ(211.104)	09:04	159	0
196215	📜일지	풍채가 거대한 남자 2명 [13]	Bunny_Berry	07:31	537	10
196214	💬	엔진 갈드컵은 초보 놀이임 [12]	123번뇌왕2	05:47	247	3
196213	🐣질문	유니티 코드 캐시? 꼬인거같은데 혹시 어케 수정하나요 [4]	Indie(14.54)	04:22	211	0
196212	💬	게임 시스템 관련 잡담은 난 환영임 [2]	ㅇㅇ	03:46	268	0
196211	💬	기분이 좋지 않군아... [5]	Micharie	03:31	273	3
196210	💬	오늘한거 [4]	Indie(221.158)	02:41	247	3
196209	💬	23일 국감에 한콘진 관련 이야기 나온다 함	Indie(183.107)	02:06	406	8
196208	💬	여기 팀단위로 하는사람들은 [8]	Indie(14.56)	01:38	408	0
196207	💬	엔진 갈드컵은 생산성이 너무 없는듯	Indie(1.245)	01:16	190	3
196202	💬	나님은 신이다 [1]	Indie(221.144)	10.14	151	0
196201	🐣질문	요즘 유니티 tween 에셋 뭘 사용해? [8]	ㅇㅇ	10.14	246	0
196200	💬	근데 지원금을 꼭 돈으로 줘야함? [6]	ㅇㅇ	10.14	345	2
196199	💬	오늘 아무것도 안햇슴 [2]	Indie(59.27)	10.14	173	0
196198	📢홍보	넥페 참여 완료 - TBH : Task Bar Hero [7]	은하	10.14	487	11
196196	💬	옛날에 마크 온라인이라는 것도 있었지 [1]	ㅇㅇ(125.240)	10.14	229	0
196195	💬	팀 탈주 직전인데 내 판단이 맞는거겠지 [8]	쿠리추	10.14	489	1
196194	💬	밑에 드래곤키우기 게임개발자 3년전 [1]	Indie(121.128)	10.14	648	9
196192	💬	유니티는 경로의존성 사례다. [5]	Indie(183.105)	10.14	501	6
196191	💬	보스 AI 만들기 너무 어렵다 [1]	Micharie	10.14	243	3
196190	💬	밑에 홍보글 개발자 커엽네 ㅋㅋ [5]	Indie(218.144)	10.14	947	13
196189	💬	유니티 초보 코드짠거 코드리뷰좀 부탁함 [6]	Indie(116.40)	10.14	309	1
196188	💬	존카멕은 진짜 신이다... [2]	Indie(218.144)	10.14	208	0
196187	💬	데모 넥페에 올렸습니다. 드래곤 서바이벌. [12]	Indie(125.189)	10.14	851	20
196186	💬	오늘 한가지 배웠다... [2]	ㅇㅇ(222.238)	10.14	152	1
196185	🐣질문	유니티 버전 컨트롤 이건 협업용인건가 [4]	ㅇㅇ(222.233)	10.14	170	0
196183	💬	유니티 공부중 도움 글 사진 더 추가함 [4]	Indie(61.85)	10.14	204	0
196182	💬	유니티 공부중인 데 이것 좀 도와주라 [1]	Indie(61.85)	10.14	141	0
196181	💬	1인개발자가 혼자서 게임 개발할수있게 도와주는 앱만들고있음 [4]	ㅇㅇ(14.52)	10.14	375	3
196180	💬	기존 플젝 6로 올리니까 빌드에러가 ㅈㄴ나네 어지럽다	하루살이아니예요	10.14	74	0
196179	💬	2d가 쉬운거면 도트겜도 쉬워? [9]	Indie(119.193)	10.14	240	0
196178	💬	유튜브 보다 찾은건데 혹시 무슨 에셋인지 아시나요? [2]	Indie(220.76)	10.14	170	0
196177	💬	가끔 여기에 그냥 각종 게임이야기 글쓰는 사람들 [7]	ㅇㅇ(117.53)	10.14	245	0
196176	📜일지	그동한 작업한 거 [5]	RIP	10.14	318	5