为什么我的 Phaser 脚本不输出我创建的地图?

huangapple go评论65阅读模式
英文:

Why wont my phaser script output the map I created?

问题

这段代码是用于创建一个游戏场景的,它通过加载图像并根据字符串中的值在游戏屏幕上输出相应的图像。你提到想要输出随机生成的地下城,这段代码的主要部分似乎是根据字符串中的不同值来创建不同的游戏元素,如地板、墙壁等。

如果你需要具体的代码翻译,可以提供需要翻译的具体部分。

英文:

Here is my code: https://replit.com/@JackF99/test-2d-array
(Bug is in script.js)

This code is supposed to output the game screen with the map.

let mapArr;
let drawX=0;
let drawY=0;
//map is declared as variable in map.js
class gameScene extends Phaser.Scene {
	//Constructor with config var declared at bottom
	constructor(config) {
		super(config);
	}
	//Preload aspects for gameScene 
	preload() {
		//Preloading images
		this.load.atlas("player", "assets/temp.png");
		this.load.image("spike", "assets/spike.png");

		this.load.image("floor", "assets/floor.png");
		this.load.image("wallLeft", "assets/wallLeft.png");
		this.load.image("wallRight", "assets/wallRight.png");
		this.load.image("WallBottom", "assets/wallBottom.png");
		this.load.image("wallTop", "assets/wallTop.png");
		this.load.image("bg", "assets/bg.png");
	}
	//Create function for gameScene
	create() {
		this.floor = this.physics.add.staticGroup();
		this.wallTop = this.physics.add.staticGroup();
		this.wallBottom = this.physics.add.staticGroup();
		this.wallLeft = this.physics.add.staticGroup();
		this.wallRight = this.physics.add.staticGroup();
		this.bg = this.physics.add.staticGroup();
		//Splitting the map string by into array variables
		let mapArr = map.split('.');
		//For each loop goes through each row of mapArr
		mapArr.forEach(row => {
			//Setting pixel value X to 0 when its a new row
			drawX = 0;
			//Goes through each variable in the row and creates image in its place
			for (let i = 0; i < row.length; i++) {
				if (row.charAt(i) === '7') {
					this.floor.create(drawX, drawY, "floor");
				} else if (row.charAt(i) === '9') {
					this.wallTop.create(drawX, drawY, "wallTop");
				} else if (row.charAt(i) === '8') {
					this.wallBottom.create(drawX, drawY, "wallBottom");
				} else if (row.charAt(i) === '5') {
					this.wallLeft.create(drawX, drawY, "wallLeft");
				} else if (row.charAt(i) === '6') {
					this.wallRight.create(drawX, drawY, "wallRight");
				} else if (row.charAt(i) === '1') {
					this.floor.create(drawX, drawY, "floor");
					//Creating player variables
					//  this.player = this.add(drawX, drawY, "player");
					// this.player.body.setGravityY(0);
					// this.physics.add.collider(this.player, this.wallLeft);
					//  this.physics.add.collider(this.player, this.wallRight);
					//  this.physics.add.collider(this.player, this.wallTop);
					//  this.physics.add.collider(this.player, this.wallBottom);
					// this.cameras.main.startFollow(this.player);
					// this.player.score = 0;
					// this.scoreText = this.add.text(0, 0, "Score: "+this.player.score, {
					// 	fill:"#000000",
					// 	fontSize:"20px",
					// 	fontFamily:"Arial Black"
					// }).setScrollFactor(0).setDepth(200);
				} else {
					this.bg.create(drawX, drawY, "bg");
				}
				//Add 16 each time a image is added (16by16 pixel images)
				drawX += 16
			}
			//Add 16 each time a new row is entered (16by16 pixel images)
			drawY += 16;
		});
	}
	//update function for gameScene
	update() {

	}

}
//END OF GAME SCENES

//Var config to create game screen
var config = {
	type: Phaser.AUTO,
	width: 3000,
	height: 1500,
	physics: {
		default: 'arcade',
		arcade: {
			gravity: {
				y: 0
			},
			debug: false
		}
	},
	scene: {
		preload: preload,
		create: create,
		update: update
	}
};

//Run actual game
var game = new Phaser.Game(config);
//Create new screens and scenes
game.scene.add("load", loadScene);
game.scene.add("game", mainScene);
game.scene.add("end", endScene);
//start with this scene
game.scene.start("game");

I wanted to output the randomized dungeon created in 2D array format and returned as a string. I wanted to output it as images based on the values in the string.

答案1

得分: 1

地图未显示,因为GameScene从未加载。只需进行一些微小的调整,使其可见。详细信息如下。

class GameScene extends Phaser.Scene {
    constructor(){
        // 设置场景的键名
        super('Game');
    }
    ...
}
...
// 添加场景
game.scene.add('Game', GameScene);
// 启动场景,此键应与`constructor`中的相同
game.scene.start('Game');

另外,一个更好的解决方案可能是将所有场景添加到config对象中,如下所示:

var config = {
    type: Phaser.AUTO,
    width: 3000,
    height: 1500,
    ...    
    scene: [loadScene, mainScene, endScene]
};

信息:在列表中的第一个场景将被加载,其他场景仅在它们的配置中的active属性设置为true时才会启动。有关详细信息,请参阅GameConfig文档。如果对Phaser中的地图有兴趣,可以使用Phaser的TileMap,可以查看官方教程

英文:

The map is not shown, because the GameScene is never loaded. Just some minor tweaks, are needed to make it visible. See below for details.

<!-- language-all: lang-js -->

    class GameScene extends Phaser.Scene {
        constructor(){
            // set the scene key name
            super(&#39;Game&#39;);
        }
        ...
    }
    ...
    // add the scene
    game.scene.add(&#39;Game&#39;, GameScene);
    // start the scene, this key should be the same of the `constructor`
    game.scene.start(&#39;Game&#39;);

> btw.: for map's in phaser, you could use phaser's TileMap. checkout this officials tutorials, if you are interested.

A better solution might even be, to add all scenes into the config object, like so:

var config = {
    type: Phaser.AUTO,
    width: 3000,
    height: 1500,
    ...    
    scene: [loadScene, mainScene, endScene]
 };

> Info: The first Scene in the list will be loaded, the other scenes are only started, if in their config the property active is set to true. Details to the GameConfig documentation.

huangapple
  • 本文由 发表于 2023年4月11日 07:21:09
  • 转载请务必保留本文链接:https://go.coder-hub.com/75981406.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定