게임메이커 스튜디오 2 시작하기 04 - 게임 UI

시작 및 종료 화면을 포함한 게임 UI를 만듭니다.

2022-06-11

gamedevgamemakerstudio2gmsgame ui

참고 문헌: 게임메이커 스튜디오 공식 동영상 My First Game - Intro to GameMaker - Space Rocks (Part 4) 바로가기

시작 화면 및 종료 화면

게임 화면 외 UI 화면은 별도의 룸을 만들어 구성합니다. 현재 게임이 이루어지는 rm_game 외에 rm_startrm_gameover를 생성합니다.

게임 오브젝트 생성

게임 전체를 관리하는 게임 관리 오브젝트 obj_game을 생성합니다. 이 오브젝트는 스프라이트가 없으며, 룸에 포함시켜야 하지만 눈에 보이지는 않습니다. 이 오브젝트에서 게임 전체를 관리합니다. 생성 이벤트에서 생명 수와 점수를 기록하는 변수를 만들고, 텍스트에 사용할 서체도 설정합니다. 서체는 에셋 패널에서 별도로 fnt_gamefont를 생성하여 실제 폰트 파일과 연결합니다.

score = 0
lives = 3

draw_set_font(fnt_gamefont)

게임 UI 작성

이벤트 중에 그리기 GUI가 있습니다. 이 이벤트 파일에 switch 문을 이용해 각 룸별 텍스트를 설정합니다.

// 점수와 생명 수를 표시하는 텍스트의 x, y 좌표
SCORE_X = 10
SCORE_Y = 10
LIVES_X = 10 
LIVES_Y = SCORE_Y + 30

// 텍스트
GAME_TITLE = "SPACE ADVENTURE"
GAME_INSTRUCTION = "Press Enter to begin your adventure"
GAME_OVER_TITLE = "GAME OVER"
GAME_OVER_INSTRUCTION = "Press Enter to restart your adventure"

// 현재 룸의 위치에 따라 각각 다른 텍스트를 화면에 그리기
switch(room) {
    // 게임 화면에 점수와 생명 수 표시
    case rm_game:
        // 텍스트 그리기 기본 함수
        draw_text(SCORE_X, SCORE_Y, "Score: " + string(score))
        draw_text(LIVES_X, LIVES_Y, "Lives: " + string(lives))
        break
    // 시작 화면
    case rm_start:
        // 텍스트 정렬
        draw_set_halign(fa_center) 
        // 색깔 있는 텍스트 
        draw_text_transformed_color(room_width / 2, room_height / 2 - 50, 
            GAME_TITLE, 3, 3, 0, c_yellow, c_blue, c_gray, c_black, 1)
        draw_text(room_width / 2, room_height / 2 + 50, GAME_INSTRUCTION)
        draw_set_halign(fa_left)
        break
    case rm_gameover:
        draw_set_halign(fa_center)
        draw_text_transformed_color(room_width / 2, room_height / 2 - 50, 
            GAME_OVER_TITLE, 3, 3, 0, c_yellow, c_blue, c_gray, c_black, 1)
        draw_text(room_width / 2, room_height / 2 + 50, GAME_OVER_INSTRUCTION)
        draw_set_halign(fa_left)
        break
    default:
        break
}

룸 이동 설정

스텝 이벤트에서는 키보드 입력에 따라 각 룸으로 이동하는 코드를 작성합니다.

// 어디에서든 엔터를 누르면
if (keyboard_check_pressed(vk_enter)) {
    switch(room) {
        // 현재 게임 시작 화면일 때
        case rm_start:
            // 다음 룸으로 이동
            room_goto_next()    
            break
        // 현재 게임 종료 화면일 때
        case rm_gameover:
            // 게임 전체 재시작 (시작 화면으로 이동)
            game_restart()
            break
    }
}

if (keyboard_check_pressed(vk_escape)) {
    switch(room) {
        case rm_game:
            // 특정 룸으로 이동
            room_goto(rm_gameover)
            break
    }
}

점수와 생명 변수 연결

게임 내 특정 오브젝트 코드에서, 점수 및 생명 수를 업데이트하면 됩니다. 예를 들어 우주선이 소행성과 충돌했을 때 생명을 하나 줄이는 코드는 다음과 같습니다. obj_rocket 오브젝트에서 obj_asteroid 오브젝트와 충돌하는 이벤트에 다음 코드를 추가합니다.

// 생명이 2개 이상일 때는 1개를 줄임
if (lives > 1) {
    lives -= 1

    // obj_game 오브젝트의 코드를 실행
    with(obj_game) {
        room_restart()
    }
    
} else {
    with(obj_game) {
        room_goto(rm_gameover)
    }
}

점수는 총알 오브젝트 obj_bullet에서 obj_asteroid 오브젝트와 충돌하는 이벤트에 다음 코드 한 줄만 추가하면 됩니다.

score += 10

이러한 원리를 바탕으로, 더 복잡한 게임 레벨과 화면, UI를 만들 수 있을 것 같습니다. 머릿속에 어렴풋이 구상은 할 수 있는데, 직접 해봐야 알겠죠.