안녕하세요 ㅎㅎ 데모 잘봤습니다.
제가 글을 쓰는 이유는 게임개발에대해서 질문하고싶어서 그런데 혹시 괜찮을까요??
우선 저는 대한민국에 살고 웹쪽으로 공부하고있는 학생입니다.
게임 데모 동영상과 관련하여 인터뷰같은것들도 살펴봤는데 보니까 자체적으로 만드신 엔진을 사용한다고 하셧더라고요. 그래서 제가 궁금한건 phaser를 기반으로해서 자체적으로 엔진을 만드셧는지? 아니면 진짜 맨땅에 해딩하듯 canvas 로레벨 api만가지고하셧는지??
제가 본 웹기반게임중에 제일 퀄리티가 높았고, 한국인이만들었다는것에 정말 놀랐습니다.
좋은하루되세요.
첫번쨰는 자신만의 방법이라서 특별히 어떻게 하겠다는 키워드나 참고자료가 없습니다.
기본적인 타일링 식 에 대한 부분과 거기에 자신들의 방법을 응용하기도 하며
게임중 jotan 이란게임역시 타일링 같아 보이진 않지만 타일링 기반을 한것으로 보입니다.
저희는 저희만의 정렬 알고리즘을 만들어 사용하고있으며, 특별히 정해진 방식이 아닌
저희 게임의 목적에 맞게 가공 제작해서 사용중입니다.
첫번째방법에 대해서 키워드나 참고자료같은거 제공해주실수있나요?
말로만보니까 와닿는게 없어서요..
세가지 정도 방법이 떠오릅니다. .
한가지는 타일링을 사용하지 않고 자신만이 독특한 방식을 사용하는 방법입니다.
레이어들을 구분하여 찍고 같은 레이어에 존재하는 객체들을 정렬을 통해 그리는 순서를 잡아주는 방법니다.
두번째는 타일링방식입니다만 타일링의경우 리소스 절약및 다양한 이유로 인해 위와같은 완벽한 그림을을 타일링을 통해서 다 쪼개서 타일링을 하는 경우는 극히 드뭅니다.
정확하지는 않지만 Jotun 이라는 게임이 원화기반을 모두 타일링을 한것같습니다.
마지막으로는 2.5d로 표현하는 방법입니다.
pillars of eternity 같은 게임이있겠습니다.
3가지다 모두 장단점이 존재 합니다. 가장중요한건 만들고싶은 게임에 맞는 기술을 사용하는거라
생각합니다.
참고로 매드월드는 첫번째 방법을 사용중이며, 아주 제한적으로 타일링 방식을 사용합니다.
답변 감사합니다 ㅎㅎ
얘기하시는걸 보니까 굉장히 잘 알고계시는것 같네요(타일링에 대해서)
그저꺠 타일링을 따로 구현해봤는데, 잘못알고있었던 부분도 있었고 몰랏던부분도 많이 알게 됬습니다.
정말 마지막으로 한가지만 더 물어보고 싶습니다.
이런 이미지를 타일링하려면 먼저 디자이너가 저위의사진처럼 전체를 다 그려논 후에, 일정규격으로(32px이던64px이던특정크기에맞춰서) 몇십개,몇백개로 분리해서 타일링하시나요?
@신현수
타일링과련해서는 구굴링을 해보시면 관련자료가 엄청나게 나옵니다.
기본방식은 같지만. 현수님이 이야기 주시는부분은 더 넓은 맵, 더 넓은 환경, 그리고 다른 방식의 Rendering방식을 포함한 내용입니다.
더 넓은 범위에서 사용하기위해서는 각 Cell을 관리하는 Sector그리고 Sector를 관리하는 Map단위의
다양한 자료구조 방법들을 활용을 하며, 이외 효율적인 Culling , 연출, 길찾기, 속성 등을 위해서 다양한 방식을 결합하여 사용합니다. 이부분은 본인이 만들고자 하는방향에 따라 직접 개발또는 관련 라이으버리를 활용하는 쪽임으로 이야기를 줄이겠습니다.
tile기법은 html5가 아닌 일반적인 게임개발에 있어서 아주 오래전(수십년)전부터 체계화가 잘 되어져있는 기법입니다) 다만 화면에 그려지는 방법에 따라 해당 적보를 어떻게 전달하여 그리는 가만 조금 다를뿐입니다..
html5의 경우 canvas를 통하여 그리는 경우와 webgl을 통해 그리는게 다른것처럼..
webgl 관련 렌더링과 tilemap 관련 자료를 보시면 도움이 되실듯합니다.
Phaser tilemap
https://phaser.io/examples/v2/category/tilemaps
WebGL
https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
위 기법을 많이사용한다구요?....
저기 코드보면 테트리스만들듯이 정적으로 배열로 맵(고정적인)크기,좌표 잡아주고있는데 여기서부터가일단...
그리고 저 예제에서 제일 현실성이없다고생각 하는것은(구현가능성이제로)은 게임이잘되서 맵이 하나씩 추가될때마다 그맵의 디자인에따라서 예제에 있는 연산은 그대로 못쓰고, 다른연산을 따로만들어야되요. 그리고 저기예제는 아주단순하게 사각형으로 잘라서 타일스크롤링해서 그나마 괜찮은(?) 거고, 맵이 복잡(멋잇어질수록)해질수록 타일의 양도 엄청나게늘어날거고, 그 타일에따라 그리는 알고리즘도 바꿔야 될 수도있을거에요...
그리고 한가지만더...
코드양보셧나요? 겨우 512X512 에서 한쪽 방향으로 3초이상을 못가요. 즉, 512X512크기에서 왼쪽오른쪽위쪽아래쪽방향으로 얼마가지도못하고 맵이끝나요(구현이여기까지되있다는거죠).
이거구현하는데 저정도인데, 실제게임에서는 말이안될거같아요.
그리고 MLB님께서 실제로 카메라구현에있어서는 3D환경에서 2D처럼 고정해서 쓴다고하셧지않앗나요? 그럼 타일스크롤링은 아니지않나요..
뭔가 말투가 공격적인것같아보일수도있는데 전혀아닙니다 ㅠㅠ
더 물어보셔도 됩니다 ㅎㅎ. 사실 위 기법은 많이 사용하는데요, 저희 같은 경우는 인터넷 상에 있는 기법은 사용하지 않고 조금 특이한 방법을 사용합니다. Pathfinder + 자체 정렬 알고리즘 + 레이어 구분을 통한 계층화 3가지를 묶어 표현합니다. 타일방식 쓰는 것은 저희도 일반적으로 사용하는 것과 동일한 방식으로 하구요, 좀더 복잡하게 사용하기 위해서는 Tiled라는 툴을 보시면 도움이 되실 것 같습니다. 링크: https://github.com/pixijs/pixi-tilemap 감사합니다!
오... 그런가요? 혹시 마지막으로 맵에대해서만 한가지더 여쭤봐도 될까요?
제가 2D물리게임을 만든적이있는데 타일스크롤링으로(좌,우만) 맵의 움직임을 구현했었거든요. 그리고 타일스크롤링에대해서 조금 찾아보고 예제도하나 본게 있는데 (https://mozdevs.github.io/gamedev-js-tiles/) 예제보시면 알수있겠듰이 타일이미지집합(image assets)에서 특정부분만 잘라와서 context.drawImage로 그려주고있는데 실제 깃헙가서 코드(https://github.com/mozdevs/gamedev-js-tiles/blob/gh-pages/square/scroll.js)보면 연산이 꽤 복잡합니다,
근데실제 개발에서는 위와같은 방식으로 개발하는건 문제가 있다고 생각합니다.
첫번째로, 맵을 개발자가 직접 다그려줘야합니다.
두번째로, 연산이복잡하며 맵이 하나씩 추가될때마다 또 그에대한(그맵에 customize해서) 새로운 연산이 필요하게됩니다.
그래서 저는 실제로 2d게임 개발에서 맵의 움직임을 구현하는데있어서 위와같은 기법은 쓰지 않을거라고 생각합니다.
그래서 말인데 mad world 같은 2d 게임에서는 어떻게 맵움직임을 제어하는지 궁금합니다
안녕하세요!
WebGL은 하드웨어 렌더링을 기반으로 3D 환경상에서 그려지는데 HTML5는 canvas 위에 webGL 기반으로 렌더링을 할지 기존 canvas draw 리반으로 할지 처음에 결정하게 됩니다.
매드월드는 3D 기반 픽셀쉐이더 버텍스 쉐이더 기반아래 제작되고 있으며 카메라를 2D 처럼 고정해서 3D를 2D처럼 사용하고 있습니다.
유니티 및 언리얼 엔진에서 만들어지는 2D 게임도 비슷한 방법으로 개발되고 있고, 대부분의 PC 게임은 모두 위와 같은 방식을 취하고 있습니다.
인터넷상 다양한 HTML5 렌더링 엔진을 참고 하시면 조금 쉽게 이해 가능합니다. 3D 엔진이 아닌 2D 엔진을 보시면 같은 구성인데, 쓰는 방식만 조금 다르다고 보시면 되겠습니다.
참고로 매드월드는 2D Canvas에서도 게임이 돌게는 되어있지만 성능이 많이 느려서 (하드웨어 지원을 받지 못합니다.), 고퀄리티 게임제작이 불가능합니다. 하지만 현재 대부분의 기기가 webGL을 거의 완벽하게 지원하고 있어서 큰 이슈는 아닙니다.
HTML5 호환성과 관련해서는 여기서 지원여부를 확인하실 수 있습니다. : http://html5test.com/
감사합니다!
죄송합니다 한번 더 여쭤봐도 되겠습니까?..ㅠ
canvas + webgl 이라고하셨는데 캔버스하나만들면 2d로할건지 3d로할건지 한번 컨텍스트잡아놓으면 못바꾸지않나요? 혹시 이뜻이 webgl을 지원하지않는 브라우저에서는 canvas로, 지원하면 webgl로 렌더링한다 이말인가요?
제가 아직 3d경험은 없어서 그런데 거의 모든 데모동영상은 제가 다봤는데 어디서 webgl쪽기술이 쓰인건가요?
예를들면 캐릭터이동(좌우상하)은 2d에서도 타일스크롤링으로할수있고, 스킬이펙트같은거는 스파인작업이고...딱히 3d요소가 들어가보이짆않았어요.
혹시 어떤측면에서 webgl기술이 들어갔는지 여쭤봐도되겠습니까?
좋은하루되세요.
네 알겠습니다 감사합니다!
안녕하세요, 매드월드에 관심가져주셔서 감사합니다. canvas + webgi + 오픈소스 기반 라이브러리들과 자체적으로 제작된 다양한 시스템을 통합하여 만들고 있습니다. 초반 버전은 자체로 렌더링기반을 만든 후 현재 버전은 다양한 라이브러리와 자체 라이브러리들이 통합되어 있다고 보시면 될 것 같습니다. Phaser는 사용하지 않았습니다. 답변이 되었으면 좋겠습니다!