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?
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é?
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