P5.js 게임 객체편

누구나 코딩 아티스트 15

김성일 지음

코딩북스 2025년 01월 10일 출간

작품소개

책소개

총 32개(=기초편:16개, 객체편:16개)의 다양한 게임 제작으로 누구나 P5.js 게임 개발 전문가!

p5.js는 자바스크립트(웹프로그래밍의 가장 대중적인 언어) 기반의 오픈소스 라이브러리로, 직관적이고 사용하기 쉬운 문법을 통해 누구나 쉽게 게임 개발을 시도해 볼 수 있게 해줍니다. 특히, 웹 환경에서 바로 실행되는 특성 덕분에 결과를 빠르게 확인하고 수정할 수 있는 점은 p5.js만의 매력 중 하나입니다. 그러므로 p5.js는 코딩 및 게임 개발의 입문자가 게임 개발에 쉽게 접근할 수 있는 매우 적합한 도구라고 할 수 있습니다.

게임은 많은 이들에게 단순한 오락을 넘어 상상력을 자극하고 창의성을 표현하는 수단이 되었습니다. 특히, 게임 개발은 창의성과 기술의 융합으로 이루어지는 흥미로운 분야입니다. 많은 사람들이 게임을 즐기고 있지만 자신이 직접 게임을 개발해 본 경험을 가진 사람은 많지 않습니다. 본서는 게임 개발의 첫걸음을 떼는 입문자들을 위해 32개의 다양한 게임 제작 과정을 상세히 안내하는 길잡이입니다. 각 게임별로 순차적 단계를 거쳐 게임을 완성하면서 자연스럽게 코딩의 기초를 탄탄하게 다질 수 있습니다.

본서의 목표는 간단합니다. 여러분이 p5.js(자바스크립트)를 활용하여 다양한 종류의 게임을 직접 개발할 수 있도록 돕는 것입니다. 본서는 p5.js의 기초적인 코딩 실습에서 시작해 모듈화된 객체지향 코딩까지 다루며, 여러분들이 자신만의 게임을 완성하는 데 필요한 과정을 단계별로 안내합니다. 본서의 Ⅰ부에서는 게임 개발을 위한 p5.js 코딩의 기본을 연습합니다. Ⅱ부에서는 게임 개발을 위한 필수 요소를 배우고, Ⅲ부에서는 객체를 사용하지 않고 16가지 종류의 다양한 게임을 만들어 봅니다. Ⅳ부에서는 객체지향 프로그래밍의 핵심을 학습하고 Ⅴ부에서는 16가지 종류의 객체 기반의 다양한 게임을 구현해 봅니다. 마지막 Ⅵ부에서는 p5.js와 아두이노의 연동을 통해 게임을 하드웨어로 제어해 봅니다.

목차

Ⅳ p5.js 객체

25 클래스
25.1 함수 17
25.2 클래스와 객체 19
【심화25.1】 클래스(Class) & 객체(Object) 29
【심화25.2】 클래스 파일 생성 31
25.3 메소드 유형 32
【심화25.3】 기본형 & 객체형 35

26 객체 배열
26.1 복수 객체 38
26.2 매개변수를 가진 생성자 39
26.3 객체 배열 44

27 상속Ⅰ
27.1 상속 미적용 62
27.2 상속과 super() 65
27.3 상속과 오버라이딩 82
【심화27.1】 this & super & super() 88

28 상속Ⅱ
28.1 상속과 다형성 96
【심화28.1】 삼각형 & 사변형 100
28.2 다형성과 객체 배열 103
28.3 다형성과 instanceof 112

Ⅴ 게임의 구현

29 랜덤 이동 목표물 맞추기
29.1 [1단계] 랜덤 이동 및 반사하는 목표물 생성 122
29.2 [2단계] 마우스로 랜덤 이동 목표물 맞추기 130
29.3 [3단계] 제한시간을 사각형 진행바로 표시 133
29.4 [완성] 랜덤 이동 목표물 맞추기 135
【심화29.1】 클래스 내에서 전역변수 사용 자제 139

30 낙하하는 적 피하기
30.1 [1단계] 플레이어의 좌우 이동 143
30.2 [2단계] 낙하하는 복수 개의 적 객체 생성 146
30.3 [3단계] 낙하하는 적 피하며 경과시간 표시 148
30.4 [완성] 낙하하는 적 피하기 152

31 적을 피해 목표물 획득
31.1 [1단계] 플레이어의 상하좌우 이동 158
31.2 [2단계] 적을 피해 목표물 획득 162
31.3 [완성] 적을 피해 목표물 획득 166
32 추적자를 피해 목표물 획득
32.1 [1단계] 추적자 만들기 175
32.2 [2단계] 추적자를 피해 목표물 획득 178
32.3 [완성] 추적자를 피해 목표물 획득 183

33 적을 피해 목적지 착륙
33.1 [1단계] 플레이어의 점프 이동 및 낙하 192
33.2 [2단계] 플레이어를 점프 이동하며 목적지 착륙 196
33.3 [3단계] 적을 피해 목적지 착륙 200
33.4 [완성] 적을 피해 목적지 착륙 204

34 좌표 이동으로 목표물 획득
34.1 [1단계] 플레이어의 좌표 이동 212
34.2 [2단계] 좌표 이동으로 목표물 획득 216
34.3 [완성] 좌표 이동으로 목표물 획득 222

35 회전하면서 추적자 슈팅
35.1 [1단계] 추적하는 적을 지속 생성 230
35.2 [2단계] 회전하면서 연속 슈팅 234
【심화35.1】 atan2() & atan() 240
35.3 [완성] 회전하면서 추적자 슈팅 241

36 회전 이동하면서 슈팅
36.1 [1단계] 플레이어의 회전 및 이동 249
36.2 [2단계] 회전 이동하면서 슈팅 252
36.3 [완성] 회전 이동하면서 슈팅 257
【심화36.1】 객체를 두 개로 분리, 생성하는 방법 263
【심화36.2】 상속을 사용한 다양한 적 객체 생성 267

37 다가오는 장애물 통과
37.1 [1단계] 왼쪽으로 이동하는 장애물 275
37.2 [2단계] 플레이어 점프하기 277
37.3 [완성] 다가오는 장애물 통과 280

38 좌우로 이동하는 장애물 통과
38.1 [1단계] 플레이어의 격자 단위 이동 288
38.2 [2단계] 좌우로 이동하는 복수 라인의 장애물 292
38.3 [완성] 좌우로 이동하는 장애물 통과 295

39 폭탄 찾기
39.1 [1단계] 2차원 객체 배열 기반 격자 표시 303
39.2 [2단계] 폭탄 위치의 랜덤 설정 307
39.3 [완성] 폭탄 찾기 310

40 점프 이동하며 목표물 획득-1
40.1 [1단계] 목표물의 랜덤 생성 316
40.2 [2단계] 플레이어의 다중 점프 및 이동 319
40.3 [완성] 점프 이동하며 목표물 획득-1 322

41 점프 이동하며 목표물 획득-2
41.1 [1단계] 플랫폼의 랜덤 생성 328
41.2 [2단계] 플레이어의 다중 점프, 이동 및 안착 331
41.3 [완성] 점프 이동하며 목표물 획득-2 336

42 점프 이동하며 목표물 획득-3
42.1 [1단계] 마우스 드래그로 플랫폼 생성 343
42.2 [2단계] 플레이어의 단일 점프 및 이동 346
42.3 [완성] 점프 이동하며 목표물 획득-3 349

43 점프 이동하며 목표물 획득-4
43.1 [1단계] 적 객체의 랜덤 생성 및 이동 359
43.2 [2단계] 목표물 객체의 랜덤 생성 및 이동 361
43.3 [3단계] 플랫폼 객체의 랜덤 생성 및 이동 363
43.4 [4단계] 플레이어의 단일 점프, 이동 및 안착 365
43.5 [완성] 점프 이동하며 목표물 획득-4 368

44 먹을수록 길어지는 플레이어
44.1 [1단계] 플레이어의 격자 단위 이동 378
44.2 [2단계] 먹을수록 길어지는 플레이어 380
44.3 [완성] 먹을수록 길어지는 플레이어 387

Ⅵ P5.js & 아두이노 연동

45 아두이노 설정
45.1 아두이노란? 397
45.2 아두이노 설치 400
45.3 아두이노 코딩 환경 402
45.4 아두이노 실행 403
45.5 아두이노 입·출력 부품 407

46 아두이노 시작
46.1 시리얼 통신으로 변수값 확인 412
46.2 변수 기반 부품의 특성 확인 418
【심화46.1】 아두이노 시뮬레이션 420
【심화46.2】 초음파 센서로 거리 구하기 438
46.3 전체 회로도 439

47 게임기반 P5.js & 아두이노 연동
47.1 연동 실습을 위한 준비 442
【심화47.1】 연동 시 주의사항 및 실행 순서 444
47.2 P5.js→아두이노 핸드쉐이킹 446
47.3 아두이노→P5.js 핸드쉐이킹 467
【심화47.2】 시리얼 통신에서 문자열 송·수신 시 장·단점 479
【심화47.3】 if(!int(value[0]))의 의미 483
47.4 P5.js↔아두이노 핸드쉐이킹 484
【심화47.4】 p5.WebSerial의 데이터 송·수신 메소드 505

마무리
마무리 509

출판사 서평

[1] 총 32개의 다양한 게임 제작
<기초편>에서 16개, <객체편>에서 16개의 게임을 합쳐 총 32개의 다양한 게임을 만들면서 새로운 아이디어 및 실전 스킬을 습득합니다.

[2] 코딩과 게임의 기초부터 응용까지 단계별로 습득
자바스크립트 기반의 p5.js 코딩의 핵심을 기초부터 객체지향 프로그래밍(OOP: Object-Oriented Programming)까지 게임 제작을 통해 자연스럽게 습득합니다. 각 게임별로 쉬운 단계에서 완성 단계까지 순차적으로 단계별(예: 1단계>>2단계>>...>>완성) 진행으로 완성합니다.

[3] 쉬운 코딩 환경, 간결한 코딩 문법
p5.js의 쉬운 코딩 환경과 간결한 문법을 통해 게임 제작을 보다 쉽고 간편있게 구현함으로써 코딩하는 재미가 있습니다. p5.js로 개발한 게임은 별도의 S/W 설치 없이 웹브라우저에서 바로 실행되고, 운영체제에 구애받지 않고 다양한 O/S 환경에서 실행할 수 있습니다.

[4] 실전 코딩이 우선, 이론은 따라오는 것
기존 대다수의 코딩 서적들이 따르는 방식인 이론 설명 후 코드를 소개하는 방식이 아니라, 우선 [질문]의 기본 예제를 실행해 보고, [설명]으로 코드의 의미를 확인한 후, 예제를 [수정]해 보며 코딩의 원리를 재확인할 수 있도록 설계하였습니다. 즉, [질문]→[설명]→[수정] 순으로 이야기를 풀어나가면서 필요한 팁은 [참고], 좀 더 깊은 이야기는 [심화]로 다루었습니다.

소스코드 다운로드: www.codingbooks.co.kr
관련 동영상: YouTube “코딩아티스트”

작가정보

저자(글) 김성일

자연언어(일본어, 중국어, 영어, 한국어)와 컴퓨터언어(C, C++, Java, JavaScript, Python, Processing, P5.js 등), 그리고 S/W와 H/W 연계 교육에 관심이 많습니다. 음성인식 관련 논문으로 박사 학위를 받았으며 현재 경남대학교 전자SW공학과에 재직 중입니다.