CraftyJS - Entity Component 시스템 기반의 html5 게임 프레임워크

HTML5와 게임 프레임워크

웹이 나온지 시대가 많이 흘렀고 강산이 수없이 바뀌었습니다. 단순히 문서를 쉽게 공유하기 위해서 나온 웹이었지만, 현대는 이루 말할 수 없을 만큼 비약적으로 발전하였습니다. 이제는 웹에서 게임을 실행할 수 도 있는 환경이 되었지요. 웹게임도 초기에는 단순히 정적인 텍스트와 그림으로만 이루어진 게임에서 현재는 네이티브 게임과 비교해서 손색이 없을 정도로 발전했습니다. 이런 현상을 따라서 자연스럽게 웹게임 프레임워크들이 등장하기 시작했습니다. 또한 새로운 웹 표준인 HTML5 가 대두됨에 따라 게임에서 HTML5의 멋있는 기능들을 활용할 수 있게 되었습니다. 그래서 수많은 HTML5 게임 프레임워크가 나왔습니다. ImpactJS, LimeJS, Html5 Game Engine, ClanFX, CssGameEngine, EntityJS 등 수많은 HTML5 게임 프레임워크가 존재합니다. 여기서는 CraftyJS라는 게임 프레임워크에 대해서 이야기 해보고자 합니다.

Crafty

Crafty는 위에서 말했듯이 HTML5 게임 프레임워크 입니다. HTML5 웹 기술을 백분 활용합니다. 객체들을 DOM 형태로 표현할 수 있고, Canvas에 직접 그릴 수 도 있습니다. 어떤 방법을 선택할 지는 개발자의 몫입니다. DOM과 Canvas 둘다 활용할 수 있기 때문에 두 가지의 장점을 모두 살릴 수 있습니다. 또한 Crafty는 Entity Component System을 사용하고 있습니다. Entity Component System에서 각각의 객체는 Entity이고 Entity는 Component의 집합으로 이루어져 있습니다. 때문에 Entity에 Component를 추가하면 새로운 기능을 추가되는 방식으로 확장성에 대해 크게 열려있는 구조입니다. 이러한 구조 때문에 Crafty에서 DOM과 Canvas를 쉽게 섞어 쓸 수 있는 것입니다.

Crafty는 웹 기반이기 때문에 크로스플랫폼으로 제작할 수 있습니다. 익스플로러, 크롬, 사파리, 파이어폭스, 오페라등 어느 브라우저에서든 잘 동작하도록 만들어 졌습니다. 하지만 실제로 사용해 보니 익스플로러 9 이하의 버전에서는 제대로 작동하지 않는 경우가 많은 것 같습니다. 최신 브라우저들만 지원하도록 하는게 정신건강에 좋을 것 같습니다.

웹 기반인 Crafty는 어느 브라우저에서든 작동 가능하다.

MIT 라이센스를 채택하고 있는 오픈소스 프레임워크입니다. 그래서 무료로 사용할 수 있습니다. 다른 쓸만한 HTML5 게임 프레임워크들은 대부분 유료이지만 Crafty만은 무료입니다. 무료라고 해서 다른 프레임워크에 비해 절대 기능이 떨어지거나 하지 않습니다. 오히려 다양한 plugin들을 이용하여 더욱 멋진 게임을 만들 수 있습니다.

Entity Component System

Entity Component System은 전통적인 상속 구조와 다른 구조 입니다. 전통적으로는 상위 클래스를 만들고 하위 클래스가 상위 클랙스를 상속하여 사용했습니다. 상위 클래스는 하위 클래스들이 갖는 공통적인 기능들을 가지고 있어서 코드의 중복을 막을 수 있게 되었습니다. Entity Component System에서는 클래스를 사용하지 않습니다. 대신 Entity들은 Component의 집합으로 이루어져 있고, Component에 Entity들이 갖는 공통적인 기능을 가지도록 설계되었습니다. 덕분에 특정 Entity들의 기능을 수정할때 상위 클래스를 건드리는 방식이 아니기 때문에 다른 Entity들에 영향이 가지 않고 Component를 추가함으로써 안전하게 기능을 추가할 수 있습니다. 

Entity Component System

또한 이러한 설계방식은 모듈을 적용하기에 합리적입니다. Component를 이용하여 모듈을 제작하면 다른 사람이 해당 모듈을 쉽게 자신의 게임에 추가하여 사용할 수 있기 때문입니다. 이런 이유로 Crafty에 모듈 저장소가 있습니다. 해당 링크로 가시면 다른 사람들이 만든 수많은 모듈들이 있습니다. Entity Component System덕분에 이러한 모듈들을 자신의 게임에 적용하기 쉽습니다.

Crafty 모듈 저장소

Entity Component System에 대해 자세한 내용들을 보고 싶다면 아래 링크들을 확인해 주세요. (영어의 압박이 있습니다.)

http://cowboyprogramming.com/2007/01/05/evolve-your-heirachy/

http://piemaster.net/2011/07/entity-component-primer/

http://www.gamedev.net/page/resources/_/technical/game-programming/understanding-component-entity-systems-r3013

http://kiro86.egloos.com/663439 (한글 페이지)

jquery 스타일 셀렉터

웹 개발을 해보신 분은 jquery(또는 비슷한 프레임워크)는 한번쯤 사용해 보셨을 겁니다. jquery의 강력한 기능 중 하나가 DOM 셀렉터 입니다. 태그, 클래스, id를 이용하여 쉽게 뭔하는 DOM을 찾아 낼 수 있어서 굉장히 편리합니다. 이와 비슷한 기능이 crafty에도 존재합니다. Entity에 Component를 추가해 두고 나중에 해당 Component를 가지고 있는 Entity를 셀렉터를 이용해 찾아낼 수 있습니다. 가령 Crafty.e("startBtn") 으로 Entity를 만들었으면 Crafty("startBtn")을 호출하면 해당 Entity를 리턴합니다. 하지만 성능상의 이유로 jquery와 다르게 행동하는 부분들이 있습니다. 대표적인 경우가 셀렉터로 찾은 Entity가 여러개일 경우입니다. 만약 버튼들의 색을 color 함수를 이용하여 초록색으로 바꾼다고 해봅시다.

Crafty("Button").color("green");

위의 코드는 작동하지 않습니다.

Crafty("Button").each(function () { this.color("green"); });

위 코드처럼 each를 이용하여야 합니다. 이렇게 jquery와는 다르게 행동하는 경우가 몇 가지 있으니 문서를 잘 읽어보고 주의해서 사용해야 합니다.

DOM vs Canvas

적은 양의 Sprite를 표현할때는 DOM 객체로 표현하는 것이 효과 적이고 파티클과 같이 무수히 많은 sprite를 다룰때는 Canvas를 사용하는 것이 효과적입니다. DOM을 이용할 경우 transform, 필터, 이벤트, 투명도, 그 외의 box-shadow나 border 같은 브라우저의 기능들을 활용할 수 있어서 손 쉽게 여러가지 효과를 추가할 수 있습니다. Canvas를 사용할 경우 이러한 효과들을 사용할 수는 없지만 블렌드 모드를 이용할 수 있고, 그리는 속도가 DOM에 비해 훨씬 빠릅니다. Crafty에서는 DOM과 Canvas를 섞어서 사용할 수 있기 때문에 두 경우 장점을 모두 살려서 게임을 만들 수 있습니다. Entity에 DOM 또는 Canvas 컴포넌트를 추가하기만 하면 되는 구조이기 때문에 손 쉽게 DOM과 Canvas를 섞어서 사용할 수 있습니다.

Canvas와 DOM의 장점 및 단점은 아래의 Stackoverflow 글에 잘 나와 있습니다.

http://stackoverflow.com/questions/2266416/what-are-the-advantages-disadvantages-of-canvas-vs-dom-in-javascript-game-devel

타이젠과 Crafty

최근 나오는 스마트폰 OS가 그렇듯 타이젠도 웹앱 지원에 힘쓰고 있습니다. 사실 저는 타이젠에 별로 관심은 없지만 타이젠을 언급하는 이유는 타이젠 공식 튜토리얼중에 Crafty가 있기 때문입니다. 해당 튜토리얼에 들어가 보시면 굉장히 잘 만들어진 Crafty 튜토리얼을 보실 수 있습니다. 타이젠이 살 길은 웹앱의 활성화이기 때문에 웹앱과 관련된 기술들이라면 뭐든 일단 띄워봐야 하기 때문에 이런 튜토리얼도 만드는게 아닐까 싶습니다.

HTML5 게임이 할만한가?

HTML5 게임이 괜찮을까?

아무래도 웹 기반 게임은 성능면에서 네이티브 게임을 따라가려면 한참 멀었습니다. 하지만 간단한 게임이라면 웹 기반이라고 해도 충분히 부드럽게 게임을 즐길 수 있습니다. 그리고 웹 게임은 크로스플랫폼이라는 점에서 큰 매력이 있습니다. 대략적으로 웹 기반 게임의 장점과 단점을 뽑아보면 다음과 같은 것들이 있습니다.

장점

• 크로스플랫폼
• HTML5 기술을 활용할 수 있다.
• 자바스크립트를 사용하기 때문에 프로그래밍이 편하고 브라우저의 디버깅 기능도 훌륭하다.

단점

• 느리다
• 시스템에 직접 접근할 수 없다.
• 브라우저에 따라 로직이 달라질 수 있다.

하드코어한 게임이 아니라면 충분히 HTML5 게임으로도 멋진 게임을 만들 수 있습니다. 브라우저에서 지원하는 기능들도 굉장히 많으니 이러한 기능들을 잘 활용한다면 네이티브 게임 못지 않은 게임을 제작할 수 있습니다.

Crafty를 배우는게 참고할 만한 튜토리얼들

http://cykod.github.io/Presentations/HTML5/Crafty/

http://buildnewgames.com/introduction-to-crafty/

https://developer.tizen.org/ko/documentation/articles/game-development-craftyjs-library-introduction