인디 게임 개발 #4 ( Indie Game Dev #4 ): 전장의 안개 효과 구현 ( Making Fog of War system )

warning. Google Translator. English may be strange

안녕하세요? 도적 코볼트에요.

오늘로서 스팀잇에 가입한 지 7일이 된 것 같아요. 그 동안에 여러가지 일이 있었어요. 그 중에 하나는 처음에 가입인사 글에 대해서 보상을 받은 것이랍니다. 아직은 어떻게 해야할 지 몰라서 망설이고 있는데… 이렇게 스팀잇을 통해서 수입이 있을 수 있다는 것을 증명해서 주변 친구들에게 알려줄 생각이랍니다. 그것에 대한 포스팅은 나중에 해보도록 할게요!

오늘은 게임 개발 일지 4회 차입니다. 1회차 ~ 3회차까지는 어떻게 이 게임이 만들어졌고, 저의 상황과 같은 것에 대해서만 주로 글을 썼는데요. 앞으로는 좀 더 제 개발 과정에 충실하게 쓰고 싶어요. 물론 스팀잇에 계신 분들께
서 편하게 이해하도록 제가 만들고 있는 것과 실제 게임 중에서 어떻게 구현이 되었는지도 올려놓고 싶습니다.

오늘 개발한 것은 ' 전장의 안개 ' 라고 불리는 시스템이에요. 이렇게 말씀하시면 무엇인지 모르실 수 있어서 아주 유명한 게임인 스타크래프트에서 어떻게 그것이 구현되었는가 보여드릴게요!

Good morning? It's a thief kobold.

I think it has been seven days since I signed up for SteemIt. There have been a lot of things in the meantime. One of them was rewarded for signing greeting at first. I'm hesitant because I do not know what to do yet ... I am going to prove to my friends that I can have income through SteemIt. I'll try to post about it later!

Today is game development journal four times. From the first to the third, I created this game and wrote mainly about things like my situation. I would like to write more faithfully in my development process in the future. Of course,
I want to make sure that I understand what I am creating and how it was implemented in real games to make it easier for me to understand.

[ 블리자드 사의 스타크래프트 ]
[ Blizzard's StarCraft]

전장의 안개는 보통은 RTS 형식의 게임에서 사용됩니다. RTS는 스타크래프트, 워크래프트와 같은 게임을 말해요.
The fog of war is usually used in games of the RTS type. RTS tells games like StarCraft, Warcraft.

[ 블리자드 사의 워크래프트 3 ]
[Blizzard's Warcraft 3]

전략적인 게임에서 시야는 정말 중요하죠. 상대방이 어디로 이동하고 있는지 알아야 전쟁에서 유리하기 때문이죠.
In strategic games, vision is really important. We have to know where the other person is moving.

[ 스타크래프트 2, 한번 보여진 곳은 회색으로 보이며 자세하게 어떤 행동을 하는지 모른다. ]
[StarCraft 2, once seen, appears gray and does not know what to do in detail. ]

한 번 보게 된 곳은 보고 있던 당시의 정보까지만 표현됩니다. 대략적으로 무엇인지 알 수 있죠. 그러나 한 번도 아직 보지 못한 곳은 깜깜하게 표현됩니다.
The place you saw once is only displayed at that time. You can see what it is about. However, the place that we have not seen yet is darkened.

[ 스타크래프트 1, 저글링은 언덕 너머 시야를 얻지 못했다. 그래서 어떤 것이 있는지 볼 수 없다]
[StarCraft 1, Juggling has not got a view beyond the hill. So I can not see what it is]

현재 저글링을 움직이는 유저는 저글링이 가지고 있는 시야를 통해서 해당 위치의 정보를 볼 수 있지만, 시야가 없는 벽 너머는 알지 못해요. 바로 이게 전장의 안개 효과입니다.
The user who is currently moving the juggling can see the information of the location through the view that the juggling has, but I do not know beyond the wall without the sight. This is the fog effect of the battlefield.

[ 저두요! 저두 ]
[ Me too! ]

네, 이번에는 gif를 만드는 방법을 배워왔습니다. (헤헤.. )

이전에 써놨던 글에서 로딩, 로비, 플레이, 전투에 대해서 어떻게 할 것이었고 어떻게 바뀔 것인지에 대해서 포스팅을 했는데요. 영상이나 그런게 없었기 때문에 전쟁의 안개 효과를 찍으면서 같이 찍었습니다.

빨간색 육각형이 플레이어 캐릭터인데, 움직일 때 한번도 보지 못했던 곳을 의미하는 까만 색이 밝혀집니다.
그리고 한번 지나간 곳은 회색 빛으로 바뀌게 되는 것이죠.

파란색 육각형은 몬스터로서, 제 시야 밖에 있다면 몬스터가 표현되지 않고 있어요. 그래서 제 시야 안으로 몬스터가 들어오면 갑작스럽게 파란색 육각형( 몬스터 ) 가 나타나게 됩니다.

주황색 번개표시는 일종의 아이템인데요. 이것은 테스트의 편의와 유저에게 아이템의 위치를 보여줘야할 것 같아서 제 시야 밖에 있더라도 표시를 해주고 있는 상황이에요.

Yes, this time I have learned how to make a gif. (Hehe.. )

wrote a post about what I was going to do about loading, lobbying, play, and battle in the previous article and how it would change. Because we did not have image and such, we took the effect of fog of war together and took together.

The red hexagon is a player character, and when you move it reveals a black color that means you have never seen it before.
And once it passes, it turns gray.

The blue hexagon is a monster, and if it is outside my sight, the monster is not represented. So when a monster comes in my view, a blue hexagon (monster) suddenly appears.

Orange lightning sign is a kind of item. This is the convenience of the test and the user is supposed to show the position of the item, so even if it is outside of my view, I'm showing the situation.

[ 시야 안에 있으면 보인다 ]
[It looks if it is in sight]

시야 안에 몬스터가 있기 때문에 보이고 있는 상황입니다. 몬스터가 시야 밖으로 넘어가면 더 이상 볼 수 없죠. 그러나 아이템은 시야 밖에 있더라도, 그 위치를 한번 알고 있으면 언제든 확인할 수 있습니다.

It is a situation that is seen because there is a monster in sight. If the monster goes out of sight, you can not see it anymore. However, even if the item is out of sight, you can always see the location once you know it.

[ 개발자 화면에서 본 사진 ]
[Photos viewed from developer's screen]

개발자 화면에서 보시면 몬스터가 플레이어 밖에 있기 때문에 사라진 것을 확인할 수 있습니다.

이렇게 전장의 안개를 구현하게 됐습니다. 아직은 좀 더 다듬어야 하겠지만 기본적인 기능을 하는 시스템을 만들었다는 게 중요한 거죠! 디테일은 시간을 들여서 작업해야하니까요!

다음 목표는 랜덤 맵을 만드는 것입니다. 이번에 제가 이용할 것은 셀룰러 오토마타라는 것을 이용한 랜덤 맵 생성인데요. 그것은 뭐냐면...

On the developer screen, you can see that the monster is gone because it is outside the player.

This led to the implementation of the fog of the battlefield. It's still important to have a more refined system but to create a basic functional system! The details need to be worked through time!

The next goal is to create a random map. This is my random map generation using cellular automata. It's ...

[ 셀룰러 오토마타를 이용한 랜덤 동굴 만드는 것 ]
[Making a random cave using cellular automata]

이렇게 이용되는데, 이것을 이용해서 랜덤 맵을 생성하는 작업을 하겠습니다.

읽어주셔서 모두들 감사합니다. 오늘 일요일인데 좋은 하루 보내시길 바라겠습니다!

• 추가로 gif 찍다가 버그 같은 것을 발견해서 확인해 봐야겠네요 ㅜㅜ

We will use this to create a random map.
Thank you everyone for reading. I hope you have a good day!

• I have to add gif to find a bug and check it out.

---

셀룰러 오토마타를 이용한 gif는 아래의 유튜브에서 일부 편집해서 사용했습니다.
The gif using the cellular automata was edited and used in some of the following YouTube.

https://www.유튜브.com/watch?v=v7yyZZjF1z4