Проблема синхронизации Phaser.js Axios при смене сцен
Есть ли способ сделать вызов axios get внутри моего кода Phaser 3, а затем загрузить новую сцену с данными ответа? В настоящий момент у меня возникла своего рода проблема со временем: я думаю, что вторая сцена загружается до того, как вызов axios сможет вернуть ответ? Любая помощь будет принята с благодарностью. Вот мой код. Во-первых, внутри моего js-файла SelectDifficultyScene:
preload()
{
this.fetchSudoku();
// this.scene.start(GameScene, this.sudoku);
}
async fetchSudoku()
{
self = this;
console.info("Select Difficulty Scene");
try
{
const response = await axios.get('api/fetch-sudoku');
console.info("Select Difficulty Scene", self.sudoku);
self.setSudoku(response.data);
self.loadGameScene();
// const gameScene = new GameScene();
} catch(error) {
console.info(error);
}
}
setSudoku(sudoku)
{
this.sudoku.unsolvedSudoku = sudoku.unsolvedSudoku;
this.sudoku.solvedSudoku = sudoku.solvedSudoku;
this.sudoku.difficultyLevel = "Easy";
}
loadGameScene()
{
this.scene.start('GameScene', this.sudoku);
}
Затем внутри моего файла GameScene:
init(sudoku)
{
// console.info(sudoku);
this.setSudokuNumbers(sudoku);
}
setSudokuNumbers(sudoku)
{
let unsolvedCount = 0;
let solvedCount = 0;
for(let x = 0; x < 9; x++)
{
for(let y = 0; y < 9; y++)
{
this.sudokuGridUnsolved[x][y] = sudoku.unsolvedSudoku[unsolvedCount];
this.sudokuGridSolved[x][y] = sudoku.solvedSudoku[solvedCount];
unsolvedCount++;
solvedCount++;
}
}
// console.info(sudoku, this.sudokuGrid);
}
Когда я загружаю обе сцены в файл конфигурации игры, загружается GameScene, и я не вижу данных ответа в своих инструментах разработки. Когда я удаляю GameScene из конфигурации игры и пытаюсь снова, я получаю правильные данные ответа?
...Я почти забыл, как вы замечаете/определяете эту «проблему времени»?
В моей конфигурации игры, когда я объявляю обе сцены, вторая сцена загружается мгновенно, и я не замечаю никаких данных ответа? Но когда я объявляю только первую сцену в своей конфигурации, я вижу, что данные ответа загружаются в мои инструменты разработки?
Можете ли вы поделиться соответствующим кодом/примером? не понятно когда и где вы загружаете Сцену или когда используете? аксиомы.
Я обновил свой ответ рабочим примером, надеюсь, это поможет.
Ответы 2
Звучит так просто:
class Scene extends Phaser.Scene {
...
async create() {
...
const data = await axios.get('your-endpoint-url')
this.scene.launch('your-next-scene-key', { data })
}
}
Если вам нужно выключить текущую сцену, вам следует использовать метод .start вместо .launch.
Я думаю, проблема в том, в каком порядке вы загружаете сцены в config, но, не видя этого, я просто предполагаю.
Порядок в массиве имеет значение, в первом фрагменте кода GameScene загружается и отображается первым. SelectDifficultyScene загружается, но не запускается/не отображается.
const config = {
type: Phaser.AUTO,
...
scene: [ GameScene, SelectDifficultyScene ]
};
Переключение порядка сцен должно решить вашу проблему, если я правильно понял, что вы настроили.
const config = {
type: Phaser.AUTO,
...
scene: [ SelectDifficultyScene, GameScene ]
};
Обновление
(небольшая рабочая демо)
document.body.style = 'margin:0;';
class FirstScene extends Phaser.Scene {
constructor(){
super('FirstScene');
}
create(){
let label = this.add.text(10,10, 'FirstScene\n... please wait')
.setScale(1.5)
.setOrigin(0)
.setStyle({fontStyle: 'bold', fontFamily: 'Arial'});
setTimeout( _ =>
axios.get('https://jsonplaceholder.typicode.com/posts/1')
.then((response) => {
this.scene.start('SecondScene', response.data);
})
.catch(function (error) {
label.setText(` First Scene\nError: ${error}`);
}),
2000);
}
}
class SecondScene extends Phaser.Scene {
constructor(){
super('SecondScene');
console.info(this);
}
create(data){
let label = this.add.text(10,10, 'SecondScene')
.setScale(1.5)
.setOrigin(0)
.setStyle({fontStyle: 'bold', fontFamily: 'Arial'});
let dataLabel = this.add.text(10, 40, JSON.stringify(data))
.setOrigin(0)
.setWordWrapWidth(300)
.setStyle({fontStyle: 'bold', fontFamily: 'Arial'});
}
}
var config = {
type: Phaser.AUTO,
width: 536,
height: 183,
scene: [FirstScene, SecondScene],
};
new Phaser.Game(config);<script src = "//cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
<script src = "//cdn.jsdelivr.net/npm/phaser/dist/phaser.min.js"></script>
Можете ли вы поделиться соответствующим кодом, который создает проблему (или MRE)? Поскольку ваш вопрос имеет много дополнительных вопросов. Например: где в коде должен происходить вызов? должен ли код приостановить текущую сцену до тех пор, пока не выполнится обратный вызов, или нет? какие данные ответа имеют отношение к вызову следующей сцены? как следует начать следующую сцену? ...?