[GMS2]오각형 스테이터스 만들기
게임을 만들다 보면 오각형 형태로 된 스테이터스를 종종 보게되는데 그냥 도형 그리는 것이니까
쉽다고 생각하고 매번 까먹게 되어 필요한 순간에 시간을 낭비하게 됩니다.
게임에 따라서 크기나 스테이터스에 포함되는 내용도 다르기 때문에 기준이 되는 도형을 그리고
내부에 예쁜 라인과 성장에 따라 달라지는 오각형 그래프를 투명화 하는 기본적인 과정까지를
글로 남겨두고 혹시라도 도움이 될까 알고리즘을 설명할까 합니다.
먼저 배경 오각형을 만드는 함수를 만들자
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 | function drawPentagon(x, y, radius, steps, color) { // 팬타곤의 각도를 5등분한 각도로 설정 var angleOffset = 72 * pi / 180; // 각 꼭짓점 간의 각도는 72도 (2 * pi / 5) // 오각형의 각도를 5등분한 각도로 설정 var angleOffset = 72 * pi / 180; // 각 꼭짓점 간의 각도는 72도 (2 * pi / 5) // 팬타곤의 꼭짓점 좌표 계산 및 중심으로 라인 그리기 draw_set_color(color); for (var i = 0; i < 5; i++) { // 각 꼭짓점 좌표 계산 var angle = i * angleOffset – pi / 2; // 위쪽을 시작점으로 하기 위해 90도(π/2) 조정 var pointX = x + cos(angle) * radius; var pointY = y + sin(angle) * radius; // 꼭짓점에서 중심으로 라인 그리기 draw_line(pointX, pointY, x, y); } // 각도와 크기 비율에 따라 팬타곤을 점차적으로 축소하여 반복 그리기 for (var step = 0; step < steps; step++) { // 현재 단계에서의 팬타곤 크기 비율 var scale = 1 – (step / steps); // 색상 설정 및 팬타곤 테두리 그리기 시작 draw_set_color(color); draw_primitive_begin(pr_linestrip); // 각 꼭짓점 좌표를 계산하여 라인으로 연결 for (var i = 0; i < 5; i++) { var angle = i * angleOffset – pi / 2; var pointX = x + cos(angle) * radius * scale; var pointY = y + sin(angle) * radius * scale; draw_vertex(pointX, pointY); } // 마지막 점을 첫 번째 점으로 연결하여 닫힌 팬타곤을 완성 var firstAngle = –pi / 2; // 첫 번째 꼭짓점의 각도 var firstX = x + cos(firstAngle) * radius * scale; var firstY = y + sin(firstAngle) * radius * scale; draw_vertex(firstX, firstY); draw_primitive_end(); } } | cs |
[코드 설명]
기본적으로 x, y는 오각형 도형의 중심 좌표이고 radius는 가장 큰 오각형의 반지름을 의미합니다.
steps는 오각형 도형을 예쁘게 단계를 나눠 그려주기 위함이므로 필요 없다면, 이 코드는 무시해도 됩니다.
이후 scale 변수는 현재 단계(step)의 크기 비율로 반복하여 줄어들어 팬타곤을 작게 만들고
draw_primitive_begin(pr_linestrip) 이라고 쓰여진 게임메이커 스튜디오2 내장 함수를 사용하여
오각형의 테두리를 만듭니다. 각 반복마다 점점 작은 오각형이 그려지고 마지막 꼭짓점을 첫 번째
꼭짓점과 연결해 닫힌 오각형을 만들어주는 것이 전체 코드의 내용입니다. (색상 설정에 대한 것은 설명 생략)
오브젝트를 하나 만든 후 그리기 이벤트 코드에 작성
drawPentagon(x좌표, y좌표, 반지름, 단계, 색상);
실제 스테이터스 오각형을 만드는 함수를 만들자
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 | function drawPentagonStatus(x, y, radius, value1, value2, value3, value4, value5, color, alpha) { // 각도를 5각형의 각 점을 기준으로 계산 var angleOffset = 72 * pi / 180; // 72도 = 2 * pi / 5 (5각형) // 각 수치를 배열에 저장 var values = [value1, value2, value3, value4, value5]; // 상태바를 표시할 좌표를 계산하여 배열에 저장 var points = []; for (var i = 0; i < 5; i++) { var angle = i * angleOffset – pi / 2; // 팬타곤 상단이 위쪽을 향하도록 var value = values[i]; // 배열에서 값을 가져옴 var pointX = x + cos(angle) * radius * value; var pointY = y + sin(angle) * radius * value; array_push(points, [pointX, pointY]); } // 상태바 색상 및 알파값 설정 draw_set_color(color); draw_set_alpha(alpha); // 팬타곤 그리기 draw_primitive_begin(pr_trianglestrip); for (var i = 0; i < array_length(points); i++) { var nextPoint = points[(i + 1) mod array_length(points)]; draw_vertex(x, y); // 중앙점 draw_vertex(points[i][0], points[i][1]); // 현재 점 draw_vertex(nextPoint[0], nextPoint[1]); // 다음 점 } draw_primitive_end(); // 알파값을 원래 상태로 복원 (필요 시 다른 그리기 요소에 영향을 주지 않도록) draw_set_alpha(1); } | cs |
[코드 설명]
이미 오각형을 만드는 함수를 만들어 보았기에 비슷한 형태로 만들면 되지만 여기서 중요한 것은
5개의 값을 배열로 저장해야 한다는 것이 특징입니다.
value1~value5까지의 값을 저장하고 각 꼭짓점 좌표는 angle에 따라서 계산되며 radius * value로
각 꼭짓점의 상대적인 크기를 반영하여 그려줍니다. 계산된 pointX, pointY 좌표는 points 배열에
저장되고 나머지는 예쁘게 보이기 위해서 색상의 알파값을 추가한 것이 전부입니다.
아까 만든 오브젝트의 그리기 이벤트 코드에 추가 작성
drawPentagonStatus(1080, 240, 100, 0.6, 0.3, 0.4, 0.5, 0.2, c_orange,0.5);
대충 원하는 것들을 텍스트로 써주고 실행해보자
퍼센트나 그런 계산은 프로그래밍으로 하지 않았으며 그냥 포토샵에서 있어 보이려고 추가한 것이며
위에서 설명한 코드만으로 예쁜 오각형 상태 그래프를 만들 수 있습니다.
배경이 되는 그래프 자체를 그림으로 띄운 후 변화하는 오각형 그래프만 프로그래밍으로 처리 해도 되지만
해상도가 변화하거나 혹은 그래프 자체의 크기를 변경해야 한다면 그림을 계속 수정하면서 만들어야 하기에
비효율적입니다. (크기가 변동하지 않는다면 그림으로 디자인 하는 것이 더 예쁨)
오늘은 내가 기억을 자꾸 잊어버리기에 글로 남길 겸 알고리즘에 대한 팁 설명으로 글을 마치며
혹시라도 더 좋은 방식과 편한 코드가 있다면 댓글로 추가 정보를 알려주시면 감사하겠습니다.
