Pixi.js: Charger les ressources d'image pour PIXI.js en conjonction avec Webpack

Créé le 2 déc. 2016  ·  6Commentaires  ·  Source: pixijs/pixi.js

J'essaie de charger des actifs d'image pour PIXI.js dans un de mes projets React qui utilise Webpack. Voici toute ma classe de composants 'Menu':

import React from 'react';
import styles from './Menu.css';
import backgroundUrl from './background.jpg';
require('pixi.js')

class Menu extends React.Component {    

    componentDidMount () {

        // Get reference to canvas element
        this.canvas = this.refs.canvas;        

        // Load assets                
        PIXI.loader.add([
            {
                name: 'background',
                url: backgroundUrl
            }
        ]).load(this.init());

    }

    init () {

        // Create background sprite
        const background = new PIXI.Sprite(PIXI.loader.resources.background.texture);

        // DEBUG: Height and width is always '1'
        console.log('Background width: ' + background.width);
        console.log('Background height: ' + background.height);

        // Setup renderer
        this.renderer = PIXI.autoDetectRenderer(background.width, background.height);
        this.renderer.autoResize = true;
        this.renderer.resize(window.innerWidth, window.innerHeight);
        this.canvas.appendChild(this.renderer.view);

        // Create stage
        this.stage = new PIXI.Container();                

        // Add background to stage
        this.stage.addChild(background)

        // Tell the renderer to render the stage
        this.renderer.render(this.stage);

    }

    render () {

        return (
           <div className={styles.canvas} ref='canvas'></div>
        );
    }

}

export default Menu;

Maintenant, comme vous pouvez le voir, j'essaye de charger l'image background.jpg dans PIXI avec la fonction loader.add() . Cela ne fonctionne tout simplement pas. Dans les journaux de ma console de débogage, je peux voir que la hauteur et la largeur de l'image sont 1. De plus, lorsque je visualise l'URL de l'image d'arrière-plan, tout semble bien. Des conseils?

🤔 Question

Commentaire le plus utile

c'est obsolète maintenant ... et nous avons besoin d'un moyen de charger tout élément que nous regroupons avec webpack

Tous les 6 commentaires

Essayez de le changer à ceci;
~.load (() => this.init ());~

@ staff0rd qui fonctionne très bien! Mais pourquoi??

load attend une fonction comme paramètre, mais vous appeliez en fait init() , passant ainsi le résultat (void) à load . Si init ne contenait pas de références à this , vous pouvez utiliser ce qui suit pour passer la fonction;
~.load (this.init);~

Notez le manque de parenthèses.

c'est obsolète maintenant ... et nous avons besoin d'un moyen de charger tout élément que nous regroupons avec webpack

@hayesmaker cela fonctionne mais la texture est vide pendant un moment. quand il est prêt, il est blitted correctement.

@nitwhiz est-ce pourquoi j'obtiens initialement une largeur de 1px pour tous les sprites?
y a-t-il un moyen d'obtenir un rappel pour se déclencher une fois qu'un sprite est chargé?

Cette page vous a été utile?
0 / 5 - 0 notes