Life of YOUNGGYU: https://duckbankbok.com
안녕하세요! 이번 포스팅에서는 웹 기반(HTML, CSS, JavaScript) RPG Life of YOUNGGYU를 만들어 봤습니다. Life of YOUNGGYU는 집 안 곳곳에 있는 NPC들을 통해 저를 소개하는 RPG입니다. 이 게임을 만들게 된 계기는 나만의 특별한 자기소개 페이지를 만들어 보고 싶다는 생각을 하던 중 웹을 통한 자기소개 페이지 겸 게임인 셀소.com을 알게 되었고, 저도 요새 게임 개발을 취미로 하고 있기 때문에 자기소개를 겸한 게임을 제 도메인에 서비스 해보면 좋을 것 같다는 생각이 들어 Life of YOUNGGYU를 만들게 되었습니다.
개발 과정
Life of YOUNGGYU는 게임 프레임워크를 사용하지 않고 순수하게 HTML의 canvas 태그와 JavaScript로만 개발된 게임입니다. 게임의 구동 원리에 대해 간략히 소개하자면 캔버스(canvas) 태그를 통해 게임의 맵을 그릴 영역을 지정해주고, JavaScript를 통해 해당 캔버스의 이미지를 유저의 행동에 따라 바꾸는 방식으로 게임이 진행됩니다. 이렇게 개발된 게임의 장점은 커스터마이징이 자유롭다는 점인데, 반대로 말하면 게임의 모든 부분을 직접 구현해야 된다는 단점이 있습니다. 예를 들어, 플레이어를 밑으로 이동시키기 위해서는 아래 방향키를 인식하여 플레이어가 이동할 공간에 다른 NPC가 있거나 이동할 수 없는 공간인지 체크하고, 플레이어가 이동할 수 있는 공간임이 확인되면 플레이어를 밑으로 이동시킵니다. 저는 플레이어를 직접 이동시키는 방식이 아니라 플레이어를 화면 중앙에 고정시키고, 다른 모든 물체를 위로 이동시켜서 플레이어가 밑으로 이동하는 것처럼 보이게 구현했습니다. 다음은 JavaScript 예시 코드입니다.
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
if (keys.arrowDown.pressed && lastKey === 'ArrowDown') {
player.moving = true
player.image = player.sprites.down
checkForCharacterCollision({
characters,
player,
characterOffset: { x: 0, y: -5 }
})
for (let i = 0; i < boundaries.length; i++) {
const boundary = boundaries[i]
if (
rectangularCollision({
rectangle1: player,
rectangle2: {...boundary, position: {
x: boundary.position.x,
y: boundary.position.y - 5
}}
})
) {
moving = false
break
}
}
if (moving)
movables.forEach((movable) => {
movable.position.y -= 5
})
}
또한 아래로 이동시 다음의 이미지를 6등분한 프레임들을 일정 시간마다 바꿔서 걷는 애니메이션을 추가해 줌으로써 생동감을 추가합니다.
p.s. 더 자세한 게임 구현에 대한 설명이 필요하신 분들은 레퍼런스 항목에서 유튜버 Chris Courses의 튜토리얼 영상을 참조해 주세요:)
Life of YOUNGGYU와 같은 top-down RPG를 직접 개발하면서 느낀 것은 게임 개발에 정답은 없다는 점입니다. 여러분들이 Life of YOUNGGYU같은 게임을 개발하고 싶으시다면 RPG Maker 시리즈 프로그램을 통해 본 포스트에서 소개한 플레이어 이동뿐만 아니라 인터페이스, 전투 등 다양한 시스템들을 복잡한 코드없이 손쉽게 구현하실 수 있습니다. 또한, 다양한 애니메이션 효과나 물리 엔진 등이 구현되어 있는 웹 게임 프레임워크 Phaser를 통해 RPG가 아닌 다양한 장르의 웹 게임 개발도 가능합니다. 하지만 여러분들이 웹 개발을 공부하고 계시거나 하나하나 직접 구현하는 것에 매력을 느끼시는 분이라면 저처럼 HTML의 canvas 태그와 JavaScript만 사용하여 RPG를 만들어 보는 것도 좋은 경험이 될 것 같습니다:)