리더보드 광고


[GM:S Tutorial] 마인크래프트 같은 HP 표현하기 게임메이커 따라하기



이거 만드는 겁니다 -> http://randomachi.egloos.com/6338854



HP로 쓸 이미지를 준비합니다.

이번에 쓸 이미지 입니다.

사용할 이미지가 꼭 5프레임이 아니여도 됩니다. 적어도 2프레임 이상이기만 하면 됩니다.

이름은 변경하지 않고 그냥 쓰겠습니다. (sprite0)





오브젝트를 하나 추가한뒤 Create 와 Draw 이벤트를 추가합니다.





Create 이벤트에 Excute Code 를 추가합니다.



아래와 같이 적고 닫습니다.
  1. hp_x = x;
  2. hp_y = y;
  3. hp_image = sprite0;
  4. space = sprite_get_width(hp_image) + 2;
  5. image_count = sprite_get_number(hp_image) - 1;
  6. hp_count = 8;
  7. hp = hp_count * image_count;

hp_x, hp_y 하트를 그리는 시작지점을 정합니다.


hp_image = sprite0;
hp_image  를 하트의 ID로 정합니다.


space = sprite_get_width(hp_image) + 2;
이전 하트부터 다음 하트까지의 거리입니다.
(파란 십자가는 이미지의 (0,0) 지점 입니다.




image_count = sprite_get_number(hp_image) - 1;
hp_image의 이미지 개수를 가져옵니다.
5장의 이미지 이지만 image 0 부터 4까지 사용 할 것이므로 -1 해줍니다.




hp_count = 8;
그릴 하트의 개수를 정합니다.
8개를 그립니다.




hp = hp_count * image_count;
( 이미지 수 X  하트 수 )로 HP를 설정합니다.






이제 Draw 이벤트로 이동합니다.
Execute Code 를 추가합니다.



아래와 같이 적고 닫습니다.
  1. var i = 0;
  2. repeat(hp_count) {
  3.     if (i > hp/image_count) {
  4.         draw_sprite(sprite0, 0, hp_x + space * i,  hp_y);
  5.     } else if ( i == floor(hp/image_count)) {
  6.         draw_sprite(sprite0, hp%image_count, hp_x + space * i,  hp_y);
  7.     } else {
  8.         draw_sprite(sprite0, image_count, hp_x + space * i, hp_y);
  9.     i += 1;
  10. }

var i = 0;        
repeat(hp_count) {
    ...
    ...
    ...
    i += 1;
}

repeat(A) {} 는 {}안의 내용을 A번 만큼 반복합니다.
hp_count 는 8 이므로 8번 반복합니다.
  
{} 내용이 한번씩 끝날때마다 i 는 1증가합니다.




if (i > hp/image_count) {
    draw_sprite(sprite0, 0, hp_x + space * i,  hp_y);
} 
i 가 hp/image_count 보다 크다면 하트이미지0번(빈하트)을 그립니다.




else if ( i == floor(hp/image_count)) {
    draw_sprite(sprite0, hp%image_count, hp_x + space * i,  hp_y);
} 
i 가 floor(hp/image_count) 랑 같으면 hp%image_count 번째 하트이미지를 그립니다.
floor()
는 내림입니다.
floor(0.7= 0;

hp%image_count
는 hp를 image_count 로 나눈 나머지 입니다.
image_count = 4
hp = 5
이면 
hp%image_count = 1
이 됩니다.


else {
    draw_sprite(sprite0, image_count, hp_x + space * i, hp_y);
}

이도 아니고 저도 아니면 가득찬 image_count 번째 하트이미지(가득찬 하트)를 그립니다.





이제 테스트할 room을 만들어 줍니다.
보기좋게 하기위해서 SnapX, Y 는 16, 16 으로
Width 와 Height 는 176, 48 로 했습니다.

룸에 오브젝트를 배치한뒤 F5를 눌러 실행시켜 봅니다.

8개의 하트가 그려지는 것을 볼 수 있습니다.
하지만 정상적으로 하트가 줄어드는 지는 확인할 수 없습니다.

확인하기위해 다시 오브젝트 프로퍼티를 열고 Draw 이벤트로 이동합니다.
(Step 이벤트를 사용해도 무관합니다)

Excute Code 를 열고 코드를 추가합니다.




hp += mouse_wheel_up() - mouse_wheel_down();

mouse_wheel_up();
 마우스 휠을 올리면 1이 됩니다.

mouse_wheel_down();
마우스 휠을 내리면 1이 됩니다.

mouse_wheel_up() - mouse_wheel_down();

휠을 올리면 
1 - 0 = 1

휠을 내리면
0 - 1 = -1

이 됩니다.

hp += mouse_wheel_up() - mouse_wheel_down();
휠을 올리면 hp 에 1을 더하고
휠을 내리면 hp 에 1을 뺍니다.




추가하셨으면 에디터를 닫고 F5를 눌러 실행시킨뒤 휠을 거침없이 돌려 봅니다.

이미지가 변하는 모습을 볼 수 있습니다.




핑백

덧글

댓글 입력 영역


통계 위젯 (화이트)

410
48
6479

사이드 광고