게이지 이미지를 먼저 준비해주었어요. gauge_bg.png에는 게이지의 배경이 되는 이미지를, gauge_fill.png에는 줄어들거나 늘어나는 게이지바에 해당하는 이미지를 만들었습니다. /img/pictures 폴더안에 넣어두었어요. 이제 이 이미지들을 스크립트에서 불러와 화면에 표시해 볼 준비가 완료입니다.

이미지를 띄우는 코드의 기본형입니다.

각 항목이 어떤 역할을 하는지 하나씩 살펴봐요.

• pictureId 표시할 그림의 번호예요.
  번호 1~100까지 사용할 수 있어요.
  이미지가 겹쳐있다면 번호가 작은 이미지가 더 아래쪽에 깔려요.
  1이 가장 아래에,  100이 가장 위에 위치합니다.
• name 표시할 그림 파일 이름이에요. 확장자(.png)는 입력하지 않아요.
  예) gauge_bg (o) gauge_bg.png (x)
• origin 그림의 중심점을 정해요.
  0은 왼쪽 위 모서리, 1은 그림의 가운데를
  이동이나 확대/축소 등의 기준으로 삼아요.
• x 화면 위에서 그림이 표시될 위치예요.
  단위는 픽셀(px)이고 가로 좌표값을 말합니다.
  숫자가 클 수록 오른쪽으로 이동해요.
• y 화면 위에서 그림이 표시될 위치예요.
  단위는 픽셀(px)이고 세로 좌표값을 말합니다.
  숫자가 클 수록 아래로 이동해요.
• scaleX 그림의 가로 크기를 조절하는 항목이에요.
  100은 100%를 의미하고 이미지의 원래 넓이로 표시돼요.
• scaleY 그림의 세로 크기를 조절하는 항목이에요.
  100은 100%를 의미하고 이미지의 원래 높이로 표시돼요.
  scaleY만 조절하면 세로로 차오르는 게이지도 쉽게 만들 수 있어요.
• opacity 투명도를 설정해요.
  0에서 부터 255 사이의 숫자를 지정할 수 있어요.
  0은 완전히 투명해서 보이지 않고, 255는 완전 불투명해요.
• blendMode 이미지가 배경과 어떻게 섞여 보일지를 정하는 옵션이에요.
  • 0 : 일반 모드
  • 1 : 더하기
  • 2 : 곱하기 (어둡게)
  • 3 : 스크린 (밝게)

이제 이 항목들을 차례대로 적어서 준비한 게이지 이미지를 화면에 표시해볼거예요. 차근차근 하나씩 작성해봐요.

위의 스크립트를 이용해 준비한 이미지를 화면 왼쪽 상단에 위치하게 띄웠어요.

먼저 1번 이미지로 게이지 배경 이미지(gauge_bg)를 가장 밑에 두었어요. 그림은 화면의 왼쪽과 위쪽에서 각각 30px씩 떨어진 위치에 놓았고, 가로 세로 크기는 둘다 100%으로 이미지의 원래 크기 그대로 보여지게 설정했어요. 불투명도는 255(완전 불투명)로 화면에 또렷하게 보이도록 했고, 합성모드 는 일반 모드인 0으로 설정해 두었어요.

그 위에 이미지 번호 2번을 사용해 게이지 바 이미지(gauge_fill)를 1번 이미지 위에 올려두었어요. 위치도 게이지 바 배경과 동일하게 왼쪽 상단에서 30픽셀씩 떨어지도록 맞췄어요. 다만 게이지 바는 아직 채워지지 않은 0% 상태로 표현해줘야 하기 때문에 조금 특별한 설정을 해줬어요.

• 게이지 바 이미지의 높이가 64px이에요. 게이지가 밑에서부터 차오를 수 있게 할 수 있게 y좌표를 64픽셀 만큼 아래로 내려 기준점을 아래에 놓아둬요. 기본 여백인 30에 64를 더해 y = 94 로 설정했어요.

• 그리고 scaleY값을 0으로 지정해, 이미지가 세로 방향으로 전혀 보이지 않도록 숨겨 주었어요. 이렇게 하면 화면에서는 아무것도 보이지 않는 게이지가 텅 빈 상태로 시작하게 되는 거예요. 이제 이 상태에서 scaleY값을 점점 늘려주면 게이지가 아래에서 위로 서서히 차오르는 듯한 연출을 할 수 있어요.

이제 게이지가 무엇을 기준으로 얼마나 차올라야 하는지를 정해볼 차례예요. 이를 위해 세가지 변수를 만들어줬어요.

• goal : 목표 값 (예: 100점)
• done : 지금까지 달성한 값 (예: 현재 점수)
• rate : 달성률. done이 goal에서 어느 정도 차지하고 있는지를 퍼센트로 계산해요. (rate = done / goal)

예를 들어 목표가 100점이고 현재 점수가 75점이라면 달성률은 0.75, 즉 75%가 돼요. 이 rate 값은 게이지의 세로 크기(scaleY)를 계산할 때 중요한 기준이 돼요.

예를 들어 아래와 같이 변수를 설정해 볼 수 있어요.

하지만 게이지, 스케일, 투명도, 퍼센트같은 요소들은 보통 0~1 사이의 값만 제대로 작동해요. 그래서 이런 값에는 0보다 작거나 1보다 큰 값이 들어가면 안돼요.

이런 문제를 방지하기 위해서는 값의 범위를 0~1 사이로 강제로 제한해주는 안전장치를 넣어주는 것이 좋아요. 위의 코드는 아주 자주 쓰이는 “비율 보정” 공식입니다. 하나씩 살펴볼게요.

rate값이 1보다 크면 1로 줄이고, 그렇지 않으면 원래 값 그대로 둡니다. 즉, 최댓값은 1로 제한하는 거예요. (예 : 1.2 → 1)

그다음, 위에서 나온 값이 0보다 작으면 0으로 올려주고, 그렇지 않으면 그대로 둡니다. 즉, 최솟값은 0으로 제한하게 되죠. (예 : -0.1 → 0)

이 두 단계를 거치면 결과적으로 1보다 크면 1로 바뀌고 음수는 0으로 바뀌며, 0~1 사이 값은 그대로 유지돼어 rate값이 무조건 0이상 1이하로 안전하게 조정돼요. 덕분에 게이지가 너무 넘치거나, 화면 아래로 사라지는 문제 없이 안정적으로 표현할 수 있어요.

게임 안에 저장된 변수에서 값을 가져오려면 위 처럼 작성해요.

여기서 사용된 $gameVariables.value(n)은 게임 안의 변수 값을 가져오는 공식이에요. n에는 변수 번호를 입력하면 돼요.

예를 들어 변수 101번이 목표(goal), 변수 102번이 완료값(done)이라면 위 코드처럼 각각 불러올 수 있어요.

게이지가 화면에서 올바른 위치에 자연스럽게 차오르도록 이미지 크기를 기준으로 위치를 계산해줄거예요.

먼저 작업을 편하게 하기 위해 게이지 바 이미지의 가로와 세로 크기를 변수에 입력했어요. 이렇게 하면 나중에 x, y 좌표나 scaleY를 조절할 때 매번 수치를 직접 입력하지 않아도 되고, 이미지 사이즈를 바꾸더라도 변수만 수정하면 되니까 훨씬 편리해요.

아까 게이지 배경 이미지와 게이지바 이미지를 화면에 띄울 때 게임 화면과 이미지 사이에 적당한 여백 (30px)를 주었는데, 이걸 margin이라는 이름의 변수로 만들어 값을 저장해두고 x, y 좌표값 계산을 편하게 만들어줄거예요.

이번에는 이미지의 x 좌표값을 담을 변수를 만들어주었어요. 지금은 단순히 margin + 0 계산했지만, 이렇게 따로 변수를 만들어두면 나중에 위치를 조정해야 할 일이 생겼을 때 더 쉽게 수정할 수 있어서 좋아요. 꼭 필요한 건 아니지만, 코드를 더 깔금하게 관리하고 가독성과 유지 보수에 좋아요.

이 코드는 게이지가 아래에서 위로 차오르는 연출을 위해 계산한 y 좌표입니다.

그림을 origin(중심점)을 0으로 설정했기 대문에 왼쪽 위 꼭지점을 기준으로 위에서 아래 방향으로 크기가 커지고 줄어들어요.우리는 아래에서 위로 차오르는 느낌을 만들고 싶기 때문에 게이지 비율에 따라 y좌표를 위로 올려줘야 해요.

1. oringinalPicH
   게이지 바 이미지의 전체 높이
2. originalPicH * rate
   현재 달성률에 따라 게이지가 얼마나 차올랐는지를 계산해요.
   (달성률을 적용한 게이지바 높이)
   예를 들어 rate가 0.5라면 (달성률이 50%), 게이지의 절반인 32px만큼 차오른 상태예요.
3. originalPicH – originalPicH * rate
   이미지 파일의 높이에서 게이지 높이를 빼면 게이지가 위치해야할 y값을 알 수 있어요. 아래에서 올라오는 게이지 바는 길어지면서 좌측상단에 모서리에 위치한 중심점 위치가 고정되지 않고 계속 높아지기 때문에 변수를 사용해줘요.
4. margin + originalPicH – originalPicH * rate
   마지막으로 화면 끝에서 일정 간격을 띄우기 위해 우리가 설정한 margin (여백값)을 더해주면 그림의 y좌표값 완성입니다.

이 코드는 게이지 바 이미지의 세로 크기 비율, 즉 게이지 바가 얼마나 높이 차오를지를 백분율로 계산해주는 부분이에요.

RPG Maker MZ에서는 이미지 크기를 조절할때 픽셀(px)단위가 아닌 퍼센트(%) 값을 사용해요.

• rate는 0~1 사이의 값.
• 100은 이미지의 원래 크기 (100%)

따라서 rate에 100을 곱하면 게이지가 차오른 비율에 따라 이미지가 정확히 그만큼만 보이도록 만들 수 있어요.

예시)

• rate = 0.5 → sacleY = 50 (0.5 * 100)
  이미지의 길이의 50%
• rate = 1 → scaleY = 100 (1 * 100)
  이미지 원래 사이즈로 표시

이렇게 계산된 scaleY값을 사용하면 게이지가 아래에서 위로 자연스럽게 차오르는 표현이 가능해져요.

이미지를 움직이는 코드의 기본형이에요.
이전의 showPicture와 거의 비슷하지만 달라진 점이 몇 가지 았어요.

• name 그림 파일명이 사라졌어요.
  이미 showPicture로 화면에 띄워둔 그림을 그대로 움직이기만 하는 거기 때문에
  파일 이름은 다시 입력할 필요가 없어요.
• frames 움직이는 데 걸리는 시간을 뜻해요.
  단위는 프레임이고 60프레임 = 1초예요.
  예를들어 30 frames이면 0.5초 동안 부드럽게 움직여요.
• easing 애니메이션의 가속 효과를 설정해요. 숫자에 따라 움직임의 느낌이 달라져요.
  • 0 : 일정한 속도
  • 1 : 점점 빨라지는 효과
  • 2 : 점점 느려지는 효과
  • 3 : 느리게 시작 → 빨라짐 → 느려짐

이 frames과 easing 옵션을 잘 활용하면, 게이지가 부드럽고 생동감 있게 차오르는 연출을 만들 수 있어요.

앞서 4단계에서 만들어준 변수들을 기본형에 그대로 넣어주었어요.

• picX : 게이지 바의 화면에서의 가로 위치예요.
• picY : 달성률에 따라 계산된 화면에서의 세로 위치예요.
• scaleY : 달성률에 따라 게이지의 채워진 정도의 값이예요.
• 30 : 애니메이션 시간은 30 프레임, 즉 0.5초 동안 부드럽게 차오르게 설정했어요.
• 1 : easing은 1로 지정해 점점 빨라지는 자연스러운 효과를 주었어요.

이제 이 코드를 실행하면 게이지가 아래에서 위로 부드럽게 차오르는 연출을 완성할 수 있어요.