반응형
HTML5 게임 만들기 : 동고는 똥을 싫어해 #2
'동고는 똥을 싫어해 만들기' 두번째 시간입니다.
Sublime Text 설치가 완료 되었다면 본격적으로 게임을 만들어 봅시다.
(당연히 다른 에디터 툴이나 이클립스도 상관없음)
Phaser라는 게임 프레임워크를 사용하겠습니다.
(MIT 라이센스)
먼저 아래 공식 사이트에 접속하여 다운로드를 받습니다.주소 : http://phaser.io/download/stable
이제 기본적인 기본 html 파일을 생성하여 아래와 같이 해당 파일을 import 해줍니다.편의를 위해 다운받은 phaser.min.js 파일과 생성한 html 파일을 같은 폴더에 위치시켜주세요.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Donggo hate a Poop</title>
</head>
<script src="./phaser.min.js"></script>
<body>
HTML5 게임 만들기 : 동고는 똥을 싫어해 #2
</body>
</html>
|
|
실행해봅시다.
성공했네요.
이번에는 게임창을 만들어봅시다.
html 파일 맨 하단에 아래 소스를 작성후, 다시 실행해주세요.앞으로 소스에 대해서는 왠만하면 주석으로 대체하도록 하겠습니다.|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.CANVAS, null, { preload: preload, create: create, update: update});
function preload() {
// 게임에 필요한 데이터 로드
}
function create() {
// 게임 처음 실행시 수행되는 함수
}
function update() {
// 프레임워크에서 주기적으로 수행하는 함수
}
</script>
|
|
위처럼 까맣게 뜨면 성공입니다. 전 성공.
지금부터 위에 까만공간에 게임을 만들것입니다.
이미 눈치채셨겠지만, 게임 창은 위 소스에서 써져있듯이 800x600 픽셀 크기입니다.
이제 게임 기본적인 밑바탕인 잔디와 하늘을 그려보겠습니다.
create 함수에 아래 소스를 추가해줍니다. 그리고 실행까지 해봅시다.|
1
2
3
4
5
6
7
|
function create() {
// 게임 처음 실행시 수행되는 함수
game.physics.startSystem(Phaser.Physics.ARCADE); // 게임 속성 설정(아케이드)
game.stage.backgroundColor = "#2F9D27"; // 게임 배경색 설청
game.create.texture('sky', ['E'], 800, 80, 0); // 'E' 코드색상 800x80 크기의 블럭을 'sky' 이름으로 생성
game.add.sprite(0, 0, 'sky'); // sky를 x좌표 0, y좌표 0 위치에 추가
}
|
|
잔디와 하늘이 그려졌습니다. 저는 또 성공했네요.
이제 잔디에 상자를 그려봅시다.상자는 이미지 파일을 추가하여 넣겠습니다.
아래 이미지를 다운로드하여 작업중인 폴더에 넣어주세요.
제가 허접한 그림실력으로 그린 상자입니다. 저작권은 저에게 있습니다.ㅋㅋㅋ
<- 우클릭 후 다른 이름으로 저장해주세요.
상자를 그리는 단계는 아래와 같습니다.box 변수 선언 ->
preload 함수에 이미지 로드 -> create 함수에서 이미지 출력
위 단계를 소스에 반영하면 아래와 같이 됩니다.|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
var game = new Phaser.Game(800, 600, Phaser.CANVAS, null, { preload: preload, create: create, update: update});
var box;
function preload() {
// 게임에 필요한 데이터 로드
game.load.image("box", "./box_01_40x40.png"); // 상자 이미지를 'box' 이름으로 생성
}
function create() {
// 게임 처음 실행시 수행되는 함수
game.physics.startSystem(Phaser.Physics.ARCADE); // 게임 속성 설정(아케이드)
game.stage.backgroundColor = "#2F9D27"; // 게임 배경색 설청
game.create.texture('sky', ['E'], 800, 80, 0); // 'E' 코드색상 800x80 크기의 블럭을 'sky' 이름으로 생성
game.add.sprite(0, 0, 'sky'); // sky를 x좌표 0, y좌표 0 위치에 추가
box = game.add.group(); // box 그룹 생성
box.create(0, 80, "box"); // box를 0, 80 위치에 추가
box.create(40, 80, "box"); // box를 40, 80 위치에 추가
}
function update() {
// 프레임워크에서 주기적으로 수행하는 함수
}
|
|
이제 소스를 실행하면 아래와 같이 상자 2개가 출력됩니다.
여기서 잠깐
box = game.add.group(); 의 의미를 설명하자면,
box를 그룹으로 묶는 역할입니다. (파워포인트의 그룹처럼..)그룹으로 묶게되면 box에 이벤트를 설정하면(가령 똥 발사 등의) 그룹으로 묶은 모든 box에서 해당 이벤트가 설정이 되게 됩니다.저희는 박스를 잔디 테두리에 모두 그려야합니다.
|
1
2
|
box.create(0, 80, "box"); // box를 0, 80 위치에 추가
box.create(40, 80, "box"); // box를 40, 80 위치에 추가
|
|
모든 box를 위처럼 하나씩 그리면 소스가 너무 길어지니까 이 부분을 for문으로 변경하겠습니다.해당 2줄을 아래와 같이 변경합시다.
|
1
2
3
4
5
6
7
8
|
for (var i = 0; i < 20; i++) {
box.create(i*40, 80, "box");
box.create(i*40, 600-40, "box");
}
for (var j = 3; j < 14; j++) {
box.create(0, j*40, "box");
box.create(800-40, j*40, "box");
}
|
|
실행하면
이번편은 여기까지입니다.다음편에서는 플레이어(동고) 추가, 애니메이션 추가, 움직임 추가까지 해보겠습니다.
반응형
'개발' 카테고리의 다른 글
| 윈도우 단축키 정리 (0) | 2016.01.20 |
|---|---|
| 리눅스 vi 에디터 명령어 정리 (0) | 2016.01.19 |
| HTML5 게임 만들기 : 동고는 똥을 싫어해 #1 (0) | 2016.01.13 |
| 동고런 (3) | 2016.01.13 |
| 유용한 사이트 정리 (0) | 2016.01.08 |