HTML5 GAMES: Creating Fun with HTML5, CSS3, and WebGL by Jacob Seidelin c 2012 John Wiley and Sons, Ltd All rights reserved. Authorized translation from the English language edition published by John Wiley & Sons Limited. Responsibility for the accuracy of the translation resets solely with J-Pub Co and is not the responsibility of John Wiley & Sons Limited. No part of this book may be reproduced in any form without the written permission of the original copyright holder, John Wiley & Sons Limited. 이책의한국어판저작권은대니홍에이전시를통한저작권사와의독점계약으로제이펍에있습니다. 신저작권법에의하여한국내에서보호를받는저작물이므로무단전재와복제를금합니다. 초판 1 쇄발행 2012 년 8 월 22 일 지은이제이콥세이드린옮긴이장현희 펴낸이장성두 책임편집안주연 본문디자인초심디자인 표지디자인미디어픽스 주소경기도파주시문발동파주출판도시 530-1 뮤즈빌딩 403 호전화 070-8201-9010 팩스 02-6280-0405 홈페이지 www.jpub.kr 펴낸곳제이펍 출판신고 2009 년 11 월 10 일제 406-2009-000087 호 용지신승지류유통 인쇄한승문화 제본동호문화 ISBN 978-89-94506-53-1 (93560) 값 30,000 원 이책은저작권법에따라보호를받는저작물이므로무단전재와무단복제를금지하며, 이책내용의전부또는일부를이용하려면반드시저작권자와제이펍의서면동의를받아야합니다. 잘못된책은구입하신서점에서바꾸어드립니다. 제이펍은독자여러분의책에관한아이디어와원고투고를기다리고있습니다. 책으로펴내고자하는아이디어나원고가있으신분께서는책에대한간단한개요와차례, 구성과저 ( 역 ) 자약력등을메일로보내주세요. ( 보내실곳 : jeipub@gmail.com)
차례 옮긴이머리말 xiii 이책에대하여 xv Part Ⅰ_ HTML5 시작하기 1 제 1장웹에서의게임 3 HTML5 의역사 4 HTML5 를게임에활용하기 5 Canvas 요소 6 오디오 8 웹소켓 9 웹저장소 10 WebGL 12 HTML5 는플래시의킬러인가? 12 하위호환성에대한고려 13 특정기능이지원되는지확인하기 13 Modernizr 라이브러리의활용 14 polyfill을이용한브라우저의버전차이극복하기 15 게임제작하기 17 요약 18 제 2 장게임개발을위한첫걸음 19 게임의이해 20 블록맞바꾸기 20 세개의블록맞추기 21 게임레벨의증가 21
차례 v 게임스테이지정의하기 22 스플래시화면 22 주메뉴 22 게임플레이하기 23 최고점수목록 24 애플리케이션의뼈대구현하기 24 HTML 구성하기 26 스타일추가하기 27 스크립트로드하기 29 스플래시화면만들기 35 웹폰트사용하기 36 스플래시화면에스타일적용하기 38 요약 40 제 3 장모바일환경지원하기 41 모바일웹애플리케이션의개발 42 뛰어난이식성 43 모바일플랫폼의도전과제 44 모바일기기에서사용자의입력처리하기 44 키보드입력 45 마우스 vs. 터치 46 낮은화면해상도지원하기 47 유연한레이아웃구성하기 49 뷰포트제어하기 51 사용자의스케일변경을비활성화하기 53 서로다른뷰구현하기 54 주메뉴구현하기 54 화면모듈추가하기 56 CSS 미디어쿼리의활용 61 기기의방향알아내기 62 모바일용스타일시트추가하기 64 ios와안드로이드기기용애플리케이션개발하기 67 홈화면에웹애플리케이션노출하기 68 브라우저의특성비활성화하기 78
vi 차례 모바일웹애플리케이션디버깅 83 사파리디버거활성화하기 83 안드로이드로그에액세스하기 85 요약 86 Part Ⅱ_ 기본게임구현하기 87 제 4 장게임구현하기 89 게임보드모듈구현하기 90 게임상태초기화하기 91 게임보드채우기 95 게임규칙구현하기 98 블록교환에대한유효성검사 98 연결된보석블록탐지하기 101 격자다시채우기 108 블록교환하기 111 요약 114 제 5 장웹작업자스레드의활용 115 웹작업자다루기 116 작업자의제한사항 117 작업자가할수있는일들 118 웹작업자의활용 120 메시지전달하기 120 메시지수신하기 121 오류의처리 122 공유작업자 122 소수예제 124 게임에서웹작업자활용하기 128 작업자모듈구현하기 129
차례 vii 동일한인터페이스유지하기 131 요약 138 제 6 장 Canvas 를이용한그래픽의처리 139 웹에서의그래픽 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 장게임화면구현하기 189 게임파일미리로드하기 190 보석의크기알아내기 191 로딩스크립트수정하기 193 진행막대추가하기 199 배경꾸미기 202 게임화면구축하기 205 캔버스를이용해서게임보드그리기 207
viii 차례 CSS 와이미지로게임보드그리기 215 요약 223 제 8 장사용자와게임의상호작용 225 사용자의입력캡처하기 226 터치기기에서의마우스이벤트 226 가상키보드 227 터치이벤트 228 입력이벤트와캔버스 236 사용자입력모듈구현하기 238 입력이벤트처리하기 240 게임의동작구현하기 244 사용자의입력과게임기능연결하기 250 요약 259 제 9 장게임그래픽의애니메이션 261 게임의반응구현하기 262 애니메이션의타이밍 263 커서에애니메이션적용하기 269 게임의동작에애니메이션추가하기 271 점수와시간적용하기 283 UI 요소의추가 285 게임타이머의구현 290 점수계산하기 292 게임의종료 303 요약 307 Part Ⅲ_ 3D 와오디오의활용 309 제 10 장오디오의활용 311
차례 ix 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 그래픽 347 웹에서의 3D 348 WebGL 시작하기 349 WebGL 디버깅 350 도우미모듈구현하기 351 셰이더 352 변수와데이터타입 352 WebGL 셰이더의활용 358 균일변수 365 변수의변화 367 3D 객체렌더링하기 368 버텍스버퍼의활용 369 인덱스버퍼의활용 370 모델, 뷰및프로젝션활용하기 372
x 차례 렌더링 376 Collada 모델로드하기 381 텍스처와광원의활용 384 광원추가하기 384 픽셀단위조명적용하기 388 텍스처생성하기 392 WebGL 디스플레이모듈구현하기 398 WebGL 파일로드하기 399 WebGL 설정하기 401 보석블록렌더링하기 405 보석블록의애니메이션 411 요약 416 Part Ⅳ_ 로컬저장소와멀티플레이어게임 417 제 12 장로컬저장소와캐싱 419 웹저장소에데이터저장하기 420 저장소인터페이스의활용 421 저장소모듈구현하기 425 게임에영속적인상태부여하기 428 게임의종료 428 게임일시중지하기 431 게임데이터저장하기 433 최고점수목록구현하기 437 최고점수화면만들기 437 최고점수데이터저장하기 441 최고점수데이터표시하기 442 애플리케이션캐시 444 캐시매니페스트 445 요약 449
차례 xi 제 13 장웹소켓의활용 451 웹소켓의활용 452 서버에연결하기 453 웹소켓을이용한통신 456 노드를이용한서버측프로그래밍 458 노드설치하기 459 노드로 HTTP 서버구현하기 462 웹소켓을이용한채팅방구현하기 464 요약 473 제 14 장리소스 475 미들웨어의활용 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 레퍼런스 499 Canvas 요소 500 2D 컨텍스트 API 501
xii 차례 상태관리 501 변형 502 도형과패스 503 채우기와테두리 505 그림자효과 507 이미지 507 텍스트 508 합성 508 픽셀조작 510 접근성 511 부록 B WebGL 레퍼런스 513 WebGL API 레퍼런스 514 데이터타입 515 형식화된배열 516 버퍼 516 셰이더 518 프로그램객체 519 균일변수 520 버텍스특성 521 그리기 523 텍스처 524 블렌딩 527 스텐실버퍼 528 깊이버퍼 529 렌더링버퍼 530 프레임버퍼 531 기타함수들 533 매개변수 535 부록 C OpenGL ES 셰이딩언어 541 GLSL ES 언어레퍼런스 542 데이터타입 542 내장함수들 543 찾아보기 553
옮긴이머리말 1999년역자가처음웹개발의세계에뛰어들기로결심했을때, 그결심의배경에는웹이가지고있는개방성과단순함이뒷받침되어있었다. HTML이라는손쉬운마크업언어를이용한페이지뷰의구현과당시에는비교적학습이쉬웠던 ASP나 PHP 등의서버측스크립트언어의조합을통해대화형애플리케이션을구현하고, 이를인터넷이라는공간을통해손쉽게배포하여누구나원할때사용할수있다는사실이역자를웹개발자의길로안내했던것이다. 물론당시의 HTML이라는것이앞서이야기했듯이너무나도간결하여전통적인엔터프라이즈애플리케이션을대체하기는많은무리가있었다. 그러나역자는웹애플리케이션의발전에추호의의심도하지않았었으며, 결국자바스크립트를이용하여웹페이지를동적으로재구성할수있는, 이른바 DHTML(Dynamic HTML) 의등장으로인해웹은정보를손쉽게보여주고자하는본연의목적에새로운애플리케이션환경의제공이라는가능성이추가되면서빠른속도로확산되어왔다. 그럼에도여전히 HTML은많은제약을가지고있었다. 이러한제약을극복하고자하는노력들이 ActiveX나어도비의플래시, 마이크로소프트의실버라이트와같은플러그인형태로나타나기도했었으며, 그중플래시는 ios와같은인기있는모바일플랫폼에서더이상지원을받지못하는수모를겪고있음에도불구하고여전히웹에서는폭넓게활용되고있기도하다. 하지만문제의올바른해결법은그문제의본질을파악하고이를해결하는것이라고본다. W3C에서 HTML이가진한계를 HTML의개선을통해해결하기로결정한것은역자의시각으로는너무나현명한선택이아닐수없다. 지금까지널리사용되던 HTML/XHTML4 의뒤를이어 HTML5로업그레이드된 HTML은역자가처음웹개발을시작하던때와비교해보면눈부신발전을이루고있다. HTML5의명세를보고있노라면, HTML5 명세가완성되고이를모든브라우저가완벽히지원하는그날이하루빨리다가오기를기다리는마음이절로생겨난다.
xiv 옮긴이머리말 이책은 HTML5의새로운기능들을웹기반게임개발을통해소개하고있다. 아마도이책의필자는 HTML5가기존의엔터프라이즈웹애플리케이션분야뿐만아니라 B2C (Business to Customer) 서비스분야, 그리고지금까지불가능할것으로여겼던엔터테인먼트애플리케이션분야까지섭렵할수있는가능성을보여주고싶었을것이며, 실제로이책의게임예제를통해이를증명해보이고있다. 책의전체구성이하나의게임애플리케이션을완성하는일련의단계로구성되어있기에 HTML5의상세명세나새로추가된태그나특성들을일일이소개하고있지는않다. 그러나 HTML5를언급할때항상따라다니는오디오나비디오지원을비롯하여웹소켓, 웹작업자, 로컬저장소, WebGL 등굵직굵직한기능들에대한완벽한사용예제를보여줌으로써어느분야에서든이러한기능들을활용할수있는실용적인경험을학습하기를원하는독자들에게는안성맞춤이라할수있다. 이책을통해 HTML5가추구하는개방형웹표준환경이하루빨리국내에자리잡을수있기를기대하며, HTML5에많은기대를걸고있는독자여러분에게역자의부족한번역실력이작은도움이될수있기를바란다. 끝으로좋은책을번역할기회를주신제이펍의장성두실장님께감사드리며, 주말내내번역에매달려있는아빠를이해해주고잘따라주는딸예린이와아들은혁이, 그리고자기하고싶은일만하려고하는철없는남편을넓은마음으로이해하고묵묵히지원을아끼지않는아내에게지면을빌어깊은사랑과감사의인사를드린다. 2012년 8월옮긴이 _ 장현희
이책에대하여 그런데이모든것은 HTML5로구현되었습니다! 애플성공신화의주역이었던스티브잡스가아이폰용 ios 4에추가된새로운 HTML5 기반의광고시스템을청중에게소개하는자리에서이같이외치자환호와갈채가이어졌다. 개방형이며표준에기반을둔웹기술을바탕으로한최근의개발환경은웹의빠른진보를이끌고있으며, 애플이모든 ios 기기에서플래시를차단하고 HTML5를포용하는정책을채택한것은이러한움직임에대한또다른반증이었다. 비록애플의 HTML5 사랑은비즈니스적인면이개입했지만, 개방형웹은여전히발전하고있으며하루가다르게재미있는일들이쏟아지고있어웹과게임개발자들을즐겁게하고있다. 그러나웹과게임개발분야가항상즐겁기만한것은아니다. 브라우저에서동작하는게임을개발하는것은매우힘든경험이며, 전통적으로기능이풍부한플러그인기반개발방식과 HTML 및자바스크립트를기반으로힘들게게임을개발하는보다저수준의개발방식중한가지를선택해야만했다. 그러나일부표준이라는것들이동의하기어렵거나혹은완전히잘못구현되어있어획일적이고예측가능한수준의환경을만들어냈으며, 따라서게임개발에는플래시가더선호의대상이었다. 플래시같은플러그인을사용하면게임개발자와디자이너는동적그래픽, 사운드, 심지어 3D와같은고급게임개발에적합한프레임워크를사용할수있었지만, 그렇게함으로써주변의기술들과게임사이의연결고리를확보하지못했다. 플래시, 자바및실버라이트와같은기술들은페이지와통신이가능하기는하지만여전히별개의객체이며, 페이지를구성하는다른콘텐츠와의융화에도제한이있다. 반면에 HTML, 자바스크립트및 CSS 본질적으로웹을위한기술들 를이용하여게임을개발한다는것은게임자체가웹페이지에본질적으로잘어울린다는것을의미하지만, 적절한요소와 API의부족이라는또다른장벽이존재했다. 1990년대중반에완성된첫번째버전의 HTML 표준은리치인터넷애플리케이션을염두에둔것이었는지의심스러울수준이었으며, HTML의문서중심적본질은 HTML이애플리케이션이나게임개발이아니라
xvi 이책에대하여 텍스트와이미지로구성된문서의제작에적합하다는것을의미한다. 비록웹페이지에자바스크립트와 DOM(Document Object Model) 모델이추가되면서조금씩이나마인터렉티브하게변해왔지만, 그래픽은여전히정적인이미지와스타일이적용된 HTML 요소로제한되어있으며, 오디오는제공되지않는다. 최근에 HTML5 명세와 CSS3 및기타표준들이실제애플리케이션에도입되면서개발자들은전통적인페이지기반웹사이트가아닌데스크톱애플리케이션에가까운경험을제공할수있게되었다. 본질적으로이러한개발방식은웹게임에도적용되며, 최근의발전은게임및기타엔터테인먼트애플리케이션에완벽하게어울린다. 누구를위한책인가 HTML, 자바스크립트및 CSS는더이상웹사이트의구현에만사용하는기술이아니다. 웹앱 (Web App) 은데스크톱위젯처럼웹을통해배포되며, 모바일기기와다른여러곳에서도활용된다. 이런환경들을대상으로게임을개발하는것에흥미가있거나이미보유한웹개발기술을향상시키고자한다면이책은여러분을위한것이다. 아마도여러분은웹개발에대해잘알고있을것이며, HTML, CSS 및자바스크립트에대한사용경험이있을것이다. 이책은 HTML5에대한일반적인가이드를제공하는책이아니다. 그리고웹사이트를개발하는방법을가르쳐주지도않는다. 이책은여러분이전통적인 HTML에대한기본적인경험이있으며새로운요소와 API에대해한번쯤은들어봤다는것을가정한다. HTML5의모든것을소개하고있지는않지만제외된내용들은단지게임과관련이없기때문이다. 여러분이전문개발자가아니어도무방하지만자바스크립트에대한경험이있는편이좋다. 이책에서는 HTML5와함께소개된자바스크립트 API도소개하지만여러분이언어자체에대해서는잘이해하고있어야한다. 또한이책은게임디자인에대한책도아니다. 이책이제공하는내용보다더욱깊이있는내용을제공하는훌륭한게임개발서적은얼마든지있다. 인공지능, 물리시뮬레이션및고급그래픽프로그래밍에대한상세한내용을전달하기보다는 HTML5와웹개발에대한내용을조금더마련했다. 이책은게임개발경험을요구하지않으며, 여러분이수학자이거나뛰어난예술가일필요도없다. 이책은게임개발이론의기초적인것들만언급하며, 중요한수학적내용이나프로그래밍컨셉은필요한시점에명료하게설명한다. 게임과웹
이책에대하여 xvii 개발에관심이있다면고등학교수준의수학실력과막대기처럼생긴사람을그릴수있는정도의그림실력만있으면된다. 이책에서다루는내용 이책은여러분의웹개발기술을향상시키고이를게임개발에접목하기위한책이다. 여러분이게임개발분야로진출하고자하는웹개발자이든, 새로운개방형웹표준에관심을가진플래시게임개발자이든, 아니면완전히다른목적을가졌든간에이책을통해서전통적인웹과게임개발사이의격차를줄이기위해여러분이이미알고있는여러도구를활용하는방법을배울수있을것이다. 이책을읽는동안여러분은브라우저는물론 ios와안드로이드기기에서도동작하는완전한웹게임을처음부터끝까지개발하게된다. 캔버스나오디오같은새로운요소들을활용하여플러그인이나보기흉한핵 (Hack) 에의존하지않고도웹에자연스럽게어울릴수있는게임을구현할수있다. 또한웹소켓과 Node.js를이용한멀티플레이어기능을구현하는방법, 게임데이터를클라이언트의웹저장소에저장하는방법, 캔버스를이용하여픽셀수준으로그래픽을제어하는방법등을배울수있다. 또한터치입력을통해게임을모바일기기로손쉽게이식하는방법도배우게될것이다. 게다가새로운애플리케이션캐시를이용하여애플리케이션이오프라인모드에서도동작하게만드는방법도보게될것이다. 마지막으로, 이책은완성된게임을배포하고공급하는여러가지옵션을소개한다. 이책을마무리하면학습한내용을여러분의프로젝트에도입하거나오늘날의개방형웹기술을완벽하게활용한멋진웹게임을개발할수있다. 이책을통해보게될코드는이책의홍보용웹사이트 (http://www.wiley.com/go/html5games. com) 에서다운로드할수있다. 이사이트에서는예제게임의전체소스코드뿐아니라각장에서소개하는여러가지작은독립예제의소스코드들도다운로드할수있다. 각장이름으로된폴더에는각장의마무리시점까지완성된게임예제들이포함되어있다. 게임과관련이없는예제들은 example이라는이름의하위폴더에서찾을수있다. 이책을읽으면서게임을따라구현해보기를권하지만, 단지예제코드를살펴보는것을선호한다면그렇게해도무방하다. 어떤경우이든재미있게즐기기를바란다. 그럼이제시작해보자!