Estou tentando carregar recursos de imagem para PIXI.js em um projeto meu React que usa Webpack. Aqui está toda a minha classe de componente '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;
Agora, como você pode ver, estou tentando carregar a imagem background.jpg
no PIXI com a função loader.add()
. Simplesmente não funciona. Em meus logs do console de depuração, posso ver que a altura e a largura da imagem são 1. Além disso, quando vejo o URL da imagem de fundo, tudo parece bem. Alguma dica?
Tente mudar para este;
~.load (() => this.init ());~
@ staff0rd que funciona muito bem! Mas por que??
load
espera uma função como seu parâmetro, no entanto, você estava realmente chamando init()
, passando assim o resultado (void) para load
. Se init
não tivesse referências a this
dentro dele, você poderia usar o seguinte para passar a função;
~.load (this.init);~
Observe a falta de parênteses.
isso está obsoleto agora ... e precisamos de uma maneira de carregar qualquer ativo que estamos agrupando com o webpack
@hayesmaker funciona, mas a textura fica vazia por um tempo. quando está pronto, é misturado corretamente.
@nitwhiz é por isso que inicialmente obtenho uma largura de 1px para todos os sprites?
existe uma maneira de obter um retorno de chamada para disparar depois que um sprite é carregado?
Comentários muito úteis
isso está obsoleto agora ... e precisamos de uma maneira de carregar qualquer ativo que estamos agrupando com o webpack