시작하기원래는 게임 관련 내용을 포스팅하려고 했는데 시기상조인 것 같다. 내용을 정리하다 보니 모르는 내용이 너무 많이 나올 것 같아서 조금 기초를 다지기로 했다. 오늘 포스팅 할 내용은 드래곤이 날라 다니는 예제다. 결과물을 확인하자. (링크) 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..
시작하기무엇에 쓰는 물건인고? 라즈베리파이 2를 구매했으나 활용법을 모르는 상황이다.물론 나 같은 경우는 임베디드 시스템을 구축하기 위해서 구매를 한 것이니 딱히 활용법을 고민하지 않아도 되지만 알아두는 것도 나쁘지 않을 것 같다. 재밌을 것 같기도 하고.일단 네이버를 먼저 살펴보고 구글링을 해본 다음, 내용이 미흡하면 영문 사이트들을 뒤져볼 예정이다.기본적으로 프로젝트를 진행하는 사람들을 살펴볼 예정이지만 중간 중간에 괜찮은 Tip을 찾게 되면 정리를 해 둘 예정이다. 시작해보자~ 아~ 추가로 아래와 같은 책도 발간된 것을 확인했다. 책으로 공부하는 것을 선호하는 사람은 책 구매도 나쁘지 않아 보인다. 시작하기 전에 간단한 동영상을 하나 보고 가자. 별로 길지 않다. 포터블 미니 컴퓨터델 노트북 전문가..
들어가기전에 HTML5 canvas로 개발 좀 해보려고 했는데 API 수준이 너무 low 레벨이다. 하나부터 열까지 지정해줘야한다. 이러면 개발 못하지. 혹시 관련된 자바스크립트 라이브러리가 있는지 찾아보기로 했다. 우선 네이버와 구글에서 한국어 위주로 찾아봤다. 생각보다 자료가 없다. 그래서 현재 존재하는 가장 인기 있는 canvas 라이브러리를 조사해보기로 했다. 어느 라이브러리가 가장 인기 있는 것인지 객관적으로 알기는 매우 힘들다. 이럴 경우 구글 검색결과가 선택의 중요 기준이 되기도 한다. 아래는 구글에서 'canvas library' 키워드로 검색했을 경우 표시되는 라이브러리의 순서이다. 하지만 이 결과를 그대로 받아들이면 안된다. 검색 연관성 때문에 별로 인기 없는 녀석이 검색이 되었거나 실..
들어가기전에Raspberry Pi 2 가 도착한 건 약 2주 전이다. 그런데 사는게 바빠서 이제야 관련 포스팅을 한다. 이 속도로 과연 전반기에 프로젝트를 마무리할 수 있을 것인가.Raspberry Pi 2의 패키지의 첫인상은 '굉장히 귀엽다' 였다. 나 같은 경우는 방열판까지 같이 구매를 했는데 엄청 큰 택배 박스를 개봉하니 조그만 Raspberry Pi 2 박스와 귀여운 방열판들을 볼 수 있었다. 귀여운 박스를 개봉하니 간단한 사용설명서와 포장된 Raspberry Pi 2를 볼 수 있었다. 예상했지만 조촐한 구성품이다. Raspberry Pi 2의 크기는 생각보다 크지 않았다. 박스 자체가 담배갑 정도의 크기였는데 Raspberry Pi 2는 그것 보다도 훨씬 날씬(?) 했다. 구매시에는 SD 카드를..
들어가기전에라즈베리파이를 구매하고 느낀건데 내가 알던 임베디드 보드와는 조금 다른 것 같다. 시리얼 케이블을 연결할수도 없고 외장 메모리 카드만을 이용해서 환경을 셋업해야 한다. 임베디드 보드 보다는 작은 PC에 가까운 느낌이다. 관련된 내용은 차차 다뤄보기로 하고 오늘은 Yocto 프로젝트에 대해서 간략히 살펴보자. 고백하자면 맨땅에 해딩하지는 않을 예정이다. 아래 책을 우선 살펴볼 예정이고 심화내용은 공식사이트나 구글링을 통해 얻어올 예정이다. 책을 얼핏 살펴봤는데 읽는데 오래 걸릴 것 같지 않고 쉽게 작성된 것 같았다. Yocto 프로젝트의 목적 및 제공해주는 기능은 다음과 같다.목적 : 사용자 맞춤 (임베디드) 리눅스 배포판을 쉽게 개발제공..
