Блог

я новичок в фазере, я уже показываю экран загрузки, но я хотел изменить черный фон на изображение при появлении прогресса загрузки. Однако я не уверен, как я это сделаю, потому что я совсем не знаком с использованием элемента. есть ли в любом случае, что я могу это изменить? может ли кто-нибудь подсказать мне, как это сделать? Спасибо тебе.

Это и есть код:

 lt;!DOCTYPE htmlgt; lt;htmlgt;  lt;headgt;  lt;meta charset="utf-8" /gt;  lt;/headgt;  lt;bodygt;  lt;script src="//cdn.jsdelivr.net/npm/phaser@3.0.0/dist/phaser.min.js"gt;lt;/scriptgt;  lt;script type="text/javascript"gt;  var config = {  type: Phaser.AUTO,  parent: "phaser-example",  width: 800,  height: 600,  scene: {  preload: preload,  create: create  }  };  var game = new Phaser.Game(config);  function preload() {  var progressBar = this.add.graphics();  var progressBox = this.add.graphics();  progressBox.fillStyle(0x222222, 0.8);  progressBox.fillRect(240, 270, 320, 50);   var width = this.cameras.main.width;  var height = this.cameras.main.height;  var loadingText = this.make.text({  x: width / 2,  y: height / 2 - 50,  text: "Loading...",  style: {  font: "20px monospace",  fill: "#ffffff"  }  });  loadingText.setOrigin(0.5, 0.5);   var percentText = this.make.text({  x: width / 2,  y: height / 2 - 5,  text: "0%",  style: {  font: "18px monospace",  fill: "#ffffff"  }  });  percentText.setOrigin(0.5, 0.5);   var assetText = this.make.text({  x: width / 2,  y: height / 2   50,  text: "",  style: {  font: "18px monospace",  fill: "#ffffff"  }  });  assetText.setOrigin(0.5, 0.5);   this.load.on("progress", function (value) {  percentText.setText(parseInt(value * 100)   "%");  progressBar.clear();  progressBar.fillStyle(0xffffff, 1);  progressBar.fillRect(250, 280, 300 * value, 30);  });   this.load.on("fileprogress", function (file) {  assetText.setText("Loading asset: "   file.key);  });  this.load.on("complete", function () {  progressBar.destroy();  progressBox.destroy();  loadingText.destroy();  percentText.destroy();  assetText.destroy();  });   this.load.image(  "logo",  "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/368px-Google_2015_logo.svg.png"  );  for (var i = 0; i lt; 5000; i  ) {  this.load.image(  "logo"   i,  "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/368px-Google_2015_logo.svg.png"  );  }  }  function create() {  var logo = this.add.image(400, 300, "logo");  }  lt;/scriptgt;  lt;/bodygt; lt;/htmlgt;  

Ну, в Фазере есть много способов сделать это. Посты, о которых я могу думать.

1. Создайте сцену (в примере preloadScene ), которая загружает только те изображения, которые мне нужны для загрузки сцены
2. Создайте реальную сцену загрузки(в примере mainScene ), и здесь вы можете добавить изображения в сцену, и они будут отображаться, потому что они уже загружены.
3. Начните с preloadScene

Важно: Вам придется удалить часть сцены из config — объекта.

Вот рабочая демонстрация:

 var config = {  type: Phaser.AUTO,  parent: "game",  width: 800,  height: 600  /* REMOVE THE SCENE FROM HERE */  };   var game = new Phaser.Game(config);   var mainScene = {  preload: function preload() {  // Add the images to the Scene, because now they are loaded  var logo = this.add.image(400, 300, "logo");  var bg = this.add.image(400, 300, "bg");   var progressBar = this.add.graphics();  var progressBox = this.add.graphics();  progressBox.fillStyle(0x222222, 0.8);  progressBox.fillRect(240, 270, 320, 50);   var width = this.cameras.main.width;  var height = this.cameras.main.height;  var loadingText = this.make.text({  x: width / 2,  y: height / 2 - 50,  text: "Loading...",  style: {  font: "20px monospace",  fill: "#ffffff"  }  });  loadingText.setOrigin(0.5, 0.5);   var percentText = this.make.text({  x: width / 2,  y: height / 2 - 5,  text: "0%",  style: {  font: "18px monospace",  fill: "#ffffff"  }  });  percentText.setOrigin(0.5, 0.5);   var assetText = this.make.text({  x: width / 2,  y: height / 2   50,  text: "",  style: {  font: "18px monospace",  fill: "#ffffff"  }  });  assetText.setOrigin(0.5, 0.5);   this.load.on("progress", function (value) {  percentText.setText(parseInt(value * 100)   "%");  progressBar.clear();  progressBar.fillStyle(0xffffff, 1);  progressBar.fillRect(250, 280, 300 * value, 30);  });   this.load.on("fileprogress", function (file) {  assetText.setText("Loading asset: "   file.key);  });  this.load.on("complete", function () {  progressBar.destroy();  progressBox.destroy();  loadingText.destroy();  percentText.destroy();  assetText.destroy();  });   for (var i = 0; i lt; 3; i  ) {  this.load.image(  "logo"   i,  "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/368px-Google_2015_logo.svg.png"  );  }  }  }   var preloadScene = {  preload: function preload() {  // Load only images needed for the Loading Screen (keep it small)  this.load.image("logo", "https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/368px-Google_2015_logo.svg.png");  this.load.image( "bg", "https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/IC1024_-_SDSS_DR14.jpg/600px-IC1024_-_SDSS_DR14.jpg");  },  create: function create() {  // Start loading Scene  this.scene.start('Main')  }  }   // ADD A Scene that load images needed for the real load Screen  // these should be small, or the user will see a black screen for a long time  game.scene.add('PerLoad', preloadScene);   // ADD the Loading Scene/Screen  game.scene.add('Main', mainScene);    // Start The PreLoad Scene  game.scene.start('PerLoad'); 

 lt;!DOCTYPE htmlgt; lt;htmlgt;  lt;headgt;  lt;meta charset="utf-8" /gt;  lt;script src="//cdn.jsdelivr.net/npm/phaser@3.0.0/dist/phaser.min.js"gt;lt;/scriptgt;  lt;/headgt;  lt;bodygt;  lt;div id="game" style="padding:0;margin:0;height:800px"gt;lt;/divgt;  lt;/bodygt; lt;/htmlgt;