Phaser: Loading images using npm Phaser

[SKEPDIMI]

I'm currently running Phaser3 inside a create-react-app app using the npm module for Phaser3 like so:

// src/game/index.js
import Phaser from 'phaser'
import img from '../assets/img.png'

var config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  parent: 'root',
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 200 }
    }
  },
  scene: {
    preload,
    create
  }
};

function preload ()
{
}

function create ()
{
}

export default new Phaser.Game(config);

The issue I'm facing is regarding loading assets: How would I go about loading an asset that is in my cra project (like the imported img)

Thank you in advance

John S.

[the-simian]

I have a number of examples of this in https://github.com/simiancraft/create-phaser-app, which you should go look at the webpack build and the files.

here's an example of usage:

import BackgroundGradient from '../assets/levels/processed/level-0/background-with-planets.png';
//in your preload.
function preload(){
  this.load.image('back-gradient', backgroundGradient);
}

I hope that helps you get started.

[photonstorm]

Thanks for answering this @the-simian

[FateRiddle]

@the-simian
I tried to import using your methods, it works fine for big image, but not for smaller ones:

/static/media/title_bg.68654148.jpg
logo   
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAACWBAMAAADas2dcAAAAIVBMVEVHcEz///////////////////////////////////////+PBM77AAAACnRSTlMAsV/zjwqYRxQ9K556fgAAAYtJREFUeNrt3DFuwjAAQFEYkLpalTpXGdkqLtAhQ0eW7pylN6kYUHvKCqkDok6w40ZxwvsrVuLnBWwIq5UkSZIkSaq19Xesr3mjtlHUAR0dHR0dHR0dHR0dHX2e9GMlsz2NcOkNOjo6Ojo6Ojo6Ojo6+tLp0S3wsfdeKWPR0dHR0dGnoccPdzsPrjvobdu+FS3TkCWtgp61TOjo6Ojo90PPnMN/0C++hT51TuY1cTv+dyw6Ojo6Ovpk9PiAh1T6zbG9+/Wy5UdHR0dHRy+/7Sb609xy+sDlR0dHR0dHzz2RvbptztgB7+u510VHR0dHR58p/TOE8DwK/VzKx5SCfXUZfZzDaHR0dHT0pdNT9soF++rh+/WboaOjo6Ojo6Ojo6Ojoy+avk3cg5fv12NTnOwXVOjo6Ojo86b3H+7mPHcy8JvWj6Zpfge8hPB09er7Pnrd3S5nDrXSLz7zlD/2g46Ojo5eF30TQnisjX4uOi75PyUOiY8IrTOvm7NM6Ojo6Oj3QpckSZIkSfX0A1zOxBtPxRvDAAAAAElFTkSuQmCC

I logged the generated path, finding it turns smaller image into inline data, and phaser image loader doesn't recognize this format, what could I do?

[tyust512]

@the-simian
I tried to import using your methods, it works fine for big image, but not for smaller ones:

/static/media/title_bg.68654148.jpg
logo   
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfQAAACWBAMAAADas2dcAAAAIVBMVEVHcEz///////////////////////////////////////+PBM77AAAACnRSTlMAsV/zjwqYRxQ9K556fgAAAYtJREFUeNrt3DFuwjAAQFEYkLpalTpXGdkqLtAhQ0eW7pylN6kYUHvKCqkDok6w40ZxwvsrVuLnBWwIq5UkSZIkSaq19Xesr3mjtlHUAR0dHR0dHR0dHR0dHX2e9GMlsz2NcOkNOjo6Ojo6Ojo6Ojo6+tLp0S3wsfdeKWPR0dHR0dGnoccPdzsPrjvobdu+FS3TkCWtgp61TOjo6Ojo90PPnMN/0C++hT51TuY1cTv+dyw6Ojo6Ovpk9PiAh1T6zbG9+/Wy5UdHR0dHRy+/7Sb609xy+sDlR0dHR0dHzz2RvbptztgB7+u510VHR0dHR58p/TOE8DwK/VzKx5SCfXUZfZzDaHR0dHT0pdNT9soF++rh+/WboaOjo6Ojo6Ojo6Ojoy+avk3cg5fv12NTnOwXVOjo6Ojo86b3H+7mPHcy8JvWj6Zpfge8hPB09er7Pnrd3S5nDrXSLz7zlD/2g46Ojo5eF30TQnisjX4uOi75PyUOiY8IrTOvm7NM6Ojo6Oj3QpckSZIkSfX0A1zOxBtPxRvDAAAAAElFTkSuQmCC

I logged the generated path, finding it turns smaller image into inline data, and phaser image loader doesn't recognize this format, what could I do?

yes, i also meet it when i use the [email protected]. I will try to change the url-loader config, if the phaser isn't supported the base64 small images.