Я пытаюсь загрузить ресурсы изображений для PIXI.js в
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;
Как видите, я пытаюсь загрузить изображение background.jpg
в PIXI с помощью функции loader.add()
. Это просто не работает. В журналах консоли отладки я вижу, что высота и ширина изображения равны 1. Кроме того, когда я просматриваю URL-адрес фонового изображения, все выглядит нормально. Какие-нибудь советы?
Попробуйте переключить его на это;
~.load (() => this.init ());~
@ Staff0rd отлично работает! Но почему??
load
ожидает функцию в качестве параметра, однако вы на самом деле вызывали init()
тем самым передавая результат (void) в load
. Если в init
нет ссылок на this
внутри, вы можете использовать следующее для передачи функции;
~.load (this.init);~
Обратите внимание на отсутствие скобок.
сейчас это устарело ... и нам нужен способ загрузить любой актив, который мы связываем с webpack
@hayesmaker работает, но текстура какое-то время пуста. когда он будет готов, он будет правильно измельчен.
@nitwhiz , поэтому я изначально получаю ширину в 1 пиксель для всех спрайтов?
Есть ли способ вызвать срабатывание обратного вызова после загрузки спрайта?
Самый полезный комментарий
сейчас это устарело ... и нам нужен способ загрузить любой актив, который мы связываем с webpack