game/godot

Godot3 API - Customizing the Web export HTML page

C/H 2018. 11. 14. 08:30

Customizing the Web export HTML page

Rather than the default HTML page that comes with the export templates, it is also possible to use a custom HTML page. This allows drastic customization of the final web presentation and behavior. The path to the custom HTML page is specified in the export options as Html/Custom Html Shell.
내보내기 템플릿과 함께 제공되는 기본 HTML 페이지가 아닌 사용자 정의 HTML 페이지를 사용할 수도 있습니다. 이를 통해 최종 웹 프리젠테이션 및 동작을 크게 사용자가 정의 할 수 있습니다. 사용자 정의 HTML 페이지의 경로는 내보내기 옵션에서 Html/Custom Html Shell로 지정됩니다.

The default HTML page is available in the Godot Engine repository at /mist/dist/html/default.html. Some simple use-cases where customizing the default page is useful include:
기본 HTML 페이지는 /mist/dist/html/default.html에있는 Godot Engine 저장소에서 사용할 수 있습니다. 기본 페이지를 사용자 정의하는 것이 유용한 몇 가지 간단한 사용 사례는 다음과 같습니다.

  • Loading files from a different directory
    다른 디렉토리에서 파일로드
  • Loading a .zip file instead of a .pck file as main pack
    .pck 파일 대신 .zip 파일을 기본 패키지로로드하기
  • Loading engine files from a different directory than the main pack file
    메인 팩 파일과 다른 디렉토리에서 엔진 파일 로딩
  • Loading some extra files before the engine starts, so they are available in the file system later
    엔진을 시작하기 전에 추가 파일을로드하여 나중에 파일 시스템에서 사용할 수 있도록합니다.
  • Passing custom “command line” arguments, e.g. -s to start a MainLoop script
    맞춤 'Command line' 인수 전달 (예 : -s는 MainLoop 스크립트를 시작합니다.

Placeholder substitution

When exporting the game, several placeholders in the HTML page are substituted by values dependening on the export:
게임을 내보낼 때 HTML 페이지의 여러 자리 표시자가 내보내기에 종속된 값으로 대체됩니다.

Placeholder substituted by
$GODOT_BASENAME Basename of exported files without suffixes, e.g. game when exporting game.html
접미사가없는 내 보낸 파일의 기본 이름 예 : game.html을 내보낼 때의 game
$GODOT_DEBUG_ENABLED true if debugging, false otherwise
디버그의 경우는 true, 그렇지 않은 경우는 false
$GODOT_HEAD_INCLUDE Custom string to include just before the end of the HTML <head> element
HTML <head> 요소의 끝 부분 바로 앞에 포함 할 맞춤 문자열

The HTML file must evaluate the JavaScript file $GODOT_BASENAME.js. This file defines a global Engine object used to start the engine, see below for details.
HTML 파일은 JavaScript 파일 $GODOT_BASENAME.js를 평가해야합니다. 이 파일은 엔진을 시작하는데 사용되는 전역 엔진 객체를 정의합니다. 자세한 내용은 아래를 참조하십시오.

The boot splash image is exported as $GODOT_BASENAME.png and can be used e.g. in <img /> elements.
부트 스플래시 이미지는 $ GODOT_BASENAME.png로 내보내지며 예를 들어 다음과 같이 사용할 수 있습니다. <img /> 요소에.

$GODOT_DEBUG_ENABLED can be useful to optionally display e.g. an output console or other debug tools.
$GODOT_DEBUG_ENABLED는 선택적으로 표시하는 데 유용 할 수 있습니다. 예 : 출력 콘솔 또는 기타 디버그 도구.

$GODOT_HEAD_INCLUDE is substituted with the string specified by the export option Html/Head Include.
$GODOT_HEAD_INCLUDE는 내보내기 옵션 Html/Head Include에 지정된 문자열로 대체됩니다.

The Engine object

The JavaScript global object Engine is defined by $GODOT_BASENAME.js and serves as an interface to the engine start-up process.
JavaScript 전역 개체 엔진은 $GODOT_BASENAME.js에 의해 정의되며 엔진 시작 프로세스에 대한 인터페이스 역할을합니다.

The object itself has only two methods, load() and unload().
객체 자체에는 load()unload()의 두 가지 메서드 만 있습니다.

Engine.load(basePath)

Loads the engine from the passed base path.
전달 된 기본 경로에서 엔진을로드합니다.

Returns a promise that resolves once the engine is loaded.
엔진이로드되면 해결되는 약속을 반환합니다.

Engine.unload()

Unloads the module to free memory. This is called automatically once the module is instantiated unless explicitly disabled.
메모리를 확보하기 위해 모듈을 언로드합니다. 모듈이 명시적으로 비활성화되지 않고, 인스턴스화되면 자동으로 호출됩니다.

Engine.isWebGLAvailable(majorVersion = 1)

Returns true if the given major version of WebGL is available, false otherwise. Defaults to 1 for WebGL 1.0.
WebGL의 주 버전이 사용 가능한 경우 true를 반환하고 그렇지 않으면 false를 반환합니다. WebGL 1.0의 경우 기본값은 1입니다.

Starting an Engine instance

The more interesting interface is accessed by instantiating Engine using the new operator:
새로운 연산자를 사용하여 엔진을 인스턴스화하면 더 흥미로운 인터페이스에 액세스 할 수 있습니다.

var engine = new Engine();

This Engine instance, referred to as engine with a lower-case e from here, is a startable instance of the engine, usually a game. To start such an instance, the global Engine object must be loaded, then the engine instance must be initialized and started.
여기에서 소문자 e가있는 엔진이라고하는 이 Engine 인스턴스는 엔진의 시작 가능한 인스턴스이며 일반적으로 게임입니다. 이러한 인스턴스를 시작하려면 전역 엔진 객체를 로드해야하며 엔진 인스턴스를 초기화하고 시작해야합니다.

engine.init(basePath)

Initializes the instance. If the engine wasn’t loaded yet, a base path must be passed from which the engine will be loaded.
인스턴스를 초기화합니다. 엔진이 아직로드되지 않은 경우 엔진이로드되는 기본 경로가 전달되어야합니다.

Returns a promise that resolves once the engine is loaded and initialized. It can then be started with engine.startGame()
엔진이로드 및 초기화되면 해결되는 약속을 반환합니다. 그런 다음 engine.startGame()을 사용하여 시작할 수 있습니다.

engine.preloadFile(file, path)

This loads a file so it is available in the file system once the instance is started. This must be called before starting the instance.
이것은 파일을로드하여 일단 인스턴스가 시작되면 파일 시스템에서 사용 가능하게합니다. 인스턴스를 시작하기 전에이를 호출해야합니다.

If file is a string, the file will be loaded from that URL. If file is an ArrayBuffer or a view on one, the buffer will used as content of the file.
ile이 문자열이면 해당 URL에서 파일이로드됩니다. file가 ArrayBuffer 또는 뷰의 뷰인 경우, 버퍼는 파일의 내용으로 사용됩니다.

If path is a string, it specifies the path by which the file will be available. This is mandatory if file is not a string. Otherwise, the path is derived from the URL of the loaded file.
path가 문자열이면 파일을 사용할 수있는 경로를 지정합니다. file이 문자열이 아닌 경우 필수입니다. 그렇지 않으면로드 된 파일의 URL에서 파생됩니다.

Returns a promise that resolves once the file is preloaded.
파일이 preload 된 뒤 promise를 반환합니다.

engine.start(arg1, arg2, …)

Starts the instance of the engine, handing the passed strings as arguments to the main() function. This allows great control over how the engine is used, but usually the other methods whose names start with engine.start are simpler to use.
전달 된 문자열을 인수로 main() 함수에 전달하여 엔진 인스턴스를 시작합니다. 이렇게하면 엔진 사용방법을 효과적으로 제어 할 수 있지만 일반적으로 engine.start로 시작하는 다른 메소드는 사용하기가 더 쉽습니다.

Returns a promise that resolves once the engine started.
엔진이 시작되면 promise를 반환합니다.

engine.startGame(mainPack)

Starts the game with the main pack loaded from the passed URL string and starts the engine with it.
전달된 URL 문자열에서 로드된 메인 팩으로 게임을 시작하고 함께 전달합니다.

If the engine isn’t loaded yet, the base path of the passed URL will be used to load the engine.
엔진이 아직 로드되지 않은 경우 전달된 URL의 기본경로가 엔진을 로드하는데 사용됩니다.

Returns a promise that resolves once the game started.
게임이 시작되면 promise을 반환합니다.

Configuring start-up behaviour

Beside starting the engine, other methods of the engine instance allow configuring the behavior:
엔진을 시작하는 것 외에도 엔진 인스턴스의 다른 메소드를 사용하여 동작을 구성 할 수 있습니다.

engine.setUnloadAfterInit(enabled)

Sets whether the Engine will be unloaded automatically after the instance is initialized. This frees browser memory by unloading files that are no longer needed once the instance is initialized. However, if more instances of the engine will be started, the Engine will have to be loaded again.
인스턴스가 초기화된 후 엔진을 자동으로 언로드할지 여부를 설정합니다. 인스턴스가 초기화되면 더 이상 필요하지 않은 파일을 언로드하여 브라우저 메모리를 비울 수 있습니다. 그러나 더 많은 엔진 인스턴스가 시작되면 엔진을 다시 로드해야합니다.

Defaults to true.

engine.setCanvas(canvasElem)

By default, the first canvas element on the page is used for rendering. By calling this method, another canvas can be specified.
기본적으로 페이지의 첫번째 캔버스 요소가 렌더링에 사용됩니다. 이 메서드를 호출하면 다른 캔버스를 지정할 수 있습니다.

engine.setCanvasResizedOnStart(enabled)

Sets whether the canvas will be resized to the width and height specified in the project settings on start. Defaults to true.
캔버스가 시작시 프로젝트 설정에 지정된 너비와 높이로 조정되는지 여부를 설정합니다. 기본값은 true입니다.

engine.setLocale(locale)

By default, the engine will try to guess the locale to use from the JavaScript environment. It is usually preferable to use a server-side user-specified locale, or at least use the locale requested in the HTTP Accept-Language header. This method allows specifying such a custom locale string.
기본적으로 엔진은 JavaScript 환경에서 사용할 로케일을 추측하려고 시도합니다. 일반적으로 서버측 사용자 지정 로캘을 사용하거나 적어도 HTTP Accept-Language 헤더에 요청된 로캘을 사용하는 것이 좋습니다. 이 메서드를 사용하면 이러한 사용자 정의 로캘 문자열을 지정할 수 있습니다.

engine.setExecutableName(execName)

By default, the base name of the loaded engine files is used for the executable name. This method allows specifying another name.
기본적으로 로드된 엔진 파일의 기본 이름은 실행 파일 이름으로 사용됩니다. 이 메서드는 다른 이름을 지정할 수 있습니다.

Customizing the presentation

The following methods are used to implement the presentation:
다음 메서드는 프레젠테이션을 구현하는 데 사용됩니다.

engine.setProgressFunc(func)

This method is used to display download progress. The passed callback function is called with two number arguments, the first argument specifies bytes loaded so far, the second argument specifies the total number of bytes to load.
이 방법은 다운로드 진행률을 표시하는 데 사용됩니다. 전달된 콜백 함수는 두개의 숫자 인수로 호출되며, 첫번째 인수는 지금까지 로드된 바이트를 지정하고 두번째 인수는 로드 할 총 바이트 수를 지정합니다.

function printProgress(current, total) {
    console.log("Loaded " + current + " of " + total + " bytes");
}
engine.setProgressFunc(printProgress);

If the total is 0, it couldn’t be calculated. Possible reasons include:
합계가 0이면 계산할 수 없습니다. 가능한 이유는 다음과 같습니다.

  • Files are delivered with server-side chunked compression
    파일은 서버 쪽 청크 압축으로 전달됩니다.
  • Files are delivered with server-side compression on Chromium
    파일은 Chromium의 서버측 압축과 함께 제공됩니다.
  • Not all file downloads have started yet (usually on servers without multi-threading)
    아직 모든 파일 다운로드가 시작되지는 않았습니다 (일반적으로 멀티 스레딩이없는 서버에서)

engine.setStdoutFunc(func), engine.setStderrFunc(func)

These methods allow implementing custom behavior for the stdout and stderr streams. The functions passed in will be called with one string argument specifying the string to print.
이러한 메서드를 사용하면 stdout 및 stderr 스트림에 대한 사용자 지정 동작을 구현할 수 있습니다. 전달 된 함수는 인쇄 할 문자열을 지정하는 하나의 문자열 인수로 호출됩니다.

function printStderr(text) {
    console.warn("Error: " + text);
}
engine.setStderrFunc(printStderr);

These methods should usually only be used in debug pages. The $GODOT_DEBUG_ENABLED placeholder can be used to check for this.
이러한 메소드는 일반적으로 디버그 페이지에서만 사용해야합니다. $GODOT_DEBUG_ENABLED 자리 표시자는이를 확인하는 데 사용할 수 있습니다.

By default, console.log() and console.warn() are used respectively.
기본적으로 console.log() 및 console.warn()이 각각 사용됩니다.

Accessing the Emscripten Module

If you know what you’re doing, you can access the runtime environment (Emscripten’s Module) as engine.rtenv. Check the official Emscripten documentation for information on how to use it: https://kripken.github.io/emscripten-site/docs/api_reference/module.html
현재 수행중인 작업을 알고 있다면 engine.rtenv와 같이 런타임 환경 (Emscripten 's Module)에 액세스 할 수 있습니다. 사용 방법에 대한 공식 Emscripten 문서를 확인하십시오 : https://kripken.github.io/emscripten-site/docs/api_reference/module.html

반응형

'game > godot' 카테고리의 다른 글

Godot3 API - Singletons (AutoLoad)  (0) 2018.11.15
Godot 3.0.6 compile Success Process  (0) 2018.11.15
Godot3 API - Exporting for the Web  (0) 2018.11.13
Godot3 API - Exporting for Android  (0) 2018.11.12
Godot3 API - Internationalization  (0) 2018.11.09