도플광어의 html5 게임엔진 만들기 1편. 웹은 게임기이다.

들어가며...

유니티 엔진의 코루틴 강좌를 마치고 잠시 강좌를 쉬었습니다. 

이번 ndc13 에서 발표한 pig2d 엔진에 대해서 강좌를 통해서 좀더 자세히 내용을 풀어보려고합니다.

pig2d 학생들 교육을 위해서 개인적으로 만든 2D엔진이며 html5전용으로 개발하였습니다.

깃허브에 소스를 공개했으며 학교에서 하는 프로잭트와 함께 계속 진행할예정입니다.

https://github.com/gbox3d/pig2d

강연에서 다루지 못한 이야기들을 강좌를 진행하면서 상세하게 다뤄 보도록하겠습니다.

(ndc13 강연자료는 개인적으로 따로 배포할계획은 없습니다. 강좌로 대신할 예정입니다.)

이후에는 반응을 봐서 three.js 기반으로 한 하이브리드 방식의 3D 엔진개발에 대한 이야기도 풀어 보도록 하겠습니다.

강좌 순서

html5 2d 엔진(Pig2d)

1편. web 은 게임기이다.

2편. 웹킷과 css

3편. css 하이브리드엔진 개발

4편. 씬관리자 만들기 

5편. 효과적인 애니메이션 구현

6편. 캔버스를 스마트하게 활용해봅시다.

7편. kinectics.js

8편. 웹기반의 클라우드 스프라이트툴 만들어봅시다.

9편. pig2d 기반 웹게임개발 프레임웍

html5 3d 엔진(Lamb3d)

1편. three.js 의 css 랜더러 

2편. css로 모델,뷰,프로잭션 변환

3편. 조명 따라잡기

4편. SVG 를 응용한 하이브리드 모델링

5편. css 이용한 하이브리드 3d 애니메이션

6편. loud of lamb 프레임웍 분석

강좌순서나 제목은 사정에 따라 수정될수있습니다.

1. 티스토리를 게임기로?!

일단 블로그에 아래처럼 이미지를 올렸습니다.

이것을 가져다가 동적으로 사용할수있을까요?

먼저 실제로 이파일의 온라인상의 경로를 얻어보도록 하겠습니다.

위의 'getfile' 버튼을 클릭하면 바로 아래에 파일의 경로가 나오시나요?

html문서트리에 동적으로 접근하여 정보를 얻어낸것입니다. 우리가 일반적으로 생각하는 정적인 웹이 아니 동적이 웹인것입니다.

블로그에 글을쓰는것과 복잡한 프로그래밍 언어로 게임 코딩하는것이 별차이가 없는 일이 될날도 멀지않았을수도 있고 이미 벌써 그럴수도 있다는 것을 의미합니다.

2. div 를 보는 새로운 시각

위의 빨간색 사각형모양은 아래와 같이 div에 스타일을 적용해서 사각형을 출력한것입니다.

<div style="

            width: 32px;

            height:  48px;

background-color : red;

"></div>

사실 빨간색 글박스 지나지 않는다고 그냥 무시해버릴수도있을것입니다. 

과연 그럴까요?

3. 초간단 게임개발 환경

화면 하단에 보이는 div를 이용해서 만든 작은 박스를 주목해주십시오. 이 div 객체의 아이디값은 test_sprite입니다.

  $('#test_sprite').css('background-image',getFigjterImg());

run code 버튼으로 텍스트 편집창의 자바스크립트코드를 실행을 할 수 있습니다

버튼을 눌러 실행을 하면 이미지가 박스안에 나오것을 확인 하실수있을겁니다.

그리고 간단하게 스프라이트를 움직여도 볼수있습니다.

아래코드를 편집창에 붙여넣기 하시고 run버튼을으로 실행시켜 보세요.

$('#test_sprite').css('-webkit-transform','translate(200px,0px)');

파폭에서는

$('#test_sprite').css('-moz-transform','translate(200px,0px)'); 

translate 에 인자로 들어가는것은 2D 좌표계입니다.

위의 내용은 모두 html 편집모드로 글을 쓴것입니다.(글을 쓴다는것과 코딩한다는거의 경계가 좀 애매해지죠)

티스토리 블로그는 script 태그를 사용할수있어서 자신이 만든 라이브러리 뿐만 아니라 jquery 같은 것들도 사용할 수 있습니다.

4. 결론

정말 간단하게 스크립트 코드 편집창과 미리보기 화면이 갖추어진 게임개발 프레임웍을 구성해 보았습니다.

그것도 따로 호스팅같은 번거로운 절차없이 그냥 티스토리 블로그 글안에서 말이죠.(다른 서비스 전혀 사용하지 않았음)

뿐만 아니라 이 개발 환경은 아이페드같은 스마트기기에서도 사용할수 있습니다.

지금부터 여러분들의 사고가...

웹을 단순한 인터넷어플리케이션 서비스라는 편견을 깨고 가상의 게임기로 보이기 시작하시는지 모르겠네요. ^^;

그렇게 새로운 시야가 생기셨다면 html5의 세계로 들어 오는 입구를 찾으신겁니다.

콘솔은 끝났다. 이런 말을 하시는 분들도 계셨건거 같은데...

제가 차세대 게임기는 엑박도 피에스도 아닌 web이라고 생각 한다면 .... ^^;