Loading images in React

[michaelwoodruffdev]

I'm making a game where phaser needs to be embedded within a React component. This package seems like a great solution but I'm having trouble loading in images.

I'm hosting a local server using the standard serve command for react, so I know it can't be an access to image file issue.

When loading a png spritesheet I'm getting a black box with a line through it rendering to the screen. I know this means that the image didn't successfully load, so I checked the network tab of my developer tools in the browser. It's showing that it's successfully loading in the resource as an HTML and not as an image.

here is the html it is actually getting back from the request

here is what is rendering on the canvas

here is the code right now

import React from 'react';
import Phaser from 'phaser';
import { IonPhaser } from '@ion-phaser/react';
import './Game.css';

export default class Game extends React.Component {

    constructor(props) {
        super(props);

        // this is where I'm thinking we can take props and use them to build the Phaser scene upon starting a new game
        this.state = {
            unmounted: false,
            initialize: false,
            game: {
                width: 800,
                height: 600,
                type: Phaser.CANVAS,
                physics: {
                    default: 'arcade',
                    arcade: {
                        gravity: { y: 300 },
                        debug: false
                    }
                },
                scene: {
                    init: function () {
                        this.cameras.main.setBackgroundColor('#24252A')
                    },
                    preload: function () {
                        this.load.spritesheet('player', 'assets/spritesheet.png', { frameWidth: 104, frameHeight: 150 });
                    },
                    create: function () {
                        this.helloWorld = this.add.text(
                            this.cameras.main.centerX,
                            this.cameras.main.centerY,
                            "PixelSmash", {
                            font: "40px Arial",
                            fill: "#ffffff"
                        }
                        );
                        this.helloWorld.setOrigin(0.5);
                        this.counter = 0;
                        this.player = this.physics.add.sprite(100, 100, 'player');
                        this.player.setBounce(.2, .2);
                        this.player.setCollideWorldBounds(true);
                        this.physics.world.bounds = new Phaser.Geom.Rectangle(0, 0, 800, 600);

                        this.anims.create({
                            key: 'left',
                            frames: this.anims.generateFrameNumbers('p', { start: 6, end: 12 }),
                            frameRate: 10,
                            repeat: -1
                        });
                    },
                    update: function () {
                        if (this.counter === 0.00) {
                            console.log(this.player);
                            console.log(this.load);
                        }
                        this.counter += .07;
                        this.helloWorld.angle = 0 + (10 * Math.sin(this.counter));
                    }
                }
            }
        }
    }

    initializeGame = () => {
        this.setState({ initialize: true })
    }

    destroy = () => {
        this.setState({ unmounted: true })
    }

    render() {
        const { initialize, game } = this.state
        return (
            <div className="Game">
                <button onClick={this.initializeGame}>start</button>
                {<IonPhaser game={game} initialize={initialize} />}
            </div>
        );
    }
}

The important lines are definitely this.load.spritesheet('player', 'assets/spritesheet.png', { frameWidth: 104, frameHeight: 150 }); and this.player = this.physics.add.sprite(100, 100, 'player');

but I don't believe this code to be the issue, as I've tried to do the same with images in a phaser app outside of React and it has worked just fine. I'm probably missing something obvious. Any help would be appreciated.

[jdnichollsc]

Please attach the repo of your project :)

[michaelwoodruffdev]

Right, sorry about that.

Here you go: https://github.com/michaelwoodruffdev/PixelSmash

[jdnichollsc]

Let me check at night 👍

[michaelwoodruffdev]

Thanks any help would be awesome. I'm developing and debugging in a non-react environment for the time being so no rush.

Thanks again let me know if you need anything else from me

[jdnichollsc]

@michaelwoodruffdev where is the assets folder located? I can't see it from that project, did you try putting the images from public folder too? :)

[michaelwoodruffdev]

Alright that was the issue. That's embarrassing. Thanks for the help haha