surface_create_ext 함수 설명
surface_create_ext 함수는 웹 페이지에 이미 존재하는 캔버스 요소에 서피스를 연결할 수 있게 해줍니다. 이를 통해 게임의 여러 부분을 페이지 내 다양한 위치에 그릴 수 있습니다. 이 함수를 사용하기 위해서는 게임의 *.html 페이지 내에서 캔버스 요소를 올바르게 정의해야 하며, 서피스를 생성할 때 사용할 크기와 이름이 일치해야 합니다.
캔버스 설정 예시
아래 이미지는 세 개의 캔버스 요소가 설정된 페이지의 예시입니다.
| 캔버스 이름 | 크기 |
|---|---|
| main | 800x600 |
| surface1 | 192x550 |
| surface2 | 608x186 |
페이지 레이아웃을 만드는 것은 까다로울 수 있지만, 레이아웃을 완성한 후에는 이 HTML 파일을 게임 옵션의 HTML5 탭을 사용하여 기본 페이지 파일로 설정할 수 있습니다. 다음 단계는 방과 뷰를 설정하는 것입니다. 각 서피스는 특정 뷰와 연결되어 게임 이미지를 "캡처"해야 합니다 (뷰 변수: view_surface_id[0...7]).
아래 이미지는 위의 캔버스 예시에 대한 게임 방 설정을 보여줍니다.
서피스 생성
이제 이 함수를 사용하여 서피스를 생성할 수 있습니다. 서피스의 이름은 캔버스 요소의 이름과 같아야 하며, 크기는 해당 캔버스의 크기와 일치해야 합니다. 함수는 서피스에 대한 참조를 반환하며, 이는 향후 함수 호출을 위해 변수에 저장해야 합니다. 서피스가 처음 생성될 때는 "노이즈"가 포함될 수 있으므로, 사용 전에 draw_clear_alpha와 같은 함수를 사용하여 서피스를 지우는 것이 좋습니다.
이 함수는 항상 surface_rgba8unorm 형식의 서피스를 생성합니다. 이 함수는 HTML5 모듈에서만 사용할 수 있습니다.
문법
surface_create_ext(name, w, h);
인수 설명
| 인수 | 타입 | 설명 |
|---|---|---|
| name | String | 서피스를 연결할 캔버스 요소의 이름 |
| w | Real | 생성할 서피스의 너비 |
| h | Real | 생성할 서피스의 높이 |
반환값
- 서피스 (문제가 발생하면 -1)
활용 예제
아래는 두 개의 서로 다른 크기의 서피스를 생성하고, 각각을 다른 캔버스 요소에 할당한 코드 예제입니다.
s1 = surface_create_ext("surface1", 192, 550);
s2 = surface_create_ext("surface2", 608, 186);
view_surface_id[1] = s1;
view_surface_id[2] = s2;
위 코드는 서로 다른 크기의 두 개의 서피스를 생성하고, 각 서피스를 다른 캔버스 요소에 할당한 후, 해당 서피스를 두 개의 뷰에 할당하여 방의 올바른 부분을 캡처합니다.
추가 활용 예제
서피스를 생성하고 사용하는 다양한 예제는 다음과 같습니다.
// 서피스 생성
s3 = surface_create_ext("surface3", 300, 400);
draw_clear_alpha(c_white, 0); // 서피스 초기화
// 서피스에 그리기
surface_set_target(s3);
draw_rectangle(0, 0, 300, 400, c_red, false);
surface_reset_target();
// 서피스 사용
draw_surface(s3, 100, 100);
// 서피스 크기 조정
s4 = surface_create_ext("surface4", 500, 300);
view_surface_id[3] = s4;
// 서피스에 이미지 그리기
surface_set_target(s4);
draw_surface(s1, 0, 0);
surface_reset_target();
이러한 예제들은 surface_create_ext 함수를 활용하여 서피스를 생성하고, 그 위에 다양한 그래픽 요소를 그리는 방법을 보여줍니다.