책 소개
요약
제이쿼리를 이용하여 아름답고 흥미로운 게임을 만드는 방법과 이에 필요한 언어, 프레임워크 등의 사용법을 다루는 책이다. 스프라이트(sprite) 애니메이션, 타일 맵(tile map), 충돌 검출, 패럴랙스 스크롤(parallax scroll) 등의 고급 기술을 이용한 게임을 브라우저에서 바로 실행할 수 있다. 데스크탑 브라우저뿐만 아니라 모바일에서 게임을 실행할 수 있는 방법도 배울 수 있다.
이 책에서 다루는 내용
■ 최신 웹 표준과 제이쿼리를 이용하여 스프라이트 기반의 멀티플랫폼 게임 만들기
■ 게임 산업에서 직접 이용되는 강력한 기술을 바탕으로 성능 저하 없이 놀라운 시각 효과를 갖는 게임 만들기
■ 실시간 멀티 플레이어 게임을 만들고 이를 소셜 네트워크와 연동하는 방법
■ 모바일 브라우저의 한계를 넘어서 최소한의 작업으로 모든 가능한 이점과 기술을 이끌어내기
■ 제이쿼리를 이용하여 플랫포머 게임, 아케이드 게임, 자신만의 RPG의 핵심 기능을 개발
■ 패럴랙스 스크롤 같은 기능을 간단하게 구현하는 방법
■ 이미 알고 있는 제이쿼리 기술을 활용하여 더 재미있고 흥분되는 게임을 만들기
이 책의 대상 독자
자바스크립트와 제이쿼리 사용에 대한 기본적인 지식과 약간의 프론트엔드 개발 경험이 이 책과 함께 몇 시간 만에 게임을 만들 수 있는데 필요한 모든 것이다. 단순히 제이쿼리를 이용하여 게임을 만들어보기 시작하려는 사람에게도 적합하지만, 기존의 개발 경험을 활용할 수 있는 웹 개발자를 대상으로 한다.
이 책의 구성
1장. ‘게임을 위한 제이쿼리’에서는 게임 개발에 필요한 제이쿼리 함수를 깊이 있게 배운다.
2장. ‘첫 게임 제작’에서는 스프라이트와 애니메이션, 프리로딩이 구현된 간단한 게임을 구현해본다.
3장. ‘더 좋게, 더 빠르게 하지만, 더 어렵지는 않게’에서는 2장에서 만든 게임을 타임아웃 인라이닝, 키보드 폴링, HTML 프래그먼트 등을 이용해 최적화하는 방법을 배운다.
4장. ‘잡다한 기능’에서는 타일 맵을 이용한 플랫포머 게임과 충돌 감지를 작성한다.
5장. ‘원근법으로 표현’에서는 직교투영 RPG를 만들어보면서 타일 맵 최적화, 스프라이트 충돌, 더 나은 충돌 감지를 배운다.
6장. ‘게임에 레벨 추가’에서는 4장에서 만든 게임에 JSON과 AJAX를 이용해 여러 개의 레벨을 추가해본다.
7장. ‘멀티플레이어 게임 제작’에서는 5장에서 만든 게임을 여러 대의 기기에서 여러 명의 플레이어가 즐길 수 있도록 바꿔본다.
8장. ‘소셜 게임 제작’에서는 페이스북과 트위터에 게임을 연동하고 해킹 유저를 잘 찾아낼 수 있는 점수판을 만들어본다.
9장. ‘모바일 게임 제작’에서는 5장에서 만든 게임을 모바일 기기와 터치 컨트롤에 최적화해본다.
10장. ‘소리 설정’에서는 오디오 엘리먼트, 웹 오디오 API, 플래시를 이용해 게임에 사운드 이펙트와 음악을 삽입해본다.
목차
목차
- 1장 게임을 위한 제이쿼리
- 제이쿼리의 방식
- 체이닝
- 다형성
- 물체 이동
- 체이닝 애니메이션
- 큐 관리
- .stop( )
- .clearQueue( )
- .dequeue( )
- 큐의 다른 사용법
- 이벤트 핸들링
- .bind( )
- .delegate( )
- 이벤트 핸들러 제거
- 제이쿼리 1.7
- DOM 엘리먼트와 데이터 연결
- DOM 조작
- .append( )
- .prepend( )
- .html( )
- .remove( )
- .detach( )
- 늘 궁금함을 가져라!
- 정리
- 제이쿼리의 방식
- 2장 첫 게임 제작
- 앞으로 작업하는 방식
- 게임 분석
- 기본기 다지기
- 프레임워크
- 스프라이트
- 애니메이션 구현
- 애니메이션을 프레임워크에 추가
- 스프라이트 움직이기
- 프리로딩
- 게임 초기화
- 메인 루프
- 메인 루프 구현
- 충돌 검출
- 정리
- 3장 더 좋게, 더 빠르게, 하지만, 더 어렵지는 않게
- 인터벌과 타임 아웃
- 모든 것을 관리하는 하나의 인터벌
- 코드
- 모든 것을 관리하는 하나의 인터벌
- 키보드 폴링
- 키 상태 추적 유지
- HTML 프래그먼트
- 리플로우 피하기
- CSS 트랜스폼을 사용해 스프라이트 움직이기
- 타임아웃 대신에 requestAnimationFrame 사용
- 정리
- 인터벌과 타임 아웃
- 4장 잡다한 기능
- 오프라인 div
- 그룹
- 스프라이트 트랜스폼
- CSS 트랜스폼
- 프레임워크에 트랜스폼 추가
- 타일 맵
- 대충 구현
- 충돌 검출
- 타일 맵에서의 충돌
- 충돌한 타일 검색
- 스프라이트와 스프라이트의 충돌
- 타일 맵에서의 충돌
- 게임 코딩
- 게임 스크린 기본 설정
- 객체지향적인 플레이어 코드
- 플레이어 위치 갱신
- 플레이어 아바타 컨트롤
- 플레이어 컨트롤
- 패럴랙스 스크롤
- 적 생성
- 정리
- 5장 원근법으로 표현
- 탑다운 게임을 위한 타일 맵 최적화
- 보이는 타일 찾기
- 타일 맵 이동
- 오쿨루젼 정렬
- 스프라이트 오쿨루젼
- 레벨과 스프라이트 오쿨루젼
- 충돌 검출
- 플레이어와 환경 간의 충돌
- 타일 맵 에디터 사용
- 플레이어와 스프라이트의 충돌
- NPC와 대화
- 적과 싸움
- 플레이어와 환경 간의 충돌
- 게임 완성
- 등각투상 타일
- 등각투상으로 타일 맵 그리기
- 등각투상에서의 오쿨루젼
- 정리
- 탑다운 게임을 위한 타일 맵 최적화
- 6장 게임에 레벨 추가
- 여러 개의 파일을 사용하는 게임 구현
- 타일 맵 불러오기
- 스프라이트와 그 행동 불러오기
- $.ajax 사용
- JSON 파일 불러오기
- 원격 스크립트 불러오기
- $.ajax에 디버깅 호출
- .done( )
- .fail( )
- 실제 게임에 적용
- 정리
- 여러 개의 파일을 사용하는 게임 구현
- 7장 멀티플레이어 게임 제작
- World of Ar'PiGi
- 플레이어 계정 관리
- 데이터베이스에서 요소 검색
- 데이터베이스에 새 플레이어 생성
- 플레이어 연결 유지
- 유저가 게임에 로그인
- 플레이어 동기화 유지
- 다른 모든 플레이어의 정보 얻기
- 현재 플레이어의 위치 업데이트
- 클라이언트 코드
- 몬스터 다루기
- 서버에서 전투 구현
- 정리
- 8장 소셜 게임 제작
- 간단한 점수판 제작
- 최고점수 기록
- 최고점수 얻기
- 최고점수 표시
- 해킹하기 어렵도록 만들기
- 서버에서 검증
- 변수를 읽기 어렵게 만들기
- 코드를 알아보기 어렵게 만들기
- 네트워크 프로토콜을 읽기 어렵게 만들기
- 값 인코딩
- 변수 이름을 랜덤으로 짓기
- 랜덤 변수 추가
- 트위터와 연동
- 트위터 간단히 사용
- 트위터 API에 완전히 접근
- 트위터에 게임 등록
- 서버에서 사용할 헬퍼 라이브러리
- 인증
- 트위터에 최고점수 올리기
- 페이스북 연동
- 페이스북으로 인증
- 업적 만들기
- 업적 올리기
- 정리
- 간단한 점수판 제작
- 9장 모바일 게임 제작
- 모바일 디바이스에서 게임이 잘 돌아가게 하기
- 모바일 브라우저 구별
- 클라이언트에서 브라우저 감지
- 서버에서 브라우저 감지
- 브라우저 확실하게 구분
- 퍼포먼스의 한계: 메모리
- 퍼포먼스의 한계: 속도
- 페이지에서 보이는 영역 특정
- 레벨의 디테일
- 모바일 브라우저 구별
- 터치 컨트롤
- D패드
- 아날로그 조이스틱
- 이벤트 핸들러
- 스프링보드에 게임 추가
- 게임을 설치 가능하게 하기
- 스테이터스 바 설정
- 애플리케이션 아이콘 설정
- 스플래시 스크린 설정
- 디바이스 오리엔테이션 사용
- 오프라인 애플리케이션 캐시 사용
- 웹 스토리지 사용
- 정리
- 모바일 디바이스에서 게임이 잘 돌아가게 하기
- 10장 소리 설정
- 오디오 추상화
- 작은 라이브러리 사용
- 임베딩 사운드
- 구현
- 지원되는 포맷
- HTML5 오디오 엘리먼트
- 사운드 프리로딩
- 사운드 재생 및 정지
- 웹 오디오 API
- 기본 사용법
- 더 많은 노드 연결
- 사운드 여러 개 로딩
- 이펙트 노드
- 딜레이 노드
- 스크립트 프로세서 노드
- 패너 노드
- 콘벌버 노드
- 애널라이저 노드
- 다이나믹 컴프레서 노드
- 바이쿼드필터 노드
- 웨이브셰이퍼 노드
- 플래시를 이용한 대비책
- SoundManager 2
- SoundManager의 대안
- 사운드 이펙트 제작
- 오디오 추상화