메뉴 바로가기 검색 및 카테고리 바로가기 본문 바로가기

한빛출판네트워크

만들면서 배우는 HTML5 게임 프로그래밍: PC와 스마트폰을 한 번에 잡는 멀티 플랫폼 게임 프로그래밍

한빛미디어

집필서

절판

  • 저자 : 황동윤
  • 출간 : 2013-06-22
  • 페이지 : 716 쪽
  • ISBN : 9788968480225
  • 물류코드 :2022
  • 초급 초중급 중급 중고급 고급
3.6점 (5명)
좋아요 : 22

HTML5와 자바스크립트로 배우는 멀티 플랫폼 게임 프로그래밍


- 게임 프레임워크 제작으로 배우는 기초 원리
어떤 게임을 제작하더라도 게임이라면 갖춰야 할 요소를 프레임워크로 정리했다. 게임 루프 생성, 키보드와 마우스를 위한 입력 처리 시스템, 스마트폰 환경을 위한 터치 입력 시스템, 사운드 시스템, 게임 상태 전환, 그래픽 객체와 애니메이션 관리자, 리소스 프리로더, 프레임 스키퍼, 디버깅 시스템을 단계별로 완성하며 게임의 기초 원리를 완벽하게 학습한다.

 

- 단계별 완성으로 배우는 게임 프로그래밍
자바스크립트 기초 문법부터 시작해서 총알 피하기 게임 제작, 게임 만들기의 기반이 되는 게임 프레임워크 개발하기, 게임 프레임워크에 기반한 러너 게임을 단계별로 완성해본다. 러너 게임을 완성한 이후에는 Node.js를 이용해 네트워크 대전 게임을 제작한다.

 

                                                       <웹 브라우저에 실행한 모습>

 

- 실시간 네트워크 대전 게임 제작
자바스크립트로 서버 프로그래밍을 할 수 있는 Node.js를 활용해 실시간 대전 게임을 구현해본다. Node.js와 기본 사용법과 Socket.IO를 살펴보고 이를 게임 프레임워크에 통합하는 과정도 설명한다. 이를 토대로 러너 게임을 네트워크 대전 게임으로 발전시켜보게 했다.

 

                                         

 

- 멀티 플랫폼으로 배포하기
HTML5와 자바스크립트를 지원하는 웹 브라우저만 있으면 어디서나 게임을 실행할 수 있다는 이점을 활용해 다양한 플랫폼으로 게임을 배포할 수 있다. 아이폰, 안드로이드, 윈도폰용 앱으로 변환하는 과정을 설명하고, PC 환경을 위해서는 페이스북과 크롬 웹 스토어에 배포하는 과정을 설명한다.

 

                                                 <안드로이드폰에서 실행한 모습>

 

                                 <크롬 웹 스토어로 배포해서 웹 앱으로 내려받은 모습>

 

 

황동윤 저자

황동윤

괴혼의 아버지로 알려진 다카하시 케이타(Takahashi Keita)를 존경하며 국제 게임공모전인 IGF와 인디케이드에 참가하고 싶은 평범한 게임 개발자다. 수년간 게임, 웹, 모바일 등 다양한 분야에서 프리랜서로 일했으며, 현재는 펜타비전(Pentavision) 본사에서 서버 프로그래머로 근무하고 있다. 랜스군의 게임공작소(lancekun.com)를 운영하면서 게임 프로그래밍 관련 이슈들을 다루고 있다.

1장 HTML5 소개
1.1  HTML5 개발 환경 
1.2  개발 환경 구성하기 
  1.2.1  웹 브라우저 설치하기 
  1.2.2  앱태나 설치하기 
  1.2.3  앱태나 스튜디오 둘러보기 

2장 기본기 배우기
2.1  HTML5와 자바스크립트 
  2.1.1  HTML5 둘러보기 
  2.1.2  자바스크립트 둘러보기 
2.2  이미지 띄우기 
  2.2.1  캔버스란? 
  2.2.2  캔버스 추가하기 
  2.2.3  이미지 출력하기 
  2.2.4  배우면서 게임 만들기 1단계 
2.3  입력 처리 
  2.3.1  이벤트를 이용한 키 입력 처리 
  2.3.2  이벤트를 이용한 마우스 입력 처리 
  2.3.3  배우면서 게임 만들기 2단계 
2.4  타이머 처리 
  2.4.1  타이머를 이용한 레벨업 애플리케이션 
  2.4.2  배우면서 게임 만들기 3단계 
2.5  사운드 처리  
  2.5.1  HTMLAudioElement를 이용한 사운드 재생하기 
  2.5.2  배우면서 게임 만들기 4단계와 마무리 

3장 게임 프레임워크 만들기
3.1  게임 루프 생성 
  3.1.1  프레임 측정기 구현 
  3.1.2  고정 프레임 게임 루프 
  3.1.3  가변 프레임 게임 루프 
3.2  입력 처리 시스템 구현 
3.3  사운드 시스템 구현 
3.4  게임 상태의 이해와 게임 상태 기반 구현 
  3.4.1  게임 상태의 이해 
  3.4.2  게임 상태 기반 구현 
3.5  게임에 사용할 프레임워크의 부가 요소 제작 
  3.5.1  게임에 그림을 표시하는 GraphicObject 
  3.5.2  게임에 움직임을 표현하는 SpriteAnimation 
3.6  리소스 프리로더의 구현 
3.7  디버그 시스템의 구현 
3.8  프레임워크의 부가 요소 
  3.8.1  타이머 구현 
  3.8.2  프레임 스키퍼 
  3.8.3  화면 전환 효과 구현하기 
3.9  프레임워크 개발 마무리 
  3.9.1  프레임워크 정리하기 
  3.9.2  프레임워크를 이용한 총알 피하기 게임 제작 

4장 실제 게임 개발하기
4.1  타이틀 구성하기 
4.2  배경 조작 
4.3  지형과 장애물 구현하기 
4.4  플레이어 구현하기 
4.5  아이템 구현하기 
4.6  마무리 
  4.6.1  HTML 페이지 꾸며주기 
  4.6.2  타이틀 화면 이미지 교체 
  4.6.3  점프 시 플레이어 이미지 교체 
  4.6.4  다양한 재미 요소 추가하기 

5장 Node.js를 이용한 멀티유저 게임 개발하기
5.1  Node.js 소개 
5.2  Node.js 개발 환경 구축하기 
5.3  Socket.IO 연결하기 
5.4  서버와 클라이언트의 메시지 통신 
5.5  Socket.IO를 프레임워크 요소로 추가하기 
5.6  멀티유저 게임 개발하기 

6장 게임 배포하기
6.1  게임 최적화하기 
6.2  자체적인 서비스 
6.3  페이스북과의 연동 
6.4  모바일 애플리케이션 
  6.4.1  모바일 환경 지원하기 
  6.4.2  폰갭 빌드를 이용한 앱 형태 배포 
6.5  크롬 웹 스토어에 배포하기 
6.6  마치면서 

부록  A  자바스크립트 키코드

책대로 하면 크롬에서 사운드 객체가 반복이 안된다.

크롬에서 사운드객체를 load 하면 ended 속성이 다시 false로 바뀌기 때문.

근데 책에선 eneded를 검증한답시고 if( ~.ended == true|| ~.isPlayed == false) 를 조건문으로 걸어놨다.

애당초 크롬에서는 ended 속성이 true 일때 저 조건문을 통과할수가 없어서 당연히 실행이 안된다.

올려놓은 에제소스도 엉터리이다. 제대로 실행을 해봤는지 의문이다.

이미지파일의 이름이 틀려 게임을 실행해도 실행이 되지 않고

더 웃긴건 예제소스에선 사운드프레임워크가 제대로 실행이 되길래 뜯어봤더니

if(~.ended == true || ~sound.isPlayed == false) 로 되있다.

웃긴건 사운드가 실행되었을때 true로 바꾸어주는 함수는

~.inPlayed 이고 ~sound.isPlayed 는 초기값으로 false 를 넣어

사운드의 실행여부와 관계없이 항상 false이다.

교재에는 if( ~.ended == true|| ~.isPlayed == false) 라고 해놓고 막상 저자가 실행을 해보자 실행이 안되어

전체소스코드와 예제파일에는 if(~.ended == true || ~sound.isPlayed == false) 로 해놨는 것 같은데

이유야 어찌되었든 둘 다 완전 엉터리이다.

왜냐하면 ~.ended 의 경우 항상 load()를 수행하므로 false, 즉 true가 나올 수 없다.

~.isPlayed 의 경우 음악이 재생되면 true를 반환하는데,

그럼 크롬에서는 무슨 수를 써도 if( ~.ended == true|| ~.isPlayed == false) 는 영원히 통과할 수 없다.
(원래 ended 속성이 true가 되어서 통과를 해야하는 부분)

어찌된 이유인지 학생인 나도 ended가 계속 false로 반환되어서 저부분이 통과가 안되어 며칠을 검증했는데

저자는 전체 소스코드와 예제 소스에서 if( ~.ended == true|| ~.isPlayed == false) 를
if(~.ended == true || ~sound.isPlayed == false) 로 고쳐놓았다.

~sound.isPlayed 의 경우 초기값으로 false를 주고, 음악재생이 완료되면 ~.isPlayed 를 true로 줄 뿐
~sound.isPlayed는 변동사항이 없다. 즉 ~sound.isPlayed 는 항상 false 이다.

그럼 저자가 적어놓은 if(~.ended == true || ~sound.isPlayed == false) 는 말도안되는 코드이며,

if( ~.ended == true|| ~.isPlayed == false)가 실행이 되지 않자 왜 안되는지 모르고 주먹구구식으로

변경한 코드라고 생각할수 밖에 없다.

저자 스스로도 검증이 안된책을 40,000원에 판다는게 정말 어처구니가 없다.

처음엔 제가 오타난줄 알았습니다만
제가 오타난게 아니더군요.
소스받아서 원본을 실행해도 똑같이 안되는것 천지구요..
프레임워크 쪽은 거의 대부분이 안됩니다.
책값이 싼게 아닌데 뭐 물어볼곳도 없고
어떻게 해야할지 화만 나네요;
버젼이 업그레이드되면서 기존의 기능이 안되는 그런거라면 개정을 하든지 어떻게든 알려주셔야 할텐데
IE, 크롬 둘다 안되거나 둘다 똑같이 이상하게 동작합니다 프레임워크 부분부터요..

HTML5로 시작하는 게임 프로그래밍 쉽고 누구나 따라 할수 있는 좋은 서적 이였던것 같습니다.

웹 개발에 기초지식부터 게임개발의 고급 기술까지 다양하면서도 일목 요연한 설명으로 끝까지 잘 볼 수 있었습니다.

게임 개발의 핵심요소. 시나리오, 기획, 등 게임에는 여러가지가 요소를 설명해주셨고 또한 게임을 단순히 만들고 끝나는것이 아니라 사람들에게 배포 할 수 있는 방안 까지 마련해주시니 참 금상 첨화인것 같습니다.

선수 지식은 조금 필요하겠지만.. 그래도 초보자들도 어렵지 않을 정도로 따라 할 수준 이였던것 같습니다.

사실 700페이지에 달하는 분량은 어마어마하지만, 사람들이 선뜩 겁먹고 두려워 할 분량이기도합니다.
여러분 모두 겁먹지마세요, 누구나 쉽고 따라 할수 있을정도로 쉽게 제작 되어있습니다.

게임프로그래밍에 관심이 있으신분들께 적극 추천합니다.

그리고 게임프로그래밍 뿐만아니라 자신이 뭔가를 하나 만들어보고 싶다는 분들도 ^^ 적극 권장합니단.

이번에 리뷰를 한 책은 HTML5 기반의 게임 프로그래밍 책입니다. HTML5를 어떻게 사용하는지도 중요하지만, 게임적인 요소에 보다 초점을 맞추어 설명이 진행됩니다. 즉, 게임 프로그래밍이 주, HTML5이 보조에 가깝습니다.

* 저자
랜스군의 게임공작소(lancekun.com)를 운영하는 유명한 프리랜서 황동윤 저자입니다. 게임 프로그래밍 관련 이슈들을 다루고 있으며 다수의 게임 개발에 참여했습니다.
기존의 책으로 한빛미디어에서 펴낸 『만들면서 배우는 안드로이드 게임 프로그래밍』(2011)이 있으며, 이러한 저자로서의 경험과 개발자로서의 경험 등이 모두 녹아낸 책입니다.

* 전체 구성
먼저 책 내용을 위해 1장에서는 이클립스와 같은 IDE인 앱태나 설치를 안내합니다.
2장에서는 기본적인 HTML5에 대한 문법 설명을 C언어, 자바와 같은 형태로 나열하고 있습니다.

3장,4장에서는 총알 피하기 게임인, DodgeGame에 대해 처음부터 하나씩 차근차근 만들어가면서 설명을 하고 있습니다.
게임에 대한 지식이 많지 않은 사람에게 쉽게 이해하고 따라할 수 있습니다.

5장은 다소 어려울 수 있는데 Node.js와 Socket.io를 함께 연동하여 게임을 만들게 됩니다. 멀티유저, 즉 다수의 사용자 처리를 위해서는 이를 반드시 활용해야 합니다. PC는 물론 스마트폰 게임 상에서도 이러한 것을 지원하고 있는 추세이기 때문에 어렵더라도 반드시 이해해야 될 부분입니다.

6장은 크롬 웹스토어, 페이스북 등의 웹/앱스토어 등에 배포하는 방법을 설명하고 있습니다. 기존에 크롬이나 페이스북 등은 알고 있었지만, 코드 최적화나 자세한 배포 절차 등은 저자의 경험이 뒷받침된 내용이라는 생각이 듭니다. 그만큼 매우 친절할 정도로 자세합니다.

* 책의 특징
1. 문법적인 설명 구성은 배제(다른 기본 책 참고)
하나의 게임 만들면서 필요한 변수, 메소드, 함수 등을 정의하면서 내용이 구성됨
2. 게임에 대한 요소를 같이 배워나갈 수 있음
-총알과 플레이어의 위치 표시가 겹치는 등 화면 표시할 때 변수 초기화 등 고려해야 되는 요소를 말해주고 있음
3. IE를 기준으로 제작 및 테스트한 게 인상적
- 보통 다른 HTML5책들은 파이어폭스나 크롬을 통한 예제 화면을 넣거나 브라우저별로 지원 여부를 보여주는 형태였음

* 총평
옛날에 도스 시절 총알 피하기 게임이나 우주선 게임 같은 기본적인 PC용 게임을 모바일을 거쳐 이제는 웹의 HTML5로도 표현이 가능해졌습니다. 웹/앱의 구분 없이 다양한 플랫폼을 지원하는 HTML5와 자바스크립트를 활용하여 원하는 게임의 기초부터 단계별로 완성하고, 실시간 멀티 유저의 네트워크 대전 형태까지 발전시킬 수 있도록 자세한 설명을 담고 있습니다. 책의 두께와 가격에 비해 저자의 풍부한 경험이 녹아 있어이를 기반으로 HTML5 게임을 만드는데 있어 필수 도서라 자부할 수 있습니다.

이 책은 일반적인 웹 게임 개발에 처음 입문하는 독자에 대한 게임 프로그래밍의 기본 원리를 설명하는 도서이다. 웹 게임 개발에 대한 입문서이다 보니 HTML5보다는 웹 게임 프로그래밍에 대한 설명으로 대부분이 구성되어 있다.

그래서 웹으로 게임 프레임워크를 개발하고, 게임 개발 실습을 통하여 스스로 게임 프레임워크 제작과 응용 능력을 키우는데 많은 도움을 주고자 한다.

이 책의 장ㆍ단점은 다음과 같다.
장점
1. 게임 프레임워크 기초 다지기
2. 게임 프레임워크 실습 과정(step by step)
3. 다양한 배포 정보
4. 디버깅 방법

단점
1. HTML5 정보 부족
2. javascript와 node.js에 집중

이 책은 HTML5 게임 프로그래밍에 대한 내용을 이야기 하고 있지만 HTML5에 대한 세부적인 기술에 대해서 다루지는 않는다. 그러나 웹 게임 개발에 대해 저자가 의도하는 과정을 따라하므로 만들면서 배우는 게임 프로그래밍에 대한 주제를 잘 다루고 있다.

결제하기
• 문화비 소득공제 가능
• 배송료 : 2,000원배송료란?

배송료 안내

  • 20,000원 이상 구매시 도서 배송 무료
  • 브론즈, 실버, 골드회원이 주문하신 경우 무료배송

무료배송 상품을 포함하여 주문하신 경우에는 구매금액에 관계없이 무료로 배송해 드립니다.

닫기

리뷰쓰기

닫기
* 도서명 :
만들면서 배우는 HTML5 게임 프로그래밍: PC와 스마트폰을 한 번에 잡는 멀티 플랫폼 게임 프로그래밍
* 제목 :
* 별점평가
* 내용 :

* 리뷰 작성시 유의사항

글이나 이미지/사진 저작권 등 다른 사람의 권리를 침해하거나 명예를 훼손하는 게시물은 이용약관 및 관련법률에 의해 제재를 받을 수 있습니다.

1. 특히 뉴스/언론사 기사를 전문 또는 부분적으로 '허락없이' 갖고 와서는 안됩니다 (출처를 밝히는 경우에도 안됨).
2. 저작권자의 허락을 받지 않은 콘텐츠의 무단 사용은 저작권자의 권리를 침해하는 행위로, 이에 대한 법적 책임을 지게 될 수 있습니다.

오탈자 등록

닫기
* 도서명 :
만들면서 배우는 HTML5 게임 프로그래밍: PC와 스마트폰을 한 번에 잡는 멀티 플랫폼 게임 프로그래밍
* 구분 :
* 상품 버전
종이책 PDF ePub
* 페이지 :
* 위치정보 :
* 내용 :

도서 인증

닫기
도서명*
만들면서 배우는 HTML5 게임 프로그래밍: PC와 스마트폰을 한 번에 잡는 멀티 플랫폼 게임 프로그래밍
구입처*
구입일*
부가기호*
부가기호 안내

* 온라인 또는 오프라인 서점에서 구입한 도서를 인증하면 마일리지 500점을 드립니다.

* 도서인증은 일 3권, 월 10권, 년 50권으로 제한되며 절판도서, eBook 등 일부 도서는 인증이 제한됩니다.

* 구입하지 않고, 허위로 도서 인증을 한 것으로 판단되면 웹사이트 이용이 제한될 수 있습니다.

닫기

해당 상품을 장바구니에 담았습니다.이미 장바구니에 추가된 상품입니다.
장바구니로 이동하시겠습니까?

자료실