Imageuriloader
Note
Phaser3.80 can load image by uri (base64 string) in preload stage.
Introduction¶
Load image by uri (base64 string) in preload stage.
Built-in image loader dosen't support loading local image uri.
- Author: Rex
- Custom File of loader
Usage¶
Install plugin¶
Load minify file¶
- Load plugin (minify file) in preload stage
var sceneConfig = { // .... pack: { files: [{ type: 'plugin', key: 'reximageuriloaderplugin', url: 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/reximageuriloaderplugin.min.js', start: true }] } }; class MyScene extends Phaser.Scene { constructor() { super(sceneConfig) } // .... preload() { // reximageuriloaderplugin will be installed before preload(), but not added to loader yet // Call addToScene(scene) to add this await loader to loader of this scene this.plugins.get('reximageuriloaderplugin').addToScene(this); this.load.rexImageURI(key, uri); } }
Import plugin¶
- Install rex plugins from npm
npm i phaser3-rex-plugins
- Install plugin in configuration of game
import ImageURILoaderPlugin from 'phaser3-rex-plugins/plugins/imageuriloader-plugin.js'; var config = { // ... plugins: { global: [{ key: 'rexImageURILoader', plugin: ImageURILoaderPlugin, start: true }, // ... ] } // ... }; var game = new Phaser.Game(config);
- In preload stage
scene.load.rexImageURI(key, uri);
Import class¶
- Install rex plugins from npm
npm i phaser3-rex-plugins
- Import class
import ImageURILoader from 'phaser3-rex-plugins/plugins/imageuriloader.js';
- Start loading task
ImageURILoader.call(scene.load, key, uri);
Load image¶
In preload stage:
this.load.rexImageURI(key, uri);
key
: Texture key.uri
: URI, a base64 string.
Load sprite sheet¶
In preload stage:
this.load.rexImageURI(key, uri, frameConfig);
key
: Texture key.uri
: URI, a base64 string.frameConfig
:frameWidth
: The width of the frame in pixels.frameHeight
: The height of the frame in pixels. Uses theframeWidth
value if not provided.startFrame
: The first frame to start parsing from.endFrame
: The frame to stop parsing at. If not provided it will calculate the value based on the image and frame dimensions.margin
: The margin in the image. This is the space around the edge of the frames.spacing
: The spacing between each frame in the image.