HTML5 게임 만들기 : 동고는 똥을 싫어해 #3
'동고는 똥을 싫어해 만들기' 세번째 시간입니다.
이번 편에서는 플레이어 추가, 애니메이션 추가, 이동 액션까지 해보겠습니다.
4편에서 똥 충돌 이벤트, 5편에서 텍스트 처리등으로 마무리될것 같네요.
플레이어를 추가하겠습니다.우선 아래 이미지를 다운받아주세요.
당연히 저작권은 저에게 있습니다.ㅋㅋㅋ
위 그림을 보면 총 7개 프레임으로 이루어져있습니다.멈춰있을때에는 가운데 4번 프레임을 사용하고,
왼쪽으로 이동할때는 1,2,3 프레임을 차례로 반복,
오른쪽으로 이동할때는 5,6,7 프레임을 차례로 반복시키며 애니메이션을 만들겠습니다.
이전편에서 상자를 그리는 방법과 유사합니다.player 변수 선언 ->
preload 함수에 플레이어 이미지 로드 -> create 함수에서 플레이어 출력
-> 애니메이션 선언 및 설정
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
var player;
function preload() {
// ... 생략 ...
game.load.spritesheet("player", "./donggo_ani.png", 32, 40); // 플레이어를를 기본32x40 크기로 설정. 'player' 이름으로 생성
}
function create() {
// ... 생략 ...
player = game.add.sprite(400, 300, "player");
game.physics.arcade.enable(player);
player.animations.add("left", [0, 1, 2], 10, true); // 0,1,2번째 프레임을 0.1초 단위로 반복하는 애니메이션 생성
player.animations.add("right", [4, 5, 6], 10, true); // 4,5,6번째 프레임을 0.1초 단위로 반복하는 애니메이션 생성
}
|
위와 같이 소스를 작성후 실행시켜 봅시다.
위 그림과 같이 가로 400, 세로 300 위치에 플레이어가 생성되었습니다.애니메이션 설정은 했지만 적용을 아직 안했기 때문에 첫번째 모습이 기본으로 출력되고 있습니다.
이제 움직임을 넣어보겠습니다. 순서는 아래와 같습니다.keyMove 변수 선언 -> 키보드 커서키 입력 이벤트 생성
-> update 함수에 플레이어 키보드 커서 이벤트 및 애니메이션 수행
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
// ... 생략 ...
var keyMove;
function create() {
// ... 생략 ...
keyMove = game.input.keyboard.createCursorKeys(); // 키보드 커서키 입력 이벤트 생성
}
function update() {
// 프레임워크에서 주기적으로 수행하는 함수
player.body.velocity.setTo(0, 0); // 관성을 0으로 설정
if (keyMove.left.isDown) {
player.body.velocity.x = -150; // player x좌표 위치를 -150 속도로 이동
player.animations.play("left"); // player에게 'left' 애니메이션 적용
} else if (keyMove.right.isDown) {
player.body.velocity.x = +150;
player.animations.play("right");
} else if (keyMove.up.isDown) {
player.body.velocity.y = -150;
player.animations.play("left");
} else if (keyMove.down.isDown) {
player.body.velocity.y = +150;
player.animations.play("right");
} else {
player.animations.stop(); // player에게 적용중인 애니메이션을 멈춘다.
player.frame = 3; // player의 frame을 3번째 프레임으로 설정한다.
}
}
|
|
위 소스에 대한 상세설명은 주석만으로 설명이되리라 생각하고 생략하겠습니다~.
위와 같이 소스를 추가후, 실행시켜 봅시다.
짜자자자자자잔~~~~모습은 이전과 달라진게 거의 없습니다. 플레이어의 기본 모습이 가운데 있는 모습으로 바뀐것뿐!
↑↓←→ 버튼을 눌러봅시다. 플레이어가 움직이시나요?
움직임과 함께 설정한 애니메이션도 작동하는것을 확인할수 있을겁니다.
하지만... 이상한점이 있지않나요...? 바로 대각선으로 이동이 안된다는것입니다.
대각선 움직임을 주기 위해서는 update 함수내 소스를 아래와 같이 수정해주세요.
if 조건만 추가되고 별내용은 없기때문에 그냥 복붙하시면 됩니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
function update() {
// 프레임워크에서 주기적으로 수행하는 함수
player.body.velocity.setTo(0, 0); // 관성을 0으로 설정
if (keyMove.left.isDown && keyMove.up.isDown) {
player.body.velocity.x = -150;
player.body.velocity.y = -150;
player.animations.play("left");
} else if (keyMove.left.isDown && keyMove.down.isDown) {
player.body.velocity.x = -150;
player.body.velocity.y = +150;
player.animations.play("left");
} else if (keyMove.right.isDown && keyMove.up.isDown) {
player.body.velocity.x = +150;
player.body.velocity.y = -150;
player.animations.play("right");
} else if (keyMove.right.isDown && keyMove.down.isDown) {
player.body.velocity.x = +150;
player.body.velocity.y = +150;
player.animations.play("right");
} else if (keyMove.left.isDown) {
player.body.velocity.x = -150; // player x좌표 위치를 -150 속도로 이동
player.animations.play("left"); // player에게 'left' 애니메이션 적용
} else if (keyMove.right.isDown) {
player.body.velocity.x = +150;
player.animations.play("right");
} else if (keyMove.up.isDown) {
player.body.velocity.y = -150;
player.animations.play("left");
} else if (keyMove.down.isDown) {
player.body.velocity.y = +150;
player.animations.play("right");
} else {
player.animations.stop(); // player에게 적용중인 애니메이션을 멈춘다.
player.frame = 3; // player의 frame을 3번째 프레임으로 설정한다.
}
}
|
|
소스 수정후 실행시키면 사방팔방 대각선으로도 이동되는걸 확인할 수 있습니다.ㅎㅎ
이제 오늘의 마지막 단계입니다.그건 바로 플레이어를 상자 밖 또는 게임틀 밖으로 나가는걸 막는것입니다.(아마 지금은 플레이어를 상자 밖 또는 게임틀 밖으로 이동될껍니다....ㅋㅋㅋㅋ)
소스를 아래와 같이 수정합니다.우선 update 함수 맨 위에
game.physics.arcade.collide(player, box); 라는 충돌 설정을 추가합니다.
|
1
2
3
4
5
|
function update() {
// 프레임워크에서 주기적으로 수행하는 함수
game.physics.arcade.collide(player, box); // player와 box가 충돌할수 있도록 설정
// ... 생략 ...
}
|
|
이전편에서 상자를 그려주는 부분 기억나시나요?이전 아래와 같이 되어있던 부분을
|
1
2
3
4
5
6
7
8
9
|
box = game.add.group(); // box 그룹 생성
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");
}
|
아래와 같이 변경해주면 됩니다.변경의 목적은 box 객체에 충돌속성을 부여하고 충돌했을때 움직이지 않게하기 위함입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
box = game.add.group(); // box 그룹 생성
box.enableBody = true; // box에 충돌속성을 설정합니다.
for (var i = 0; i < 20; i++) {
var rowBox = box.create(i*40, 80, "box");
rowBox.body.immovable = true; // box가 움직이지 못하도록 설정합니다.
rowBox = box.create(i*40, 600-40, "box");
rowBox.body.immovable = true; // box가 움직이지 못하도록 설정합니다.
}
for (var j = 3; j < 14; j++) {
var colBox = box.create(0, j*40, "box");
colBox.body.immovable = true;
colBox = box.create(800-40, j*40, "box");
colBox.body.immovable = true;
}
|
|
지금 진행속도를 봐서는 아마 5편쯤 최종 완성이 될것 같네요.
이상 3편을 마치겠습니다.
- 끝~~~~~ -
'개발' 카테고리의 다른 글
| 로또 번호 생성 (0) | 2016.01.26 |
|---|---|
| 메이븐(Maven) 기본 명령어 및 옵션 (0) | 2016.01.23 |
| 리눅스 tar, gz 압축, 해제 및 차이 (0) | 2016.01.23 |
| 윈도우 단축키 정리 (0) | 2016.01.20 |
| 리눅스 vi 에디터 명령어 정리 (0) | 2016.01.19 |