[Web] HTML5 canvas 제어 (pixi.js) - part1

시작하기

지난 포스팅에서 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+, Chrome 11+

크롬에서는 pixi.js가 동작하는 환경이면 항상 webGL이 동작한다는 의미이고 IE에서는 9버전 이후부터 pixi.js를 사용할 수 있으나 9, 10버전에서는 canvas로 동작하고 11버전부터 webGL로 동작한다고 보면 된다.

자~ 대략적인 이야기를 마쳤으니 이제 환경 셋업을 해보자.

Pixi.js 다운로드

일단 pixi.js를 다운 받자. 우선 홈페이지로 이동한다. (링크)

우측 상단에 보면 [Fork me on GitHub]라는 버튼이 있다. 누르면 git hub 저장소로 이동한다.

빨간색으로 표시된 위치를 보면 세 가지 다운로드 옵션이 있는 것을 알 수 있는데 본인이 가장 마음에 드는 걸로 선택한다. 나는 git을 사용해서 다운 받았다. (D:\IDE\web\pixi.js)

이클립스 프로젝트화

CDN 등으로 바로 include를 하지 않고 소스코드를 다운 받는 이유는 예제들을 확인하기 위해서 이다. 소스코드는 본인이 원하는 IDE나 편집툴을 사용하면 된다. 여기서는 이클립스를 이용하겠다. 이클립스에 대한 내용은 이전 포스팅(링크)를 확인하기 바란다.

다운 받은 소스코드 내에 많은 예제가 존재하고 있는 것을 확인할 수 있다. 이클립스를 통해서 import를 하면 다음과 같다. 여기서는 JavaScript Project를 선택해서 import를 했다.

프로젝트 명을 입력한다. (pixi.js) 그리고 다운 받은 소스 코드의 위치를 지정한 다음, Finish를 클릭한다.

프로젝트가 정상적으로 import되긴 했는데 에러가 발생한 것을 볼 수 있다. 일단 무시하자. 우리는 pixi.js를 개발할 것이 아니고 이용할 것이기 때문에 pixi.js 내의 에러 정도는 무시할 수 있다.

사실 이런 문제는 설정의 문제일 가능성이 크기 때문에 가볍게 무시해주는 것이 정신 건강에 좋다. 자~ 이제 예제를 실행해보자. 그전에 중요한 부분을 체크하고 넘어간다.

기본적으로 로컬 파일에 대한 접근은 크롬 브라우저에서 보안상 제한되어 있다. 약간의 설정이 필요하다.

크롬 브라우저 보안설정 해제

크롬 브라우저를 실행할 때 다음 옵션을 추가해주면 쉽게 보안설정을 해제할 수 있다.

--allow-file-access-from-files

방법은 간단한데 바탕화면에 있는 크롬 브라우저 아이콘을 마우스 우클릭한 다음 [설정]으로 진입하면 아래 화면을 만나게 된다.

거기서 [대상] 의 뒷 부분에 위의 키워드를 추가해주면 된다. 그리고 크롬 브라우저를 모두 종료 시키고 재실행하면 된다.

‘모두 종료’ 라는 표현이 중요하다. 사실 크롬 브라우저는 백그라운드로 구동 중인 서비스를 많이 보유하고 있기 때문에 이들을 하나하나 다 죽여줘야 한다.

예제 실행

캡쳐 화면을 좀 이해하기 힘든데 화살표 오른쪽은 이클립스고 왼쪽은 보안 해제된 크롬 브라우저이다. 각 예제 디렉토리에 있는 html 파일을 드래그&드랍으로 실행시키고 있는 상황이다. 이제 기본적인 환경은 셋업이 된 듯 하다. 본격적인 학습에 들어가 보자.

2015.04.12