HTML5 코드 주입
HTML5 코드 주입을 통해 게임의 index.html 파일에 사용자 정의 HTML을 추가할 수 있습니다. 이는 확장 프로그램의 편집기에서 "Platform Settings" 아래의 "HTML5"를 클릭하여 수행할 수 있습니다.
삽입 태그
"Code Injection" 창에서는 index.html 파일에 사용자 정의 HTML을 추가할 수 있습니다. 이러한 HTML은 다음 태그를 사용하여 index.html 파일의 다양한 부분에 삽입됩니다:
| 태그 | 설명 |
|---|---|
| GM_HTML5_PreHead | <head> 태그 뒤에 HTML이 삽입됩니다. |
| GM_HTML5_PostHead | </head> 태그 뒤에 HTML이 삽입됩니다. |
| GM_HTML5_PreStyle | <head></head> 내부에, 그러나 <style> 태그 앞에 HTML이 삽입됩니다. |
| GM_HTML5_PostStyle | <head></head> 내부에, 그러나 <style> 태그 뒤에 HTML이 삽입됩니다. |
| GM_HTML5_PreBody | <body> 태그 앞에 HTML이 삽입됩니다. |
| GM_HTML5_PostBody | </body> 태그 뒤에 HTML이 삽입됩니다. |
여러 확장 프로그램이 동일한 태그에 코드를 주입할 수 있지만, 최종 HTML 파일에 삽입되는 순서는 보장되지 않습니다.
변수 사용
주입된 HTML5 코드 내에서 GameMaker가 제공하는 변수를 사용할 수 있습니다. 이러한 변수는 ${ }로 감싸져 있습니다. 또한, ${YYEXTOPT_HTML5Injection_OPTIONNAME} 구문을 사용하여 사용자 정의 확장 옵션을 읽을 수 있습니다.
다음은 ${VARIABLE} 구문과 함께 사용할 수 있는 내장 변수입니다:
| 변수 | 설명 |
|---|---|
| GM_HTML5_BrowserTitle | 브라우저 창의 제목 |
| GM_HTML5_BackgroundColour | 페이지의 배경 색상 |
| GM_HTML5_GameWidth | 게임 캔버스의 너비 (픽셀 단위) |
| GM_HTML5_GameHeight | 게임 캔버스의 높이 (픽셀 단위) |
| GM_HTML5_GameFolder | HTML 파일이 포함된 폴더의 이름 |
| GM_HTML5_GameFilename | HTML 파일의 이름 |
| GM_HTML5_CacheBust | 캐시 무효화를 위한 랜덤 값; 사용자 정의 링크의 URL 매개변수로 추가하여 브라우저가 파일의 캐시된 버전을 가져오지 않도록 할 수 있습니다. |
템플릿 HTML 파일
템플릿 index.html 파일은 runtime 디렉토리의 runtime-[version]/html5/index.html에서 가져올 수 있습니다. 여기서 태그가 삽입되는 위치를 이해하기 위해 템플릿 파일을 볼 수 있습니다. 수정된 복사본을 만들어 기본 파일 대신 사용할 수 있으며, 이를 포함된 파일로 추가하고 HTML5 게임 옵션에서 선택할 수 있습니다.
템플릿 HTML 파일에는 GM_HTML5_Inject*로 시작하는 태그가 포함되어 있습니다. 이러한 태그는 GameMaker가 HTML5 게임 옵션에서 값을 주입하는 데 사용되므로 사용자 정의 코드를 삽입하는 데 사용할 수 없습니다.
활용 예제
// HTML5 PreHead에 사용자 정의 스크립트 추가
var custom_script = "<script src='custom.js'></script>";
html5_inject(GM_HTML5_PreHead, custom_script);
// HTML5 PostBody에 사용자 정의 스타일 추가
var custom_style = "<style>body { background-color: #f0f0f0; }</style>";
html5_inject(GM_HTML5_PostBody, custom_style);
// HTML5 PreBody에 사용자 정의 메시지 추가
var custom_message = "<div id='custom-message'>환영합니다!</div>";
html5_inject(GM_HTML5_PreBody, custom_message);
// HTML5 GameWidth와 GameHeight 변수를 사용하여 캔버스 크기 설정
var canvas_width = GM_HTML5_GameWidth;
var canvas_height = GM_HTML5_GameHeight;
var canvas = "<canvas width='" + string(canvas_width) + "' height='" + string(canvas_height) + "'></canvas>";
html5_inject(GM_HTML5_PreBody, canvas);
// 브라우저 제목 변경
var new_title = "<title>내 게임 제목</title>";
html5_inject(GM_HTML5_PostHead, new_title);