canvas 들어가기 앞서..

캔버스는 워드프로세스부터 비디오 게임에 이르기까지 모든 애플리케이션을 구현할 때 필요한 모든 그래픽 능력을 제공한다.
특정 플랫폼에 다라 성능이 다르겠지만, 일반적으로 모바일 사파리에서 캔버스를 가속할 수 있는 하드웨어를 갖춘 iOS5에서 실행된 캔버스가 가장 빠르다. (이 책 집필시기 2012년)
또한, 브라우저 제작회사는 사소한 호환성 문제가 있는 브라우저에서 잘 만들어진 캔버스 애플리케이션을 어떤 변경도 하지 않고 실행할 수 있게 명세서를 준수하는 대단한 일을 해냈다.
(크로스브라우징이 딱히 필요없다는 말인가? 그정도로 호환성이 좋다는 뜻인거 같음)

캔버스는 HTML5의 가장 흥미로운 기능이다.
이런 이유에서 이 책을 통해 데스크톱 브라우저와 모바일 장치를 가리지 않고 실행할 수 있는 실제 애플리케이션을 구현할 수 있도록 애니메이션 타이밍 사양 등과 같은 캔버스와 HTML5의 관련 기능을 자세히 알려주고 싶었다.

1장. 캔버스 구성(Essentials)

• <canvas> 요소를 소개하고 웹 애플리케이션에서 <canvas> 요소를 사용하는 방법
• 브라우저, 콘솔, 디버거, 프로파일러, 타임라인 등을 다루는 HTML5 개발에 대해 간단히 소개
• 캔버스에 그리기, 캔버스 파라미터 및 드로잉 표면을 저장하고 복원하기, 캔버스 출력하기, 오프스크린 캔버스 개론 등 - 캔버스의 필수 구성 요소를 구현하는 방법
• 1장의 마지막 부분 - 측정 단위로부터 방정식을 유도하는 방법과 벡터 계산, 삼각법, 기본 대수학을 다룬 수학 입문서도 간략하게 소개

2장. 드로잉

• 선, 호, 곡선, 원, 직사각형, 임의 다각형을 캔버스에 그리는 방법 + 색상, 그라디언트, 패턴 등을 사용해 도형 내부를 칠하는 방법 - 캔버스 API를 활용한 드로잉
• 도형을 그릴 수 있게 임시 러버 밴드를 그리는 방법
• 캔버스 내부에서 도형을 드래그하는 방법
• 사용자가 편집할 수 있도록 캔버스에 다각형을 기록하는 간단한 보유 모드(rationed mode) 그래픽 서브시스템을 구현하는 방법

• 클리핑 영역을 사용해 캔버스 배경을 건드리지 않고 도형을 지우는 방법

• 단순한 드로잉 기법의 범위를 넘어 캔버스 API를 사용한 드로잉을 구현하는 방법 소개

3장. 텍스트

• 텍스트를 그리고 조작하는 방법을 소개한다. 텍스트 내부를 칠하고 윤곽을 그리는 방법과 폰트 속성을 설정하고 캔버스에 텍스트를 위치시키는 방법 등을 살펴본다.
• 텍스트 커서와 편집할 수 있는 단락과 함께 캔버스에서 텍스트 컨트롤을 구현하는 방법도 소개한다.

4장. 이미지 및 비디오

• 이미지, 이미지 조작, 비디오 프로세싱을 중점으로 소개
• 이미지를 확대하고 그리는 방법을 살펴보고 각 픽셀의 색상 구성 요소에 접근해 이미지를 조작하는 방법을 배운다.
• 또한, 클리핑 영역을 사용하는 방법과 이미지를 움직이는 방법을 살펴 보고, 비디오 프로세싱을 소개한 4장의 마지막 절로 넘어가기 전에 보안과 성능에 대해 다룬다.

5장. 애니메이션

• ‘스크립트 기반 애니메이션을 위한 타이밍 컨트롤(Timing control for script-based animations)’이란 제목의 W3C 명세서에서 정의한 requestAnimationFrame() 메서드를 사용해 애니메이션을 자연스럽게 재생할 수 있는 구현방법을 소개한다.
• 그리고 애니메이션 프레임률을 계산하는 방법과 임시 프레임률로 애니메이션의 사용자 인터페이스를 업데이트하는 등과 같이 다른 활동에 대한 일정을 잡는 방법도 살펴본다.
• 또한, 애니메이션이 실행되는 동안 세 가지 다른 방법을 사용해 배경을 복원하는 방법을 소개하고 각 방법에 따라 성능에 미치는 영향을 살펴보겠다.
• 그뿐만 아니라 시간 기반 모션을 구현하는 방법
• 애니메이션의 배경을 스크롤하는 방법
• 시차를 사용해 3D 처럼 보이게 하는 방법
• 애니메이션이 실행되는 동안 사용자 제스처를 감지하고 처리하는 방법도 살펴볼 것이다.
• 마지막으로 애니메이션 모범 사례를 소개하기 전에 간단한 애니메이션 타이머를 구현하는 방법과 시한 애니메이션을 살펴볼 것이다.

6장. 스프라이트

• 자바스크립트에서 움직이는 오브젝트인 스프라이트를 구현하는 방법을 소개한다.
  스프라이트는 시각적인 표현, 주로 이미지를 가지고 있으므로 캔버스에서 스프라이트를 이동시킬 수 있을 뿐만 아니라 일련의 이미지 이미지를 순환하여 스프라이트를 움직이게 만들 수도 있다.
  따라서 스프라이트는 게임을 구성하는 기본 요소라고 할 수 있다.

7장. 물리학

• 떨어지는 물체와 탄도 궤적을 모델링하는 방법부터 진자 운동에 이르기까지 애니메이션에서 물리학을 시뮬레이션하는 방법을 보여준다.
• 애니메이션에서 시간과 모션을 모두 왜곡해 단거리 주자가 달릴 때 발생하는 가속 효과(ease-in)나 자동차가 브레이크를 잡을 때 발생하는 감속효과(ease-out) 등과 같이 실제 움직임을 시뮬레이션하는 방법도 살펴볼 것이다.

8장. 충돌감지

• 대부분의 게임에서 충돌 감지를 핵심 기능으로 취급하므로 8장 ‘충돌감지’에서는 스프라이트 사이에 발생하는 충돌을 감지하는 방법도 자세히 소개한다.
• 8장의 시작 부분에서는 구현하기 쉬울 뿐 아니라 신뢰도가 높은 경계 박스와 원을 사용한 간단한 충돌 감지를 구현하는 방법을 소개한다.
  하지만 간단한 충돌 감지를 사용하면 다양한 환경에 대처하는 능력이 부족해지므로 2D와 3D에서 임의 다각형 사이에 발생하는 충돌을 감지하는데 효과적인 방법 중 하나인 SAT(Sepatating Axis Theorem)를 소개하는데 8장의 대부분을 사용하고 있다.
  그러나 SAT는 수학적 측면이 강하므로 더 쉬운 용어로 SAT를 소개할 수 있도록 많은 노력을 기울였다.

9장. 게임개발

• 스프라이트를 그리는 작업과 하이 스코어를 관리하는 작업부터 시간 기반 모션과 멀티 트랙 사운드에 이르기까지 모든 기능을 제공할 뿐만 아니라 간단하면서 효과적인 게임 엔진에 대한 코드를 살펴보는 것으로 시작한다.

• 9장에서는 두가지 게임을 소개한다.

  • 첫번째 게임은 간단한 Hello World 형태의 게임으로 게임 엔진을 사용하는 방법과 게임에 대한 시작 포인트를 알려준다.
    또한, 첫번째 게임으로 하이 스코어를 위한 사용자 인터페이스, 자산 관리, 헤드-업 디스플레이 등과 같이 대부분 게임에서 일반적으로 사용되는 기능을 구현하는 방법을 소개한다.
  • 두번째 게임은 강력한 핀볼 게임으로 책 앞부분에서 소개한 내용을 사용해 구현하고 있으며 실제 게임에서처럼 복잡한 충돌 감지를 사용하고 있다.

10장. 사용자 정의 컨트롤

• 많은 캔버스 기반 애플리케이션에서 사용자 정의 컨트롤을 필요로 하므로 10장 ‘사용자 정의 컨트롤’에서는 사용자 정의 컨트롤을 구현하는 방법을 소개한다.
• 10장에서는 일반적으로 사용자 정의 컨트롤을 구현하는 방법을 소개하고 모서리가 둥근 직사각형, 프로그레스바, 슬라이더, 이미지 패너 등 네 가지 사용자 정의 컨트롤을 이용하는 방법을 보여준다.

11장. 모바일

• 마지막장은 캔버스 기반 모바일 애플리케이션을 구현하는데 중점을 두고 있으므로 애플리케이션을 모바일 장치에서 표시할 수 있도록 애플리케이션의 뷰포트 크기를 제어하는 방법과 CSS3 미디어 쿼리를 사용해 화면 크기와 방향을 처리하는 방법을 살펴본다.
• 또한, 캔버스 기반 애플리케이션을 데스크톱 전체 화면으로 실행하고 아이콘과 시작 스크린에 맞춤으로써 iOS5 전용 애플리케이션과 구별되지 않은 캔버스 기반 애플리케이션을 구현하는 방법도 소개한다.
• 그리고 11장 마지막 부분에서는 텍스트 필드로 텍스트를 입력받지 않는 iOS5 애플리케이션용 키보드를 구현하는 방법을 소개한다.