새로운 웹 표준을 이용해 환상적인 게임을 구현해보자.
“모든 브라우저와 모바일 기기에서 동작하는 환상적인 2D 및 3D 멀티플레이어 게임 구현법을 소개합니다!



“그런데 이 모든 것은 HTML5로 구현되었습니다!\"

_ 故 스티브 잡스



이 책은 이미 알고 있는 도구들을 이용해서 웹과 모바일 기기를 위한 멋진 게임을 개발하려는 웹 개발자나 새로운 웹 표준 기술의 장점을 활용하려는 플래시 개발자 모두에게 적합한 책이다. 이 책은 HTML5에서 활용할 수 있는 모든 새로운 기능들을 소개하며, 이 기능들에 CSS3, WebGL 및 자바스크립트를 조합하여 호환되는 모든 브라우저와 모바일 기기에서 동작하는 환상적인 2D 및 3D 멀티플레이어 게임 구현법을 제시한다.



저자인 제이콥 세이드린은 직접 게임을 구현할 수 있는 게임 프레임워크의 구현부터 안내하고 있다. 그리고서 여러분의 첫 번째 웨비상 수상작이 될 수 있을 법한 게임의 코드 첫 줄에서부터 시작하여 전체 개발 과정을 단계별로 설명한다. 이 책을 통해서 플러그인이나 보기 흉한 핵(Hack)에 의존하지 않고도 웹 환경에 자연스럽게 융화된 게임에 필요한 모든 것을 빠르게 학습할 수 있을 것이다. 이 책에는 다음과 같은 내용이 포함된다.



* 캔버스를 이용한 그리기

* 픽셀 수준에서 그래픽 조작하기

* HTML5 오디오를 이용한 현실감 있는 사운드 제작

* WebGL을 이용한 놀라운 2D 및 3D 그래픽 구현

* 플레이어의 입력 캡처하기

* 웹 소켓과 Node.js를 이용한 멀티플레이어 게임 구현

* 웹 저장소를 통한 클라이언트 측 게임 데이터의 저장

* 터치 입력을 이용한 모바일 기기 지원

* 새로운 애플리케이션 캐시를 이용한 오프라인 모드를 지원하는 게임 구현

* 완성된 게임의 배포 및 공급



새로운 세대의 표준 웹 기술은 전통적인 웹사이트와 무한한 가능성을 간직한 온라인 게임 사이의 괴리감을 해결한다. 이 책을 통해 웹 브라우저와 아이폰, 아이패드 및 안드로이드 등 대부분의 모바일 기기에서 언제든지 즐길 수 있는 놀라운 게임의 구현 방법을 터득할 수 있을 것이다.

Part Ⅰ_ HTML5 시작하기
제1장 웹에서의 게임
HTML5의 역사 4
HTML5를 게임에 활용하기 5
Canvas 요소 6
오디오 8
웹 소켓 9
웹 저장소 10
WebGL 12
HTML5는 플래시의 킬러인가? 12
하위 호환성에 대한 고려 13
특정 기능이 지원되는지 확인하기 13
Modernizr 라이브러리의 활용 14
polyfill을 이용한 브라우저의 버전 차이 극복하기 15
게임 제작하기 17
요약 18

제2장 게임 개발을 위한 첫걸음
게임의 이해 20
블록 맞바꾸기 20
세 개의 블록 맞추기 21
게임 레벨의 증가 21
게임 스테이지 정의하기 22
스플래시 화면 22
주 메뉴 22
게임 플레이하기 23
최고 점수 목록 24
애플리케이션의 뼈대 구현하기 24
HTML 구성하기 26
스타일 추가하기 27
스크립트 로드하기 29
스플래시 화면 만들기 35
웹 폰트 사용하기 36
스플래시 화면에 스타일 적용하기 38
요약 40

제3장 모바일 환경 지원하기
모바일 웹 애플리케이션의 개발 42
뛰어난 이식성 43
모바일 플랫폼의 도전 과제 44
모바일 기기에서 사용자의 입력 처리하기 44
키보드 입력 45
마우스 vs. 터치 46
낮은 화면 해상도 지원하기 47
유연한 레이아웃 구성하기 49
뷰 포트 제어하기 51
사용자의 스케일 변경을 비활성화하기 53
서로 다른 뷰 구현하기 54
주 메뉴 구현하기 54
화면 모듈 추가하기 56
CSS 미디어 쿼리의 활용 61
기기의 방향 알아내기 62
모바일용 스타일 시트 추가하기 64
iOS와 안드로이드 기기용 애플리케이션 개발하기 67
홈 화면에 웹 애플리케이션 노출하기 68
브라우저의 특성 비활성화하기 78
모바일 웹 애플리케이션 디버깅 83
사파리 디버거 활성화하기 83
안드로이드 로그에 액세스하기 85
요약 86

Part Ⅱ_ 기본 게임 구현하기
제4장 게임 구현하기
게임 보드 모듈 구현하기 90
게임 상태 초기화하기 91
게임 보드 채우기 95
게임 규칙 구현하기 98
블록 교환에 대한 유효성 검사 98
연결된 보석 블록 탐지하기 101
격자 다시 채우기 108
블록 교환하기 111
요약 114

제5장 웹 작업자 스레드의 활용
웹 작업자 다루기 116
작업자의 제한사항 117
작업자가 할 수 있는 일들 118
웹 작업자의 활용 120
메시지 전달하기 120
메시지 수신하기 121
오류의 처리 122
공유 작업자 122
소수 예제 124
게임에서 웹 작업자 활용하기 128
작업자 모듈 구현하기 129
동일한 인터페이스 유지하기 131
요약 138

제6장 Canvas를 이용한 그래픽의 처리
웹에서의 그래픽 140
비트맵 이미지 140
SVG 그래픽 141
Canvas 141
Canvas의 적절한 활용 142
Canvas를 이용한 그리기 143
도형과 패스 그리기 144
고급 채우기 및 테두리 스타일의 활용 156
변형 기법의 활용 161
텍스트, 이미지 및 그림자 추가하기 163
상태 스택의 관리 169
HTML5 로고 그리기 170
그래픽 조합하기 177
이미지 데이터에 액세스하기 180
픽셀 값 조회하기 180
픽셀 값 수정하기 181
이미지 파일 데이터 내보내기 182
보안에 따른 제약 183
픽셀 기반 효과 적용하기 184
요약 186

제7장 게임 화면 구현하기
게임 파일 미리 로드하기 190
보석의 크기 알아내기 191
로딩 스크립트 수정하기 193
진행 막대 추가하기 199
배경 꾸미기 202
게임 화면 구축하기 205
캔버스를 이용해서 게임 보드 그리기 207
CSS와 이미지로 게임 보드 그리기 215
요약 223

제8장 사용자와 게임의 상호작용
사용자의 입력 캡처하기 226
터치 기기에서의 마우스 이벤트 226
가상 키보드 227
터치 이벤트 228
입력 이벤트와 캔버스 236
사용자 입력 모듈 구현하기 238
입력 이벤트 처리하기 240
게임의 동작 구현하기 244
사용자의 입력과 게임 기능 연결하기 250
요약 259

제9장 게임 그래픽의 애니메이션
게임의 반응 구현하기 262
애니메이션의 타이밍 263
커서에 애니메이션 적용하기 269
게임의 동작에 애니메이션 추가하기 271
점수와 시간 적용하기 283
UI 요소의 추가 285
게임 타이머의 구현 290
점수 계산하기 292
게임의 종료 303
요약 307

Part Ⅲ _ 3D와 오디오의 활용
제10장 오디오의 활용
HTML5 오디오 312
오디오의 지원 가능 여부 확인하기 313
오디오 포맷에 대한 이해 314
사운드 효과 탐색하기 317
audio 요소의 활용 317
재생 제어하기 321
모바일 기기에서 오디오의 활용 326
오디오 데이터의 활용 327
모질라의 오디오 데이터 API 활용하기 328
오디오 데이터 API 예제 330
오디오 모듈 구현하기 337
오디오 재생 준비하기 337
사운드 효과 재생하기 339
재생 중지하기 341
정리하기 342
게임에 사운드 효과 추가하기 343
게임 화면에서 오디오 재생하기 344
요약 345

제11장 WebGL을 이용한 3D 그래픽
웹에서의 3D 348
WebGL 시작하기 349
WebGL 디버깅 350
도우미 모듈 구현하기 351
셰이더 352
변수와 데이터 타입 352
WebGL 셰이더의 활용 358
균일 변수 365
변수의 변화 367
3D 객체 렌더링하기 368
버텍스 버퍼의 활용 369
인덱스 버퍼의 활용 370
모델, 뷰 및 프로젝션 활용하기 372
렌더링 376
Collada 모델 로드하기 381
텍스처와 광원의 활용 384
광원 추가하기 384
픽셀 단위 조명 적용하기 388
텍스처 생성하기 392
WebGL 디스플레이 모듈 구현하기 398
WebGL 파일 로드하기 399
WebGL 설정하기 401
보석 블록 렌더링하기 405
보석 블록의 애니메이션 411
요약 416

Part Ⅳ _ 로컬 저장소와 멀티플레이어 게임
제12장 로컬 저장소와 캐싱
웹 저장소에 데이터 저장하기 420
저장소 인터페이스의 활용 421
저장소 모듈 구현하기 425
게임에 영속적인 상태 부여하기 428
게임의 종료 428
게임 일시 중지하기 431
게임 데이터 저장하기 433
최고 점수 목록 구현하기 437
최고 점수 화면 만들기 437
최고 점수 데이터 저장하기 441
최고 점수 데이터 표시하기 442
애플리케이션 캐시 444
캐시 매니페스트 445
요약 449

제13장 웹 소켓의 활용
웹 소켓의 활용 452
서버에 연결하기 453
웹 소켓을 이용한 통신 456
노드를 이용한 서버 측 프로그래밍 458
노드 설치하기 459
노드로 HTTP 서버 구현하기 462
웹 소켓을 이용한 채팅방 구현하기 464
요약 473

제14장 리소스
미들웨어의 활용 476
Box2D 476
Impact 479
Three.js 481
모바일 기기에 배포하기 483
폰갭 483
앱셀러레이터 티타늄 488
게임 배포하기 490
크롬 웹 스토어 490
Zeewe 491
안드로이드 마켓 492
앱스토어 493
온라인 서비스의 활용 494
TapJS 494
Playtomic 495
JoyentCloud Node 496
요약 497

부록 A 캔버스 API 레퍼런스
Canvas 요소 500
2D 컨텍스트 API 501
상태 관리 501
변형 502
도형과 패스 503
채우기와 테두리 505
그림자 효과 507
이미지 507
텍스트 508
합성 508
픽셀 조작 510
접근성 511

부록 B WebGL 레퍼런스
WebGL API 레퍼런스 514
데이터 타입 515
형식화된 배열 516
버퍼 516
셰이더 518
프로그램 객체 519
균일 변수 520
버텍스 특성 521
그리기 523
텍스처 524
블렌딩 527
스텐실 버퍼 528
깊이 버퍼 529
렌더링 버퍼 530
프레임 버퍼 531
기타 함수들 533
매개변수 535

부록 C OpenGL ES 셰이딩 언어
GLSL ES 언어 레퍼런스 542
데이터 타입 542
내장 함수들 543

찾아보기