시작하기웹게임을 개발하기 위한 게임 엔진은 아주 많다. 다만 나의 경우, pixi.js에 익숙하다보니 자연스럽게 phaser를 선택하게 되었다. 하지만 Phaser가 인기 있는 게임엔진이며 현재 유지보수가 가장 활발한 것 또한 사실이다. (링크) 이번 포스팅에서는 Phaser의 겉만 살펴볼 예정이다. 실제 내용은 다음 포스팅부터 시작한다. 상세하게 들어가기 전에 유투브 동영상 하나 보자.webGL의 현재, 미래에 대해서 이야기하는 동영상이다. 동영상에 보면 수많은 webGL 관련 라이브러리들을 설명한다. (링크) 이걸 조금 정리하자면 다음과 같다. PresentFutureGraphicsThree.js Pixi.jsMathboxGame EnginesPhaser PlayCanvas TurbulenzUnrea..
시작하기원래는 게임 관련 내용을 포스팅하려고 했는데 시기상조인 것 같다. 내용을 정리하다 보니 모르는 내용이 너무 많이 나올 것 같아서 조금 기초를 다지기로 했다. 오늘 포스팅 할 내용은 드래곤이 날라 다니는 예제다. 결과물을 확인하자. (링크) pixi.js 예제 12번의 서브 예제다. 코드 설명 전에 일단 환경을 셋업하자. (참고로 첨부파일을 base.zip를 다운 받으면 바로 코드설명 부분으로 넘어갈 수 있다.)환경셋업알다시피 이클립스 + 크롬을 개발 환경으로 사용하고 있다. 자세한 내용은 이전 포스팅들을 참조하자. 여기서는 이전 포스팅들을 읽었다는 가정 하에 내용을 정리한다. 우선 example12에 해당하는 프로젝트를 하나 생성하고 파일을 복사하자. index_dragon.html 이 필요한 파..
시작하기pixi.js를 사용하면 화면에 그리는 것은 쉽지만 물리적인 효과를 내는 것은 pixi.js 만으로는 해결이 힘들다. 이런 물리적인 효과에 대해서는 다음 포스팅에서 다루고 이번 포스팅에서는 사용자 이벤트 처리에 대해서 다뤄본다. pixi.js example로 말하자면 6번, 8번 정도이다. 물리적인 효과에 대해서는 exmaple 1번의 indexTest2.html 혹은 24번 example에서 확인할 수 있다. 두 example 모두에는 pixi.js 외에 다른 javascript가 포함된 것을 확인할 수 있다.최종화면다음 링크에서 확인해보자 : 링크 (http://kkangeva.woobi.co.kr/pixi3/) 사용하고 있는 호스팅이 무료라서 하루 100MB가 한계이긴 한데 블로그 인기가 지..
시작하기일단 본격적으로 예제를 살펴보기 전에 pixi.js 자체에 대해서 간략하게 알아보자. 아래 내용들은 모두 Youtube 동영상에서 확인 가능하다. (영어다-_-;) 일단 Pixi.js의 주요 두 가지 구성요소는 아래와 같다고 한다. stage : 화면에 그려질 elelments 들을 가지고 있는 일종의 도화지다.renderer : stage를 받아서 그리는 역할을 수행한다. 아래와 같은 느낌이랄까? 즉, JavaScript 코드에서 renderer와 statge를 적절하게 수정한 이후 그림을 그리라고 명령을 내리면 renderer가 stage 정보를 이용해서 그림을 그리는 느낌이다.당연히 stage 밑에는 하나 하나의 요소들이 Tree 형태로 붙어 있을 것이다. 코드로 표현하면 아래와 같은 구조를..
시작하기지난 포스팅에서 pixi.js에 대해서 간략하게 소개했다. 이번 포스팅에서는 pixi.js의 기본적인 사용법에 대해서 알아본다.본격적으로 시작하기 전에 라이센스 부분을 먼저 확인하고 들어가자. pixi.js는 MIT 라이센스로 배포된다. 자세한 내용은 여기를 확인하자. 요약하자면 상용으로 사용하더라도 소스코드 공개의 의무가 없다는 것이다. 자세한 건 링크를 살펴보자. 이미 언급했지만 pixi.js는 2D webGL renderr다. 만약 브라우저가 webGL를 지원하면 webGL로 화면을 그리고 webGL을 그리지 않으면 canvas로 화면을 그린다. 아래는 브라우저 별로 webGL 및 canvas 지원 버전이다. canvas : IE 9+, Chrome 11+webGL : IE 11+, Chro..
들어가기전에 HTML5 canvas로 개발 좀 해보려고 했는데 API 수준이 너무 low 레벨이다. 하나부터 열까지 지정해줘야한다. 이러면 개발 못하지. 혹시 관련된 자바스크립트 라이브러리가 있는지 찾아보기로 했다. 우선 네이버와 구글에서 한국어 위주로 찾아봤다. 생각보다 자료가 없다. 그래서 현재 존재하는 가장 인기 있는 canvas 라이브러리를 조사해보기로 했다. 어느 라이브러리가 가장 인기 있는 것인지 객관적으로 알기는 매우 힘들다. 이럴 경우 구글 검색결과가 선택의 중요 기준이 되기도 한다. 아래는 구글에서 'canvas library' 키워드로 검색했을 경우 표시되는 라이브러리의 순서이다. 하지만 이 결과를 그대로 받아들이면 안된다. 검색 연관성 때문에 별로 인기 없는 녀석이 검색이 되었거나 실..
