\"플러그인 없이도 웹에 화려한 그림을 수놓는다.\"



캔버스의 등장으로 웹 애플리케이션은 더 이상 플러그인, 플랫폼, 개발 툴에 의존하지 않아도 된다. HTML5의 새 기능, 캔버스는 웹을 도화지 삼아 2D와 3D 그림을 그리고 비디오와 오디오를 넣어 제어할 수 있게 했으며 애니메이션을 제작할 수 있게 했다. 아울러 그래픽이 가미된 대화형 사용자 인터페이스 제작도 가능해졌다.

C, C++, C#, 자바 등으로 개발해봤다면 부담 없이 이 책으로 웹 개발을 익힐 수 있다. 그리고 HTML과 자바스크립트로 웹을 개발해봤다면 부담 없이 이 책으로 신기술을 배울 수 있을 것이다. 또 플래시 개발자라면 자바스크립트가 액션스크립트 1과 비슷하다는 점을 생각하며 책을 읽으면 쉽게 캔버스와 자바스크립트를 익힐 것이다.

징가(Zynga) 게임 개발자의 도움을 받아 캔버스를 완벽히 자신의 것으로 만들어보자.




어떤 독자를 위한 책인가?

- 2D, 3D 등을 웹 애플리케이션에 접목하려는 개발자

- HTML5로 애니메이션을 만들려는 개발자

- HTML5의 그래픽을 학습하고자 하는 개발자 및 학생

옮긴이의 글
지은이의 글
감사의 글

CHAPTER 01 HTML5 캔버스 소개
01-1 기본적인 HTML 페이지
__1. 「!doctype html」
__2. 「html lang\u003d \"ko\" 」
__3. 「meta charset\u003d \"UTF-8\" 」
__4. 「title」 . . . 「 / title」
__5. 간단한 HTML5 페이지
01-2 이 책에서 사용하는 기본적인 HTML
__1. 「div」
__2. 「canvas」
01-3 DOM과 캔버스
01-4 자바스크립트와 캔버스
__1. 자바스크립트 프레임워크와 라이브러리
__2. 자바스크립트를 넣는 위치
01-5 HTML5 캔버스로 만드는 \"Hello World!\"
__1. 캔버스를 위한 자바스크립트 코드 캡슐화하기
__2. HTML 페이지에 캔버스 넣기
__3. 브라우저가 캔버스를 지원하는지 알아보기
__4. 2D 컨텍스트 구하기
__5. drawScreen( ) 함수
01-6 Console.log로 디버깅하기
01-7 2D 컨텍스트와 현재 상태 정보
01-8 HTML5 캔버스 객체
01-9 또 다른 예제: Guess The Letter
__1. 게임의 작동 원리
__2. \"Guess The Letter\" 게임의 변수
__3. initGame( ) 함수
__4. eventKeyPressed( ) 함수
__5. drawScreen( ) 함수
__6. 캔버스에서 이미지로 바꾸기
__7. 완성된 게임 코드
01-10 다음 내용 소개

CHAPTER 02 캔버스에 그리기
02-1 기본 파일 형태
02-2 기본 사각형 그리기
02-3 캔버스 상태 정보
__1. 상태 정보에 없는 정보
__2. 상태 정보의 저장과 복구
02-4 패스를 이용해서 선 그리기
__1. 패스의 시작과 끝
__2. 실제로 그리기
__3. 더 복잡한 선 그리기 예제
02-5 고급 패스 메서드
__1. 원호 그리기
__2. 베지어 곡선 그리기
__3. 캔버스 영역 선택
02-6 겹치기 효과
02-7 간단한 캔버스 변환
__1. 회전과 이동
__2. 스케일 변환
__3. 스케일과 회전 변환 조합하기
02-8 색상과 그레이디언트 넣기
__1. 채우기 색상 설정
__2. 그레이디언트로 채우기
02-9 도형에 패턴 채우기
02-10 그림자 만들기
02-11 다음 내용 소개

CHAPTER 03 HTML5 캔버스 문자 API
03-1 문자 출력의 기본
__1. 기본 문자 출력
__2. Text Arranger에서의 기본적인 문자 처리
__3. HTML 폼과 캔버스의 연결
__4. measureText 사용하기
__5. fillText와 strokeText
03-2 문자 폰트 설정
__1. 폰트 크기, 두께, 스타일의 기본
__2. Text Arranger에서 폰트 크기와 종류 설정하기
__3. 폰트 색상
__4. 폰트 기준선과 정렬
__5. Text Arranger 버전 2.0
03-3 문자와 캔버스 컨텍스트
__1. 문자에 투명도 설정하기
__2. 문자에 그림자 설정하기
03-4 문자에 패턴과 그레이디언트 넣기
__1. 선형 그레이디언트와 문자
__2. 방사형 그레이디언트와 문자
__3. 이미지 패턴과 문자
__4. Text Arranger에서 그레이디언트와 패턴 처리하기
03-5 폭, 높이, 스케일, toDataURL( ) 다시 보기
__1. 동적으로 캔버스 크기 조절하기
__2. 동적으로 캔버스 스케일하기
__3. Canvas 객체의 toDataURL( ) 메서드
03-6 Text Arranger 최종 버전
03-7 다음 내용 소개

CHAPTER 04 캔버스에서의 이미지
04-1 기본 파일 형태
04-2 기본적인 이미지 처리
__1. 이미지 미리 불러오기
__2. drawImage( )로 캔버스에 이미지 출력하기
__3. 캔버스에서 이미지 크기 변환하기
__4. 이미지의 일부분을 캔버스로 복사하기
04-3 간단한 셀 스프라이트 애니메이션
__1. 애니메이션 프레임 카운터 만들기
__2. 타이머 만들기
__3. 출력할 타일 바꾸기
04-4 복잡한 셀 애니메이션
__1. 타일 시트 알아보기
__2. 애니메이션 배열 만들기
__3. 출력할 타일 고르기
__4. 타일 반복하기
__5. 타일 그리기
04-5 이미지에 회전 적용하기
__1. 캔버스 변환의 기본
__2. 변환한 이미지에 애니메이션 효과 넣기
04-6 타일로 배경 만들기
__1. 타일 맵 정의하기
__2. Tiled로 타일 맵 만들기
__3. 캔버스에 맵 출력하기
04-7 이미지 축소, 확대, 패닝
__1. 이미지 창 만들기
__2. 이미지 창 그리기
__3. 이미지 패닝
__4. 이미지 축소, 확대, 패닝
__5. 애플리케이션: 축소 확대, 패닝 제어하기
04-8 픽셀 처리
__1. 캔버스 픽셀 처리 API
__2. Tile Stamper 애플리케이션
04-9 한 캔버스에서 다른 캔버스로 복사하기
04-10 다음 내용 소개

CHAPTER 05 수학과 물리학을 적용한 애니메이션
05-1 일직선상으로 움직이기
__1. 두 점 간의 이동: 두 점 사이의 거리 구하기
__2. 벡터에 따른 움직임
05-2 튀는 공 구현하기
__1. 튀는 공 하나
__2. 벽에 맞고 튀는 여러 개의 공
__3. 동적으로 크기가 변환되는 캔버스 상에서 튀는 공들
__4. 튀는 공과 충돌 효과
__5. 튀는 공에 마찰력 적용
05-3 곡선과 회전 이동
__1. 등속 원운동
__2. 간단하게 구현한 나선 모양 움직임
__3. 3차 베지어 곡선
__4. 이미지 움직이기
__5. 3차 베지어 곡선으로 고리 모양 만들기
05-4 기본적인 중력, 탄성, 마찰력 적용
__1. 간단히 중력 적용하기
__2. 중력과 튀는 효과 적용하기
__3. 중력과 탄성을 적용하여 튀는 효과 만들기
__4. 중력, 탄성, 마찰력 간단히 적용하기
05-5 가속도 효과
__1. 감속(우주선 착륙)
__2. 가속(우주선 이륙)
05-6 다음 내용 소개

CHAPTER 06 HTML5 캔버스와 비디오
06-1 HTML5의 비디오 지원
__1. 테오라 + 보비스 \u003d .ogg
__2. H.264 + $$$ \u003d .mp4
__3. VP8 + 보비스 \u003d .webm
__4. 세 가지 형식 모두 사용
06-2 비디오 형식 변환
06-3 기본적인 HTML5 비디오 구현
__1. 평범하고 단순하게 비디오 넣기
__2. 컨트롤, 반복재생, 자동재생 기능 넣기
__3. 비디오의 폭과 높이 바꾸기
06-4 자바스크립트로 비디오 프리로딩 구현
__1. HTML5에서 이벤트와 비디오 간의 문제점
06-5 비디오와 캔버스
__1. HTML5 캔버스에서 비디오 출력하기
__2. HTML5 비디오 속성
06-6 캔버스 상의 비디오 예제 애플리케이션
__1. currentTime 속성을 이용하여 비디오 이벤트 만들기
__2. 캔버스 비디오 변환: 회전
__3. 캔버스 비디오 퍼즐
__4. 캔버스에서 비디오 컨트롤 만들기
06-7 애니메이션 효과 넣기: 움직이는 비디오
06-8 다음 내용 소개

CHAPTER 07 HTML5 캔버스와 오디오
07-1 기본적인 「audio」 태그
07-2 오디오 형식
__1. 오디오 형식 지원
__2. Audacity
__3. 예제 애플리케이션: 세 가지 형식 모두 사용하기
07-3 오디오 태그의 속성, 함수, 이벤트
__1. 오디오 함수
__2. 중요한 오디오 속성
__3. 중요한 오디오 이벤트
__4. 오디오 로딩과 재생
__5. 캔버스에서 특성 출력
07-4 오디오 태그 없이 사운드 재생하기
__1. 자바스크립트를 사용하여 동적으로 오디오 요소 만들기
__2. 지원되는 오디오 형식 알아내기
__3. 사운드 재생하기
__4. 태그가 없어요!
07-5 캔버스 오디오 플레이어 만들기
__1. 캔버스에서 사용자 맞춤 컨트롤 만들기
__2. 버튼 로드하기
__3. 오디오 플레이어의 변수 값 설정하기
__4. 마우스 이벤트
__5. 재생 슬라이더
__6. 재생/일시정지 버튼: 선택 위치 검사법 이용
__7. 반복재생 토글 버튼
__8. 볼륨 슬라이더
07-6 오디오 애플리케이션: 스페이스 레이더스 게임
__1. 애플리케이션에서의 사운드 문제
__2. 여러 버전으로 구현
__3. 스페이스 레이더스 게임의 구조
__4. 버전 1: 하나의 객체로 사운드 재생하기
__5. 버전 2: 무제한적으로 동적 사운드 객체 만들기
__6. 버전 3: 사운드 풀 만들기
__7. 버전 4: 프리로드한 사운드 재사용하기
07-7 다음 내용 소개

CHAPTER 08 캔버스 게임의 핵심
08-1 HTML5에서의 게임
__1. 플래시와 캔버스 비교
__2. 캔버스에서 제공하는 기능
08-2 게임에 사용할 기본 HTML5 파일
08-3 게임 디자인
08-4 게임 그래픽: 패스 이용하기
__1. 필요한 자원
__2. 패스를 이용하여 게임의 주요 캐릭터 그리기
08-5 캔버스에 애니메이션 효과 넣기
__1. 게임 타이머 구현
__2. 플레이어 우주선의 상태 변경
08-6 게임 그래픽에 변환 적용하기
__1. 캔버스 스택
08-7 게임 그래픽 변환
__1. 플레이어 우주선의 중심을 기준으로 회전하기
__2. 플레이어 우주선에 투명도 적용
08-8 물리학을 적용하여 애니메이션 구현
__1. 플레이어 우주선의 이동 원리
__2. 키보드로 플레이어 우주선 제어하기
__3. 플레이어 우주선의 최대 속도 지정
08-9 기본적인 게임 프레임워크
__1. 게임 상태 기계
__2. 갱신/렌더링 반복
__3. FrameRateCounter 객체 프로토타입
08-10 게임 애플리케이션 구현
__1. 지오 블라스터 게임의 구조
__2. 지오 블라스터 게임의 전역 변수
08-11 플레이어 객체
08-12 지오 블라스터 게임 알고리즘
__1. 논리적 출력 객체의 배열
__2. 레벨 스위치
__3. 레벨과 게임의 끝
__4. 보너스 우주선
__5. 충돌 검사 적용
08-13 지오 블라스터 베이직 전체 코드
08-14 암석 객체 프로토타입
08-15 다음 내용 소개

CHAPTER 09 비트맵과 사운드 사용
09-1 지오 블라스터 확장판
__1. 지오 블라스터 타일 시트
__2. 다른 게임 객체 렌더링
__3. 사운드 추가
__4. 객체 인스턴스 풀링
__5. 스텝 타이머 추가
__6. 지오 블라스터 확장판 전체 코드
09-2 실행 중에 동적 타일 시트 만들기
09-3 간단한 타일 기반 게임
__1. 마이크로 탱크 미로 게임의 개요
__2. 게임에서 사용할 타일 시트
__3. 플레이필드
__4. 플레이어
__5. 적군
__6. 목표
__7. 폭발
__8. 턴 방식 게임의 흐름과 상태 기계
__9. 타일 이동 로직의 개요
__10. 렌더링 로직의 개요
__11. 마이크로 탱크 미로에서 사용하는 인공지능
__12. 마이크로 탱크 미로 전체 게임 코드
09-4 다음 내용 소개

CHAPTER 10 폰갭을 이용한 모바일 게임
10-1 가자, 모바일로!
__1. 폰갭 소개
__2. 예제 애플리케이션
__3. 전체 코드
__4. BSBingo.html 코드
__5. 게임 애플리케이션 코드
10-2 폰갭을 이용하여 iOS 애플리케이션 만들기
__1. Xcode 설치하기
__2. 폰갭 설치하기
__3. Xcode에서 BS 빙고 폰갭 프로젝트 만들기
__4. 시뮬레이터에서 테스트하기
__5. BS 빙고를 프로젝트로 통합하기
__6. 출력 방향 설정하기
__7. 배너와 아이콘 변경하기
__8. 시뮬레이터에서 테스트하기
__9. 아이폰에 \"제스처\" 추가하기
__10. index.html에 제스처 기능 추가하기
__11. 장비에서 테스트하기
__12. Xcode에서 테스트 장비 지정하기
10-3 캔버스와 모바일
10-4 다음 내용 소개

CHAPTER 11 그 밖의 기술
11-1 WebGL을 이용한 3D
__1. WebGL이란?
__2. WebGL의 지원 여부
__3. WebGL에 대한 정보
__4. WebGL 애플리케이션
__5. 전체 코드
__6. WebGL에 대한 그 밖의 정보
__7. WebGL 자바스크립트 라이브러리
11-2 ElectroServer 5를 이용한 다중 사용자 애플리케이션
__1. ElectroServer 설치하기
__2. 소켓 서버 애플리케이션의 기본 구조
__3. ElectroServer 애플리케이션의 기본 구조
__4. ElectroServer를 이용한 채팅 애플리케이션 만들기
__5. 구글 크롬에서 애플리케이션 테스트하기
__6. ElectroServer의 또 다른 활용
__7. 빙산의 일각
11-3 이 책을 마치며

<저자 서문>
이 책을 쓰기 전부터 작업을 다 끝낸 후까지 인내심을 가지고 사랑이 담긴 도움과 조언을 준 아름다운 아내 던에게 감사한다. 또 아빠에게 놀아달라고 할 때마다 “어, 그래, 잠깐만 기다려”라고 말하면서 계속 책을 보는데도 많이 속상해 하지 않고 도와준 사랑하는 딸 레이첼, 데프니, 케이티에게도 정말 감사한다. 그 외에도 많은 조언을 준 누이 메리와 캐롤, 사랑과 협조를 아끼지 않은 삼촌 리처드와 사촌 존, 그리고 부모님께도 감사 드린다. 그 밖에도 수 밀러, 모건 밀러, 로렌 밀러, 젠 가니카, 에릭 가니카, 사라 가니카, 페이지 가니카, 디트리히, 챈틀 마틴, 라이언 펄튼, 저스틴 펄튼에게 감사한다.
_ 스티브 펄튼

 

2년 동안 이 두 번째 책을 쓰도록 잘 협조해 준 멋진 아내 진과 훌륭한 두 아들 라이언과 저스틴에게 감사한다. 책을 쓰는 작업은 시간과 에너지가 엄청나게 드는 힘든 일이며, 신경이 날카로워진 저자의 주변 사람들에게도 이해와 참을성을 많이 요구하는 일이다. 힘든 원고 작업 동안 사기를 북돋아주고 잘 도와준 누이 메리와 캐롤 그리고 부모님께 감사 드린다. 또한 사랑과 지원을 아끼지 않은 페리와 메클러에게도 감사한다.
_ 제프 펄튼

 

오라일리 관계자분들에게도 감사의 말을 전하고자 한다. 특히 이 책을 작업할 기회를 준 마이크 로키즈, 많은 도움을 준 사이먼 생로랑, 내용을 예쁘게 다듬어 준 편집자 말로우 쉐퍼, 그리고 작업을 마무리 해 준 출판 편집자 크리스텐 보그에게 감사드린다. 아울러 기술적인 내용을 검토해 준 라파엘 체코, 셸리 파워스, 안드레스 파젤라에게도 감사의 마음을 전하고 싶다. 일렉트로탱크의 모든 분들, 특히 조브 메이커, 매튜 웨이스너, 테레사 커리건에게 감사 드리며, 제트 모건, 크리에이티브 보틀, 프로덕토 스튜디오, 마텔, 모치, 어도비, 마이크로소프트, 징가, SPIL 그룹의 친구들과 러닝웹지엘닷컴의 가일스 토마스와 아리 펠드먼, 테리 페이튼, 그리고 에이스 더 수퍼빌런, 바스 알리칸테, egdcltd, 토니 페르난도, SeuJogo, 헤이즈, 호세 가레이, 리차드 다베이(@PhotonStorm), Squize and nGfx(@GamingYourWay), 그리고 8bitrocket.com의 친구들에게 감사한다. 그리고 444 Deharo의 뛰어난 팀, 특히 FV 팀과 Foo Fighters pod 팀에게 감사한다. 작업을 도와준 모든 친구, 이언 레글러, 브랜든 크리스트, 데릭 벌스, 웨슬리 크루, 케니 브라운, 마이크 포티, 에븐 펄싱, 스캇 존슨, 스캇 런스포드, 컬트 레글러, 라이언 레클러, 존 리틀, 매트 하얏, 베런 탠던, 마크 홀, 제이슨 네이펠드, 마이크 피터스, 그리고 The Alarm에 감사를 전한다. 마지막으로 환상적인 HTML5 캔버스 명세를 내놓은 W3C에 마찬가지로 감사의 마음을 전한다.
_ 스티브 펄튼 & 제프 펄튼

 

<역자 서문>
그 동안의 HTML은 좀 무능했다. 다른 복잡한 프로그래밍 언어에 비해 너무나 단순하게 웹 페이지를 만드는데도 플랫폼마다, 브라우저마다 심지어 브라우저 버전마다 제 각각으로 출력되는가 하면, 좀 더 멋진 화면을 만들려고 하면 플래시나 ActiveX를 따로 이용해야 해서 웹 개발자나 이용자 모두 번거로웠다.
그러나 이제 HTML5는 다르다. 크로스 플랫폼을 지원하며, ActiveX나 플래시 없이도 웹 페이지에 환상적인 멀티미디어를 구현할 수 있을 뿐만 아니라 WebGL 같은 라이브러리를 이용하면 3D도 멋지게 구현해낼 수 있으며, 웹소켓을 이용하여 클라이언트-서버간 통신 프로그램도 가능하다. 게다가 HTML5를 기반으로 하는 웹앱이 부상하면서 HTML5에 대한 관심은 가히 폭발적이다.
이 책은 HTML5 중에서도 캔버스, 즉 멀티미디어 기능에 대한 내용에 중점을 두고 있다. 저자가 게임 개발자였기 때문인지 게임을 예로 든 부분이 많아 더 흥미롭다. 이 책은 캔버스로 그림을 그리는 기초적인 내용부터 시작해서 수학, 물리 법칙을 적용하여 그리는 방법, 다양한 변환을 적용하는 방법, 오디오, 비디오는 물론이고 HTML5로 만든 웹 코드를 모바일 코드로 바꾸는 방법과 3D, 소켓 통신까지 다양한 내용을 자세히 설명한다. 이 책은 자바스크립트와 웹 개발에 경험이 있는 사람에게 안성맞춤이지만 웹 개발이 처음인 사람에게도 HTML5에 대한 기본 개념을 얻을 수 있는 좋은 자료가 될 것이다. HTML5를 비롯한 관련 기술들은 지금 이 순간에도 계속 변하고 있기 때문에 독자들이 이 책을 읽을 때 이미 책의 내용과 현재 기술이 다를 수도 있다. 얼마나 많은 부분이 발전하고 바뀌었는지 찾아보는 것도 또 하나의 재미가 될 수 있겠다.
마지막으로, 유난히 시원했던 여름과 유난히 더웠던 가을까지의 짧고도 긴 번역 기간 동안 여러 방면으로 도움을 주고 번역에도 참여해 준 남편(이성희)에게 가장 먼저 감사의 말을 전하고 싶다. 그리고 같이 놀자고 조르지 않고 기특하게 도와준 두 아들 재원, 재우에게도 정말 고맙다는 말을 해 주고 싶다. 그 밖에도 모바일 쪽에 조언을 해 준 임성용 선배, 김경빈 언니에게도 감사의 말을 전하며, 원고를 꼼꼼히 교정해 준 한빛미디어 조희진씨와 배용석 부장님, 전태호 이사님께도 감사의 마음을 전하고 싶다.
_ 2012년 캘리포니아에서 이수진