mirror of
https://github.com/pagefaultgames/pokerogue.git
synced 2024-12-12 16:46:19 +00:00
1611 lines
445 KiB
HTML
1611 lines
445 KiB
HTML
|
<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>default | pokemon-rogue-battle</title><meta name="description" content="Documentation for pokemon-rogue-battle"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">pokemon-rogue-battle</a></div><div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><ul class="tsd-breadcrumb"><li><a href="../index.html">pokemon-rogue-battle</a></li><li><a href="../modules/plugins_cache_busted_loader_plugin.html">plugins/cache-busted-loader-plugin</a></li><li><a href="plugins_cache_busted_loader_plugin.default.html">default</a></li></ul><h1>Class default</h1></div><section class="tsd-panel tsd-hierarchy"><h4>Hierarchy</h4><ul class="tsd-hierarchy"><li><span class="tsd-signature-type">LoaderPlugin</span><ul class="tsd-hierarchy"><li><span class="target">default</span></li></ul></li></ul></section><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/pagefaultgames/pokerogue/blob/92afcdea8f8cb89fa63f296d4053193a751fa8d2/src/plugins/cache-busted-loader-plugin.ts#L3">src/plugins/cache-busted-loader-plugin.ts:3</a></li></ul></aside><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><details class="tsd-index-content tsd-index-accordion" open><summary class="tsd-accordion-summary tsd-index-summary"><h5 class="tsd-index-heading uppercase" role="button" aria-expanded="false" tabIndex="0"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-chevronSmall"></use></svg> Index</h5></summary><div class="tsd-accordion-details"><section class="tsd-index-section"><h3 class="tsd-index-heading">Constructors</h3><div class="tsd-index-list"><a href="plugins_cache_busted_loader_plugin.default.html#constructor" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-512"></use></svg><span>constructor</span></a>
|
||
|
|
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Properties</h3><div class="tsd-index-list"><a href="plugins_cache_busted_loader_plugin.default.html#baseURL" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>baseURL</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#cacheManager" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>cache<wbr/>Manager</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#crossOrigin" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>cross<wbr/>Origin</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#imageLoadType" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>image<wbr/>Load<wbr/>Type</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#inflight" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>inflight</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#list" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>list</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#localSchemes" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>local<wbr/>Schemes</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#maxParallelDownloads" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>max<wbr/>Parallel<wbr/>Downloads</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#path" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>path</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#prefix" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>prefix</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#progress" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>progress</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#queue" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>queue</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#scene" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>scene</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#sceneManager" class="tsd-index-link tsd-is-protected tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>scene<wbr/>Manager</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#state" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>state</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#systems" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>systems</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#textureManager" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>texture<wbr/>Manager</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#totalComplete" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>total<wbr/>Complete</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#totalFailed" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>total<wbr/>Failed</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#totalToLoad" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>total<wbr/>To<wbr/>Load</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#xhr" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>xhr</span></a>
|
||
|
|
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Accessors</h3><div class="tsd-index-list"><a href="plugins_cache_busted_loader_plugin.default.html#manifest" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>manifest</span></a>
|
||
|
|
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Methods</h3><div class="tsd-index-list"><a href="plugins_cache_busted_loader_plugin.default.html#addFile" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>add<wbr/>File</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#addListener" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>add<wbr/>Listener</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#addPack" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>add<wbr/>Pack</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#animation" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>animation</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#aseprite" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>aseprite</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#atlas" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>atlas</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#atlasXML" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>atlasXML</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#audio" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>audio</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#audioSprite" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>audio<wbr/>Sprite</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#binary" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>binary</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#bitmapFont" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>bitmap<wbr/>Font</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#css" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>css</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#destroy" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>destroy</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#emit" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>emit</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#eventNames" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>event<wbr/>Names</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#fileProcessComplete" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>file<wbr/>Process<wbr/>Complete</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#flagForRemoval" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>flag<wbr/>For<wbr/>Removal</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#glsl" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>glsl</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#html" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>html</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#htmlTexture" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>html<wbr/>Texture</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#image" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>image</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#isLoading" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>is<wbr/>Loading</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#isReady" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>is<wbr/>Ready</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#json" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>json</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#keyExists" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>key<wbr/>Exists</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#listenerCount" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>listener<wbr/>Count</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#listeners" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>listeners</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#loadComplete" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>load<wbr/>Complete</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#multiatlas" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>multiatlas</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#nextFile" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>next<wbr/>File</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#obj" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>obj</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#off" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>off</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#on" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>on</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#once" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>once</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#pack" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>pack</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#plugin" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>plugin</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#removeAllListeners" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>remove<wbr/>All<wbr/>Listeners</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#removeListener" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>remove<wbr/>Listener</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#reset" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>reset</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#save" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>save</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#saveJSON" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>saveJSON</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#sceneFile" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>scene<wbr/>File</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#scenePlugin" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>scene<wbr/>Plugin</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#script" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>script</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#scripts" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>scripts</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#setBaseURL" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>set<wbr/>BaseURL</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#setCORS" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>setCORS</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#setPath" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>set<wbr/>Path</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#setPrefix" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>set<wbr/>Prefix</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#shutdown" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>shutdown</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#spritesheet" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>spritesheet</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#start" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>start</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#svg" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>svg</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#text" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>text</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#texture" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>texture</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#tilemapCSV" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>tilemapCSV</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#tilemapImpact" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>tilemap<wbr/>Impact</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#tilemapTiledJSON" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>tilemap<wbr/>TiledJSON</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#unityAtlas" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>unity<wbr/>Atlas</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#update" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>update</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#updateProgress" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>update<wbr/>Progress</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#video" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>video</span></a>
|
||
|
|
<a href="plugins_cache_busted_loader_plugin.default.html#xml" class="tsd-index-link tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>xml</span></a>
|
||
|
|
</div></section></div></details></section></section><section class="tsd-panel-group tsd-member-group"><h2>Constructors</h2><section class="tsd-panel tsd-member"><a id="constructor" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>constructor</span><a href="#constructor" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="constructor.new_default" class="tsd-anchor"></a><span class="tsd-kind-constructor-signature">new default</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">scene</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="plugins_cache_busted_loader_plugin.default.html" class="tsd-signature-type tsd-kind-class">default</a><a href="#constructor.new_default" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">scene</span>: <span class="tsd-signature-type">Scene</span></span></li></ul></div><h4 class="tsd-returns-title">Returns <a href="plugins_cache_busted_loader_plugin.default.html" class="tsd-signature-type tsd-kind-class">default</a></h4><aside class="tsd-sources"><p>Overrides Phaser.Loader.LoaderPlugin.constructor</p><ul><li>Defined in <a href="https://github.com/pagefaultgames/pokerogue/blob/92afcdea8f8cb89fa63f296d4053193a751fa8d2/src/plugins/cache-busted-loader-plugin.ts#L4">src/plugins/cache-busted-loader-plugin.ts:4</a></li></ul></aside></li></ul></section></section><section class="tsd-panel-group tsd-member-group"><h2>Properties</h2><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="baseURL" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>baseURL</span><a href="#baseURL" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">baseURL</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div><div class="tsd-comment tsd-typography"><p>If you want to append a URL before the path of any asset you can set this here.</p>
|
||
|
|
<p>Useful if allowing the asset base url to be configured outside of the game code.</p>
|
||
|
|
<p>If you set this property directly then it <em>must</em> end with a "/". Alternatively, call <code>setBaseURL()</code> and it'll do it for you.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.baseURL</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66466</li></ul></aside></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="cacheManager" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>cache<wbr/>Manager</span><a href="#cacheManager" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">cache<wbr/>Manager</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">CacheManager</span></div><div class="tsd-comment tsd-typography"><p>A reference to the global Cache Manager.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.cacheManager</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66419</li></ul></aside></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="crossOrigin" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>cross<wbr/>Origin</span><a href="#crossOrigin" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">cross<wbr/>Origin</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div><div class="tsd-comment tsd-typography"><p>The crossOrigin value applied to loaded images. Very often this needs to be set to 'anonymous'.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.crossOrigin</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66485</li></ul></aside></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="imageLoadType" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>image<wbr/>Load<wbr/>Type</span><a href="#imageLoadType" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">image<wbr/>Load<wbr/>Type</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div><div class="tsd-comment tsd-typography"><p>Optional load type for image files. <code>XHR</code> is the default. Set to <code>HTMLImageElement</code> to load images using the Image tag instead.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.imageLoadType</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66490</li></ul></aside></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="inflight" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>inflight</span><a href="#inflight" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">inflight</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Set</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">File</span><span class="tsd-signature-symbol">></span></div><div class="tsd-comment tsd-typography"><p>Files are stored in this Set while they're in the process of being loaded.</p>
|
||
|
|
<p>Upon a successful load they are moved to the <code>queue</code> Set.</p>
|
||
|
|
<p>By the end of the load process this Set will be empty.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.inflight</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66530</li></ul></aside></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="list" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>list</span><a href="#list" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">list</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Set</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">File</span><span class="tsd-signature-symbol">></span></div><div class="tsd-comment tsd-typography"><p>Files are placed in this Set when they're added to the Loader via <code>addFile</code>.</p>
|
||
|
|
<p>They are moved to the <code>inflight</code> Set when they start loading, and assuming a successful
|
||
|
|
load, to the <code>queue</code> Set for further processing.</p>
|
||
|
|
<p>By the end of the load process this Set will be empty.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.list</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66521</li></ul></aside></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="localSchemes" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>local<wbr/>Schemes</span><a href="#localSchemes" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">local<wbr/>Schemes</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">[]</span></div><div class="tsd-comment tsd-typography"><p>An array of all schemes that the Loader considers as being 'local'.</p>
|
||
|
|
<p>This is populated by the <code>Phaser.Core.Config#loaderLocalScheme</code> game configuration setting and defaults to
|
||
|
|
<code>[ 'file://', 'capacitor://' ]</code>. Additional local schemes can be added to this array as needed.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.localSchemes</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66498</li></ul></aside></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="maxParallelDownloads" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>max<wbr/>Parallel<wbr/>Downloads</span><a href="#maxParallelDownloads" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">max<wbr/>Parallel<wbr/>Downloads</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><div class="tsd-comment tsd-typography"><p>The number of concurrent / parallel resources to try and fetch at once.</p>
|
||
|
|
<p>Old browsers limit 6 requests per domain; modern ones, especially those with HTTP/2 don't limit it at all.</p>
|
||
|
|
<p>The default is 32 but you can change this in your Game Config, or by changing this property before the Loader starts.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.maxParallelDownloads</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66475</li></ul></aside></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="path" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>path</span><a href="#path" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">path</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div><div class="tsd-comment tsd-typography"><p>The value of <code>path</code>, if set, is placed before any <em>relative</em> file path given. For example:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-2">path</span><span class="hl-1"> = </span><span class="hl-7">"images/sprites/"</span><span class="hl-1">;</span><br/><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">image</span><span class="hl-1">(</span><span class="hl-7">"ball"</span><span class="hl-1">, </span><span class="hl-7">"ball.png"</span><span class="hl-1">);</span><br/><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">image</span><span class="hl-1">(</span><span class="hl-7">"tree"</span><span class="hl-1">, </span><span class="hl-7">"level1/oaktree.png"</span><span class="hl-1">);</span><br/><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">image</span><span class="hl-1">(</span><span class="hl-7">"boom"</span><span class="hl-1">, </span><span class="hl-7">"http://server.com/explode.png"</span><span class="hl-1">);</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>Would load the <code>ball</code> file from <code>images/sprites/ball.png</code> and the tree from
|
||
|
|
<code>images/sprites/level1/oaktree.png</code> but the file <code>boom</code> would load from the URL
|
||
|
|
given as it's an absolute URL.</p>
|
||
|
|
<p>Please note that the path is added before the filename but <em>after</em> the baseURL (if set.)</p>
|
||
|
|
<p>If you set this property directly then it <em>must</em> end with a "/". Alternatively, call <code>setPath()</code> and it'll do it for you.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.path</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66457</li></ul></aside></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="prefix" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>prefix</span><a href="#prefix" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">prefix</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">string</span></div><div class="tsd-comment tsd-typography"><p>An optional prefix that is automatically prepended to the start of every file key.
|
||
|
|
If prefix was <code>MENU.</code> and you load an image with the key 'Background' the resulting key would be <code>MENU.Background</code>.
|
||
|
|
You can set this directly, or call <code>Loader.setPrefix()</code>. It will then affect every file added to the Loader
|
||
|
|
from that point on. It does <em>not</em> change any file already in the load queue.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.prefix</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66437</li></ul></aside></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="progress" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>progress</span><a href="#progress" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">progress</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><div class="tsd-comment tsd-typography"><p>The progress of the current load queue, as a float value between 0 and 1.
|
||
|
|
This is updated automatically as files complete loading.
|
||
|
|
Note that it is possible for this value to go down again if you add content to the current load queue during a load.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.progress</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66511</li></ul></aside></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="queue" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>queue</span><a href="#queue" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">queue</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Set</span><span class="tsd-signature-symbol"><</span><span class="tsd-signature-type">File</span><span class="tsd-signature-symbol">></span></div><div class="tsd-comment tsd-typography"><p>Files are stored in this Set while they're being processed.</p>
|
||
|
|
<p>If the process is successful they are moved to their final destination, which could be
|
||
|
|
a Cache or the Texture Manager.</p>
|
||
|
|
<p>At the end of the load process this Set will be empty.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.queue</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66540</li></ul></aside></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="scene" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>scene</span><a href="#scene" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">scene</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Scene</span></div><div class="tsd-comment tsd-typography"><p>The Scene which owns this Loader instance.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.scene</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66409</li></ul></aside></section><section class="tsd-panel tsd-member tsd-is-protected tsd-is-inherited tsd-is-external"><a id="sceneManager" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagProtected">Protected</code> <span>scene<wbr/>Manager</span><a href="#sceneManager" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">scene<wbr/>Manager</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">SceneManager</span></div><div class="tsd-comment tsd-typography"><p>A reference to the global Scene Manager.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.sceneManager</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66429</li></ul></aside></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="state" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><code class="tsd-tag ts-flagReadonly">Readonly</code> <span>state</span><a href="#state" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">state</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><div class="tsd-comment tsd-typography"><p>The current state of the Loader.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.state</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66557</li></ul></aside></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="systems" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>systems</span><a href="#systems" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">systems</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Systems</span></div><div class="tsd-comment tsd-typography"><p>A reference to the Scene Systems.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.systems</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66414</li></ul></aside></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="textureManager" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>texture<wbr/>Manager</span><a href="#textureManager" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">texture<wbr/>Manager</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">TextureManager</span></div><div class="tsd-comment tsd-typography"><p>A reference to the global Texture Manager.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.textureManager</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66424</li></ul></aside></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="totalComplete" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>total<wbr/>Complete</span><a href="#totalComplete" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">total<wbr/>Complete</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><div class="tsd-comment tsd-typography"><p>The total number of files that successfully loaded during the most recent load.
|
||
|
|
This value is reset when you call <code>Loader.start</code>.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.totalComplete</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66552</li></ul></aside></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="totalFailed" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>total<wbr/>Failed</span><a href="#totalFailed" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">total<wbr/>Failed</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><div class="tsd-comment tsd-typography"><p>The total number of files that failed to load during the most recent load.
|
||
|
|
This value is reset when you call <code>Loader.start</code>.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.totalFailed</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66546</li></ul></aside></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="totalToLoad" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>total<wbr/>To<wbr/>Load</span><a href="#totalToLoad" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">total<wbr/>To<wbr/>Load</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><div class="tsd-comment tsd-typography"><p>The total number of files to load. It may not always be accurate because you may add to the Loader during the process
|
||
|
|
of loading, especially if you load a Pack File. Therefore this value can change, but in most cases remains static.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.totalToLoad</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66504</li></ul></aside></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="xhr" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>xhr</span><a href="#xhr" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><div class="tsd-signature"><span class="tsd-kind-property">xhr</span><span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">XHRSettingsObject</span></div><div class="tsd-comment tsd-typography"><p>xhr specific global settings (can be overridden on a per-file basis)</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.xhr</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66480</li></ul></aside></section></section><section class="tsd-panel-group tsd-member-group"><h2>Accessors</h2><section class="tsd-panel tsd-member"><a id="manifest" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>manifest</span><a href="#manifest" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature" id="manifest.manifest-1"><span class="tsd-signature-keyword">get</span> manifest<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">object</span></li><li class="tsd-description"><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">object</span></h4><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/pagefaultgames/pokerogue/blob/92afcdea8f8cb89fa63f296d4053193a751fa8d2/src/plugins/cache-busted-loader-plugin.ts#L8">src/plugins/cache-busted-loader-plugin.ts:8</a></li></ul></aside></li><li class="tsd-signature" id="manifest.manifest-2"><span class="tsd-signature-keyword">set</span> manifest<span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">manifestObj</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span></li><li class="tsd-description"><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">manifestObj</span>: <span class="tsd-signature-type">object</span></span></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/pagefaultgames/pokerogue/blob/92afcdea8f8cb89fa63f296d4053193a751fa8d2/src/plugins/cache-busted-loader-plugin.ts#L12">src/plugins/cache-busted-loader-plugin.ts:12</a></li></ul></aside></li></ul></section></section><section class="tsd-panel-group tsd-member-group"><h2>Methods</h2><section class="tsd-panel tsd-member"><a id="addFile" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>add<wbr/>File</span><a href="#addFile" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="addFile.addFile-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">add<wbr/>File</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">file</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#addFile.addFile-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">file</span>: <span class="tsd-signature-type">any</span></span></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources"><p>Overrides Phaser.Loader.LoaderPlugin.addFile</p><ul><li>Defined in <a href="https://github.com/pagefaultgames/pokerogue/blob/92afcdea8f8cb89fa63f296d4053193a751fa8d2/src/plugins/cache-busted-loader-plugin.ts#L16">src/plugins/cache-busted-loader-plugin.ts:16</a></li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="addListener" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>add<wbr/>Listener</span><a href="#addListener" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">event</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">symbol</span></span><div class="tsd-comment tsd-typography"><p>The event name.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><span class="tsd-kind-parameter">fn</span>: <span class="tsd-signature-type">Function</span></span><div class="tsd-comment tsd-typography"><p>The listener function.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">context</span>: <span class="tsd-signature-type">any</span></span><div class="tsd-comment tsd-typography"><p>The context to invoke the listener with. Default this.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.addListener</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:9951</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="addPack" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>add<wbr/>Pack</span><a href="#addPack" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="addPack.addPack-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">add<wbr/>Pack</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">pack</span>, <span class="tsd-kind-parameter">packKey</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><a href="#addPack.addPack-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Takes a well formed, fully parsed pack file object and adds its entries into the load queue. Usually you do not call
|
||
|
|
this method directly, but instead use <code>Loader.pack</code> and supply a path to a JSON file that holds the
|
||
|
|
pack data. However, if you've got the data prepared you can pass it to this method.</p>
|
||
|
|
<p>You can also provide an optional key. If you do then it will only add the entries from that part of the pack into
|
||
|
|
to the load queue. If not specified it will add all entries it finds. For more details about the pack file format
|
||
|
|
see the <code>LoaderPlugin.pack</code> method.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">pack</span>: <span class="tsd-signature-type">any</span></span><div class="tsd-comment tsd-typography"><p>The Pack File data to be parsed and each entry of it to added to the load queue.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">packKey</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>An optional key to use from the pack file data.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.addPack</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66648</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="animation" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>animation</span><a href="#animation" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="animation.animation-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">animation</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">key</span>, <span class="tsd-kind-parameter">url</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">dataKey</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">xhrSettings</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#animation.animation-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Adds an Animation JSON Data file, or array of Animation JSON files, to the current load queue.</p>
|
||
|
|
<p>You can call this method from within your Scene's <code>preload</code>, along with any other files you wish to load:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">animation</span><span class="hl-1">(</span><span class="hl-7">'baddieAnims'</span><span class="hl-1">, </span><span class="hl-7">'files/BaddieAnims.json'</span><span class="hl-1">);</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>The file is <strong>not</strong> loaded right away. It is added to a queue ready to be loaded either when the loader starts,
|
||
|
|
or if it's already running, when the next free load slot becomes available. This happens automatically if you
|
||
|
|
are calling this from within the Scene's <code>preload</code> method, or a related callback. Because the file is queued
|
||
|
|
it means you cannot use the file immediately after calling this method, but must wait for the file to complete.
|
||
|
|
The typical flow for a Phaser Scene is that you load assets in the Scene's <code>preload</code> method and then when the
|
||
|
|
Scene's <code>create</code> method is called you are guaranteed that all of those assets are ready for use and have been
|
||
|
|
loaded.</p>
|
||
|
|
<p>If you call this from outside of <code>preload</code> then you are responsible for starting the Loader afterwards and monitoring
|
||
|
|
its events to know when it's safe to use the asset. Please see the Phaser.Loader.LoaderPlugin class for more details.</p>
|
||
|
|
<p>The key must be a unique String. It is used to add the file to the global JSON Cache upon a successful load.
|
||
|
|
The key should be unique both in terms of files being loaded and files already present in the JSON Cache.
|
||
|
|
Loading a file using a key that is already taken will result in a warning. If you wish to replace an existing file
|
||
|
|
then remove it from the JSON Cache first, before loading a new one.</p>
|
||
|
|
<p>Instead of passing arguments you can pass a configuration object, such as:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">animation</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'baddieAnims'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">url:</span><span class="hl-1"> </span><span class="hl-7">'files/BaddieAnims.json'</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>See the documentation for <code>Phaser.Types.Loader.FileTypes.JSONFileConfig</code> for more details.</p>
|
||
|
|
<p>Once the file has finished loading it will automatically be passed to the global Animation Managers <code>fromJSON</code> method.
|
||
|
|
This will parse all of the JSON data and create animation data from it. This process happens at the very end
|
||
|
|
of the Loader, once every other file in the load queue has finished. The reason for this is to allow you to load
|
||
|
|
both animation data and the images it relies upon in the same load call.</p>
|
||
|
|
<p>Once the animation data has been parsed you will be able to play animations using that data.
|
||
|
|
Please see the Animation Manager <code>fromJSON</code> method for more details about the format and playback.</p>
|
||
|
|
<p>You can also access the raw animation data from its Cache using its key:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">animation</span><span class="hl-1">(</span><span class="hl-7">'baddieAnims'</span><span class="hl-1">, </span><span class="hl-7">'files/BaddieAnims.json'</span><span class="hl-1">);</span><br/><span class="hl-8">// and later in your game ...</span><br/><span class="hl-4">var</span><span class="hl-1"> </span><span class="hl-2">data</span><span class="hl-1"> = </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">cache</span><span class="hl-1">.</span><span class="hl-2">json</span><span class="hl-1">.</span><span class="hl-6">get</span><span class="hl-1">(</span><span class="hl-7">'baddieAnims'</span><span class="hl-1">);</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>If you have specified a prefix in the loader, via <code>Loader.setPrefix</code> then this value will be prepended to this files
|
||
|
|
key. For example, if the prefix was <code>LEVEL1.</code> and the key was <code>Waves</code> the final key will be <code>LEVEL1.Waves</code> and
|
||
|
|
this is what you would use to retrieve the text from the JSON Cache.</p>
|
||
|
|
<p>The URL can be relative or absolute. If the URL is relative the <code>Loader.baseURL</code> and <code>Loader.path</code> values will be prepended to it.</p>
|
||
|
|
<p>If the URL isn't specified the Loader will take the key and create a filename from that. For example if the key is "data"
|
||
|
|
and no URL is given then the Loader will set the URL to be "data.json". It will always add <code>.json</code> as the extension, although
|
||
|
|
this can be overridden if using an object instead of method arguments. If you do not desire this action then provide a URL.</p>
|
||
|
|
<p>You can also optionally provide a <code>dataKey</code> to use. This allows you to extract only a part of the JSON and store it in the Cache,
|
||
|
|
rather than the whole file. For example, if your JSON data had a structure like this:</p>
|
||
|
|
<pre><code class="language-json"><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-9">"level1"</span><span class="hl-1">: {</span><br/><span class="hl-1"> </span><span class="hl-9">"baddies"</span><span class="hl-1">: {</span><br/><span class="hl-1"> </span><span class="hl-9">"aliens"</span><span class="hl-1">: {},</span><br/><span class="hl-1"> </span><span class="hl-9">"boss"</span><span class="hl-1">: {}</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-9">"level2"</span><span class="hl-1">: {},</span><br/><span class="hl-1"> </span><span class="hl-9">"level3"</span><span class="hl-1">: {}</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>And if you only wanted to create animations from the <code>boss</code> data, then you could pass <code>level1.baddies.boss</code>as the <code>dataKey</code>.</p>
|
||
|
|
<p>Note: The ability to load this type of file will only be available if the JSON File type has been built into Phaser.
|
||
|
|
It is available in the default build but can be excluded from custom builds.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">key</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">JSONFileConfig</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">JSONFileConfig</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The key to use for this file, or a file configuration object, or array of them.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">url</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load this file from. If undefined or <code>null</code> it will be set to <code><key>.json</code>, i.e. if <code>key</code> was "alien" then the URL will be "alien.json".</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">dataKey</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>When the Animation JSON file loads only this property will be stored in the Cache and used to create animation data.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">xhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.animation</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:63931</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="aseprite" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>aseprite</span><a href="#aseprite" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="aseprite.aseprite-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">aseprite</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">key</span>, <span class="tsd-kind-parameter">textureURL</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">atlasURL</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">textureXhrSettings</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">atlasXhrSettings</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#aseprite.aseprite-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Aseprite is a powerful animated sprite editor and pixel art tool.</p>
|
||
|
|
<p>You can find more details at <a href="https://www.aseprite.org/">https://www.aseprite.org/</a></p>
|
||
|
|
<p>Adds a JSON based Aseprite Animation, or array of animations, to the current load queue.</p>
|
||
|
|
<p>You can call this method from within your Scene's <code>preload</code>, along with any other files you wish to load:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">aseprite</span><span class="hl-1">(</span><span class="hl-7">'gladiator'</span><span class="hl-1">, </span><span class="hl-7">'images/Gladiator.png'</span><span class="hl-1">, </span><span class="hl-7">'images/Gladiator.json'</span><span class="hl-1">);</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>The file is <strong>not</strong> loaded right away. It is added to a queue ready to be loaded either when the loader starts,
|
||
|
|
or if it's already running, when the next free load slot becomes available. This happens automatically if you
|
||
|
|
are calling this from within the Scene's <code>preload</code> method, or a related callback. Because the file is queued
|
||
|
|
it means you cannot use the file immediately after calling this method, but must wait for the file to complete.
|
||
|
|
The typical flow for a Phaser Scene is that you load assets in the Scene's <code>preload</code> method and then when the
|
||
|
|
Scene's <code>create</code> method is called you are guaranteed that all of those assets are ready for use and have been
|
||
|
|
loaded.</p>
|
||
|
|
<p>If you call this from outside of <code>preload</code> then you are responsible for starting the Loader afterwards and monitoring
|
||
|
|
its events to know when it's safe to use the asset. Please see the Phaser.Loader.LoaderPlugin class for more details.</p>
|
||
|
|
<p>To export a compatible JSON file in Aseprite, please do the following:</p>
|
||
|
|
<ol>
|
||
|
|
<li><p>Go to "File - Export Sprite Sheet"</p>
|
||
|
|
</li>
|
||
|
|
<li><p>On the <strong>Layout</strong> tab:
|
||
|
|
2a. Set the "Sheet type" to "Packed"
|
||
|
|
2b. Set the "Constraints" to "None"
|
||
|
|
2c. Check the "Merge Duplicates" checkbox</p>
|
||
|
|
</li>
|
||
|
|
<li><p>On the <strong>Sprite</strong> tab:
|
||
|
|
3a. Set "Layers" to "Visible layers"
|
||
|
|
3b. Set "Frames" to "All frames", unless you only wish to export a sub-set of tags</p>
|
||
|
|
</li>
|
||
|
|
<li><p>On the <strong>Borders</strong> tab:
|
||
|
|
4a. Check the "Trim Sprite" and "Trim Cells" options
|
||
|
|
4b. Ensure "Border Padding", "Spacing" and "Inner Padding" are all > 0 (1 is usually enough)</p>
|
||
|
|
</li>
|
||
|
|
<li><p>On the <strong>Output</strong> tab:
|
||
|
|
5a. Check "Output File", give your image a name and make sure you choose "png files" as the file type
|
||
|
|
5b. Check "JSON Data" and give your json file a name
|
||
|
|
5c. The JSON Data type can be either a Hash or Array, Phaser doesn't mind.
|
||
|
|
5d. Make sure "Tags" is checked in the Meta options
|
||
|
|
5e. In the "Item Filename" input box, make sure it says just "{frame}" and nothing more.</p>
|
||
|
|
</li>
|
||
|
|
<li><p>Click export</p>
|
||
|
|
</li>
|
||
|
|
</ol>
|
||
|
|
<p>This was tested with Aseprite 1.2.25.</p>
|
||
|
|
<p>This will export a png and json file which you can load using the Aseprite Loader, i.e.:</p>
|
||
|
|
<p>Phaser can load all common image types: png, jpg, gif and any other format the browser can natively handle.</p>
|
||
|
|
<p>The key must be a unique String. It is used to add the file to the global Texture Manager upon a successful load.
|
||
|
|
The key should be unique both in terms of files being loaded and files already present in the Texture Manager.
|
||
|
|
Loading a file using a key that is already taken will result in a warning. If you wish to replace an existing file
|
||
|
|
then remove it from the Texture Manager first, before loading a new one.</p>
|
||
|
|
<p>Instead of passing arguments you can pass a configuration object, such as:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">aseprite</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'gladiator'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">textureURL:</span><span class="hl-1"> </span><span class="hl-7">'images/Gladiator.png'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">atlasURL:</span><span class="hl-1"> </span><span class="hl-7">'images/Gladiator.json'</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>See the documentation for <code>Phaser.Types.Loader.FileTypes.AsepriteFileConfig</code> for more details.</p>
|
||
|
|
<p>Instead of passing a URL for the JSON data you can also pass in a well formed JSON object instead.</p>
|
||
|
|
<p>Once loaded, you can call this method from within a Scene with the 'atlas' key:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">anims</span><span class="hl-1">.</span><span class="hl-6">createFromAseprite</span><span class="hl-1">(</span><span class="hl-7">'paladin'</span><span class="hl-1">);</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>Any animations defined in the JSON will now be available to use in Phaser and you play them
|
||
|
|
via their Tag name. For example, if you have an animation called 'War Cry' on your Aseprite timeline,
|
||
|
|
you can play it in Phaser using that Tag name:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">add</span><span class="hl-1">.</span><span class="hl-6">sprite</span><span class="hl-1">(</span><span class="hl-0">400</span><span class="hl-1">, </span><span class="hl-0">300</span><span class="hl-1">).</span><span class="hl-6">play</span><span class="hl-1">(</span><span class="hl-7">'War Cry'</span><span class="hl-1">);</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>When calling this method you can optionally provide an array of tag names, and only those animations
|
||
|
|
will be created. For example:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">anims</span><span class="hl-1">.</span><span class="hl-6">createFromAseprite</span><span class="hl-1">(</span><span class="hl-7">'paladin'</span><span class="hl-1">, [ </span><span class="hl-7">'step'</span><span class="hl-1">, </span><span class="hl-7">'War Cry'</span><span class="hl-1">, </span><span class="hl-7">'Magnum Break'</span><span class="hl-1"> ]);</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>This will only create the 3 animations defined. Note that the tag names are case-sensitive.</p>
|
||
|
|
<p>If you have specified a prefix in the loader, via <code>Loader.setPrefix</code> then this value will be prepended to this files
|
||
|
|
key. For example, if the prefix was <code>MENU.</code> and the key was <code>Background</code> the final key will be <code>MENU.Background</code> and
|
||
|
|
this is what you would use to retrieve the image from the Texture Manager.</p>
|
||
|
|
<p>The URL can be relative or absolute. If the URL is relative the <code>Loader.baseURL</code> and <code>Loader.path</code> values will be prepended to it.</p>
|
||
|
|
<p>If the URL isn't specified the Loader will take the key and create a filename from that. For example if the key is "alien"
|
||
|
|
and no URL is given then the Loader will set the URL to be "alien.png". It will always add <code>.png</code> as the extension, although
|
||
|
|
this can be overridden if using an object instead of method arguments. If you do not desire this action then provide a URL.</p>
|
||
|
|
<p>Note: The ability to load this type of file will only be available if the Aseprite File type has been built into Phaser.
|
||
|
|
It is available in the default build but can be excluded from custom builds.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">key</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">AsepriteFileConfig</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">AsepriteFileConfig</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The key to use for this file, or a file configuration object, or array of them.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">textureURL</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load the texture image file from. If undefined or <code>null</code> it will be set to <code><key>.png</code>, i.e. if <code>key</code> was "alien" then the URL will be "alien.png".</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">atlasURL</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">object</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load the texture atlas json data file from. If undefined or <code>null</code> it will be set to <code><key>.json</code>, i.e. if <code>key</code> was "alien" then the URL will be "alien.json". Or, a well formed JSON object.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">textureXhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object for the atlas image file. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">atlasXhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object for the atlas json file. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.aseprite</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:64052</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="atlas" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>atlas</span><a href="#atlas" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="atlas.atlas-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">atlas</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">key</span>, <span class="tsd-kind-parameter">textureURL</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">atlasURL</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">textureXhrSettings</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">atlasXhrSettings</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#atlas.atlas-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Adds a JSON based Texture Atlas, or array of atlases, to the current load queue.</p>
|
||
|
|
<p>You can call this method from within your Scene's <code>preload</code>, along with any other files you wish to load:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">atlas</span><span class="hl-1">(</span><span class="hl-7">'mainmenu'</span><span class="hl-1">, </span><span class="hl-7">'images/MainMenu.png'</span><span class="hl-1">, </span><span class="hl-7">'images/MainMenu.json'</span><span class="hl-1">);</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>The file is <strong>not</strong> loaded right away. It is added to a queue ready to be loaded either when the loader starts,
|
||
|
|
or if it's already running, when the next free load slot becomes available. This happens automatically if you
|
||
|
|
are calling this from within the Scene's <code>preload</code> method, or a related callback. Because the file is queued
|
||
|
|
it means you cannot use the file immediately after calling this method, but must wait for the file to complete.
|
||
|
|
The typical flow for a Phaser Scene is that you load assets in the Scene's <code>preload</code> method and then when the
|
||
|
|
Scene's <code>create</code> method is called you are guaranteed that all of those assets are ready for use and have been
|
||
|
|
loaded.</p>
|
||
|
|
<p>If you call this from outside of <code>preload</code> then you are responsible for starting the Loader afterwards and monitoring
|
||
|
|
its events to know when it's safe to use the asset. Please see the Phaser.Loader.LoaderPlugin class for more details.</p>
|
||
|
|
<p>Phaser expects the atlas data to be provided in a JSON file, using either the JSON Hash or JSON Array format.</p>
|
||
|
|
<p>These files are created by software such as:</p>
|
||
|
|
<ul>
|
||
|
|
<li><a href="https://www.codeandweb.com/texturepacker/tutorials/how-to-create-sprite-sheets-for-phaser3?source=photonstorm">Texture Packer</a></li>
|
||
|
|
<li><a href="https://renderhjs.net/shoebox/">Shoebox</a></li>
|
||
|
|
<li><a href="https://gammafp.com/tool/atlas-packer/">Gamma Texture Packer</a></li>
|
||
|
|
<li><a href="https://www.adobe.com/uk/products/animate.html">Adobe Flash / Animate</a></li>
|
||
|
|
<li><a href="http://free-tex-packer.com/">Free Texture Packer</a></li>
|
||
|
|
<li><a href="https://www.leshylabs.com/apps/sstool/">Leshy SpriteSheet Tool</a></li>
|
||
|
|
</ul>
|
||
|
|
<p>If you are using Texture Packer and have enabled multi-atlas support, then please use the Phaser Multi Atlas loader
|
||
|
|
instead of this one.</p>
|
||
|
|
<p>Phaser can load all common image types: png, jpg, gif and any other format the browser can natively handle.</p>
|
||
|
|
<p>The key must be a unique String. It is used to add the file to the global Texture Manager upon a successful load.
|
||
|
|
The key should be unique both in terms of files being loaded and files already present in the Texture Manager.
|
||
|
|
Loading a file using a key that is already taken will result in a warning. If you wish to replace an existing file
|
||
|
|
then remove it from the Texture Manager first, before loading a new one.</p>
|
||
|
|
<p>Instead of passing arguments you can pass a configuration object, such as:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">atlas</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'mainmenu'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">textureURL:</span><span class="hl-1"> </span><span class="hl-7">'images/MainMenu.png'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">atlasURL:</span><span class="hl-1"> </span><span class="hl-7">'images/MainMenu.json'</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>See the documentation for <code>Phaser.Types.Loader.FileTypes.AtlasJSONFileConfig</code> for more details.</p>
|
||
|
|
<p>Instead of passing a URL for the atlas JSON data you can also pass in a well formed JSON object instead.</p>
|
||
|
|
<p>Once the atlas has finished loading you can use frames from it as textures for a Game Object by referencing its key:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">atlas</span><span class="hl-1">(</span><span class="hl-7">'mainmenu'</span><span class="hl-1">, </span><span class="hl-7">'images/MainMenu.png'</span><span class="hl-1">, </span><span class="hl-7">'images/MainMenu.json'</span><span class="hl-1">);</span><br/><span class="hl-8">// and later in your game ...</span><br/><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">add</span><span class="hl-1">.</span><span class="hl-6">image</span><span class="hl-1">(</span><span class="hl-2">x</span><span class="hl-1">, </span><span class="hl-2">y</span><span class="hl-1">, </span><span class="hl-7">'mainmenu'</span><span class="hl-1">, </span><span class="hl-7">'background'</span><span class="hl-1">);</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>To get a list of all available frames within an atlas please consult your Texture Atlas software.</p>
|
||
|
|
<p>If you have specified a prefix in the loader, via <code>Loader.setPrefix</code> then this value will be prepended to this files
|
||
|
|
key. For example, if the prefix was <code>MENU.</code> and the key was <code>Background</code> the final key will be <code>MENU.Background</code> and
|
||
|
|
this is what you would use to retrieve the image from the Texture Manager.</p>
|
||
|
|
<p>The URL can be relative or absolute. If the URL is relative the <code>Loader.baseURL</code> and <code>Loader.path</code> values will be prepended to it.</p>
|
||
|
|
<p>If the URL isn't specified the Loader will take the key and create a filename from that. For example if the key is "alien"
|
||
|
|
and no URL is given then the Loader will set the URL to be "alien.png". It will always add <code>.png</code> as the extension, although
|
||
|
|
this can be overridden if using an object instead of method arguments. If you do not desire this action then provide a URL.</p>
|
||
|
|
<p>Phaser also supports the automatic loading of associated normal maps. If you have a normal map to go with this image,
|
||
|
|
then you can specify it by providing an array as the <code>url</code> where the second element is the normal map:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">atlas</span><span class="hl-1">(</span><span class="hl-7">'mainmenu'</span><span class="hl-1">, [ </span><span class="hl-7">'images/MainMenu.png'</span><span class="hl-1">, </span><span class="hl-7">'images/MainMenu-n.png'</span><span class="hl-1"> ], </span><span class="hl-7">'images/MainMenu.json'</span><span class="hl-1">);</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>Or, if you are using a config object use the <code>normalMap</code> property:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">atlas</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'mainmenu'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">textureURL:</span><span class="hl-1"> </span><span class="hl-7">'images/MainMenu.png'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">normalMap:</span><span class="hl-1"> </span><span class="hl-7">'images/MainMenu-n.png'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">atlasURL:</span><span class="hl-1"> </span><span class="hl-7">'images/MainMenu.json'</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>The normal map file is subject to the same conditions as the image file with regard to the path, baseURL, CORs and XHR Settings.
|
||
|
|
Normal maps are a WebGL only feature.</p>
|
||
|
|
<p>Note: The ability to load this type of file will only be available if the Atlas JSON File type has been built into Phaser.
|
||
|
|
It is available in the default build but can be excluded from custom builds.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">key</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">AtlasJSONFileConfig</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">AtlasJSONFileConfig</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The key to use for this file, or a file configuration object, or array of them.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">textureURL</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load the texture image file from. If undefined or <code>null</code> it will be set to <code><key>.png</code>, i.e. if <code>key</code> was "alien" then the URL will be "alien.png".</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">atlasURL</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">object</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load the texture atlas json data file from. If undefined or <code>null</code> it will be set to <code><key>.json</code>, i.e. if <code>key</code> was "alien" then the URL will be "alien.json". Or, a well formed JSON object.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">textureXhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object for the atlas image file. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">atlasXhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object for the atlas json file. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.atlas</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:64161</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="atlasXML" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>atlasXML</span><a href="#atlasXML" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="atlasXML.atlasXML-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">atlasXML</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">key</span>, <span class="tsd-kind-parameter">textureURL</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">atlasURL</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">textureXhrSettings</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">atlasXhrSettings</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#atlasXML.atlasXML-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Adds an XML based Texture Atlas, or array of atlases, to the current load queue.</p>
|
||
|
|
<p>You can call this method from within your Scene's <code>preload</code>, along with any other files you wish to load:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">atlasXML</span><span class="hl-1">(</span><span class="hl-7">'mainmenu'</span><span class="hl-1">, </span><span class="hl-7">'images/MainMenu.png'</span><span class="hl-1">, </span><span class="hl-7">'images/MainMenu.xml'</span><span class="hl-1">);</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>The file is <strong>not</strong> loaded right away. It is added to a queue ready to be loaded either when the loader starts,
|
||
|
|
or if it's already running, when the next free load slot becomes available. This happens automatically if you
|
||
|
|
are calling this from within the Scene's <code>preload</code> method, or a related callback. Because the file is queued
|
||
|
|
it means you cannot use the file immediately after calling this method, but must wait for the file to complete.
|
||
|
|
The typical flow for a Phaser Scene is that you load assets in the Scene's <code>preload</code> method and then when the
|
||
|
|
Scene's <code>create</code> method is called you are guaranteed that all of those assets are ready for use and have been
|
||
|
|
loaded.</p>
|
||
|
|
<p>If you call this from outside of <code>preload</code> then you are responsible for starting the Loader afterwards and monitoring
|
||
|
|
its events to know when it's safe to use the asset. Please see the Phaser.Loader.LoaderPlugin class for more details.</p>
|
||
|
|
<p>Phaser expects the atlas data to be provided in an XML file format.
|
||
|
|
These files are created by software such as Shoebox and Adobe Flash / Animate.</p>
|
||
|
|
<p>Phaser can load all common image types: png, jpg, gif and any other format the browser can natively handle.</p>
|
||
|
|
<p>The key must be a unique String. It is used to add the file to the global Texture Manager upon a successful load.
|
||
|
|
The key should be unique both in terms of files being loaded and files already present in the Texture Manager.
|
||
|
|
Loading a file using a key that is already taken will result in a warning. If you wish to replace an existing file
|
||
|
|
then remove it from the Texture Manager first, before loading a new one.</p>
|
||
|
|
<p>Instead of passing arguments you can pass a configuration object, such as:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">atlasXML</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'mainmenu'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">textureURL:</span><span class="hl-1"> </span><span class="hl-7">'images/MainMenu.png'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">atlasURL:</span><span class="hl-1"> </span><span class="hl-7">'images/MainMenu.xml'</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>See the documentation for <code>Phaser.Types.Loader.FileTypes.AtlasXMLFileConfig</code> for more details.</p>
|
||
|
|
<p>Once the atlas has finished loading you can use frames from it as textures for a Game Object by referencing its key:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">atlasXML</span><span class="hl-1">(</span><span class="hl-7">'mainmenu'</span><span class="hl-1">, </span><span class="hl-7">'images/MainMenu.png'</span><span class="hl-1">, </span><span class="hl-7">'images/MainMenu.xml'</span><span class="hl-1">);</span><br/><span class="hl-8">// and later in your game ...</span><br/><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">add</span><span class="hl-1">.</span><span class="hl-6">image</span><span class="hl-1">(</span><span class="hl-2">x</span><span class="hl-1">, </span><span class="hl-2">y</span><span class="hl-1">, </span><span class="hl-7">'mainmenu'</span><span class="hl-1">, </span><span class="hl-7">'background'</span><span class="hl-1">);</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>To get a list of all available frames within an atlas please consult your Texture Atlas software.</p>
|
||
|
|
<p>If you have specified a prefix in the loader, via <code>Loader.setPrefix</code> then this value will be prepended to this files
|
||
|
|
key. For example, if the prefix was <code>MENU.</code> and the key was <code>Background</code> the final key will be <code>MENU.Background</code> and
|
||
|
|
this is what you would use to retrieve the image from the Texture Manager.</p>
|
||
|
|
<p>The URL can be relative or absolute. If the URL is relative the <code>Loader.baseURL</code> and <code>Loader.path</code> values will be prepended to it.</p>
|
||
|
|
<p>If the URL isn't specified the Loader will take the key and create a filename from that. For example if the key is "alien"
|
||
|
|
and no URL is given then the Loader will set the URL to be "alien.png". It will always add <code>.png</code> as the extension, although
|
||
|
|
this can be overridden if using an object instead of method arguments. If you do not desire this action then provide a URL.</p>
|
||
|
|
<p>Phaser also supports the automatic loading of associated normal maps. If you have a normal map to go with this image,
|
||
|
|
then you can specify it by providing an array as the <code>url</code> where the second element is the normal map:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">atlasXML</span><span class="hl-1">(</span><span class="hl-7">'mainmenu'</span><span class="hl-1">, [ </span><span class="hl-7">'images/MainMenu.png'</span><span class="hl-1">, </span><span class="hl-7">'images/MainMenu-n.png'</span><span class="hl-1"> ], </span><span class="hl-7">'images/MainMenu.xml'</span><span class="hl-1">);</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>Or, if you are using a config object use the <code>normalMap</code> property:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">atlasXML</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'mainmenu'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">textureURL:</span><span class="hl-1"> </span><span class="hl-7">'images/MainMenu.png'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">normalMap:</span><span class="hl-1"> </span><span class="hl-7">'images/MainMenu-n.png'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">atlasURL:</span><span class="hl-1"> </span><span class="hl-7">'images/MainMenu.xml'</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>The normal map file is subject to the same conditions as the image file with regard to the path, baseURL, CORs and XHR Settings.
|
||
|
|
Normal maps are a WebGL only feature.</p>
|
||
|
|
<p>Note: The ability to load this type of file will only be available if the Atlas XML File type has been built into Phaser.
|
||
|
|
It is available in the default build but can be excluded from custom builds.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">key</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">AtlasXMLFileConfig</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">AtlasXMLFileConfig</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The key to use for this file, or a file configuration object, or array of them.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">textureURL</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load the texture image file from. If undefined or <code>null</code> it will be set to <code><key>.png</code>, i.e. if <code>key</code> was "alien" then the URL will be "alien.png".</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">atlasURL</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load the texture atlas xml data file from. If undefined or <code>null</code> it will be set to <code><key>.xml</code>, i.e. if <code>key</code> was "alien" then the URL will be "alien.xml".</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">textureXhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object for the atlas image file. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">atlasXhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object for the atlas xml file. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.atlasXML</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:64257</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="audio" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>audio</span><a href="#audio" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="audio.audio-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">audio</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">key</span>, <span class="tsd-kind-parameter">urls</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">config</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">xhrSettings</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#audio.audio-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Adds an Audio or HTML5Audio file, or array of audio files, to the current load queue.</p>
|
||
|
|
<p>You can call this method from within your Scene's <code>preload</code>, along with any other files you wish to load:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">audio</span><span class="hl-1">(</span><span class="hl-7">'title'</span><span class="hl-1">, [ </span><span class="hl-7">'music/Title.ogg'</span><span class="hl-1">, </span><span class="hl-7">'music/Title.mp3'</span><span class="hl-1">, </span><span class="hl-7">'music/Title.m4a'</span><span class="hl-1"> ]);</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>The file is <strong>not</strong> loaded right away. It is added to a queue ready to be loaded either when the loader starts,
|
||
|
|
or if it's already running, when the next free load slot becomes available. This happens automatically if you
|
||
|
|
are calling this from within the Scene's <code>preload</code> method, or a related callback. Because the file is queued
|
||
|
|
it means you cannot use the file immediately after calling this method, but must wait for the file to complete.
|
||
|
|
The typical flow for a Phaser Scene is that you load assets in the Scene's <code>preload</code> method and then when the
|
||
|
|
Scene's <code>create</code> method is called you are guaranteed that all of those assets are ready for use and have been
|
||
|
|
loaded.</p>
|
||
|
|
<p>The key must be a unique String. It is used to add the file to the global Audio Cache upon a successful load.
|
||
|
|
The key should be unique both in terms of files being loaded and files already present in the Audio Cache.
|
||
|
|
Loading a file using a key that is already taken will result in a warning. If you wish to replace an existing file
|
||
|
|
then remove it from the Audio Cache first, before loading a new one.</p>
|
||
|
|
<p>Instead of passing arguments you can pass a configuration object, such as:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">audio</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'title'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">url:</span><span class="hl-1"> [ </span><span class="hl-7">'music/Title.ogg'</span><span class="hl-1">, </span><span class="hl-7">'music/Title.mp3'</span><span class="hl-1">, </span><span class="hl-7">'music/Title.m4a'</span><span class="hl-1"> ]</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>See the documentation for <code>Phaser.Types.Loader.FileTypes.AudioFileConfig</code> for more details.</p>
|
||
|
|
<p>The URLs can be relative or absolute. If the URLs are relative the <code>Loader.baseURL</code> and <code>Loader.path</code> values will be prepended to them.</p>
|
||
|
|
<p>Due to different browsers supporting different audio file types you should usually provide your audio files in a variety of formats.
|
||
|
|
ogg, mp3 and m4a are the most common. If you provide an array of URLs then the Loader will determine which <em>one</em> file to load based on
|
||
|
|
browser support.</p>
|
||
|
|
<p>If audio has been disabled in your game, either via the game config, or lack of support from the device, then no audio will be loaded.</p>
|
||
|
|
<p>Note: The ability to load this type of file will only be available if the Audio File type has been built into Phaser.
|
||
|
|
It is available in the default build but can be excluded from custom builds.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">key</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">AudioFileConfig</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">AudioFileConfig</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The key to use for this file, or a file configuration object, or array of them.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">urls</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">AudioFileURLConfig</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">AudioFileURLConfig</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load the audio files from.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">config</span>: <span class="tsd-signature-type">any</span></span><div class="tsd-comment tsd-typography"><p>An object containing an <code>instances</code> property for HTML5Audio. Defaults to 1.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">xhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.audio</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:64310</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="audioSprite" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>audio<wbr/>Sprite</span><a href="#audioSprite" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="audioSprite.audioSprite-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">audio<wbr/>Sprite</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">key</span>, <span class="tsd-kind-parameter">jsonURL</span>, <span class="tsd-kind-parameter">audioURL</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">audioConfig</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">audioXhrSettings</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">jsonXhrSettings</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#audioSprite.audioSprite-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Adds a JSON based Audio Sprite, or array of audio sprites, to the current load queue.</p>
|
||
|
|
<p>You can call this method from within your Scene's <code>preload</code>, along with any other files you wish to load:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">audioSprite</span><span class="hl-1">(</span><span class="hl-7">'kyobi'</span><span class="hl-1">, </span><span class="hl-7">'kyobi.json'</span><span class="hl-1">, [</span><br/><span class="hl-1"> </span><span class="hl-7">'kyobi.ogg'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-7">'kyobi.mp3'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-7">'kyobi.m4a'</span><br/><span class="hl-1"> ]);</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>Audio Sprites are a combination of audio files and a JSON configuration.
|
||
|
|
The JSON follows the format of that created by <a href="https://github.com/tonistiigi/audiosprite">https://github.com/tonistiigi/audiosprite</a></p>
|
||
|
|
<p>If the JSON file includes a 'resource' object then you can let Phaser parse it and load the audio
|
||
|
|
files automatically based on its content. To do this exclude the audio URLs from the load:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">audioSprite</span><span class="hl-1">(</span><span class="hl-7">'kyobi'</span><span class="hl-1">, </span><span class="hl-7">'kyobi.json'</span><span class="hl-1">);</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>The file is <strong>not</strong> loaded right away. It is added to a queue ready to be loaded either when the loader starts,
|
||
|
|
or if it's already running, when the next free load slot becomes available. This happens automatically if you
|
||
|
|
are calling this from within the Scene's <code>preload</code> method, or a related callback. Because the file is queued
|
||
|
|
it means you cannot use the file immediately after calling this method, but must wait for the file to complete.
|
||
|
|
The typical flow for a Phaser Scene is that you load assets in the Scene's <code>preload</code> method and then when the
|
||
|
|
Scene's <code>create</code> method is called you are guaranteed that all of those assets are ready for use and have been
|
||
|
|
loaded.</p>
|
||
|
|
<p>If you call this from outside of <code>preload</code> then you are responsible for starting the Loader afterwards and monitoring
|
||
|
|
its events to know when it's safe to use the asset. Please see the Phaser.Loader.LoaderPlugin class for more details.</p>
|
||
|
|
<p>The key must be a unique String. It is used to add the file to the global Audio Cache upon a successful load.
|
||
|
|
The key should be unique both in terms of files being loaded and files already present in the Audio Cache.
|
||
|
|
Loading a file using a key that is already taken will result in a warning. If you wish to replace an existing file
|
||
|
|
then remove it from the Audio Cache first, before loading a new one.</p>
|
||
|
|
<p>Instead of passing arguments you can pass a configuration object, such as:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">audioSprite</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'kyobi'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">jsonURL:</span><span class="hl-1"> </span><span class="hl-7">'audio/Kyobi.json'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">audioURL:</span><span class="hl-1"> [</span><br/><span class="hl-1"> </span><span class="hl-7">'audio/Kyobi.ogg'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-7">'audio/Kyobi.mp3'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-7">'audio/Kyobi.m4a'</span><br/><span class="hl-1"> ]</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>See the documentation for <code>Phaser.Types.Loader.FileTypes.AudioSpriteFileConfig</code> for more details.</p>
|
||
|
|
<p>Instead of passing a URL for the audio JSON data you can also pass in a well formed JSON object instead.</p>
|
||
|
|
<p>Once the audio has finished loading you can use it create an Audio Sprite by referencing its key:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">audioSprite</span><span class="hl-1">(</span><span class="hl-7">'kyobi'</span><span class="hl-1">, </span><span class="hl-7">'kyobi.json'</span><span class="hl-1">);</span><br/><span class="hl-8">// and later in your game ...</span><br/><span class="hl-4">var</span><span class="hl-1"> </span><span class="hl-2">music</span><span class="hl-1"> = </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">sound</span><span class="hl-1">.</span><span class="hl-6">addAudioSprite</span><span class="hl-1">(</span><span class="hl-7">'kyobi'</span><span class="hl-1">);</span><br/><span class="hl-2">music</span><span class="hl-1">.</span><span class="hl-6">play</span><span class="hl-1">(</span><span class="hl-7">'title'</span><span class="hl-1">);</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>If you have specified a prefix in the loader, via <code>Loader.setPrefix</code> then this value will be prepended to this files
|
||
|
|
key. For example, if the prefix was <code>MENU.</code> and the key was <code>Background</code> the final key will be <code>MENU.Background</code> and
|
||
|
|
this is what you would use to retrieve the image from the Texture Manager.</p>
|
||
|
|
<p>The URL can be relative or absolute. If the URL is relative the <code>Loader.baseURL</code> and <code>Loader.path</code> values will be prepended to it.</p>
|
||
|
|
<p>Due to different browsers supporting different audio file types you should usually provide your audio files in a variety of formats.
|
||
|
|
ogg, mp3 and m4a are the most common. If you provide an array of URLs then the Loader will determine which <em>one</em> file to load based on
|
||
|
|
browser support.</p>
|
||
|
|
<p>If audio has been disabled in your game, either via the game config, or lack of support from the device, then no audio will be loaded.</p>
|
||
|
|
<p>Note: The ability to load this type of file will only be available if the Audio Sprite File type has been built into Phaser.
|
||
|
|
It is available in the default build but can be excluded from custom builds.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">key</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">AudioSpriteFileConfig</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">AudioSpriteFileConfig</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The key to use for this file, or a file configuration object, or an array of objects.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><span class="tsd-kind-parameter">jsonURL</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load the json file from. Or a well formed JSON object to use instead.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">audioURL</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load the audio file from. If empty it will be obtained by parsing the JSON file.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">audioConfig</span>: <span class="tsd-signature-type">any</span></span><div class="tsd-comment tsd-typography"><p>The audio configuration options.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">audioXhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object for the audio file. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">jsonXhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object for the json file. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.audioSprite</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:64405</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="binary" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>binary</span><a href="#binary" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="binary.binary-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">binary</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">key</span>, <span class="tsd-kind-parameter">url</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">dataType</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">xhrSettings</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#binary.binary-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Adds a Binary file, or array of Binary files, to the current load queue.</p>
|
||
|
|
<p>You can call this method from within your Scene's <code>preload</code>, along with any other files you wish to load:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">binary</span><span class="hl-1">(</span><span class="hl-7">'doom'</span><span class="hl-1">, </span><span class="hl-7">'files/Doom.wad'</span><span class="hl-1">);</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>The file is <strong>not</strong> loaded right away. It is added to a queue ready to be loaded either when the loader starts,
|
||
|
|
or if it's already running, when the next free load slot becomes available. This happens automatically if you
|
||
|
|
are calling this from within the Scene's <code>preload</code> method, or a related callback. Because the file is queued
|
||
|
|
it means you cannot use the file immediately after calling this method, but must wait for the file to complete.
|
||
|
|
The typical flow for a Phaser Scene is that you load assets in the Scene's <code>preload</code> method and then when the
|
||
|
|
Scene's <code>create</code> method is called you are guaranteed that all of those assets are ready for use and have been
|
||
|
|
loaded.</p>
|
||
|
|
<p>The key must be a unique String. It is used to add the file to the global Binary Cache upon a successful load.
|
||
|
|
The key should be unique both in terms of files being loaded and files already present in the Binary Cache.
|
||
|
|
Loading a file using a key that is already taken will result in a warning. If you wish to replace an existing file
|
||
|
|
then remove it from the Binary Cache first, before loading a new one.</p>
|
||
|
|
<p>Instead of passing arguments you can pass a configuration object, such as:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">binary</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'doom'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">url:</span><span class="hl-1"> </span><span class="hl-7">'files/Doom.wad'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">dataType:</span><span class="hl-1"> </span><span class="hl-2">Uint8Array</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>See the documentation for <code>Phaser.Types.Loader.FileTypes.BinaryFileConfig</code> for more details.</p>
|
||
|
|
<p>Once the file has finished loading you can access it from its Cache using its key:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">binary</span><span class="hl-1">(</span><span class="hl-7">'doom'</span><span class="hl-1">, </span><span class="hl-7">'files/Doom.wad'</span><span class="hl-1">);</span><br/><span class="hl-8">// and later in your game ...</span><br/><span class="hl-4">var</span><span class="hl-1"> </span><span class="hl-2">data</span><span class="hl-1"> = </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">cache</span><span class="hl-1">.</span><span class="hl-2">binary</span><span class="hl-1">.</span><span class="hl-6">get</span><span class="hl-1">(</span><span class="hl-7">'doom'</span><span class="hl-1">);</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>If you have specified a prefix in the loader, via <code>Loader.setPrefix</code> then this value will be prepended to this files
|
||
|
|
key. For example, if the prefix was <code>LEVEL1.</code> and the key was <code>Data</code> the final key will be <code>LEVEL1.Data</code> and
|
||
|
|
this is what you would use to retrieve the text from the Binary Cache.</p>
|
||
|
|
<p>The URL can be relative or absolute. If the URL is relative the <code>Loader.baseURL</code> and <code>Loader.path</code> values will be prepended to it.</p>
|
||
|
|
<p>If the URL isn't specified the Loader will take the key and create a filename from that. For example if the key is "doom"
|
||
|
|
and no URL is given then the Loader will set the URL to be "doom.bin". It will always add <code>.bin</code> as the extension, although
|
||
|
|
this can be overridden if using an object instead of method arguments. If you do not desire this action then provide a URL.</p>
|
||
|
|
<p>Note: The ability to load this type of file will only be available if the Binary File type has been built into Phaser.
|
||
|
|
It is available in the default build but can be excluded from custom builds.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">key</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">BinaryFileConfig</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">BinaryFileConfig</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The key to use for this file, or a file configuration object, or array of them.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">url</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load this file from. If undefined or <code>null</code> it will be set to <code><key>.bin</code>, i.e. if <code>key</code> was "alien" then the URL will be "alien.bin".</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">dataType</span>: <span class="tsd-signature-type">any</span></span><div class="tsd-comment tsd-typography"><p>Optional type to cast the binary file to once loaded. For example, <code>Uint8Array</code>.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">xhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.binary</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:64469</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="bitmapFont" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>bitmap<wbr/>Font</span><a href="#bitmapFont" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="bitmapFont.bitmapFont-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">bitmap<wbr/>Font</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">key</span>, <span class="tsd-kind-parameter">textureURL</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">fontDataURL</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">textureXhrSettings</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">fontDataXhrSettings</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#bitmapFont.bitmapFont-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Adds an XML based Bitmap Font, or array of fonts, to the current load queue.</p>
|
||
|
|
<p>You can call this method from within your Scene's <code>preload</code>, along with any other files you wish to load:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">bitmapFont</span><span class="hl-1">(</span><span class="hl-7">'goldenFont'</span><span class="hl-1">, </span><span class="hl-7">'images/GoldFont.png'</span><span class="hl-1">, </span><span class="hl-7">'images/GoldFont.xml'</span><span class="hl-1">);</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>The file is <strong>not</strong> loaded right away. It is added to a queue ready to be loaded either when the loader starts,
|
||
|
|
or if it's already running, when the next free load slot becomes available. This happens automatically if you
|
||
|
|
are calling this from within the Scene's <code>preload</code> method, or a related callback. Because the file is queued
|
||
|
|
it means you cannot use the file immediately after calling this method, but must wait for the file to complete.
|
||
|
|
The typical flow for a Phaser Scene is that you load assets in the Scene's <code>preload</code> method and then when the
|
||
|
|
Scene's <code>create</code> method is called you are guaranteed that all of those assets are ready for use and have been
|
||
|
|
loaded.</p>
|
||
|
|
<p>If you call this from outside of <code>preload</code> then you are responsible for starting the Loader afterwards and monitoring
|
||
|
|
its events to know when it's safe to use the asset. Please see the Phaser.Loader.LoaderPlugin class for more details.</p>
|
||
|
|
<p>Phaser expects the font data to be provided in an XML file format.
|
||
|
|
These files are created by software such as the <a href="http://www.angelcode.com/products/bmfont/">Angelcode Bitmap Font Generator</a>,
|
||
|
|
<a href="http://kvazars.com/littera/">Littera</a> or <a href="https://71squared.com/glyphdesigner">Glyph Designer</a></p>
|
||
|
|
<p>Phaser can load all common image types: png, jpg, gif and any other format the browser can natively handle.</p>
|
||
|
|
<p>The key must be a unique String. It is used to add the file to the global Texture Manager upon a successful load.
|
||
|
|
The key should be unique both in terms of files being loaded and files already present in the Texture Manager.
|
||
|
|
Loading a file using a key that is already taken will result in a warning. If you wish to replace an existing file
|
||
|
|
then remove it from the Texture Manager first, before loading a new one.</p>
|
||
|
|
<p>Instead of passing arguments you can pass a configuration object, such as:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">bitmapFont</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'goldenFont'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">textureURL:</span><span class="hl-1"> </span><span class="hl-7">'images/GoldFont.png'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">fontDataURL:</span><span class="hl-1"> </span><span class="hl-7">'images/GoldFont.xml'</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>See the documentation for <code>Phaser.Types.Loader.FileTypes.BitmapFontFileConfig</code> for more details.</p>
|
||
|
|
<p>Once the atlas has finished loading you can use key of it when creating a Bitmap Text Game Object:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">bitmapFont</span><span class="hl-1">(</span><span class="hl-7">'goldenFont'</span><span class="hl-1">, </span><span class="hl-7">'images/GoldFont.png'</span><span class="hl-1">, </span><span class="hl-7">'images/GoldFont.xml'</span><span class="hl-1">);</span><br/><span class="hl-8">// and later in your game ...</span><br/><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">add</span><span class="hl-1">.</span><span class="hl-6">bitmapText</span><span class="hl-1">(</span><span class="hl-2">x</span><span class="hl-1">, </span><span class="hl-2">y</span><span class="hl-1">, </span><span class="hl-7">'goldenFont'</span><span class="hl-1">, </span><span class="hl-7">'Hello World'</span><span class="hl-1">);</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>If you have specified a prefix in the loader, via <code>Loader.setPrefix</code> then this value will be prepended to this files
|
||
|
|
key. For example, if the prefix was <code>MENU.</code> and the key was <code>Background</code> the final key will be <code>MENU.Background</code> and
|
||
|
|
this is what you would use when creating a Bitmap Text object.</p>
|
||
|
|
<p>The URL can be relative or absolute. If the URL is relative the <code>Loader.baseURL</code> and <code>Loader.path</code> values will be prepended to it.</p>
|
||
|
|
<p>If the URL isn't specified the Loader will take the key and create a filename from that. For example if the key is "alien"
|
||
|
|
and no URL is given then the Loader will set the URL to be "alien.png". It will always add <code>.png</code> as the extension, although
|
||
|
|
this can be overridden if using an object instead of method arguments. If you do not desire this action then provide a URL.</p>
|
||
|
|
<p>Phaser also supports the automatic loading of associated normal maps. If you have a normal map to go with this image,
|
||
|
|
then you can specify it by providing an array as the <code>url</code> where the second element is the normal map:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">bitmapFont</span><span class="hl-1">(</span><span class="hl-7">'goldenFont'</span><span class="hl-1">, [ </span><span class="hl-7">'images/GoldFont.png'</span><span class="hl-1">, </span><span class="hl-7">'images/GoldFont-n.png'</span><span class="hl-1"> ], </span><span class="hl-7">'images/GoldFont.xml'</span><span class="hl-1">);</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>Or, if you are using a config object use the <code>normalMap</code> property:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">bitmapFont</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'goldenFont'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">textureURL:</span><span class="hl-1"> </span><span class="hl-7">'images/GoldFont.png'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">normalMap:</span><span class="hl-1"> </span><span class="hl-7">'images/GoldFont-n.png'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">fontDataURL:</span><span class="hl-1"> </span><span class="hl-7">'images/GoldFont.xml'</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>The normal map file is subject to the same conditions as the image file with regard to the path, baseURL, CORs and XHR Settings.
|
||
|
|
Normal maps are a WebGL only feature.</p>
|
||
|
|
<p>Note: The ability to load this type of file will only be available if the Bitmap Font File type has been built into Phaser.
|
||
|
|
It is available in the default build but can be excluded from custom builds.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">key</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">BitmapFontFileConfig</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">BitmapFontFileConfig</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The key to use for this file, or a file configuration object, or array of them.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">textureURL</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load the font image file from. If undefined or <code>null</code> it will be set to <code><key>.png</code>, i.e. if <code>key</code> was "alien" then the URL will be "alien.png".</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">fontDataURL</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load the font xml data file from. If undefined or <code>null</code> it will be set to <code><key>.xml</code>, i.e. if <code>key</code> was "alien" then the URL will be "alien.xml".</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">textureXhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object for the font image file. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">fontDataXhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object for the font data xml file. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.bitmapFont</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:64563</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="css" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>css</span><a href="#css" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="css.css-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">css</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">key</span>, <span class="tsd-kind-parameter">url</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">xhrSettings</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#css.css-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Adds a CSS file, or array of CSS files, to the current load queue.</p>
|
||
|
|
<p>You can call this method from within your Scene's <code>preload</code>, along with any other files you wish to load:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">css</span><span class="hl-1">(</span><span class="hl-7">'headers'</span><span class="hl-1">, </span><span class="hl-7">'styles/headers.css'</span><span class="hl-1">);</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>The file is <strong>not</strong> loaded right away. It is added to a queue ready to be loaded either when the loader starts,
|
||
|
|
or if it's already running, when the next free load slot becomes available. This happens automatically if you
|
||
|
|
are calling this from within the Scene's <code>preload</code> method, or a related callback. Because the file is queued
|
||
|
|
it means you cannot use the file immediately after calling this method, but must wait for the file to complete.
|
||
|
|
The typical flow for a Phaser Scene is that you load assets in the Scene's <code>preload</code> method and then when the
|
||
|
|
Scene's <code>create</code> method is called you are guaranteed that all of those assets are ready for use and have been
|
||
|
|
loaded.</p>
|
||
|
|
<p>The key must be a unique String and not already in-use by another file in the Loader.</p>
|
||
|
|
<p>Instead of passing arguments you can pass a configuration object, such as:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">css</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'headers'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">url:</span><span class="hl-1"> </span><span class="hl-7">'styles/headers.css'</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>See the documentation for <code>Phaser.Types.Loader.FileTypes.CSSFileConfig</code> for more details.</p>
|
||
|
|
<p>Once the file has finished loading it will automatically be converted into a style DOM element
|
||
|
|
via <code>document.createElement('style')</code>. It will have its <code>defer</code> property set to false and then the
|
||
|
|
resulting element will be appended to <code>document.head</code>. The CSS styles are then applied to the current document.</p>
|
||
|
|
<p>The URL can be relative or absolute. If the URL is relative the <code>Loader.baseURL</code> and <code>Loader.path</code> values will be prepended to it.</p>
|
||
|
|
<p>If the URL isn't specified the Loader will take the key and create a filename from that. For example if the key is "alien"
|
||
|
|
and no URL is given then the Loader will set the URL to be "alien.css". It will always add <code>.css</code> as the extension, although
|
||
|
|
this can be overridden if using an object instead of method arguments. If you do not desire this action then provide a URL.</p>
|
||
|
|
<p>Note: The ability to load this type of file will only be available if the CSS File type has been built into Phaser.
|
||
|
|
It is available in the default build but can be excluded from custom builds.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">key</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">CSSFileConfig</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">CSSFileConfig</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The key to use for this file, or a file configuration object, or array of them.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">url</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load this file from. If undefined or <code>null</code> it will be set to <code><key>.css</code>, i.e. if <code>key</code> was "alien" then the URL will be "alien.css".</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">xhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.css</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:64748</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="destroy" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>destroy</span><a href="#destroy" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="destroy.destroy-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">destroy</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#destroy.destroy-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Removes all listeners.</p>
|
||
|
|
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.destroy</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:9911</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="emit" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>emit</span><a href="#emit" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="emit.emit-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">emit</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">event</span>, <span class="tsd-signature-symbol">...</span><span class="tsd-kind-parameter">args</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><a href="#emit.emit-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Calls each of the listeners registered for a given event.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">event</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">symbol</span></span><div class="tsd-comment tsd-typography"><p>The event name.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagRest">Rest</code> <span class="tsd-signature-symbol">...</span><span class="tsd-kind-parameter">args</span>: <span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>Additional arguments that will be passed to the event handler.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.emit</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:9935</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="eventNames" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>event<wbr/>Names</span><a href="#eventNames" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="eventNames.eventNames-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">event<wbr/>Names</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">symbol</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">[]</span><a href="#eventNames.eventNames-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Return an array listing the events for which the emitter has registered listeners.</p>
|
||
|
|
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-symbol">(</span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">symbol</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">[]</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.eventNames</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:9916</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="fileProcessComplete" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>file<wbr/>Process<wbr/>Complete</span><a href="#fileProcessComplete" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="fileProcessComplete.fileProcessComplete-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">file<wbr/>Process<wbr/>Complete</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">file</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#fileProcessComplete.fileProcessComplete-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>An internal method that is called automatically by the File when it has finished processing.</p>
|
||
|
|
<p>If the process was successful, and the File isn't part of a MultiFile, its <code>addToCache</code> method is called.</p>
|
||
|
|
<p>It this then removed from the queue. If there are no more files to load <code>loadComplete</code> is called.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">file</span>: <span class="tsd-signature-type">File</span></span><div class="tsd-comment tsd-typography"><p>The file that has finished processing.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.fileProcessComplete</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66703</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="flagForRemoval" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>flag<wbr/>For<wbr/>Removal</span><a href="#flagForRemoval" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="flagForRemoval.flagForRemoval-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">flag<wbr/>For<wbr/>Removal</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">file</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#flagForRemoval.flagForRemoval-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Adds a File into the pending-deletion queue.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">file</span>: <span class="tsd-signature-type">File</span></span><div class="tsd-comment tsd-typography"><p>The File to be queued for deletion when the Loader completes.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.flagForRemoval</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66717</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="glsl" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>glsl</span><a href="#glsl" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="glsl.glsl-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">glsl</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">key</span>, <span class="tsd-kind-parameter">url</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">shaderType</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">xhrSettings</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#glsl.glsl-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Adds a GLSL file, or array of GLSL files, to the current load queue.
|
||
|
|
In Phaser 3 GLSL files are just plain Text files at the current moment in time.</p>
|
||
|
|
<p>You can call this method from within your Scene's <code>preload</code>, along with any other files you wish to load:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">glsl</span><span class="hl-1">(</span><span class="hl-7">'plasma'</span><span class="hl-1">, </span><span class="hl-7">'shaders/Plasma.glsl'</span><span class="hl-1">);</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>The file is <strong>not</strong> loaded right away. It is added to a queue ready to be loaded either when the loader starts,
|
||
|
|
or if it's already running, when the next free load slot becomes available. This happens automatically if you
|
||
|
|
are calling this from within the Scene's <code>preload</code> method, or a related callback. Because the file is queued
|
||
|
|
it means you cannot use the file immediately after calling this method, but must wait for the file to complete.
|
||
|
|
The typical flow for a Phaser Scene is that you load assets in the Scene's <code>preload</code> method and then when the
|
||
|
|
Scene's <code>create</code> method is called you are guaranteed that all of those assets are ready for use and have been
|
||
|
|
loaded.</p>
|
||
|
|
<p>The key must be a unique String. It is used to add the file to the global Shader Cache upon a successful load.
|
||
|
|
The key should be unique both in terms of files being loaded and files already present in the Shader Cache.
|
||
|
|
Loading a file using a key that is already taken will result in a warning. If you wish to replace an existing file
|
||
|
|
then remove it from the Shader Cache first, before loading a new one.</p>
|
||
|
|
<p>Instead of passing arguments you can pass a configuration object, such as:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">glsl</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'plasma'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">shaderType:</span><span class="hl-1"> </span><span class="hl-7">'fragment'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">url:</span><span class="hl-1"> </span><span class="hl-7">'shaders/Plasma.glsl'</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>See the documentation for <code>Phaser.Types.Loader.FileTypes.GLSLFileConfig</code> for more details.</p>
|
||
|
|
<p>Once the file has finished loading you can access it from its Cache using its key:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">glsl</span><span class="hl-1">(</span><span class="hl-7">'plasma'</span><span class="hl-1">, </span><span class="hl-7">'shaders/Plasma.glsl'</span><span class="hl-1">);</span><br/><span class="hl-8">// and later in your game ...</span><br/><span class="hl-4">var</span><span class="hl-1"> </span><span class="hl-2">data</span><span class="hl-1"> = </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">cache</span><span class="hl-1">.</span><span class="hl-2">shader</span><span class="hl-1">.</span><span class="hl-6">get</span><span class="hl-1">(</span><span class="hl-7">'plasma'</span><span class="hl-1">);</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>If you have specified a prefix in the loader, via <code>Loader.setPrefix</code> then this value will be prepended to this files
|
||
|
|
key. For example, if the prefix was <code>FX.</code> and the key was <code>Plasma</code> the final key will be <code>FX.Plasma</code> and
|
||
|
|
this is what you would use to retrieve the text from the Shader Cache.</p>
|
||
|
|
<p>The URL can be relative or absolute. If the URL is relative the <code>Loader.baseURL</code> and <code>Loader.path</code> values will be prepended to it.</p>
|
||
|
|
<p>If the URL isn't specified the Loader will take the key and create a filename from that. For example if the key is "plasma"
|
||
|
|
and no URL is given then the Loader will set the URL to be "plasma.glsl". It will always add <code>.glsl</code> as the extension, although
|
||
|
|
this can be overridden if using an object instead of method arguments. If you do not desire this action then provide a URL.</p>
|
||
|
|
<p>Note: The ability to load this type of file will only be available if the GLSL File type has been built into Phaser.
|
||
|
|
It is available in the default build but can be excluded from custom builds.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">key</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">GLSLFileConfig</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">GLSLFileConfig</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The key to use for this file, or a file configuration object, or array of them.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">url</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load this file from. If undefined or <code>null</code> it will be set to <code><key>.glsl</code>, i.e. if <code>key</code> was "alien" then the URL will be "alien.glsl".</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">shaderType</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The type of shader. Either <code>fragment</code> for a fragment shader, or <code>vertex</code> for a vertex shader. This is ignored if you load a shader bundle. Default 'fragment'.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">xhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.glsl</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:64813</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="html" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>html</span><a href="#html" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="html.html-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">html</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">key</span>, <span class="tsd-kind-parameter">url</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">xhrSettings</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#html.html-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Adds an HTML file, or array of HTML files, to the current load queue.</p>
|
||
|
|
<p>You can call this method from within your Scene's <code>preload</code>, along with any other files you wish to load:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">html</span><span class="hl-1">(</span><span class="hl-7">'story'</span><span class="hl-1">, </span><span class="hl-7">'files/LoginForm.html'</span><span class="hl-1">);</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>The file is <strong>not</strong> loaded right away. It is added to a queue ready to be loaded either when the loader starts,
|
||
|
|
or if it's already running, when the next free load slot becomes available. This happens automatically if you
|
||
|
|
are calling this from within the Scene's <code>preload</code> method, or a related callback. Because the file is queued
|
||
|
|
it means you cannot use the file immediately after calling this method, but must wait for the file to complete.
|
||
|
|
The typical flow for a Phaser Scene is that you load assets in the Scene's <code>preload</code> method and then when the
|
||
|
|
Scene's <code>create</code> method is called you are guaranteed that all of those assets are ready for use and have been
|
||
|
|
loaded.</p>
|
||
|
|
<p>The key must be a unique String. It is used to add the file to the global HTML Cache upon a successful load.
|
||
|
|
The key should be unique both in terms of files being loaded and files already present in the HTML Cache.
|
||
|
|
Loading a file using a key that is already taken will result in a warning. If you wish to replace an existing file
|
||
|
|
then remove it from the HTML Cache first, before loading a new one.</p>
|
||
|
|
<p>Instead of passing arguments you can pass a configuration object, such as:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">html</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'login'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">url:</span><span class="hl-1"> </span><span class="hl-7">'files/LoginForm.html'</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>See the documentation for <code>Phaser.Types.Loader.FileTypes.HTMLFileConfig</code> for more details.</p>
|
||
|
|
<p>Once the file has finished loading you can access it from its Cache using its key:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">html</span><span class="hl-1">(</span><span class="hl-7">'login'</span><span class="hl-1">, </span><span class="hl-7">'files/LoginForm.html'</span><span class="hl-1">);</span><br/><span class="hl-8">// and later in your game ...</span><br/><span class="hl-4">var</span><span class="hl-1"> </span><span class="hl-2">data</span><span class="hl-1"> = </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">cache</span><span class="hl-1">.</span><span class="hl-2">html</span><span class="hl-1">.</span><span class="hl-6">get</span><span class="hl-1">(</span><span class="hl-7">'login'</span><span class="hl-1">);</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>If you have specified a prefix in the loader, via <code>Loader.setPrefix</code> then this value will be prepended to this files
|
||
|
|
key. For example, if the prefix was <code>LEVEL1.</code> and the key was <code>Story</code> the final key will be <code>LEVEL1.Story</code> and
|
||
|
|
this is what you would use to retrieve the html from the HTML Cache.</p>
|
||
|
|
<p>The URL can be relative or absolute. If the URL is relative the <code>Loader.baseURL</code> and <code>Loader.path</code> values will be prepended to it.</p>
|
||
|
|
<p>If the URL isn't specified the Loader will take the key and create a filename from that. For example if the key is "story"
|
||
|
|
and no URL is given then the Loader will set the URL to be "story.html". It will always add <code>.html</code> as the extension, although
|
||
|
|
this can be overridden if using an object instead of method arguments. If you do not desire this action then provide a URL.</p>
|
||
|
|
<p>Note: The ability to load this type of file will only be available if the HTML File type has been built into Phaser.
|
||
|
|
It is available in the default build but can be excluded from custom builds.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">key</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">HTMLFileConfig</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">HTMLFileConfig</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The key to use for this file, or a file configuration object, or array of them.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">url</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load this file from. If undefined or <code>null</code> it will be set to <code><key>.html</code>, i.e. if <code>key</code> was "alien" then the URL will be "alien.html".</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">xhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.html</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:64875</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="htmlTexture" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>html<wbr/>Texture</span><a href="#htmlTexture" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="htmlTexture.htmlTexture-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">html<wbr/>Texture</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">key</span>, <span class="tsd-kind-parameter">url</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">width</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">height</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">xhrSettings</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#htmlTexture.htmlTexture-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Adds an HTML File, or array of HTML Files, to the current load queue. When the files are loaded they
|
||
|
|
will be rendered to textures and stored in the Texture Manager.</p>
|
||
|
|
<p>You can call this method from within your Scene's <code>preload</code>, along with any other files you wish to load:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">htmlTexture</span><span class="hl-1">(</span><span class="hl-7">'instructions'</span><span class="hl-1">, </span><span class="hl-7">'content/intro.html'</span><span class="hl-1">, </span><span class="hl-0">256</span><span class="hl-1">, </span><span class="hl-0">512</span><span class="hl-1">);</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>The file is <strong>not</strong> loaded right away. It is added to a queue ready to be loaded either when the loader starts,
|
||
|
|
or if it's already running, when the next free load slot becomes available. This happens automatically if you
|
||
|
|
are calling this from within the Scene's <code>preload</code> method, or a related callback. Because the file is queued
|
||
|
|
it means you cannot use the file immediately after calling this method, but must wait for the file to complete.
|
||
|
|
The typical flow for a Phaser Scene is that you load assets in the Scene's <code>preload</code> method and then when the
|
||
|
|
Scene's <code>create</code> method is called you are guaranteed that all of those assets are ready for use and have been
|
||
|
|
loaded.</p>
|
||
|
|
<p>The key must be a unique String. It is used to add the file to the global Texture Manager upon a successful load.
|
||
|
|
The key should be unique both in terms of files being loaded and files already present in the Texture Manager.
|
||
|
|
Loading a file using a key that is already taken will result in a warning. If you wish to replace an existing file
|
||
|
|
then remove it from the Texture Manager first, before loading a new one.</p>
|
||
|
|
<p>Instead of passing arguments you can pass a configuration object, such as:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">htmlTexture</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'instructions'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">url:</span><span class="hl-1"> </span><span class="hl-7">'content/intro.html'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">width:</span><span class="hl-1"> </span><span class="hl-0">256</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">height:</span><span class="hl-1"> </span><span class="hl-0">512</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>See the documentation for <code>Phaser.Types.Loader.FileTypes.HTMLTextureFileConfig</code> for more details.</p>
|
||
|
|
<p>Once the file has finished loading you can use it as a texture for a Game Object by referencing its key:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">htmlTexture</span><span class="hl-1">(</span><span class="hl-7">'instructions'</span><span class="hl-1">, </span><span class="hl-7">'content/intro.html'</span><span class="hl-1">, </span><span class="hl-0">256</span><span class="hl-1">, </span><span class="hl-0">512</span><span class="hl-1">);</span><br/><span class="hl-8">// and later in your game ...</span><br/><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">add</span><span class="hl-1">.</span><span class="hl-6">image</span><span class="hl-1">(</span><span class="hl-2">x</span><span class="hl-1">, </span><span class="hl-2">y</span><span class="hl-1">, </span><span class="hl-7">'instructions'</span><span class="hl-1">);</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>If you have specified a prefix in the loader, via <code>Loader.setPrefix</code> then this value will be prepended to this files
|
||
|
|
key. For example, if the prefix was <code>MENU.</code> and the key was <code>Background</code> the final key will be <code>MENU.Background</code> and
|
||
|
|
this is what you would use to retrieve the image from the Texture Manager.</p>
|
||
|
|
<p>The URL can be relative or absolute. If the URL is relative the <code>Loader.baseURL</code> and <code>Loader.path</code> values will be prepended to it.</p>
|
||
|
|
<p>If the URL isn't specified the Loader will take the key and create a filename from that. For example if the key is "alien"
|
||
|
|
and no URL is given then the Loader will set the URL to be "alien.html". It will always add <code>.html</code> as the extension, although
|
||
|
|
this can be overridden if using an object instead of method arguments. If you do not desire this action then provide a URL.</p>
|
||
|
|
<p>The width and height are the size of the texture to which the HTML will be rendered. It's not possible to determine these
|
||
|
|
automatically, so you will need to provide them, either as arguments or in the file config object.
|
||
|
|
When the HTML file has loaded a new SVG element is created with a size and viewbox set to the width and height given.
|
||
|
|
The SVG file has a body tag added to it, with the HTML file contents included. It then calls <code>window.Blob</code> on the SVG,
|
||
|
|
and if successful is added to the Texture Manager, otherwise it fails processing. The overall quality of the rendered
|
||
|
|
HTML depends on your browser, and some of them may not even support the svg / blob process used. Be aware that there are
|
||
|
|
limitations on what HTML can be inside an SVG. You can find out more details in this
|
||
|
|
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas">Mozilla MDN entry</a>.</p>
|
||
|
|
<p>Note: The ability to load this type of file will only be available if the HTMLTextureFile File type has been built into Phaser.
|
||
|
|
It is available in the default build but can be excluded from custom builds.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">key</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">HTMLTextureFileConfig</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">HTMLTextureFileConfig</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The key to use for this file, or a file configuration object, or array of them.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">url</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load this file from. If undefined or <code>null</code> it will be set to <code><key>.html</code>, i.e. if <code>key</code> was "alien" then the URL will be "alien.html".</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">width</span>: <span class="tsd-signature-type">number</span></span><div class="tsd-comment tsd-typography"><p>The width of the texture the HTML will be rendered to. Default 512.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">height</span>: <span class="tsd-signature-type">number</span></span><div class="tsd-comment tsd-typography"><p>The height of the texture the HTML will be rendered to. Default 512.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">xhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.htmlTexture</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:64951</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="image" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>image</span><a href="#image" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="image.image-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">image</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">key</span>, <span class="tsd-kind-parameter">url</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">xhrSettings</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#image.image-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Adds an Image, or array of Images, to the current load queue.</p>
|
||
|
|
<p>You can call this method from within your Scene's <code>preload</code>, along with any other files you wish to load:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">image</span><span class="hl-1">(</span><span class="hl-7">'logo'</span><span class="hl-1">, </span><span class="hl-7">'images/phaserLogo.png'</span><span class="hl-1">);</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>The file is <strong>not</strong> loaded right away. It is added to a queue ready to be loaded either when the loader starts,
|
||
|
|
or if it's already running, when the next free load slot becomes available. This happens automatically if you
|
||
|
|
are calling this from within the Scene's <code>preload</code> method, or a related callback. Because the file is queued
|
||
|
|
it means you cannot use the file immediately after calling this method, but must wait for the file to complete.
|
||
|
|
The typical flow for a Phaser Scene is that you load assets in the Scene's <code>preload</code> method and then when the
|
||
|
|
Scene's <code>create</code> method is called you are guaranteed that all of those assets are ready for use and have been
|
||
|
|
loaded.</p>
|
||
|
|
<p>Phaser can load all common image types: png, jpg, gif and any other format the browser can natively handle.
|
||
|
|
If you try to load an animated gif only the first frame will be rendered. Browsers do not natively support playback
|
||
|
|
of animated gifs to Canvas elements.</p>
|
||
|
|
<p>The key must be a unique String. It is used to add the file to the global Texture Manager upon a successful load.
|
||
|
|
The key should be unique both in terms of files being loaded and files already present in the Texture Manager.
|
||
|
|
Loading a file using a key that is already taken will result in a warning. If you wish to replace an existing file
|
||
|
|
then remove it from the Texture Manager first, before loading a new one.</p>
|
||
|
|
<p>Instead of passing arguments you can pass a configuration object, such as:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">image</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'logo'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">url:</span><span class="hl-1"> </span><span class="hl-7">'images/AtariLogo.png'</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>See the documentation for <code>Phaser.Types.Loader.FileTypes.ImageFileConfig</code> for more details.</p>
|
||
|
|
<p>Once the file has finished loading you can use it as a texture for a Game Object by referencing its key:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">image</span><span class="hl-1">(</span><span class="hl-7">'logo'</span><span class="hl-1">, </span><span class="hl-7">'images/AtariLogo.png'</span><span class="hl-1">);</span><br/><span class="hl-8">// and later in your game ...</span><br/><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">add</span><span class="hl-1">.</span><span class="hl-6">image</span><span class="hl-1">(</span><span class="hl-2">x</span><span class="hl-1">, </span><span class="hl-2">y</span><span class="hl-1">, </span><span class="hl-7">'logo'</span><span class="hl-1">);</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>If you have specified a prefix in the loader, via <code>Loader.setPrefix</code> then this value will be prepended to this files
|
||
|
|
key. For example, if the prefix was <code>MENU.</code> and the key was <code>Background</code> the final key will be <code>MENU.Background</code> and
|
||
|
|
this is what you would use to retrieve the image from the Texture Manager.</p>
|
||
|
|
<p>The URL can be relative or absolute. If the URL is relative the <code>Loader.baseURL</code> and <code>Loader.path</code> values will be prepended to it.</p>
|
||
|
|
<p>If the URL isn't specified the Loader will take the key and create a filename from that. For example if the key is "alien"
|
||
|
|
and no URL is given then the Loader will set the URL to be "alien.png". It will always add <code>.png</code> as the extension, although
|
||
|
|
this can be overridden if using an object instead of method arguments. If you do not desire this action then provide a URL.</p>
|
||
|
|
<p>Phaser also supports the automatic loading of associated normal maps. If you have a normal map to go with this image,
|
||
|
|
then you can specify it by providing an array as the <code>url</code> where the second element is the normal map:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">image</span><span class="hl-1">(</span><span class="hl-7">'logo'</span><span class="hl-1">, [ </span><span class="hl-7">'images/AtariLogo.png'</span><span class="hl-1">, </span><span class="hl-7">'images/AtariLogo-n.png'</span><span class="hl-1"> ]);</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>Or, if you are using a config object use the <code>normalMap</code> property:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">image</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'logo'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">url:</span><span class="hl-1"> </span><span class="hl-7">'images/AtariLogo.png'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">normalMap:</span><span class="hl-1"> </span><span class="hl-7">'images/AtariLogo-n.png'</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>The normal map file is subject to the same conditions as the image file with regard to the path, baseURL, CORs and XHR Settings.
|
||
|
|
Normal maps are a WebGL only feature.</p>
|
||
|
|
<p>In Phaser 3.60 a new property was added that allows you to control how images are loaded. By default, images are loaded via XHR as Blobs.
|
||
|
|
However, you can set <code>loader.imageLoadType: "HTMLImageElement"</code> in the Game Configuration and instead, the Loader will load all images
|
||
|
|
via the Image tag instead.</p>
|
||
|
|
<p>Note: The ability to load this type of file will only be available if the Image File type has been built into Phaser.
|
||
|
|
It is available in the default build but can be excluded from custom builds.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">key</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">ImageFileConfig</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">ImageFileConfig</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The key to use for this file, or a file configuration object, or array of them.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">url</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load this file from. If undefined or <code>null</code> it will be set to <code><key>.png</code>, i.e. if <code>key</code> was "alien" then the URL will be "alien.png".</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">xhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.image</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:65041</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="isLoading" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>is<wbr/>Loading</span><a href="#isLoading" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="isLoading.isLoading-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">is<wbr/>Loading</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><a href="#isLoading.isLoading-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Is the Loader actively loading, or processing loaded files?</p>
|
||
|
|
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.isLoading</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66653</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="isReady" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>is<wbr/>Ready</span><a href="#isReady" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="isReady.isReady-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">is<wbr/>Ready</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><a href="#isReady.isReady-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Is the Loader ready to start a new load?</p>
|
||
|
|
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.isReady</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66658</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="json" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>json</span><a href="#json" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="json.json-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">json</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">key</span>, <span class="tsd-kind-parameter">url</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">dataKey</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">xhrSettings</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#json.json-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Adds a JSON file, or array of JSON files, to the current load queue.</p>
|
||
|
|
<p>You can call this method from within your Scene's <code>preload</code>, along with any other files you wish to load:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">json</span><span class="hl-1">(</span><span class="hl-7">'wavedata'</span><span class="hl-1">, </span><span class="hl-7">'files/AlienWaveData.json'</span><span class="hl-1">);</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>The file is <strong>not</strong> loaded right away. It is added to a queue ready to be loaded either when the loader starts,
|
||
|
|
or if it's already running, when the next free load slot becomes available. This happens automatically if you
|
||
|
|
are calling this from within the Scene's <code>preload</code> method, or a related callback. Because the file is queued
|
||
|
|
it means you cannot use the file immediately after calling this method, but must wait for the file to complete.
|
||
|
|
The typical flow for a Phaser Scene is that you load assets in the Scene's <code>preload</code> method and then when the
|
||
|
|
Scene's <code>create</code> method is called you are guaranteed that all of those assets are ready for use and have been
|
||
|
|
loaded.</p>
|
||
|
|
<p>The key must be a unique String. It is used to add the file to the global JSON Cache upon a successful load.
|
||
|
|
The key should be unique both in terms of files being loaded and files already present in the JSON Cache.
|
||
|
|
Loading a file using a key that is already taken will result in a warning. If you wish to replace an existing file
|
||
|
|
then remove it from the JSON Cache first, before loading a new one.</p>
|
||
|
|
<p>Instead of passing arguments you can pass a configuration object, such as:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">json</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'wavedata'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">url:</span><span class="hl-1"> </span><span class="hl-7">'files/AlienWaveData.json'</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>See the documentation for <code>Phaser.Types.Loader.FileTypes.JSONFileConfig</code> for more details.</p>
|
||
|
|
<p>Once the file has finished loading you can access it from its Cache using its key:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">json</span><span class="hl-1">(</span><span class="hl-7">'wavedata'</span><span class="hl-1">, </span><span class="hl-7">'files/AlienWaveData.json'</span><span class="hl-1">);</span><br/><span class="hl-8">// and later in your game ...</span><br/><span class="hl-4">var</span><span class="hl-1"> </span><span class="hl-2">data</span><span class="hl-1"> = </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">cache</span><span class="hl-1">.</span><span class="hl-2">json</span><span class="hl-1">.</span><span class="hl-6">get</span><span class="hl-1">(</span><span class="hl-7">'wavedata'</span><span class="hl-1">);</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>If you have specified a prefix in the loader, via <code>Loader.setPrefix</code> then this value will be prepended to this files
|
||
|
|
key. For example, if the prefix was <code>LEVEL1.</code> and the key was <code>Waves</code> the final key will be <code>LEVEL1.Waves</code> and
|
||
|
|
this is what you would use to retrieve the text from the JSON Cache.</p>
|
||
|
|
<p>The URL can be relative or absolute. If the URL is relative the <code>Loader.baseURL</code> and <code>Loader.path</code> values will be prepended to it.</p>
|
||
|
|
<p>If the URL isn't specified the Loader will take the key and create a filename from that. For example if the key is "data"
|
||
|
|
and no URL is given then the Loader will set the URL to be "data.json". It will always add <code>.json</code> as the extension, although
|
||
|
|
this can be overridden if using an object instead of method arguments. If you do not desire this action then provide a URL.</p>
|
||
|
|
<p>You can also optionally provide a <code>dataKey</code> to use. This allows you to extract only a part of the JSON and store it in the Cache,
|
||
|
|
rather than the whole file. For example, if your JSON data had a structure like this:</p>
|
||
|
|
<pre><code class="language-json"><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-9">"level1"</span><span class="hl-1">: {</span><br/><span class="hl-1"> </span><span class="hl-9">"baddies"</span><span class="hl-1">: {</span><br/><span class="hl-1"> </span><span class="hl-9">"aliens"</span><span class="hl-1">: {},</span><br/><span class="hl-1"> </span><span class="hl-9">"boss"</span><span class="hl-1">: {}</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-9">"level2"</span><span class="hl-1">: {},</span><br/><span class="hl-1"> </span><span class="hl-9">"level3"</span><span class="hl-1">: {}</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>And you only wanted to store the <code>boss</code> data in the Cache, then you could pass <code>level1.baddies.boss</code>as the <code>dataKey</code>.</p>
|
||
|
|
<p>Note: The ability to load this type of file will only be available if the JSON File type has been built into Phaser.
|
||
|
|
It is available in the default build but can be excluded from custom builds.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">key</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">JSONFileConfig</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">JSONFileConfig</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The key to use for this file, or a file configuration object, or array of them.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">url</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">object</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load this file from. If undefined or <code>null</code> it will be set to <code><key>.json</code>, i.e. if <code>key</code> was "alien" then the URL will be "alien.json". Or, can be a fully formed JSON Object.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">dataKey</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>When the JSON file loads only this property will be stored in the Cache.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">xhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.json</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:65122</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="keyExists" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>key<wbr/>Exists</span><a href="#keyExists" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="keyExists.keyExists-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">key<wbr/>Exists</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">file</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><a href="#keyExists.keyExists-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Checks the key and type of the given file to see if it will conflict with anything already
|
||
|
|
in a Cache, the Texture Manager, or the list or inflight queues.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">file</span>: <span class="tsd-signature-type">File</span></span><div class="tsd-comment tsd-typography"><p>The file to check the key of.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">boolean</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.keyExists</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66635</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="listenerCount" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>listener<wbr/>Count</span><a href="#listenerCount" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="listenerCount.listenerCount-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">listener<wbr/>Count</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">event</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><a href="#listenerCount.listenerCount-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Return the number of listeners listening to a given event.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">event</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">symbol</span></span><div class="tsd-comment tsd-typography"><p>The event name.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">number</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.listenerCount</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:9928</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="listeners" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>listeners</span><a href="#listeners" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="listeners.listeners-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">listeners</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">event</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Function</span><span class="tsd-signature-symbol">[]</span><a href="#listeners.listeners-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Return the listeners registered for a given event.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">event</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">symbol</span></span><div class="tsd-comment tsd-typography"><p>The event name.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">Function</span><span class="tsd-signature-symbol">[]</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.listeners</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:9922</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="loadComplete" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>load<wbr/>Complete</span><a href="#loadComplete" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="loadComplete.loadComplete-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">load<wbr/>Complete</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#loadComplete.loadComplete-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Called at the end when the load queue is exhausted and all files have either loaded or errored.
|
||
|
|
By this point every loaded file will now be in its associated cache and ready for use.</p>
|
||
|
|
<p>Also clears down the Sets, puts progress to 1 and clears the deletion queue.</p>
|
||
|
|
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.loadComplete</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66711</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="multiatlas" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>multiatlas</span><a href="#multiatlas" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="multiatlas.multiatlas-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">multiatlas</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">key</span>, <span class="tsd-kind-parameter">atlasURL</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">path</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">baseURL</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">atlasXhrSettings</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#multiatlas.multiatlas-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Adds a Multi Texture Atlas, or array of multi atlases, to the current load queue.</p>
|
||
|
|
<p>You can call this method from within your Scene's <code>preload</code>, along with any other files you wish to load:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">multiatlas</span><span class="hl-1">(</span><span class="hl-7">'level1'</span><span class="hl-1">, </span><span class="hl-7">'images/Level1.json'</span><span class="hl-1">);</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>The file is <strong>not</strong> loaded right away. It is added to a queue ready to be loaded either when the loader starts,
|
||
|
|
or if it's already running, when the next free load slot becomes available. This happens automatically if you
|
||
|
|
are calling this from within the Scene's <code>preload</code> method, or a related callback. Because the file is queued
|
||
|
|
it means you cannot use the file immediately after calling this method, but must wait for the file to complete.
|
||
|
|
The typical flow for a Phaser Scene is that you load assets in the Scene's <code>preload</code> method and then when the
|
||
|
|
Scene's <code>create</code> method is called you are guaranteed that all of those assets are ready for use and have been
|
||
|
|
loaded.</p>
|
||
|
|
<p>If you call this from outside of <code>preload</code> then you are responsible for starting the Loader afterwards and monitoring
|
||
|
|
its events to know when it's safe to use the asset. Please see the Phaser.Loader.LoaderPlugin class for more details.</p>
|
||
|
|
<p>Phaser expects the atlas data to be provided in a JSON file as exported from the application Texture Packer,
|
||
|
|
version 4.6.3 or above, where you have made sure to use the Phaser 3 Export option.</p>
|
||
|
|
<p>The way it works internally is that you provide a URL to the JSON file. Phaser then loads this JSON, parses it and
|
||
|
|
extracts which texture files it also needs to load to complete the process. If the JSON also defines normal maps,
|
||
|
|
Phaser will load those as well.</p>
|
||
|
|
<p>The key must be a unique String. It is used to add the file to the global Texture Manager upon a successful load.
|
||
|
|
The key should be unique both in terms of files being loaded and files already present in the Texture Manager.
|
||
|
|
Loading a file using a key that is already taken will result in a warning. If you wish to replace an existing file
|
||
|
|
then remove it from the Texture Manager first, before loading a new one.</p>
|
||
|
|
<p>Instead of passing arguments you can pass a configuration object, such as:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">multiatlas</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'level1'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">atlasURL:</span><span class="hl-1"> </span><span class="hl-7">'images/Level1.json'</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>See the documentation for <code>Phaser.Types.Loader.FileTypes.MultiAtlasFileConfig</code> for more details.</p>
|
||
|
|
<p>Instead of passing a URL for the atlas JSON data you can also pass in a well formed JSON object instead.</p>
|
||
|
|
<p>Once the atlas has finished loading you can use frames from it as textures for a Game Object by referencing its key:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">multiatlas</span><span class="hl-1">(</span><span class="hl-7">'level1'</span><span class="hl-1">, </span><span class="hl-7">'images/Level1.json'</span><span class="hl-1">);</span><br/><span class="hl-8">// and later in your game ...</span><br/><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">add</span><span class="hl-1">.</span><span class="hl-6">image</span><span class="hl-1">(</span><span class="hl-2">x</span><span class="hl-1">, </span><span class="hl-2">y</span><span class="hl-1">, </span><span class="hl-7">'level1'</span><span class="hl-1">, </span><span class="hl-7">'background'</span><span class="hl-1">);</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>To get a list of all available frames within an atlas please consult your Texture Atlas software.</p>
|
||
|
|
<p>If you have specified a prefix in the loader, via <code>Loader.setPrefix</code> then this value will be prepended to this files
|
||
|
|
key. For example, if the prefix was <code>MENU.</code> and the key was <code>Background</code> the final key will be <code>MENU.Background</code> and
|
||
|
|
this is what you would use to retrieve the image from the Texture Manager.</p>
|
||
|
|
<p>The URL can be relative or absolute. If the URL is relative the <code>Loader.baseURL</code> and <code>Loader.path</code> values will be prepended to it.</p>
|
||
|
|
<p>If the URL isn't specified the Loader will take the key and create a filename from that. For example if the key is "alien"
|
||
|
|
and no URL is given then the Loader will set the URL to be "alien.png". It will always add <code>.png</code> as the extension, although
|
||
|
|
this can be overridden if using an object instead of method arguments. If you do not desire this action then provide a URL.</p>
|
||
|
|
<p>Note: The ability to load this type of file will only be available if the Multi Atlas File type has been built into Phaser.
|
||
|
|
It is available in the default build but can be excluded from custom builds.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">key</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">MultiAtlasFileConfig</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">MultiAtlasFileConfig</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The key to use for this file, or a file configuration object, or array of them.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">atlasURL</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load the texture atlas json data file from. If undefined or <code>null</code> it will be set to <code><key>.json</code>, i.e. if <code>key</code> was "alien" then the URL will be "alien.json".</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">path</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>Optional path to use when loading the textures defined in the atlas data.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">baseURL</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>Optional Base URL to use when loading the textures defined in the atlas data.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">atlasXhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object for the atlas json file. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.multiatlas</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:65200</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="nextFile" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>next<wbr/>File</span><a href="#nextFile" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="nextFile.nextFile-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">next<wbr/>File</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">file</span>, <span class="tsd-kind-parameter">success</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#nextFile.nextFile-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>An internal method called automatically by the XHRLoader belong to a File.</p>
|
||
|
|
<p>This method will remove the given file from the inflight Set and update the load progress.
|
||
|
|
If the file was successful its <code>onProcess</code> method is called, otherwise it is added to the delete queue.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">file</span>: <span class="tsd-signature-type">File</span></span><div class="tsd-comment tsd-typography"><p>The File that just finished loading, or errored during load.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><span class="tsd-kind-parameter">success</span>: <span class="tsd-signature-type">boolean</span></span><div class="tsd-comment tsd-typography"><p><code>true</code> if the file loaded successfully, otherwise <code>false</code>.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.nextFile</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66693</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="obj" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>obj</span><a href="#obj" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="obj.obj-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">obj</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">key</span>, <span class="tsd-kind-parameter">objURL</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">matURL</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">flipUV</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">xhrSettings</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#obj.obj-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Adds a Wavefront OBJ file, or array of OBJ files, to the current load queue.</p>
|
||
|
|
<p>Note: You should ensure your 3D package has triangulated the OBJ file prior to export.</p>
|
||
|
|
<p>You can call this method from within your Scene's <code>preload</code>, along with any other files you wish to load:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">obj</span><span class="hl-1">(</span><span class="hl-7">'ufo'</span><span class="hl-1">, </span><span class="hl-7">'files/spaceship.obj'</span><span class="hl-1">);</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>You can optionally also load a Wavefront Material file as well, by providing the 3rd parameter:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">obj</span><span class="hl-1">(</span><span class="hl-7">'ufo'</span><span class="hl-1">, </span><span class="hl-7">'files/spaceship.obj'</span><span class="hl-1">, </span><span class="hl-7">'files/spaceship.mtl'</span><span class="hl-1">);</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>If given, the material will be parsed and stored along with the obj data in the cache.</p>
|
||
|
|
<p>The file is <strong>not</strong> loaded right away. It is added to a queue ready to be loaded either when the loader starts,
|
||
|
|
or if it's already running, when the next free load slot becomes available. This happens automatically if you
|
||
|
|
are calling this from within the Scene's <code>preload</code> method, or a related callback. Because the file is queued
|
||
|
|
it means you cannot use the file immediately after calling this method, but must wait for the file to complete.
|
||
|
|
The typical flow for a Phaser Scene is that you load assets in the Scene's <code>preload</code> method and then when the
|
||
|
|
Scene's <code>create</code> method is called you are guaranteed that all of those assets are ready for use and have been
|
||
|
|
loaded.</p>
|
||
|
|
<p>The key must be a unique String. It is used to add the file to the global OBJ Cache upon a successful load.
|
||
|
|
The key should be unique both in terms of files being loaded and files already present in the OBJ Cache.
|
||
|
|
Loading a file using a key that is already taken will result in a warning. If you wish to replace an existing file
|
||
|
|
then remove it from the OBJ Cache first, before loading a new one.</p>
|
||
|
|
<p>Instead of passing arguments you can pass a configuration object, such as:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">obj</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'ufo'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">url:</span><span class="hl-1"> </span><span class="hl-7">'files/spaceship.obj'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">matURL:</span><span class="hl-1"> </span><span class="hl-7">'files/spaceship.mtl'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">flipUV:</span><span class="hl-1"> </span><span class="hl-4">true</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>See the documentation for <code>Phaser.Types.Loader.FileTypes.OBJFileConfig</code> for more details.</p>
|
||
|
|
<p>Once the file has finished loading you can access it from its Cache using its key:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">obj</span><span class="hl-1">(</span><span class="hl-7">'ufo'</span><span class="hl-1">, </span><span class="hl-7">'files/spaceship.obj'</span><span class="hl-1">);</span><br/><span class="hl-8">// and later in your game ...</span><br/><span class="hl-4">var</span><span class="hl-1"> </span><span class="hl-2">data</span><span class="hl-1"> = </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">cache</span><span class="hl-1">.</span><span class="hl-2">obj</span><span class="hl-1">.</span><span class="hl-6">get</span><span class="hl-1">(</span><span class="hl-7">'ufo'</span><span class="hl-1">);</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>If you have specified a prefix in the loader, via <code>Loader.setPrefix</code> then this value will be prepended to this files
|
||
|
|
key. For example, if the prefix was <code>LEVEL1.</code> and the key was <code>Story</code> the final key will be <code>LEVEL1.Story</code> and
|
||
|
|
this is what you would use to retrieve the obj from the OBJ Cache.</p>
|
||
|
|
<p>The URL can be relative or absolute. If the URL is relative the <code>Loader.baseURL</code> and <code>Loader.path</code> values will be prepended to it.</p>
|
||
|
|
<p>If the URL isn't specified the Loader will take the key and create a filename from that. For example if the key is "story"
|
||
|
|
and no URL is given then the Loader will set the URL to be "story.obj". It will always add <code>.obj</code> as the extension, although
|
||
|
|
this can be overridden if using an object instead of method arguments. If you do not desire this action then provide a URL.</p>
|
||
|
|
<p>Note: The ability to load this type of file will only be available if the OBJ File type has been built into Phaser.
|
||
|
|
It is available in the default build but can be excluded from custom builds.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">key</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">OBJFileConfig</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">OBJFileConfig</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The key to use for this file, or a file configuration object, or array of them.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">objURL</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load the obj file from. If undefined or <code>null</code> it will be set to <code><key>.obj</code>, i.e. if <code>key</code> was "alien" then the URL will be "alien.obj".</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">matURL</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>Optional absolute or relative URL to load the obj material file from.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">flipUV</span>: <span class="tsd-signature-type">boolean</span></span><div class="tsd-comment tsd-typography"><p>Flip the UV coordinates stored in the model data?</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">xhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.obj</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:65349</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="off" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>off</span><a href="#off" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="off.off-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">off</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">event</span>, <span class="tsd-kind-parameter">fn</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">context</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">once</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#off.off-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Remove the listeners of a given event.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">event</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">symbol</span></span><div class="tsd-comment tsd-typography"><p>The event name.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">fn</span>: <span class="tsd-signature-type">Function</span></span><div class="tsd-comment tsd-typography"><p>Only remove the listeners that match this function.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">context</span>: <span class="tsd-signature-type">any</span></span><div class="tsd-comment tsd-typography"><p>Only remove the listeners that have this context.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">once</span>: <span class="tsd-signature-type">boolean</span></span><div class="tsd-comment tsd-typography"><p>Only remove one-time listeners.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.off</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:9977</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="on" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>on</span><a href="#on" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="on.on-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">on</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">event</span>, <span class="tsd-kind-parameter">fn</span>, <span class="tsd-kind-parameter">context</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#on.on-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Add a listener for a given event.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">event</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">symbol</span></span><div class="tsd-comment tsd-typography"><p>The event name.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><span class="tsd-kind-parameter">fn</span>: <span class="tsd-signature-type">Function</span></span><div class="tsd-comment tsd-typography"><p>The listener function.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">context</span>: <span class="tsd-signature-type">any</span></span><div class="tsd-comment tsd-typography"><p>The context to invoke the listener with. Default this.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.on</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:9943</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="once" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>once</span><a href="#once" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="once.once-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">once</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">event</span>, <span class="tsd-kind-parameter">fn</span>, <span class="tsd-kind-parameter">context</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#once.once-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Add a one-time listener for a given event.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">event</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">symbol</span></span><div class="tsd-comment tsd-typography"><p>The event name.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><span class="tsd-kind-parameter">fn</span>: <span class="tsd-signature-type">Function</span></span><div class="tsd-comment tsd-typography"><p>The listener function.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">context</span>: <span class="tsd-signature-type">any</span></span><div class="tsd-comment tsd-typography"><p>The context to invoke the listener with. Default this.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.once</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:9959</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="pack" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>pack</span><a href="#pack" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="pack.pack-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">pack</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">key</span>, <span class="tsd-kind-parameter">url</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">dataKey</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">xhrSettings</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#pack.pack-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Adds a JSON File Pack, or array of packs, to the current load queue.</p>
|
||
|
|
<p>You can call this method from within your Scene's <code>preload</code>, along with any other files you wish to load:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">pack</span><span class="hl-1">(</span><span class="hl-7">'level1'</span><span class="hl-1">, </span><span class="hl-7">'data/Level1Files.json'</span><span class="hl-1">);</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>A File Pack is a JSON file (or object) that contains details about other files that should be added into the Loader.
|
||
|
|
Here is a small example:</p>
|
||
|
|
<pre><code class="language-json"><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-9">"test1"</span><span class="hl-1">: {</span><br/><span class="hl-1"> </span><span class="hl-9">"files"</span><span class="hl-1">: [</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-9">"type"</span><span class="hl-1">: </span><span class="hl-7">"image"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-9">"key"</span><span class="hl-1">: </span><span class="hl-7">"taikodrummaster"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-9">"url"</span><span class="hl-1">: </span><span class="hl-7">"assets/pics/taikodrummaster.jpg"</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-9">"type"</span><span class="hl-1">: </span><span class="hl-7">"image"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-9">"key"</span><span class="hl-1">: </span><span class="hl-7">"sukasuka-chtholly"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-9">"url"</span><span class="hl-1">: </span><span class="hl-7">"assets/pics/sukasuka-chtholly.png"</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> ]</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-9">"meta"</span><span class="hl-1">: {</span><br/><span class="hl-1"> </span><span class="hl-9">"generated"</span><span class="hl-1">: </span><span class="hl-7">"1401380327373"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-9">"app"</span><span class="hl-1">: </span><span class="hl-7">"Phaser 3 Asset Packer"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-9">"url"</span><span class="hl-1">: </span><span class="hl-7">"https://phaser.io"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-9">"version"</span><span class="hl-1">: </span><span class="hl-7">"1.0"</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-9">"copyright"</span><span class="hl-1">: </span><span class="hl-7">"Photon Storm Ltd. 2018"</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>The pack can be split into sections. In the example above you'll see a section called <code>test1</code>. You can tell
|
||
|
|
the <code>load.pack</code> method to parse only a particular section of a pack. The pack is stored in the JSON Cache,
|
||
|
|
so you can pass it to the Loader to process additional sections as needed in your game, or you can just load
|
||
|
|
them all at once without specifying anything.</p>
|
||
|
|
<p>The pack file can contain an entry for any type of file that Phaser can load. The object structures exactly
|
||
|
|
match that of the file type configs, and all properties available within the file type configs can be used
|
||
|
|
in the pack file too. An entry's <code>type</code> is the name of the Loader method that will load it, e.g., 'image'.</p>
|
||
|
|
<p>The file is <strong>not</strong> loaded right away. It is added to a queue ready to be loaded either when the loader starts,
|
||
|
|
or if it's already running, when the next free load slot becomes available. This happens automatically if you
|
||
|
|
are calling this from within the Scene's <code>preload</code> method, or a related callback. Because the file is queued
|
||
|
|
it means you cannot use the file immediately after calling this method, but must wait for the file to complete.
|
||
|
|
The typical flow for a Phaser Scene is that you load assets in the Scene's <code>preload</code> method and then when the
|
||
|
|
Scene's <code>create</code> method is called you are guaranteed that all of those assets are ready for use and have been
|
||
|
|
loaded.</p>
|
||
|
|
<p>If you call this from outside of <code>preload</code> then you are responsible for starting the Loader afterwards and monitoring
|
||
|
|
its events to know when it's safe to use the asset. Please see the Phaser.Loader.LoaderPlugin class for more details.</p>
|
||
|
|
<p>The key must be a unique String. It is used to add the file to the global JSON Cache upon a successful load.
|
||
|
|
The key should be unique both in terms of files being loaded and files already present in the JSON Cache.
|
||
|
|
Loading a file using a key that is already taken will result in a warning. If you wish to replace an existing file
|
||
|
|
then remove it from the JSON Cache first, before loading a new one.</p>
|
||
|
|
<p>Instead of passing arguments you can pass a configuration object, such as:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">pack</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'level1'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">url:</span><span class="hl-1"> </span><span class="hl-7">'data/Level1Files.json'</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>See the documentation for <code>Phaser.Types.Loader.FileTypes.PackFileConfig</code> for more details.</p>
|
||
|
|
<p>If you have specified a prefix in the loader, via <code>Loader.setPrefix</code> then this value will be prepended to this files
|
||
|
|
key. For example, if the prefix was <code>LEVEL1.</code> and the key was <code>Waves</code> the final key will be <code>LEVEL1.Waves</code> and
|
||
|
|
this is what you would use to retrieve the text from the JSON Cache.</p>
|
||
|
|
<p>The URL can be relative or absolute. If the URL is relative the <code>Loader.baseURL</code> and <code>Loader.path</code> values will be prepended to it.</p>
|
||
|
|
<p>If the URL isn't specified the Loader will take the key and create a filename from that. For example if the key is "data"
|
||
|
|
and no URL is given then the Loader will set the URL to be "data.json". It will always add <code>.json</code> as the extension, although
|
||
|
|
this can be overridden if using an object instead of method arguments. If you do not desire this action then provide a URL.</p>
|
||
|
|
<p>You can also optionally provide a <code>dataKey</code> to use. This allows you to extract only a part of the JSON and store it in the Cache,
|
||
|
|
rather than the whole file. For example, if your JSON data had a structure like this:</p>
|
||
|
|
<pre><code class="language-json"><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-9">"level1"</span><span class="hl-1">: {</span><br/><span class="hl-1"> </span><span class="hl-9">"baddies"</span><span class="hl-1">: {</span><br/><span class="hl-1"> </span><span class="hl-9">"aliens"</span><span class="hl-1">: {},</span><br/><span class="hl-1"> </span><span class="hl-9">"boss"</span><span class="hl-1">: {}</span><br/><span class="hl-1"> }</span><br/><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-9">"level2"</span><span class="hl-1">: {},</span><br/><span class="hl-1"> </span><span class="hl-9">"level3"</span><span class="hl-1">: {}</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>And you only wanted to store the <code>boss</code> data in the Cache, then you could pass <code>level1.baddies.boss</code>as the <code>dataKey</code>.</p>
|
||
|
|
<p>Note: The ability to load this type of file will only be available if the Pack File type has been built into Phaser.
|
||
|
|
It is available in the default build but can be excluded from custom builds.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">key</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">PackFileConfig</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">PackFileConfig</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The key to use for this file, or a file configuration object, or array of them.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">url</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load this file from. If undefined or <code>null</code> it will be set to <code><key>.json</code>, i.e. if <code>key</code> was "alien" then the URL will be "alien.json".</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">dataKey</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>When the JSON file loads only this property will be stored in the Cache.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">xhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.pack</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:65463</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="plugin" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>plugin</span><a href="#plugin" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="plugin.plugin-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">plugin</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">key</span>, <span class="tsd-kind-parameter">url</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">start</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">mapping</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">xhrSettings</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#plugin.plugin-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Adds a Plugin Script file, or array of plugin files, to the current load queue.</p>
|
||
|
|
<p>You can call this method from within your Scene's <code>preload</code>, along with any other files you wish to load:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">plugin</span><span class="hl-1">(</span><span class="hl-7">'modplayer'</span><span class="hl-1">, </span><span class="hl-7">'plugins/ModPlayer.js'</span><span class="hl-1">);</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>The file is <strong>not</strong> loaded right away. It is added to a queue ready to be loaded either when the loader starts,
|
||
|
|
or if it's already running, when the next free load slot becomes available. This happens automatically if you
|
||
|
|
are calling this from within the Scene's <code>preload</code> method, or a related callback. Because the file is queued
|
||
|
|
it means you cannot use the file immediately after calling this method, but must wait for the file to complete.
|
||
|
|
The typical flow for a Phaser Scene is that you load assets in the Scene's <code>preload</code> method and then when the
|
||
|
|
Scene's <code>create</code> method is called you are guaranteed that all of those assets are ready for use and have been
|
||
|
|
loaded.</p>
|
||
|
|
<p>The key must be a unique String and not already in-use by another file in the Loader.</p>
|
||
|
|
<p>Instead of passing arguments you can pass a configuration object, such as:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">plugin</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'modplayer'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">url:</span><span class="hl-1"> </span><span class="hl-7">'plugins/ModPlayer.js'</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>See the documentation for <code>Phaser.Types.Loader.FileTypes.PluginFileConfig</code> for more details.</p>
|
||
|
|
<p>Once the file has finished loading it will automatically be converted into a script element
|
||
|
|
via <code>document.createElement('script')</code>. It will have its language set to JavaScript, <code>defer</code> set to
|
||
|
|
false and then the resulting element will be appended to <code>document.head</code>. Any code then in the
|
||
|
|
script will be executed. It will then be passed to the Phaser PluginCache.register method.</p>
|
||
|
|
<p>The URL can be relative or absolute. If the URL is relative the <code>Loader.baseURL</code> and <code>Loader.path</code> values will be prepended to it.</p>
|
||
|
|
<p>If the URL isn't specified the Loader will take the key and create a filename from that. For example if the key is "alien"
|
||
|
|
and no URL is given then the Loader will set the URL to be "alien.js". It will always add <code>.js</code> as the extension, although
|
||
|
|
this can be overridden if using an object instead of method arguments. If you do not desire this action then provide a URL.</p>
|
||
|
|
<p>Note: The ability to load this type of file will only be available if the Plugin File type has been built into Phaser.
|
||
|
|
It is available in the default build but can be excluded from custom builds.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">key</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">PluginFileConfig</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">PluginFileConfig</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The key to use for this file, or a file configuration object, or array of them.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">url</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">Function</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load this file from. If undefined or <code>null</code> it will be set to <code><key>.js</code>, i.e. if <code>key</code> was "alien" then the URL will be "alien.js". Or, a plugin function.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">start</span>: <span class="tsd-signature-type">boolean</span></span><div class="tsd-comment tsd-typography"><p>Automatically start the plugin after loading?</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">mapping</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>If this plugin is to be injected into the Scene, this is the property key used.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">xhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.plugin</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:65517</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="removeAllListeners" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>remove<wbr/>All<wbr/>Listeners</span><a href="#removeAllListeners" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="removeAllListeners.removeAllListeners-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">remove<wbr/>All<wbr/>Listeners</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">event</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#removeAllListeners.removeAllListeners-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Remove all listeners, or those of the specified event.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">event</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">symbol</span></span><div class="tsd-comment tsd-typography"><p>The event name.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.removeAllListeners</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:9983</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="removeListener" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>remove<wbr/>Listener</span><a href="#removeListener" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="removeListener.removeListener-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">remove<wbr/>Listener</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">event</span>, <span class="tsd-kind-parameter">fn</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">context</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">once</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#removeListener.removeListener-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Remove the listeners of a given event.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">event</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">symbol</span></span><div class="tsd-comment tsd-typography"><p>The event name.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">fn</span>: <span class="tsd-signature-type">Function</span></span><div class="tsd-comment tsd-typography"><p>Only remove the listeners that match this function.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">context</span>: <span class="tsd-signature-type">any</span></span><div class="tsd-comment tsd-typography"><p>Only remove the listeners that have this context.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">once</span>: <span class="tsd-signature-type">boolean</span></span><div class="tsd-comment tsd-typography"><p>Only remove one-time listeners.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.removeListener</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:9968</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="reset" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>reset</span><a href="#reset" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="reset.reset-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">reset</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#reset.reset-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Resets the Loader.</p>
|
||
|
|
<p>This will clear all lists and reset the base URL, path and prefix.</p>
|
||
|
|
<p>Warning: If the Loader is currently downloading files, or has files in its queue, they will be aborted.</p>
|
||
|
|
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.reset</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66746</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="save" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>save</span><a href="#save" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="save.save-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">save</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">data</span>, <span class="tsd-kind-parameter">filename</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">filetype</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#save.save-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Causes the browser to save the given data as a file to its default Downloads folder.</p>
|
||
|
|
<p>Creates a DOM level anchor link, assigns it as being a <code>download</code> anchor, sets the href
|
||
|
|
to be an ObjectURL based on the given data, and then invokes a click event.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">data</span>: <span class="tsd-signature-type">any</span></span><div class="tsd-comment tsd-typography"><p>The data to be saved. Will be passed through URL.createObjectURL.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">filename</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The filename to save the file as. Default file.json.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">filetype</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The file type to use when saving the file. Defaults to JSON. Default application/json.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.save</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66737</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="saveJSON" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>saveJSON</span><a href="#saveJSON" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="saveJSON.saveJSON-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">saveJSON</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">data</span>, <span class="tsd-kind-parameter">filename</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#saveJSON.saveJSON-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Converts the given JSON data into a file that the browser then prompts you to download so you can save it locally.</p>
|
||
|
|
<p>The data must be well formed JSON and ready-parsed, not a JavaScript object.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">data</span>: <span class="tsd-signature-type">any</span></span><div class="tsd-comment tsd-typography"><p>The JSON data, ready parsed.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">filename</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The name to save the JSON file as. Default file.json.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.saveJSON</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66726</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="sceneFile" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>scene<wbr/>File</span><a href="#sceneFile" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="sceneFile.sceneFile-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">scene<wbr/>File</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">key</span>, <span class="tsd-kind-parameter">url</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">xhrSettings</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#sceneFile.sceneFile-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Adds an external Scene file, or array of Scene files, to the current load queue.</p>
|
||
|
|
<p>You can call this method from within your Scene's <code>preload</code>, along with any other files you wish to load:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">sceneFile</span><span class="hl-1">(</span><span class="hl-7">'Level1'</span><span class="hl-1">, </span><span class="hl-7">'src/Level1.js'</span><span class="hl-1">);</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>The file is <strong>not</strong> loaded right away. It is added to a queue ready to be loaded either when the loader starts,
|
||
|
|
or if it's already running, when the next free load slot becomes available. This happens automatically if you
|
||
|
|
are calling this from within the Scene's <code>preload</code> method, or a related callback. Because the file is queued
|
||
|
|
it means you cannot use the file immediately after calling this method, but must wait for the file to complete.
|
||
|
|
The typical flow for a Phaser Scene is that you load assets in the Scene's <code>preload</code> method and then when the
|
||
|
|
Scene's <code>create</code> method is called you are guaranteed that all of those assets are ready for use and have been
|
||
|
|
loaded.</p>
|
||
|
|
<p>The key must be a unique String. It is used to add the file to the global Scene Manager upon a successful load.</p>
|
||
|
|
<p>For a Scene File it's vitally important that the key matches the class name in the JavaScript file.</p>
|
||
|
|
<p>For example here is the source file:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">class</span><span class="hl-1"> </span><span class="hl-10">ExternalScene</span><span class="hl-1"> </span><span class="hl-4">extends</span><span class="hl-1"> </span><span class="hl-10">Phaser</span><span class="hl-1">.</span><span class="hl-10">Scene</span><span class="hl-1"> {</span><br/><br/><span class="hl-1"> </span><span class="hl-4">constructor</span><span class="hl-1"> ()</span><br/><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-4">super</span><span class="hl-1">(</span><span class="hl-7">'myScene'</span><span class="hl-1">);</span><br/><span class="hl-1"> }</span><br/><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>Because the class is called <code>ExternalScene</code> that is the exact same key you must use when loading it:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">sceneFile</span><span class="hl-1">(</span><span class="hl-7">'ExternalScene'</span><span class="hl-1">, </span><span class="hl-7">'src/yourScene.js'</span><span class="hl-1">);</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>The key that is used within the Scene Manager can either be set to the same, or you can override it in the Scene
|
||
|
|
constructor, as we've done in the example above, where the Scene key was changed to <code>myScene</code>.</p>
|
||
|
|
<p>The key should be unique both in terms of files being loaded and Scenes already present in the Scene Manager.
|
||
|
|
Loading a file using a key that is already taken will result in a warning. If you wish to replace an existing file
|
||
|
|
then remove it from the Scene Manager first, before loading a new one.</p>
|
||
|
|
<p>Instead of passing arguments you can pass a configuration object, such as:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">sceneFile</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'Level1'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">url:</span><span class="hl-1"> </span><span class="hl-7">'src/Level1.js'</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>See the documentation for <code>Phaser.Types.Loader.FileTypes.SceneFileConfig</code> for more details.</p>
|
||
|
|
<p>Once the file has finished loading it will be added to the Scene Manager.</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">sceneFile</span><span class="hl-1">(</span><span class="hl-7">'Level1'</span><span class="hl-1">, </span><span class="hl-7">'src/Level1.js'</span><span class="hl-1">);</span><br/><span class="hl-8">// and later in your game ...</span><br/><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">scene</span><span class="hl-1">.</span><span class="hl-6">start</span><span class="hl-1">(</span><span class="hl-7">'Level1'</span><span class="hl-1">);</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>If you have specified a prefix in the loader, via <code>Loader.setPrefix</code> then this value will be prepended to this files
|
||
|
|
key. For example, if the prefix was <code>WORLD1.</code> and the key was <code>Story</code> the final key will be <code>WORLD1.Story</code> and
|
||
|
|
this is what you would use to retrieve the text from the Scene Manager.</p>
|
||
|
|
<p>The URL can be relative or absolute. If the URL is relative the <code>Loader.baseURL</code> and <code>Loader.path</code> values will be prepended to it.</p>
|
||
|
|
<p>If the URL isn't specified the Loader will take the key and create a filename from that. For example if the key is "story"
|
||
|
|
and no URL is given then the Loader will set the URL to be "story.js". It will always add <code>.js</code> as the extension, although
|
||
|
|
this can be overridden if using an object instead of method arguments. If you do not desire this action then provide a URL.</p>
|
||
|
|
<p>Note: The ability to load this type of file will only be available if the Scene File type has been built into Phaser.
|
||
|
|
It is available in the default build but can be excluded from custom builds.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">key</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">SceneFileConfig</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">SceneFileConfig</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The key to use for this file, or a file configuration object, or array of them.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">url</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load this file from. If undefined or <code>null</code> it will be set to <code><key>.js</code>, i.e. if <code>key</code> was "alien" then the URL will be "alien.js".</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">xhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.sceneFile</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:65607</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="scenePlugin" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>scene<wbr/>Plugin</span><a href="#scenePlugin" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="scenePlugin.scenePlugin-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">scene<wbr/>Plugin</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">key</span>, <span class="tsd-kind-parameter">url</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">systemKey</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">sceneKey</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">xhrSettings</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#scenePlugin.scenePlugin-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Adds a Scene Plugin Script file, or array of plugin files, to the current load queue.</p>
|
||
|
|
<p>You can call this method from within your Scene's <code>preload</code>, along with any other files you wish to load:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">scenePlugin</span><span class="hl-1">(</span><span class="hl-7">'ModPlayer'</span><span class="hl-1">, </span><span class="hl-7">'plugins/ModPlayer.js'</span><span class="hl-1">, </span><span class="hl-7">'modPlayer'</span><span class="hl-1">, </span><span class="hl-7">'mods'</span><span class="hl-1">);</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>The file is <strong>not</strong> loaded right away. It is added to a queue ready to be loaded either when the loader starts,
|
||
|
|
or if it's already running, when the next free load slot becomes available. This happens automatically if you
|
||
|
|
are calling this from within the Scene's <code>preload</code> method, or a related callback. Because the file is queued
|
||
|
|
it means you cannot use the file immediately after calling this method, but must wait for the file to complete.
|
||
|
|
The typical flow for a Phaser Scene is that you load assets in the Scene's <code>preload</code> method and then when the
|
||
|
|
Scene's <code>create</code> method is called you are guaranteed that all of those assets are ready for use and have been
|
||
|
|
loaded.</p>
|
||
|
|
<p>The key must be a unique String and not already in-use by another file in the Loader.</p>
|
||
|
|
<p>Instead of passing arguments you can pass a configuration object, such as:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">scenePlugin</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'modplayer'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">url:</span><span class="hl-1"> </span><span class="hl-7">'plugins/ModPlayer.js'</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>See the documentation for <code>Phaser.Types.Loader.FileTypes.ScenePluginFileConfig</code> for more details.</p>
|
||
|
|
<p>Once the file has finished loading it will automatically be converted into a script element
|
||
|
|
via <code>document.createElement('script')</code>. It will have its language set to JavaScript, <code>defer</code> set to
|
||
|
|
false and then the resulting element will be appended to <code>document.head</code>. Any code then in the
|
||
|
|
script will be executed. It will then be passed to the Phaser PluginCache.register method.</p>
|
||
|
|
<p>The URL can be relative or absolute. If the URL is relative the <code>Loader.baseURL</code> and <code>Loader.path</code> values will be prepended to it.</p>
|
||
|
|
<p>If the URL isn't specified the Loader will take the key and create a filename from that. For example if the key is "alien"
|
||
|
|
and no URL is given then the Loader will set the URL to be "alien.js". It will always add <code>.js</code> as the extension, although
|
||
|
|
this can be overridden if using an object instead of method arguments. If you do not desire this action then provide a URL.</p>
|
||
|
|
<p>Note: The ability to load this type of file will only be available if the Script File type has been built into Phaser.
|
||
|
|
It is available in the default build but can be excluded from custom builds.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">key</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">ScenePluginFileConfig</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">ScenePluginFileConfig</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The key to use for this file, or a file configuration object, or array of them.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">url</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">Function</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load this file from. If undefined or <code>null</code> it will be set to <code><key>.js</code>, i.e. if <code>key</code> was "alien" then the URL will be "alien.js". Or, set to a plugin function.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">systemKey</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>If this plugin is to be added to Scene.Systems, this is the property key for it.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">sceneKey</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>If this plugin is to be added to the Scene, this is the property key for it.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">xhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.scenePlugin</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:65661</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="script" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>script</span><a href="#script" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="script.script-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">script</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">key</span>, <span class="tsd-kind-parameter">url</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">type</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">xhrSettings</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#script.script-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Adds a Script file, or array of Script files, to the current load queue.</p>
|
||
|
|
<p>You can call this method from within your Scene's <code>preload</code>, along with any other files you wish to load:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">script</span><span class="hl-1">(</span><span class="hl-7">'aliens'</span><span class="hl-1">, </span><span class="hl-7">'lib/aliens.js'</span><span class="hl-1">);</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>If the script file contains a module, then you should specify that using the 'type' parameter:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">script</span><span class="hl-1">(</span><span class="hl-7">'aliens'</span><span class="hl-1">, </span><span class="hl-7">'lib/aliens.js'</span><span class="hl-1">, </span><span class="hl-7">'module'</span><span class="hl-1">);</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>The file is <strong>not</strong> loaded right away. It is added to a queue ready to be loaded either when the loader starts,
|
||
|
|
or if it's already running, when the next free load slot becomes available. This happens automatically if you
|
||
|
|
are calling this from within the Scene's <code>preload</code> method, or a related callback. Because the file is queued
|
||
|
|
it means you cannot use the file immediately after calling this method, but must wait for the file to complete.
|
||
|
|
The typical flow for a Phaser Scene is that you load assets in the Scene's <code>preload</code> method and then when the
|
||
|
|
Scene's <code>create</code> method is called you are guaranteed that all of those assets are ready for use and have been
|
||
|
|
loaded.</p>
|
||
|
|
<p>The key must be a unique String and not already in-use by another file in the Loader.</p>
|
||
|
|
<p>Instead of passing arguments you can pass a configuration object, such as:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">script</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'aliens'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">url:</span><span class="hl-1"> </span><span class="hl-7">'lib/aliens.js'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-7">'script'</span><span class="hl-1"> </span><span class="hl-8">// or 'module'</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>See the documentation for <code>Phaser.Types.Loader.FileTypes.ScriptFileConfig</code> for more details.</p>
|
||
|
|
<p>Once the file has finished loading it will automatically be converted into a script element
|
||
|
|
via <code>document.createElement('script')</code>. It will have its language set to JavaScript, <code>defer</code> set to
|
||
|
|
false and then the resulting element will be appended to <code>document.head</code>. Any code then in the
|
||
|
|
script will be executed.</p>
|
||
|
|
<p>The URL can be relative or absolute. If the URL is relative the <code>Loader.baseURL</code> and <code>Loader.path</code> values will be prepended to it.</p>
|
||
|
|
<p>If the URL isn't specified the Loader will take the key and create a filename from that. For example if the key is "alien"
|
||
|
|
and no URL is given then the Loader will set the URL to be "alien.js". It will always add <code>.js</code> as the extension, although
|
||
|
|
this can be overridden if using an object instead of method arguments. If you do not desire this action then provide a URL.</p>
|
||
|
|
<p>Note: The ability to load this type of file will only be available if the Script File type has been built into Phaser.
|
||
|
|
It is available in the default build but can be excluded from custom builds.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">key</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">ScriptFileConfig</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">ScriptFileConfig</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The key to use for this file, or a file configuration object, or array of them.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">url</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load this file from. If undefined or <code>null</code> it will be set to <code><key>.js</code>, i.e. if <code>key</code> was "alien" then the URL will be "alien.js".</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">type</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The script type. Should be either 'script' for classic JavaScript, or 'module' if the file contains an exported module. Default 'script'.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">xhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.script</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:65724</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="scripts" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>scripts</span><a href="#scripts" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="scripts.scripts-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">scripts</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">key</span>, <span class="tsd-kind-parameter">url</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">extension</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">xhrSettings</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#scripts.scripts-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Adds an array of Script files to the current load queue.</p>
|
||
|
|
<p>The difference between this and the <code>ScriptFile</code> file type is that you give an array of scripts to this method,
|
||
|
|
and the scripts are then processed <em>exactly</em> in that order. This allows you to load a bunch of scripts that
|
||
|
|
may have dependencies on each other without worrying about the async nature of traditional script loading.</p>
|
||
|
|
<p>You can call this method from within your Scene's <code>preload</code>, along with any other files you wish to load:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">scripts</span><span class="hl-1">(</span><span class="hl-7">'PostProcess'</span><span class="hl-1">, [</span><br/><span class="hl-1"> </span><span class="hl-7">'libs/shaders/CopyShader.js'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-7">'libs/postprocessing/EffectComposer.js'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-7">'libs/postprocessing/RenderPass.js'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-7">'libs/postprocessing/MaskPass.js'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-7">'libs/postprocessing/ShaderPass.js'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-7">'libs/postprocessing/AfterimagePass.js'</span><br/><span class="hl-1"> ]);</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>In the code above the script files will all be loaded in parallel but only processed (i.e. invoked) in the exact
|
||
|
|
order given in the array.</p>
|
||
|
|
<p>The files are <strong>not</strong> loaded right away. They are added to a queue ready to be loaded either when the loader starts,
|
||
|
|
or if it's already running, when the next free load slot becomes available. This happens automatically if you
|
||
|
|
are calling this from within the Scene's <code>preload</code> method, or a related callback. Because the files are queued
|
||
|
|
it means you cannot use the files immediately after calling this method, but must wait for the files to complete.
|
||
|
|
The typical flow for a Phaser Scene is that you load assets in the Scene's <code>preload</code> method and then when the
|
||
|
|
Scene's <code>create</code> method is called you are guaranteed that all of those assets are ready for use and have been
|
||
|
|
loaded.</p>
|
||
|
|
<p>The key must be a unique String and not already in-use by another file in the Loader.</p>
|
||
|
|
<p>Instead of passing arguments you can pass a configuration object, such as:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">scripts</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'PostProcess'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">url:</span><span class="hl-1"> [</span><br/><span class="hl-1"> </span><span class="hl-7">'libs/shaders/CopyShader.js'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-7">'libs/postprocessing/EffectComposer.js'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-7">'libs/postprocessing/RenderPass.js'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-7">'libs/postprocessing/MaskPass.js'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-7">'libs/postprocessing/ShaderPass.js'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-7">'libs/postprocessing/AfterimagePass.js'</span><br/><span class="hl-1"> ]</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>See the documentation for <code>Phaser.Types.Loader.FileTypes.MultiScriptFileConfig</code> for more details.</p>
|
||
|
|
<p>Once all the files have finished loading they will automatically be converted into a script element
|
||
|
|
via <code>document.createElement('script')</code>. They will have their language set to JavaScript, <code>defer</code> set to
|
||
|
|
false and then the resulting element will be appended to <code>document.head</code>. Any code then in the
|
||
|
|
script will be executed. This is done in the exact order the files are specified in the url array.</p>
|
||
|
|
<p>The URLs can be relative or absolute. If the URLs are relative the <code>Loader.baseURL</code> and <code>Loader.path</code> values will be prepended to them.</p>
|
||
|
|
<p>Note: The ability to load this type of file will only be available if the MultiScript File type has been built into Phaser.
|
||
|
|
It is available in the default build but can be excluded from custom builds.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">key</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">MultiScriptFileConfig</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">MultiScriptFileConfig</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The key to use for this file, or a file configuration object, or array of them.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">url</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>An array of absolute or relative URLs to load the script files from. They are processed in the order given in the array.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">extension</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The default file extension to use if no url is provided. Default 'js'.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">xhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>Extra XHR Settings specifically for these files.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.scripts</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:65270</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="setBaseURL" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>set<wbr/>BaseURL</span><a href="#setBaseURL" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="setBaseURL.setBaseURL-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">set<wbr/>BaseURL</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">url</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#setBaseURL.setBaseURL-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>If you want to append a URL before the path of any asset you can set this here.</p>
|
||
|
|
<p>Useful if allowing the asset base url to be configured outside of the game code.</p>
|
||
|
|
<p>Once a base URL is set it will affect every file loaded by the Loader from that point on. It does <em>not</em> change any
|
||
|
|
file <em>already</em> being loaded. To reset it, call this method with no arguments.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">url</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The URL to use. Leave empty to reset.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.setBaseURL</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66568</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="setCORS" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>setCORS</span><a href="#setCORS" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="setCORS.setCORS-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">setCORS</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">crossOrigin</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#setCORS.setCORS-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Sets the Cross Origin Resource Sharing value used when loading files.</p>
|
||
|
|
<p>Files can override this value on a per-file basis by specifying an alternative <code>crossOrigin</code> value in their file config.</p>
|
||
|
|
<p>Once CORs is set it will then affect every file loaded by the Loader from that point on, as long as they don't have
|
||
|
|
their own CORs setting. To reset it, call this method with no arguments.</p>
|
||
|
|
<p>For more details about CORs see <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS">https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS</a></p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">crossOrigin</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The value to use for the <code>crossOrigin</code> property in the load request.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.setCORS</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66614</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="setPath" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>set<wbr/>Path</span><a href="#setPath" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="setPath.setPath-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">set<wbr/>Path</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">path</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#setPath.setPath-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>The value of <code>path</code>, if set, is placed before any <em>relative</em> file path given. For example:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">setPath</span><span class="hl-1">(</span><span class="hl-7">"images/sprites/"</span><span class="hl-1">);</span><br/><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">image</span><span class="hl-1">(</span><span class="hl-7">"ball"</span><span class="hl-1">, </span><span class="hl-7">"ball.png"</span><span class="hl-1">);</span><br/><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">image</span><span class="hl-1">(</span><span class="hl-7">"tree"</span><span class="hl-1">, </span><span class="hl-7">"level1/oaktree.png"</span><span class="hl-1">);</span><br/><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">image</span><span class="hl-1">(</span><span class="hl-7">"boom"</span><span class="hl-1">, </span><span class="hl-7">"http://server.com/explode.png"</span><span class="hl-1">);</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>Would load the <code>ball</code> file from <code>images/sprites/ball.png</code> and the tree from
|
||
|
|
<code>images/sprites/level1/oaktree.png</code> but the file <code>boom</code> would load from the URL
|
||
|
|
given as it's an absolute URL.</p>
|
||
|
|
<p>Please note that the path is added before the filename but <em>after</em> the baseURL (if set.)</p>
|
||
|
|
<p>Once a path is set it will then affect every file added to the Loader from that point on. It does <em>not</em> change any
|
||
|
|
file <em>already</em> in the load queue. To reset it, call this method with no arguments.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">path</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The path to use. Leave empty to reset.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.setPath</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66590</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="setPrefix" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>set<wbr/>Prefix</span><a href="#setPrefix" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="setPrefix.setPrefix-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">set<wbr/>Prefix</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">prefix</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#setPrefix.setPrefix-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>An optional prefix that is automatically prepended to the start of every file key.</p>
|
||
|
|
<p>If prefix was <code>MENU.</code> and you load an image with the key 'Background' the resulting key would be <code>MENU.Background</code>.</p>
|
||
|
|
<p>Once a prefix is set it will then affect every file added to the Loader from that point on. It does <em>not</em> change any
|
||
|
|
file <em>already</em> in the load queue. To reset it, call this method with no arguments.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">prefix</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The prefix to use. Leave empty to reset.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.setPrefix</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66601</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="shutdown" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>shutdown</span><a href="#shutdown" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="shutdown.shutdown-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">shutdown</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#shutdown.shutdown-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Removes all listeners.</p>
|
||
|
|
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.shutdown</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:9906</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="spritesheet" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>spritesheet</span><a href="#spritesheet" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="spritesheet.spritesheet-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">spritesheet</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">key</span>, <span class="tsd-kind-parameter">url</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">frameConfig</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">xhrSettings</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#spritesheet.spritesheet-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Adds a Sprite Sheet Image, or array of Sprite Sheet Images, to the current load queue.</p>
|
||
|
|
<p>The term 'Sprite Sheet' in Phaser means a fixed-size sheet. Where every frame in the sheet is the exact same size,
|
||
|
|
and you reference those frames using numbers, not frame names. This is not the same thing as a Texture Atlas, where
|
||
|
|
the frames are packed in a way where they take up the least amount of space, and are referenced by their names,
|
||
|
|
not numbers. Some articles and software use the term 'Sprite Sheet' to mean Texture Atlas, so please be aware of
|
||
|
|
what sort of file you're actually trying to load.</p>
|
||
|
|
<p>You can call this method from within your Scene's <code>preload</code>, along with any other files you wish to load:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">spritesheet</span><span class="hl-1">(</span><span class="hl-7">'bot'</span><span class="hl-1">, </span><span class="hl-7">'images/robot.png'</span><span class="hl-1">, { </span><span class="hl-2">frameWidth:</span><span class="hl-1"> </span><span class="hl-0">32</span><span class="hl-1">, </span><span class="hl-2">frameHeight:</span><span class="hl-1"> </span><span class="hl-0">38</span><span class="hl-1"> });</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>The file is <strong>not</strong> loaded right away. It is added to a queue ready to be loaded either when the loader starts,
|
||
|
|
or if it's already running, when the next free load slot becomes available. This happens automatically if you
|
||
|
|
are calling this from within the Scene's <code>preload</code> method, or a related callback. Because the file is queued
|
||
|
|
it means you cannot use the file immediately after calling this method, but must wait for the file to complete.
|
||
|
|
The typical flow for a Phaser Scene is that you load assets in the Scene's <code>preload</code> method and then when the
|
||
|
|
Scene's <code>create</code> method is called you are guaranteed that all of those assets are ready for use and have been
|
||
|
|
loaded.</p>
|
||
|
|
<p>Phaser can load all common image types: png, jpg, gif and any other format the browser can natively handle.
|
||
|
|
If you try to load an animated gif only the first frame will be rendered. Browsers do not natively support playback
|
||
|
|
of animated gifs to Canvas elements.</p>
|
||
|
|
<p>The key must be a unique String. It is used to add the file to the global Texture Manager upon a successful load.
|
||
|
|
The key should be unique both in terms of files being loaded and files already present in the Texture Manager.
|
||
|
|
Loading a file using a key that is already taken will result in a warning. If you wish to replace an existing file
|
||
|
|
then remove it from the Texture Manager first, before loading a new one.</p>
|
||
|
|
<p>Instead of passing arguments you can pass a configuration object, such as:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">spritesheet</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'bot'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">url:</span><span class="hl-1"> </span><span class="hl-7">'images/robot.png'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">frameConfig:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">frameWidth:</span><span class="hl-1"> </span><span class="hl-0">32</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">frameHeight:</span><span class="hl-1"> </span><span class="hl-0">38</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">startFrame:</span><span class="hl-1"> </span><span class="hl-0">0</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">endFrame:</span><span class="hl-1"> </span><span class="hl-0">8</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>See the documentation for <code>Phaser.Types.Loader.FileTypes.SpriteSheetFileConfig</code> for more details.</p>
|
||
|
|
<p>Once the file has finished loading you can use it as a texture for a Game Object by referencing its key:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">spritesheet</span><span class="hl-1">(</span><span class="hl-7">'bot'</span><span class="hl-1">, </span><span class="hl-7">'images/robot.png'</span><span class="hl-1">, { </span><span class="hl-2">frameWidth:</span><span class="hl-1"> </span><span class="hl-0">32</span><span class="hl-1">, </span><span class="hl-2">frameHeight:</span><span class="hl-1"> </span><span class="hl-0">38</span><span class="hl-1"> });</span><br/><span class="hl-8">// and later in your game ...</span><br/><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">add</span><span class="hl-1">.</span><span class="hl-6">image</span><span class="hl-1">(</span><span class="hl-2">x</span><span class="hl-1">, </span><span class="hl-2">y</span><span class="hl-1">, </span><span class="hl-7">'bot'</span><span class="hl-1">, </span><span class="hl-0">0</span><span class="hl-1">);</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>If you have specified a prefix in the loader, via <code>Loader.setPrefix</code> then this value will be prepended to this files
|
||
|
|
key. For example, if the prefix was <code>PLAYER.</code> and the key was <code>Running</code> the final key will be <code>PLAYER.Running</code> and
|
||
|
|
this is what you would use to retrieve the image from the Texture Manager.</p>
|
||
|
|
<p>The URL can be relative or absolute. If the URL is relative the <code>Loader.baseURL</code> and <code>Loader.path</code> values will be prepended to it.</p>
|
||
|
|
<p>If the URL isn't specified the Loader will take the key and create a filename from that. For example if the key is "alien"
|
||
|
|
and no URL is given then the Loader will set the URL to be "alien.png". It will always add <code>.png</code> as the extension, although
|
||
|
|
this can be overridden if using an object instead of method arguments. If you do not desire this action then provide a URL.</p>
|
||
|
|
<p>Phaser also supports the automatic loading of associated normal maps. If you have a normal map to go with this image,
|
||
|
|
then you can specify it by providing an array as the <code>url</code> where the second element is the normal map:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">spritesheet</span><span class="hl-1">(</span><span class="hl-7">'logo'</span><span class="hl-1">, [ </span><span class="hl-7">'images/AtariLogo.png'</span><span class="hl-1">, </span><span class="hl-7">'images/AtariLogo-n.png'</span><span class="hl-1"> ], { </span><span class="hl-2">frameWidth:</span><span class="hl-1"> </span><span class="hl-0">256</span><span class="hl-1">, </span><span class="hl-2">frameHeight:</span><span class="hl-1"> </span><span class="hl-0">80</span><span class="hl-1"> });</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>Or, if you are using a config object use the <code>normalMap</code> property:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">spritesheet</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'logo'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">url:</span><span class="hl-1"> </span><span class="hl-7">'images/AtariLogo.png'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">normalMap:</span><span class="hl-1"> </span><span class="hl-7">'images/AtariLogo-n.png'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">frameConfig:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">frameWidth:</span><span class="hl-1"> </span><span class="hl-0">256</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">frameHeight:</span><span class="hl-1"> </span><span class="hl-0">80</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>The normal map file is subject to the same conditions as the image file with regard to the path, baseURL, CORs and XHR Settings.
|
||
|
|
Normal maps are a WebGL only feature.</p>
|
||
|
|
<p>Note: The ability to load this type of file will only be available if the Sprite Sheet File type has been built into Phaser.
|
||
|
|
It is available in the default build but can be excluded from custom builds.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">key</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">SpriteSheetFileConfig</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">SpriteSheetFileConfig</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The key to use for this file, or a file configuration object, or array of them.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">url</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load this file from. If undefined or <code>null</code> it will be set to <code><key>.png</code>, i.e. if <code>key</code> was "alien" then the URL will be "alien.png".</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">frameConfig</span>: <span class="tsd-signature-type">ImageFrameConfig</span></span><div class="tsd-comment tsd-typography"><p>The frame configuration object. At a minimum it should have a <code>frameWidth</code> property.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">xhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.spritesheet</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:65827</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="start" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>start</span><a href="#start" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="start.start-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">start</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#start.start-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Starts the Loader running. This will reset the progress and totals and then emit a <code>start</code> event.
|
||
|
|
If there is nothing in the queue the Loader will immediately complete, otherwise it will start
|
||
|
|
loading the first batch of files.</p>
|
||
|
|
<p>The Loader is started automatically if the queue is populated within your Scenes <code>preload</code> method.</p>
|
||
|
|
<p>However, outside of this, you need to call this method to start it.</p>
|
||
|
|
<p>If the Loader is already running this method will simply return.</p>
|
||
|
|
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.start</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66671</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="svg" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>svg</span><a href="#svg" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="svg.svg-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">svg</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">key</span>, <span class="tsd-kind-parameter">url</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">svgConfig</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">xhrSettings</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#svg.svg-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Adds an SVG File, or array of SVG Files, to the current load queue. When the files are loaded they
|
||
|
|
will be rendered to bitmap textures and stored in the Texture Manager.</p>
|
||
|
|
<p>You can call this method from within your Scene's <code>preload</code>, along with any other files you wish to load:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">svg</span><span class="hl-1">(</span><span class="hl-7">'morty'</span><span class="hl-1">, </span><span class="hl-7">'images/Morty.svg'</span><span class="hl-1">);</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>The file is <strong>not</strong> loaded right away. It is added to a queue ready to be loaded either when the loader starts,
|
||
|
|
or if it's already running, when the next free load slot becomes available. This happens automatically if you
|
||
|
|
are calling this from within the Scene's <code>preload</code> method, or a related callback. Because the file is queued
|
||
|
|
it means you cannot use the file immediately after calling this method, but must wait for the file to complete.
|
||
|
|
The typical flow for a Phaser Scene is that you load assets in the Scene's <code>preload</code> method and then when the
|
||
|
|
Scene's <code>create</code> method is called you are guaranteed that all of those assets are ready for use and have been
|
||
|
|
loaded.</p>
|
||
|
|
<p>The key must be a unique String. It is used to add the file to the global Texture Manager upon a successful load.
|
||
|
|
The key should be unique both in terms of files being loaded and files already present in the Texture Manager.
|
||
|
|
Loading a file using a key that is already taken will result in a warning. If you wish to replace an existing file
|
||
|
|
then remove it from the Texture Manager first, before loading a new one.</p>
|
||
|
|
<p>Instead of passing arguments you can pass a configuration object, such as:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">svg</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'morty'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">url:</span><span class="hl-1"> </span><span class="hl-7">'images/Morty.svg'</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>See the documentation for <code>Phaser.Types.Loader.FileTypes.SVGFileConfig</code> for more details.</p>
|
||
|
|
<p>Once the file has finished loading you can use it as a texture for a Game Object by referencing its key:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">svg</span><span class="hl-1">(</span><span class="hl-7">'morty'</span><span class="hl-1">, </span><span class="hl-7">'images/Morty.svg'</span><span class="hl-1">);</span><br/><span class="hl-8">// and later in your game ...</span><br/><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">add</span><span class="hl-1">.</span><span class="hl-6">image</span><span class="hl-1">(</span><span class="hl-2">x</span><span class="hl-1">, </span><span class="hl-2">y</span><span class="hl-1">, </span><span class="hl-7">'morty'</span><span class="hl-1">);</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>If you have specified a prefix in the loader, via <code>Loader.setPrefix</code> then this value will be prepended to this files
|
||
|
|
key. For example, if the prefix was <code>MENU.</code> and the key was <code>Background</code> the final key will be <code>MENU.Background</code> and
|
||
|
|
this is what you would use to retrieve the image from the Texture Manager.</p>
|
||
|
|
<p>The URL can be relative or absolute. If the URL is relative the <code>Loader.baseURL</code> and <code>Loader.path</code> values will be prepended to it.</p>
|
||
|
|
<p>If the URL isn't specified the Loader will take the key and create a filename from that. For example if the key is "alien"
|
||
|
|
and no URL is given then the Loader will set the URL to be "alien.html". It will always add <code>.html</code> as the extension, although
|
||
|
|
this can be overridden if using an object instead of method arguments. If you do not desire this action then provide a URL.</p>
|
||
|
|
<p>You can optionally pass an SVG Resize Configuration object when you load an SVG file. By default the SVG will be rendered to a texture
|
||
|
|
at the same size defined in the SVG file attributes. However, this isn't always desirable. You may wish to resize the SVG (either down
|
||
|
|
or up) to improve texture clarity, or reduce texture memory consumption. You can either specify an exact width and height to resize
|
||
|
|
the SVG to:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">svg</span><span class="hl-1">(</span><span class="hl-7">'morty'</span><span class="hl-1">, </span><span class="hl-7">'images/Morty.svg'</span><span class="hl-1">, { </span><span class="hl-2">width:</span><span class="hl-1"> </span><span class="hl-0">300</span><span class="hl-1">, </span><span class="hl-2">height:</span><span class="hl-1"> </span><span class="hl-0">600</span><span class="hl-1"> });</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>Or when using a configuration object:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">svg</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'morty'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">url:</span><span class="hl-1"> </span><span class="hl-7">'images/Morty.svg'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">svgConfig:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">width:</span><span class="hl-1"> </span><span class="hl-0">300</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">height:</span><span class="hl-1"> </span><span class="hl-0">600</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>Alternatively, you can just provide a scale factor instead:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">svg</span><span class="hl-1">(</span><span class="hl-7">'morty'</span><span class="hl-1">, </span><span class="hl-7">'images/Morty.svg'</span><span class="hl-1">, { </span><span class="hl-2">scale:</span><span class="hl-1"> </span><span class="hl-0">2.5</span><span class="hl-1"> });</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>Or when using a configuration object:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">svg</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'morty'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">url:</span><span class="hl-1"> </span><span class="hl-7">'images/Morty.svg'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">svgConfig:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">scale:</span><span class="hl-1"> </span><span class="hl-0">2.5</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>If scale, width and height values are all given, the scale has priority and the width and height values are ignored.</p>
|
||
|
|
<p>Note: The ability to load this type of file will only be available if the SVG File type has been built into Phaser.
|
||
|
|
It is available in the default build but can be excluded from custom builds.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">key</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">SVGFileConfig</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">SVGFileConfig</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The key to use for this file, or a file configuration object, or array of them.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">url</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load this file from. If undefined or <code>null</code> it will be set to <code><key>.svg</code>, i.e. if <code>key</code> was "alien" then the URL will be "alien.svg".</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">svgConfig</span>: <span class="tsd-signature-type">SVGSizeConfig</span></span><div class="tsd-comment tsd-typography"><p>The svg size configuration object.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">xhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.svg</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:65939</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="text" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>text</span><a href="#text" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="text.text-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">text</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">key</span>, <span class="tsd-kind-parameter">url</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">xhrSettings</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#text.text-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Adds a Text file, or array of Text files, to the current load queue.</p>
|
||
|
|
<p>You can call this method from within your Scene's <code>preload</code>, along with any other files you wish to load:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">text</span><span class="hl-1">(</span><span class="hl-7">'story'</span><span class="hl-1">, </span><span class="hl-7">'files/IntroStory.txt'</span><span class="hl-1">);</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>The file is <strong>not</strong> loaded right away. It is added to a queue ready to be loaded either when the loader starts,
|
||
|
|
or if it's already running, when the next free load slot becomes available. This happens automatically if you
|
||
|
|
are calling this from within the Scene's <code>preload</code> method, or a related callback. Because the file is queued
|
||
|
|
it means you cannot use the file immediately after calling this method, but must wait for the file to complete.
|
||
|
|
The typical flow for a Phaser Scene is that you load assets in the Scene's <code>preload</code> method and then when the
|
||
|
|
Scene's <code>create</code> method is called you are guaranteed that all of those assets are ready for use and have been
|
||
|
|
loaded.</p>
|
||
|
|
<p>The key must be a unique String. It is used to add the file to the global Text Cache upon a successful load.
|
||
|
|
The key should be unique both in terms of files being loaded and files already present in the Text Cache.
|
||
|
|
Loading a file using a key that is already taken will result in a warning. If you wish to replace an existing file
|
||
|
|
then remove it from the Text Cache first, before loading a new one.</p>
|
||
|
|
<p>Instead of passing arguments you can pass a configuration object, such as:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">text</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'story'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">url:</span><span class="hl-1"> </span><span class="hl-7">'files/IntroStory.txt'</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>See the documentation for <code>Phaser.Types.Loader.FileTypes.TextFileConfig</code> for more details.</p>
|
||
|
|
<p>Once the file has finished loading you can access it from its Cache using its key:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">text</span><span class="hl-1">(</span><span class="hl-7">'story'</span><span class="hl-1">, </span><span class="hl-7">'files/IntroStory.txt'</span><span class="hl-1">);</span><br/><span class="hl-8">// and later in your game ...</span><br/><span class="hl-4">var</span><span class="hl-1"> </span><span class="hl-2">data</span><span class="hl-1"> = </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">cache</span><span class="hl-1">.</span><span class="hl-2">text</span><span class="hl-1">.</span><span class="hl-6">get</span><span class="hl-1">(</span><span class="hl-7">'story'</span><span class="hl-1">);</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>If you have specified a prefix in the loader, via <code>Loader.setPrefix</code> then this value will be prepended to this files
|
||
|
|
key. For example, if the prefix was <code>LEVEL1.</code> and the key was <code>Story</code> the final key will be <code>LEVEL1.Story</code> and
|
||
|
|
this is what you would use to retrieve the text from the Text Cache.</p>
|
||
|
|
<p>The URL can be relative or absolute. If the URL is relative the <code>Loader.baseURL</code> and <code>Loader.path</code> values will be prepended to it.</p>
|
||
|
|
<p>If the URL isn't specified the Loader will take the key and create a filename from that. For example if the key is "story"
|
||
|
|
and no URL is given then the Loader will set the URL to be "story.txt". It will always add <code>.txt</code> as the extension, although
|
||
|
|
this can be overridden if using an object instead of method arguments. If you do not desire this action then provide a URL.</p>
|
||
|
|
<p>Note: The ability to load this type of file will only be available if the Text File type has been built into Phaser.
|
||
|
|
It is available in the default build but can be excluded from custom builds.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">key</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">TextFileConfig</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">TextFileConfig</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The key to use for this file, or a file configuration object, or array of them.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">url</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load this file from. If undefined or <code>null</code> it will be set to <code><key>.txt</code>, i.e. if <code>key</code> was "alien" then the URL will be "alien.txt".</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">xhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.text</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66001</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="texture" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>texture</span><a href="#texture" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="texture.texture-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">texture</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">key</span>, <span class="tsd-kind-parameter">url</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">xhrSettings</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#texture.texture-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Adds a Compressed Texture file to the current load queue. This feature is WebGL only.</p>
|
||
|
|
<p>This method takes a key and a configuration object, which lists the different formats
|
||
|
|
and files associated with them.</p>
|
||
|
|
<p>The texture format object should be ordered in GPU priority order, with IMG as the last entry.</p>
|
||
|
|
<p>You can call this method from within your Scene's <code>preload</code>, along with any other files you wish to load:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">texture</span><span class="hl-1">(</span><span class="hl-7">'yourPic'</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-2">ASTC:</span><span class="hl-1"> { </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-7">'PVR'</span><span class="hl-1">, </span><span class="hl-2">textureURL:</span><span class="hl-1"> </span><span class="hl-7">'pic-astc-4x4.pvr'</span><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-2">PVRTC:</span><span class="hl-1"> { </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-7">'PVR'</span><span class="hl-1">, </span><span class="hl-2">textureURL:</span><span class="hl-1"> </span><span class="hl-7">'pic-pvrtc-4bpp-rgba.pvr'</span><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-2">S3TC:</span><span class="hl-1"> { </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-7">'PVR'</span><span class="hl-1">, </span><span class="hl-2">textureURL:</span><span class="hl-1"> </span><span class="hl-7">'pic-dxt5.pvr'</span><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-2">IMG:</span><span class="hl-1"> { </span><span class="hl-2">textureURL:</span><span class="hl-1"> </span><span class="hl-7">'pic.png'</span><span class="hl-1"> }</span><br/><span class="hl-1"> });</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>If you wish to load a texture atlas, provide the <code>atlasURL</code> property:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-5">path</span><span class="hl-1"> = </span><span class="hl-7">'assets/compressed'</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">texture</span><span class="hl-1">(</span><span class="hl-7">'yourAtlas'</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-7">'ASTC'</span><span class="hl-2">:</span><span class="hl-1"> { </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-7">'PVR'</span><span class="hl-1">, </span><span class="hl-2">textureURL:</span><span class="hl-1"> </span><span class="hl-7">`</span><span class="hl-4">${</span><span class="hl-2">path</span><span class="hl-4">}</span><span class="hl-7">/textures-astc-4x4.pvr`</span><span class="hl-1">, </span><span class="hl-2">atlasURL:</span><span class="hl-1"> </span><span class="hl-7">`</span><span class="hl-4">${</span><span class="hl-2">path</span><span class="hl-4">}</span><span class="hl-7">/textures.json`</span><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-7">'PVRTC'</span><span class="hl-2">:</span><span class="hl-1"> { </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-7">'PVR'</span><span class="hl-1">, </span><span class="hl-2">textureURL:</span><span class="hl-1"> </span><span class="hl-7">`</span><span class="hl-4">${</span><span class="hl-2">path</span><span class="hl-4">}</span><span class="hl-7">/textures-pvrtc-4bpp-rgba.pvr`</span><span class="hl-1">, </span><span class="hl-2">atlasURL:</span><span class="hl-1"> </span><span class="hl-7">`</span><span class="hl-4">${</span><span class="hl-2">path</span><span class="hl-4">}</span><span class="hl-7">/textures-pvrtc-4bpp-rgba.json`</span><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-7">'S3TC'</span><span class="hl-2">:</span><span class="hl-1"> { </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-7">'PVR'</span><span class="hl-1">, </span><span class="hl-2">textureURL:</span><span class="hl-1"> </span><span class="hl-7">`</span><span class="hl-4">${</span><span class="hl-2">path</span><span class="hl-4">}</span><span class="hl-7">/textures-dxt5.pvr`</span><span class="hl-1">, </span><span class="hl-2">atlasURL:</span><span class="hl-1"> </span><span class="hl-7">`</span><span class="hl-4">${</span><span class="hl-2">path</span><span class="hl-4">}</span><span class="hl-7">/textures-dxt5.json`</span><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-7">'IMG'</span><span class="hl-2">:</span><span class="hl-1"> { </span><span class="hl-2">textureURL:</span><span class="hl-1"> </span><span class="hl-7">`</span><span class="hl-4">${</span><span class="hl-2">path</span><span class="hl-4">}</span><span class="hl-7">/textures.png`</span><span class="hl-1">, </span><span class="hl-2">atlasURL:</span><span class="hl-1"> </span><span class="hl-7">`</span><span class="hl-4">${</span><span class="hl-2">path</span><span class="hl-4">}</span><span class="hl-7">/textures.json`</span><span class="hl-1"> }</span><br/><span class="hl-1"> });</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>If you wish to load a Multi Atlas, as exported from Texture Packer Pro, use the <code>multiAtlasURL</code> property instead:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">const</span><span class="hl-1"> </span><span class="hl-5">path</span><span class="hl-1"> = </span><span class="hl-7">'assets/compressed'</span><span class="hl-1">;</span><br/><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">texture</span><span class="hl-1">(</span><span class="hl-7">'yourAtlas'</span><span class="hl-1">, {</span><br/><span class="hl-1"> </span><span class="hl-7">'ASTC'</span><span class="hl-2">:</span><span class="hl-1"> { </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-7">'PVR'</span><span class="hl-1">, </span><span class="hl-2">atlasURL:</span><span class="hl-1"> </span><span class="hl-7">`</span><span class="hl-4">${</span><span class="hl-2">path</span><span class="hl-4">}</span><span class="hl-7">/textures.json`</span><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-7">'PVRTC'</span><span class="hl-2">:</span><span class="hl-1"> { </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-7">'PVR'</span><span class="hl-1">, </span><span class="hl-2">atlasURL:</span><span class="hl-1"> </span><span class="hl-7">`</span><span class="hl-4">${</span><span class="hl-2">path</span><span class="hl-4">}</span><span class="hl-7">/textures-pvrtc-4bpp-rgba.json`</span><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-7">'S3TC'</span><span class="hl-2">:</span><span class="hl-1"> { </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-7">'PVR'</span><span class="hl-1">, </span><span class="hl-2">atlasURL:</span><span class="hl-1"> </span><span class="hl-7">`</span><span class="hl-4">${</span><span class="hl-2">path</span><span class="hl-4">}</span><span class="hl-7">/textures-dxt5.json`</span><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-7">'IMG'</span><span class="hl-2">:</span><span class="hl-1"> { </span><span class="hl-2">atlasURL:</span><span class="hl-1"> </span><span class="hl-7">`</span><span class="hl-4">${</span><span class="hl-2">path</span><span class="hl-4">}</span><span class="hl-7">/textures.json`</span><span class="hl-1"> }</span><br/><span class="hl-1"> });</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>When loading a Multi Atlas you do not need to specify the <code>textureURL</code> property as it will be read from the JSON file.</p>
|
||
|
|
<p>Instead of passing arguments you can pass a configuration object, such as:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">texture</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'yourPic'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">url:</span><span class="hl-1"> {</span><br/><span class="hl-1"> </span><span class="hl-2">ASTC:</span><span class="hl-1"> { </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-7">'PVR'</span><span class="hl-1">, </span><span class="hl-2">textureURL:</span><span class="hl-1"> </span><span class="hl-7">'pic-astc-4x4.pvr'</span><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-2">PVRTC:</span><span class="hl-1"> { </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-7">'PVR'</span><span class="hl-1">, </span><span class="hl-2">textureURL:</span><span class="hl-1"> </span><span class="hl-7">'pic-pvrtc-4bpp-rgba.pvr'</span><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-2">S3TC:</span><span class="hl-1"> { </span><span class="hl-2">type:</span><span class="hl-1"> </span><span class="hl-7">'PVR'</span><span class="hl-1">, </span><span class="hl-2">textureURL:</span><span class="hl-1"> </span><span class="hl-7">'pic-dxt5.pvr'</span><span class="hl-1"> },</span><br/><span class="hl-1"> </span><span class="hl-2">IMG:</span><span class="hl-1"> { </span><span class="hl-2">textureURL:</span><span class="hl-1"> </span><span class="hl-7">'pic.png'</span><span class="hl-1"> }</span><br/><span class="hl-1"> }</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>See the documentation for <code>Phaser.Types.Loader.FileTypes.CompressedTextureFileConfig</code> for more details.</p>
|
||
|
|
<p>The number of formats you provide to this function is up to you, but you should ensure you
|
||
|
|
cover the primary platforms where appropriate.</p>
|
||
|
|
<p>The 'IMG' entry is a fallback to a JPG or PNG, should the browser be unable to load any of the other
|
||
|
|
formats presented to this function. You should really always include this, although it is optional.</p>
|
||
|
|
<p>Phaser supports loading both the PVR and KTX container formats. Within those, it can parse
|
||
|
|
the following texture compression formats:</p>
|
||
|
|
<p>ETC
|
||
|
|
ETC1
|
||
|
|
ATC
|
||
|
|
ASTC
|
||
|
|
BPTC
|
||
|
|
RGTC
|
||
|
|
PVRTC
|
||
|
|
S3TC
|
||
|
|
S3TCSRGB</p>
|
||
|
|
<p>For more information about the benefits of compressed textures please see the
|
||
|
|
following articles:</p>
|
||
|
|
<p>Texture Compression in 2020 (<a href="https://aras-p.info/blog/2020/12/08/Texture-Compression-in-2020/">https://aras-p.info/blog/2020/12/08/Texture-Compression-in-2020/</a>)
|
||
|
|
Compressed GPU Texture Formats (<a href="https://themaister.net/blog/2020/08/12/compressed-gpu-texture-formats-a-review-and-compute-shader-decoders-part-1/">https://themaister.net/blog/2020/08/12/compressed-gpu-texture-formats-a-review-and-compute-shader-decoders-part-1/</a>)</p>
|
||
|
|
<p>To create compressed texture files use a 3rd party application such as:</p>
|
||
|
|
<p>Texture Packer (<a href="https://www.codeandweb.com/texturepacker/tutorials/how-to-create-sprite-sheets-for-phaser3?utm_source=ad&utm_medium=banner&utm_campaign=phaser-2018-10-16">https://www.codeandweb.com/texturepacker/tutorials/how-to-create-sprite-sheets-for-phaser3?utm_source=ad&utm_medium=banner&utm_campaign=phaser-2018-10-16</a>)
|
||
|
|
PVRTexTool (<a href="https://developer.imaginationtech.com/pvrtextool/">https://developer.imaginationtech.com/pvrtextool/</a>) - available for Windows, macOS and Linux.
|
||
|
|
Mali Texture Compression Tool (<a href="https://developer.arm.com/tools-and-software/graphics-and-gaming/mali-texture-compression-tool">https://developer.arm.com/tools-and-software/graphics-and-gaming/mali-texture-compression-tool</a>)
|
||
|
|
ASTC Encoder (<a href="https://github.com/ARM-software/astc-encoder">https://github.com/ARM-software/astc-encoder</a>)</p>
|
||
|
|
<p>ASTCs must have a Channel Type of Unsigned Normalized Bytes (UNorm).</p>
|
||
|
|
<p>The file is <strong>not</strong> loaded right away. It is added to a queue ready to be loaded either when the loader starts,
|
||
|
|
or if it's already running, when the next free load slot becomes available. This happens automatically if you
|
||
|
|
are calling this from within the Scene's <code>preload</code> method, or a related callback. Because the file is queued
|
||
|
|
it means you cannot use the file immediately after calling this method, but must wait for the file to complete.
|
||
|
|
The typical flow for a Phaser Scene is that you load assets in the Scene's <code>preload</code> method and then when the
|
||
|
|
Scene's <code>create</code> method is called you are guaranteed that all of those assets are ready for use and have been
|
||
|
|
loaded.</p>
|
||
|
|
<p>The key must be a unique String. It is used to add the file to the global Texture Manager upon a successful load.
|
||
|
|
The key should be unique both in terms of files being loaded and files already present in the Texture Manager.
|
||
|
|
Loading a file using a key that is already taken will result in a warning. If you wish to replace an existing file
|
||
|
|
then remove it from the Texture Manager first, before loading a new one.</p>
|
||
|
|
<p>If you have specified a prefix in the loader, via <code>Loader.setPrefix</code> then this value will be prepended to this files
|
||
|
|
key. For example, if the prefix was <code>LEVEL1.</code> and the key was <code>Data</code> the final key will be <code>LEVEL1.Data</code> and
|
||
|
|
this is what you would use to retrieve the text from the Texture Manager.</p>
|
||
|
|
<p>The URL can be relative or absolute. If the URL is relative the <code>Loader.baseURL</code> and <code>Loader.path</code> values will be prepended to it.</p>
|
||
|
|
<p>Unlike other file loaders in Phaser, the URLs must include the file extension.</p>
|
||
|
|
<p>Note: The ability to load this type of file will only be available if the Compressed Texture File type has been built into Phaser.
|
||
|
|
It is available in the default build but can be excluded from custom builds.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">key</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">CompressedTextureFileConfig</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">CompressedTextureFileConfig</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The key to use for this file, or a file configuration object, or array of them.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">url</span>: <span class="tsd-signature-type">CompressedTextureFileConfig</span></span><div class="tsd-comment tsd-typography"><p>The compressed texture configuration object. Not required if passing a config object as the <code>key</code> parameter.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">xhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.texture</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:64697</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="tilemapCSV" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>tilemapCSV</span><a href="#tilemapCSV" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="tilemapCSV.tilemapCSV-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">tilemapCSV</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">key</span>, <span class="tsd-kind-parameter">url</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">xhrSettings</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#tilemapCSV.tilemapCSV-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Adds a CSV Tilemap file, or array of CSV files, to the current load queue.</p>
|
||
|
|
<p>You can call this method from within your Scene's <code>preload</code>, along with any other files you wish to load:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">tilemapCSV</span><span class="hl-1">(</span><span class="hl-7">'level1'</span><span class="hl-1">, </span><span class="hl-7">'maps/Level1.csv'</span><span class="hl-1">);</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>Tilemap CSV data can be created in a text editor, or a 3rd party app that exports as CSV.</p>
|
||
|
|
<p>The file is <strong>not</strong> loaded right away. It is added to a queue ready to be loaded either when the loader starts,
|
||
|
|
or if it's already running, when the next free load slot becomes available. This happens automatically if you
|
||
|
|
are calling this from within the Scene's <code>preload</code> method, or a related callback. Because the file is queued
|
||
|
|
it means you cannot use the file immediately after calling this method, but must wait for the file to complete.
|
||
|
|
The typical flow for a Phaser Scene is that you load assets in the Scene's <code>preload</code> method and then when the
|
||
|
|
Scene's <code>create</code> method is called you are guaranteed that all of those assets are ready for use and have been
|
||
|
|
loaded.</p>
|
||
|
|
<p>The key must be a unique String. It is used to add the file to the global Tilemap Cache upon a successful load.
|
||
|
|
The key should be unique both in terms of files being loaded and files already present in the Tilemap Cache.
|
||
|
|
Loading a file using a key that is already taken will result in a warning. If you wish to replace an existing file
|
||
|
|
then remove it from the Text Cache first, before loading a new one.</p>
|
||
|
|
<p>Instead of passing arguments you can pass a configuration object, such as:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">tilemapCSV</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'level1'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">url:</span><span class="hl-1"> </span><span class="hl-7">'maps/Level1.csv'</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>See the documentation for <code>Phaser.Types.Loader.FileTypes.TilemapCSVFileConfig</code> for more details.</p>
|
||
|
|
<p>Once the file has finished loading you can access it from its Cache using its key:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">tilemapCSV</span><span class="hl-1">(</span><span class="hl-7">'level1'</span><span class="hl-1">, </span><span class="hl-7">'maps/Level1.csv'</span><span class="hl-1">);</span><br/><span class="hl-8">// and later in your game ...</span><br/><span class="hl-4">var</span><span class="hl-1"> </span><span class="hl-2">map</span><span class="hl-1"> = </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">make</span><span class="hl-1">.</span><span class="hl-6">tilemap</span><span class="hl-1">({ </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'level1'</span><span class="hl-1"> });</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>If you have specified a prefix in the loader, via <code>Loader.setPrefix</code> then this value will be prepended to this files
|
||
|
|
key. For example, if the prefix was <code>LEVEL1.</code> and the key was <code>Story</code> the final key will be <code>LEVEL1.Story</code> and
|
||
|
|
this is what you would use to retrieve the text from the Tilemap Cache.</p>
|
||
|
|
<p>The URL can be relative or absolute. If the URL is relative the <code>Loader.baseURL</code> and <code>Loader.path</code> values will be prepended to it.</p>
|
||
|
|
<p>If the URL isn't specified the Loader will take the key and create a filename from that. For example if the key is "level"
|
||
|
|
and no URL is given then the Loader will set the URL to be "level.csv". It will always add <code>.csv</code> as the extension, although
|
||
|
|
this can be overridden if using an object instead of method arguments. If you do not desire this action then provide a URL.</p>
|
||
|
|
<p>Note: The ability to load this type of file will only be available if the Tilemap CSV File type has been built into Phaser.
|
||
|
|
It is available in the default build but can be excluded from custom builds.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">key</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">TilemapCSVFileConfig</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">TilemapCSVFileConfig</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The key to use for this file, or a file configuration object, or array of them.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">url</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load this file from. If undefined or <code>null</code> it will be set to <code><key>.csv</code>, i.e. if <code>key</code> was "alien" then the URL will be "alien.csv".</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">xhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.tilemapCSV</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66065</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="tilemapImpact" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>tilemap<wbr/>Impact</span><a href="#tilemapImpact" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="tilemapImpact.tilemapImpact-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">tilemap<wbr/>Impact</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">key</span>, <span class="tsd-kind-parameter">url</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">xhrSettings</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#tilemapImpact.tilemapImpact-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Adds an Impact.js Tilemap file, or array of map files, to the current load queue.</p>
|
||
|
|
<p>You can call this method from within your Scene's <code>preload</code>, along with any other files you wish to load:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">tilemapImpact</span><span class="hl-1">(</span><span class="hl-7">'level1'</span><span class="hl-1">, </span><span class="hl-7">'maps/Level1.json'</span><span class="hl-1">);</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>Impact Tilemap data is created the Impact.js Map Editor called Weltmeister.</p>
|
||
|
|
<p>The file is <strong>not</strong> loaded right away. It is added to a queue ready to be loaded either when the loader starts,
|
||
|
|
or if it's already running, when the next free load slot becomes available. This happens automatically if you
|
||
|
|
are calling this from within the Scene's <code>preload</code> method, or a related callback. Because the file is queued
|
||
|
|
it means you cannot use the file immediately after calling this method, but must wait for the file to complete.
|
||
|
|
The typical flow for a Phaser Scene is that you load assets in the Scene's <code>preload</code> method and then when the
|
||
|
|
Scene's <code>create</code> method is called you are guaranteed that all of those assets are ready for use and have been
|
||
|
|
loaded.</p>
|
||
|
|
<p>The key must be a unique String. It is used to add the file to the global Tilemap Cache upon a successful load.
|
||
|
|
The key should be unique both in terms of files being loaded and files already present in the Tilemap Cache.
|
||
|
|
Loading a file using a key that is already taken will result in a warning. If you wish to replace an existing file
|
||
|
|
then remove it from the Text Cache first, before loading a new one.</p>
|
||
|
|
<p>Instead of passing arguments you can pass a configuration object, such as:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">tilemapImpact</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'level1'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">url:</span><span class="hl-1"> </span><span class="hl-7">'maps/Level1.json'</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>See the documentation for <code>Phaser.Types.Loader.FileTypes.TilemapImpactFileConfig</code> for more details.</p>
|
||
|
|
<p>Once the file has finished loading you can access it from its Cache using its key:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">tilemapImpact</span><span class="hl-1">(</span><span class="hl-7">'level1'</span><span class="hl-1">, </span><span class="hl-7">'maps/Level1.json'</span><span class="hl-1">);</span><br/><span class="hl-8">// and later in your game ...</span><br/><span class="hl-4">var</span><span class="hl-1"> </span><span class="hl-2">map</span><span class="hl-1"> = </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">make</span><span class="hl-1">.</span><span class="hl-6">tilemap</span><span class="hl-1">({ </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'level1'</span><span class="hl-1"> });</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>If you have specified a prefix in the loader, via <code>Loader.setPrefix</code> then this value will be prepended to this files
|
||
|
|
key. For example, if the prefix was <code>LEVEL1.</code> and the key was <code>Story</code> the final key will be <code>LEVEL1.Story</code> and
|
||
|
|
this is what you would use to retrieve the text from the Tilemap Cache.</p>
|
||
|
|
<p>The URL can be relative or absolute. If the URL is relative the <code>Loader.baseURL</code> and <code>Loader.path</code> values will be prepended to it.</p>
|
||
|
|
<p>If the URL isn't specified the Loader will take the key and create a filename from that. For example if the key is "level"
|
||
|
|
and no URL is given then the Loader will set the URL to be "level.json". It will always add <code>.json</code> as the extension, although
|
||
|
|
this can be overridden if using an object instead of method arguments. If you do not desire this action then provide a URL.</p>
|
||
|
|
<p>Note: The ability to load this type of file will only be available if the Tilemap Impact File type has been built into Phaser.
|
||
|
|
It is available in the default build but can be excluded from custom builds.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">key</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">TilemapImpactFileConfig</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">TilemapImpactFileConfig</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The key to use for this file, or a file configuration object, or array of them.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">url</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load this file from. If undefined or <code>null</code> it will be set to <code><key>.json</code>, i.e. if <code>key</code> was "alien" then the URL will be "alien.json".</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">xhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.tilemapImpact</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66129</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="tilemapTiledJSON" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>tilemap<wbr/>TiledJSON</span><a href="#tilemapTiledJSON" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="tilemapTiledJSON.tilemapTiledJSON-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">tilemap<wbr/>TiledJSON</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">key</span>, <span class="tsd-kind-parameter">url</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">xhrSettings</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#tilemapTiledJSON.tilemapTiledJSON-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Adds a Tiled JSON Tilemap file, or array of map files, to the current load queue.</p>
|
||
|
|
<p>You can call this method from within your Scene's <code>preload</code>, along with any other files you wish to load:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">tilemapTiledJSON</span><span class="hl-1">(</span><span class="hl-7">'level1'</span><span class="hl-1">, </span><span class="hl-7">'maps/Level1.json'</span><span class="hl-1">);</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>The Tilemap data is created using the Tiled Map Editor and selecting JSON as the export format.</p>
|
||
|
|
<p>The file is <strong>not</strong> loaded right away. It is added to a queue ready to be loaded either when the loader starts,
|
||
|
|
or if it's already running, when the next free load slot becomes available. This happens automatically if you
|
||
|
|
are calling this from within the Scene's <code>preload</code> method, or a related callback. Because the file is queued
|
||
|
|
it means you cannot use the file immediately after calling this method, but must wait for the file to complete.
|
||
|
|
The typical flow for a Phaser Scene is that you load assets in the Scene's <code>preload</code> method and then when the
|
||
|
|
Scene's <code>create</code> method is called you are guaranteed that all of those assets are ready for use and have been
|
||
|
|
loaded.</p>
|
||
|
|
<p>The key must be a unique String. It is used to add the file to the global Tilemap Cache upon a successful load.
|
||
|
|
The key should be unique both in terms of files being loaded and files already present in the Tilemap Cache.
|
||
|
|
Loading a file using a key that is already taken will result in a warning. If you wish to replace an existing file
|
||
|
|
then remove it from the Text Cache first, before loading a new one.</p>
|
||
|
|
<p>Instead of passing arguments you can pass a configuration object, such as:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">tilemapTiledJSON</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'level1'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">url:</span><span class="hl-1"> </span><span class="hl-7">'maps/Level1.json'</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>See the documentation for <code>Phaser.Types.Loader.FileTypes.TilemapJSONFileConfig</code> for more details.</p>
|
||
|
|
<p>Once the file has finished loading you can access it from its Cache using its key:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">tilemapTiledJSON</span><span class="hl-1">(</span><span class="hl-7">'level1'</span><span class="hl-1">, </span><span class="hl-7">'maps/Level1.json'</span><span class="hl-1">);</span><br/><span class="hl-8">// and later in your game ...</span><br/><span class="hl-4">var</span><span class="hl-1"> </span><span class="hl-2">map</span><span class="hl-1"> = </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">make</span><span class="hl-1">.</span><span class="hl-6">tilemap</span><span class="hl-1">({ </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'level1'</span><span class="hl-1"> });</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>If you have specified a prefix in the loader, via <code>Loader.setPrefix</code> then this value will be prepended to this files
|
||
|
|
key. For example, if the prefix was <code>LEVEL1.</code> and the key was <code>Story</code> the final key will be <code>LEVEL1.Story</code> and
|
||
|
|
this is what you would use to retrieve the text from the Tilemap Cache.</p>
|
||
|
|
<p>The URL can be relative or absolute. If the URL is relative the <code>Loader.baseURL</code> and <code>Loader.path</code> values will be prepended to it.</p>
|
||
|
|
<p>If the URL isn't specified the Loader will take the key and create a filename from that. For example if the key is "level"
|
||
|
|
and no URL is given then the Loader will set the URL to be "level.json". It will always add <code>.json</code> as the extension, although
|
||
|
|
this can be overridden if using an object instead of method arguments. If you do not desire this action then provide a URL.</p>
|
||
|
|
<p>Note: The ability to load this type of file will only be available if the Tilemap JSON File type has been built into Phaser.
|
||
|
|
It is available in the default build but can be excluded from custom builds.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">key</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">TilemapJSONFileConfig</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">TilemapJSONFileConfig</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The key to use for this file, or a file configuration object, or array of them.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">url</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">object</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load this file from. If undefined or <code>null</code> it will be set to <code><key>.json</code>, i.e. if <code>key</code> was "alien" then the URL will be "alien.json". Or, a well formed JSON object.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">xhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.tilemapTiledJSON</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66193</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="unityAtlas" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>unity<wbr/>Atlas</span><a href="#unityAtlas" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="unityAtlas.unityAtlas-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">unity<wbr/>Atlas</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">key</span>, <span class="tsd-kind-parameter">textureURL</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">atlasURL</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">textureXhrSettings</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">atlasXhrSettings</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#unityAtlas.unityAtlas-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Adds a Unity YAML based Texture Atlas, or array of atlases, to the current load queue.</p>
|
||
|
|
<p>You can call this method from within your Scene's <code>preload</code>, along with any other files you wish to load:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">unityAtlas</span><span class="hl-1">(</span><span class="hl-7">'mainmenu'</span><span class="hl-1">, </span><span class="hl-7">'images/MainMenu.png'</span><span class="hl-1">, </span><span class="hl-7">'images/MainMenu.txt'</span><span class="hl-1">);</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>The file is <strong>not</strong> loaded right away. It is added to a queue ready to be loaded either when the loader starts,
|
||
|
|
or if it's already running, when the next free load slot becomes available. This happens automatically if you
|
||
|
|
are calling this from within the Scene's <code>preload</code> method, or a related callback. Because the file is queued
|
||
|
|
it means you cannot use the file immediately after calling this method, but must wait for the file to complete.
|
||
|
|
The typical flow for a Phaser Scene is that you load assets in the Scene's <code>preload</code> method and then when the
|
||
|
|
Scene's <code>create</code> method is called you are guaranteed that all of those assets are ready for use and have been
|
||
|
|
loaded.</p>
|
||
|
|
<p>If you call this from outside of <code>preload</code> then you are responsible for starting the Loader afterwards and monitoring
|
||
|
|
its events to know when it's safe to use the asset. Please see the Phaser.Loader.LoaderPlugin class for more details.</p>
|
||
|
|
<p>Phaser expects the atlas data to be provided in a YAML formatted text file as exported from Unity.</p>
|
||
|
|
<p>Phaser can load all common image types: png, jpg, gif and any other format the browser can natively handle.</p>
|
||
|
|
<p>The key must be a unique String. It is used to add the file to the global Texture Manager upon a successful load.
|
||
|
|
The key should be unique both in terms of files being loaded and files already present in the Texture Manager.
|
||
|
|
Loading a file using a key that is already taken will result in a warning. If you wish to replace an existing file
|
||
|
|
then remove it from the Texture Manager first, before loading a new one.</p>
|
||
|
|
<p>Instead of passing arguments you can pass a configuration object, such as:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">unityAtlas</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'mainmenu'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">textureURL:</span><span class="hl-1"> </span><span class="hl-7">'images/MainMenu.png'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">atlasURL:</span><span class="hl-1"> </span><span class="hl-7">'images/MainMenu.txt'</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>See the documentation for <code>Phaser.Types.Loader.FileTypes.UnityAtlasFileConfig</code> for more details.</p>
|
||
|
|
<p>Once the atlas has finished loading you can use frames from it as textures for a Game Object by referencing its key:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">unityAtlas</span><span class="hl-1">(</span><span class="hl-7">'mainmenu'</span><span class="hl-1">, </span><span class="hl-7">'images/MainMenu.png'</span><span class="hl-1">, </span><span class="hl-7">'images/MainMenu.json'</span><span class="hl-1">);</span><br/><span class="hl-8">// and later in your game ...</span><br/><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">add</span><span class="hl-1">.</span><span class="hl-6">image</span><span class="hl-1">(</span><span class="hl-2">x</span><span class="hl-1">, </span><span class="hl-2">y</span><span class="hl-1">, </span><span class="hl-7">'mainmenu'</span><span class="hl-1">, </span><span class="hl-7">'background'</span><span class="hl-1">);</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>To get a list of all available frames within an atlas please consult your Texture Atlas software.</p>
|
||
|
|
<p>If you have specified a prefix in the loader, via <code>Loader.setPrefix</code> then this value will be prepended to this files
|
||
|
|
key. For example, if the prefix was <code>MENU.</code> and the key was <code>Background</code> the final key will be <code>MENU.Background</code> and
|
||
|
|
this is what you would use to retrieve the image from the Texture Manager.</p>
|
||
|
|
<p>The URL can be relative or absolute. If the URL is relative the <code>Loader.baseURL</code> and <code>Loader.path</code> values will be prepended to it.</p>
|
||
|
|
<p>If the URL isn't specified the Loader will take the key and create a filename from that. For example if the key is "alien"
|
||
|
|
and no URL is given then the Loader will set the URL to be "alien.png". It will always add <code>.png</code> as the extension, although
|
||
|
|
this can be overridden if using an object instead of method arguments. If you do not desire this action then provide a URL.</p>
|
||
|
|
<p>Phaser also supports the automatic loading of associated normal maps. If you have a normal map to go with this image,
|
||
|
|
then you can specify it by providing an array as the <code>url</code> where the second element is the normal map:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">unityAtlas</span><span class="hl-1">(</span><span class="hl-7">'mainmenu'</span><span class="hl-1">, [ </span><span class="hl-7">'images/MainMenu.png'</span><span class="hl-1">, </span><span class="hl-7">'images/MainMenu-n.png'</span><span class="hl-1"> ], </span><span class="hl-7">'images/MainMenu.txt'</span><span class="hl-1">);</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>Or, if you are using a config object use the <code>normalMap</code> property:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">unityAtlas</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'mainmenu'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">textureURL:</span><span class="hl-1"> </span><span class="hl-7">'images/MainMenu.png'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">normalMap:</span><span class="hl-1"> </span><span class="hl-7">'images/MainMenu-n.png'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">atlasURL:</span><span class="hl-1"> </span><span class="hl-7">'images/MainMenu.txt'</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>The normal map file is subject to the same conditions as the image file with regard to the path, baseURL, CORs and XHR Settings.
|
||
|
|
Normal maps are a WebGL only feature.</p>
|
||
|
|
<p>Note: The ability to load this type of file will only be available if the Unity Atlas File type has been built into Phaser.
|
||
|
|
It is available in the default build but can be excluded from custom builds.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">key</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">UnityAtlasFileConfig</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">UnityAtlasFileConfig</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The key to use for this file, or a file configuration object, or array of them.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">textureURL</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load the texture image file from. If undefined or <code>null</code> it will be set to <code><key>.png</code>, i.e. if <code>key</code> was "alien" then the URL will be "alien.png".</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">atlasURL</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load the texture atlas data file from. If undefined or <code>null</code> it will be set to <code><key>.txt</code>, i.e. if <code>key</code> was "alien" then the URL will be "alien.txt".</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">textureXhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object for the atlas image file. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">atlasXhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object for the atlas data file. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.unityAtlas</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66288</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="update" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>update</span><a href="#update" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="update.update-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">update</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#update.update-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Called automatically during the load process.</p>
|
||
|
|
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.update</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66683</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="updateProgress" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>update<wbr/>Progress</span><a href="#updateProgress" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="updateProgress.updateProgress-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">update<wbr/>Progress</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#updateProgress.updateProgress-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Called automatically during the load process.
|
||
|
|
It updates the <code>progress</code> value and then emits a progress event, which you can use to
|
||
|
|
display a loading bar in your game.</p>
|
||
|
|
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.updateProgress</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66678</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="video" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>video</span><a href="#video" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="video.video-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">video</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">key</span>, <span class="tsd-kind-parameter">urls</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">noAudio</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#video.video-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Adds a Video file, or array of video files, to the current load queue.</p>
|
||
|
|
<p>You can call this method from within your Scene's <code>preload</code>, along with any other files you wish to load:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">video</span><span class="hl-1">(</span><span class="hl-7">'intro'</span><span class="hl-1">, [ </span><span class="hl-7">'video/level1.mp4'</span><span class="hl-1">, </span><span class="hl-7">'video/level1.webm'</span><span class="hl-1">, </span><span class="hl-7">'video/level1.mov'</span><span class="hl-1"> ]);</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>The file is <strong>not</strong> loaded right away. It is added to a queue ready to be loaded either when the loader starts,
|
||
|
|
or if it's already running, when the next free load slot becomes available. This happens automatically if you
|
||
|
|
are calling this from within the Scene's <code>preload</code> method, or a related callback. Because the file is queued
|
||
|
|
it means you cannot use the file immediately after calling this method, but must wait for the file to complete.
|
||
|
|
The typical flow for a Phaser Scene is that you load assets in the Scene's <code>preload</code> method and then when the
|
||
|
|
Scene's <code>create</code> method is called you are guaranteed that all of those assets are ready for use and have been
|
||
|
|
loaded.</p>
|
||
|
|
<p>The key must be a unique String. It is used to add the file to the global Video Cache upon a successful load.
|
||
|
|
The key should be unique both in terms of files being loaded and files already present in the Video Cache.
|
||
|
|
Loading a file using a key that is already taken will result in a warning. If you wish to replace an existing file
|
||
|
|
then remove it from the Video Cache first, before loading a new one.</p>
|
||
|
|
<p>Instead of passing arguments you can pass a configuration object, such as:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">video</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'intro'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">url:</span><span class="hl-1"> [ </span><span class="hl-7">'video/level1.mp4'</span><span class="hl-1">, </span><span class="hl-7">'video/level1.webm'</span><span class="hl-1">, </span><span class="hl-7">'video/level1.mov'</span><span class="hl-1"> ],</span><br/><span class="hl-1"> </span><span class="hl-2">noAudio:</span><span class="hl-1"> </span><span class="hl-4">true</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>See the documentation for <code>Phaser.Types.Loader.FileTypes.VideoFileConfig</code> for more details.</p>
|
||
|
|
<p>The URLs can be relative or absolute. If the URLs are relative the <code>Loader.baseURL</code> and <code>Loader.path</code> values will be prepended to them.</p>
|
||
|
|
<p>Due to different browsers supporting different video file types you should usually provide your video files in a variety of formats.
|
||
|
|
mp4, mov and webm are the most common. If you provide an array of URLs then the Loader will determine which <em>one</em> file to load based on
|
||
|
|
browser support, starting with the first in the array and progressing to the end.</p>
|
||
|
|
<p>Unlike most asset-types, videos do not <em>need</em> to be preloaded. You can create a Video Game Object and then call its <code>loadURL</code> method,
|
||
|
|
to load a video at run-time, rather than in advance.</p>
|
||
|
|
<p>Note: The ability to load this type of file will only be available if the Video File type has been built into Phaser.
|
||
|
|
It is available in the default build but can be excluded from custom builds.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">key</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">VideoFileConfig</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">VideoFileConfig</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The key to use for this file, or a file configuration object, or array of them.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">urls</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">[]</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">VideoFileURLConfig</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">VideoFileURLConfig</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load the video files from.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">noAudio</span>: <span class="tsd-signature-type">boolean</span></span><div class="tsd-comment tsd-typography"><p>Does the video have an audio track? If not you can enable auto-playing on it. Default false.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.video</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66342</li></ul></aside></li></ul></section><section class="tsd-panel tsd-member tsd-is-inherited tsd-is-external"><a id="xml" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>xml</span><a href="#xml" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures tsd-is-inherited tsd-is-external"><li class="tsd-signature tsd-anchor-link"><a id="xml.xml-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">xml</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">key</span>, <span class="tsd-kind-parameter">url</span><span class="tsd-signature-symbol">?</span>, <span class="tsd-kind-parameter">xhrSettings</span><span class="tsd-signature-symbol">?</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#xml.xml-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Adds an XML file, or array of XML files, to the current load queue.</p>
|
||
|
|
<p>You can call this method from within your Scene's <code>preload</code>, along with any other files you wish to load:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">function</span><span class="hl-1"> </span><span class="hl-6">preload</span><span class="hl-1"> ()</span><br/><span class="hl-1">{</span><br/><span class="hl-1"> </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">xml</span><span class="hl-1">(</span><span class="hl-7">'wavedata'</span><span class="hl-1">, </span><span class="hl-7">'files/AlienWaveData.xml'</span><span class="hl-1">);</span><br/><span class="hl-1">}</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>The file is <strong>not</strong> loaded right away. It is added to a queue ready to be loaded either when the loader starts,
|
||
|
|
or if it's already running, when the next free load slot becomes available. This happens automatically if you
|
||
|
|
are calling this from within the Scene's <code>preload</code> method, or a related callback. Because the file is queued
|
||
|
|
it means you cannot use the file immediately after calling this method, but must wait for the file to complete.
|
||
|
|
The typical flow for a Phaser Scene is that you load assets in the Scene's <code>preload</code> method and then when the
|
||
|
|
Scene's <code>create</code> method is called you are guaranteed that all of those assets are ready for use and have been
|
||
|
|
loaded.</p>
|
||
|
|
<p>The key must be a unique String. It is used to add the file to the global XML Cache upon a successful load.
|
||
|
|
The key should be unique both in terms of files being loaded and files already present in the XML Cache.
|
||
|
|
Loading a file using a key that is already taken will result in a warning. If you wish to replace an existing file
|
||
|
|
then remove it from the XML Cache first, before loading a new one.</p>
|
||
|
|
<p>Instead of passing arguments you can pass a configuration object, such as:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">xml</span><span class="hl-1">({</span><br/><span class="hl-1"> </span><span class="hl-2">key:</span><span class="hl-1"> </span><span class="hl-7">'wavedata'</span><span class="hl-1">,</span><br/><span class="hl-1"> </span><span class="hl-2">url:</span><span class="hl-1"> </span><span class="hl-7">'files/AlienWaveData.xml'</span><br/><span class="hl-1">});</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>See the documentation for <code>Phaser.Types.Loader.FileTypes.XMLFileConfig</code> for more details.</p>
|
||
|
|
<p>Once the file has finished loading you can access it from its Cache using its key:</p>
|
||
|
|
<pre><code class="language-javascript"><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">load</span><span class="hl-1">.</span><span class="hl-6">xml</span><span class="hl-1">(</span><span class="hl-7">'wavedata'</span><span class="hl-1">, </span><span class="hl-7">'files/AlienWaveData.xml'</span><span class="hl-1">);</span><br/><span class="hl-8">// and later in your game ...</span><br/><span class="hl-4">var</span><span class="hl-1"> </span><span class="hl-2">data</span><span class="hl-1"> = </span><span class="hl-4">this</span><span class="hl-1">.</span><span class="hl-2">cache</span><span class="hl-1">.</span><span class="hl-2">xml</span><span class="hl-1">.</span><span class="hl-6">get</span><span class="hl-1">(</span><span class="hl-7">'wavedata'</span><span class="hl-1">);</span>
|
||
|
|
</code><button>Copy</button></pre>
|
||
|
|
<p>If you have specified a prefix in the loader, via <code>Loader.setPrefix</code> then this value will be prepended to this files
|
||
|
|
key. For example, if the prefix was <code>LEVEL1.</code> and the key was <code>Waves</code> the final key will be <code>LEVEL1.Waves</code> and
|
||
|
|
this is what you would use to retrieve the text from the XML Cache.</p>
|
||
|
|
<p>The URL can be relative or absolute. If the URL is relative the <code>Loader.baseURL</code> and <code>Loader.path</code> values will be prepended to it.</p>
|
||
|
|
<p>If the URL isn't specified the Loader will take the key and create a filename from that. For example if the key is "data"
|
||
|
|
and no URL is given then the Loader will set the URL to be "data.xml". It will always add <code>.xml</code> as the extension, although
|
||
|
|
this can be overridden if using an object instead of method arguments. If you do not desire this action then provide a URL.</p>
|
||
|
|
<p>Note: The ability to load this type of file will only be available if the XML File type has been built into Phaser.
|
||
|
|
It is available in the default build but can be excluded from custom builds.</p>
|
||
|
|
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><span><span class="tsd-kind-parameter">key</span>: <span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">XMLFileConfig</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">XMLFileConfig</span><span class="tsd-signature-symbol">[]</span></span><div class="tsd-comment tsd-typography"><p>The key to use for this file, or a file configuration object, or array of them.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">url</span>: <span class="tsd-signature-type">string</span></span><div class="tsd-comment tsd-typography"><p>The absolute or relative URL to load this file from. If undefined or <code>null</code> it will be set to <code><key>.xml</code>, i.e. if <code>key</code> was "alien" then the URL will be "alien.xml".</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li><li><span><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">xhrSettings</span>: <span class="tsd-signature-type">XHRSettingsObject</span></span><div class="tsd-comment tsd-typography"><p>An XHR Settings configuration object. Used in replacement of the Loaders default XHR Settings.</p>
|
||
|
|
</div><div class="tsd-comment tsd-typography"></div></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><div class="tsd-comment tsd-typography"></div><aside class="tsd-sources"><p>Inherited from Phaser.Loader.LoaderPlugin.xml</p><ul><li>Defined in node_modules/phaser/types/phaser.d.ts:66404</li></ul></aside></li></ul></section></section></div><div class="col-sidebar"><div class="page-menu"><div class="tsd-navigation settings"><details class="tsd-index-accordion"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>Settings</h3></summary><div class="tsd-accordion-details"><div class="tsd-filter-visibility"><h4 class="uppercase">Member Visibility</h4><form><ul id="tsd-filter-options"><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li><li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div><div class="tsd-theme-toggle"><h4 class="uppercase">Theme</h4><select id="tsd-theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div><details open class="tsd-index-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><a href="#constructor" class=""><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-512"></use></svg><span>constructor</span></a><a href="#baseURL" class="tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>baseURL</span></a><a href="#cacheManager" class="tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>cache<wbr/>Manager</span></a><a href="#crossOrigin" class="tsd-is-inherited tsd-is-external"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1024"></use></svg><span>cross<wbr/>Ori
|