Ich versuche, Image-Assets für PIXI.js in einem
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;
Wie Sie sehen, versuche ich nun, das Bild background.jpg
mit der Funktion loader.add()
in PIXI zu laden. Es funktioniert einfach nicht. In meinen Debug-Konsolenprotokollen kann ich sehen, dass die Höhe und Breite des Bildes 1 beträgt. Wenn ich die URL für das Hintergrundbild ansehe, scheint alles in Ordnung zu sein. Irgendwelche Tipps?
Versuchen Sie es darauf umzuschalten;
~.load (() => this.init ());~
@ staff0rd das funktioniert
load
erwartet eine Funktion als Parameter, Sie haben jedoch tatsächlich init()
aufgerufen und dabei das Ergebnis (void) an load
. Wenn init
keine Verweise auf this
, können Sie die Funktion wie folgt übergeben:
~.load (this.init);~
Beachten Sie das Fehlen von Klammern.
Dies ist jetzt veraltet ... und wir brauchen eine Möglichkeit, alle Assets zu laden, die wir mit Webpack bündeln
@ Hayesmaker es funktioniert, aber die Textur ist für eine Weile leer. Wenn es fertig ist, wird es richtig geblendet.
@nitwhiz ist das der Grund, warum ich anfänglich eine Breite von 1 Pixel für alle Sprites bekomme?
Gibt es eine Möglichkeit, einen Rückruf zum Feuern zu bringen, sobald ein Sprite geladen ist?
Hilfreichster Kommentar
Dies ist jetzt veraltet ... und wir brauchen eine Möglichkeit, alle Assets zu laden, die wir mit Webpack bündeln