相位器使用对象功能加载图像

Question

大家好，我是Phaser的新手，它的确很酷，但是尝试使用add.sprite时遇到问题，我在数组中填充了游戏信息，并试图将图片粘贴到屏幕上的地图中代码如下。 这是完整的游戏代码，但是我将进一步阐述。 我有一个名为“ paises”的数组，其中包含每个国家/地区的名称以及人口和更多信息。 我正在尝试添加一个用于添加子画面（图像）的函数，以便稍后可以仅使用for循环将所有这些子画面添加至屏幕。 该函数称为addSprite（）;。

我收到的错误消息是addSprite函数将使用的图像的位置被认为是未定义的，因为它不知道以下代码中“委内瑞拉”的位置： addSprite:function(){ this.add.sprite(85,2,'venezuela');}其他addSprite函数的问题相同。 我对原型有点新，所以就可以了。 还尝试在create函数内添加数组组合，以使其有时间加载资产，但没有运气。

BasicGame = {};

BasicGame.Game = function (game) {};

var paises = [
{
    name:'venezuela',
    population: 30620404,
    brandRecognition: 0,
    clients:0,
    sales:0,
    addSprite:function(){
        this.add.sprite(85,2,'venezuela');
}},
{
    name:'colombia',
    population:48264000,
    brandRecognition:0,
    clients:0,
    sales:0,
    addSprite:function(){
         this.add.sprite(40,2,'colombia');

}},
{
    name:'ecuador',
    population:16309000,
    brandRecognition:0,
    clients:0,
    sales:0,
    addSprite:function(){
    this.add.sprite(25,80,'ecuador');}
},
{
    name:'guayana',
    population:747884,
    brandRecognition:0,
    clients:0,
    sales:0,
addSprite:function(){
this.add.sprite(164,26,'guayana');}
}];

BasicGame.Game.prototype = {

init: function () {
    // set up input max pointers
    this.input.maxPointers = 1;
    // set up stage disable visibility change
    this.stage.disableVisibilityChange = true;
    // Set up the scaling method used by the ScaleManager
    // Valid values for scaleMode are:
    // * EXACT_FIT
    // * NO_SCALE
    // * SHOW_ALL
    // * RESIZE
    // See http://docs.phaser.io/Phaser.ScaleManager.html for full document
    this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    // If you wish to align your game in the middle of the page then you can
    // set this value to true. It will place a re-calculated margin-left
    // pixel value onto the canvas element which is updated on orientation /
    // resizing events. It doesn't care about any other DOM element that may
    // be on the page, it literally just sets the margin.
    this.scale.pageAlignHorizontally = true;
    this.scale.pageAlignVertically = false;
    // Force the orientation in landscape or portrait.
    // * Set first to true to force landscape. 
    // * Set second to true to force portrait.
    this.scale.forceOrientation(true, false);
    // Sets the callback that will be called when the window resize event
    // occurs, or if set the parent container changes dimensions. Use this 
    // to handle responsive game layout options. Note that the callback will
    // only be called if the ScaleManager.scaleMode is set to RESIZE.
    this.scale.setResizeCallback(this.gameResized, this);
    // Set screen size automatically based on the scaleMode. This is only
    // needed if ScaleMode is not set to RESIZE.
    this.scale.setScreenSize(true);
    // Re-calculate scale mode and update screen size. This only applies if
    // ScaleMode is not set to RESIZE.
    this.scale.refresh();

},


preload: function () {

    // Here we load the assets required for our preloader (in this case a 
    // background and a loading bar)
    this.load.image('logo', 'asset/phaser.png');
    this.load.image('brasil','asset/brasil.png');
    this.load.image('colombia','asset/colombia.png');
    this.load.image('venezuela','asset/venezuela.png');
    this.load.image('ecuador','asset/ecuador.png');
    this.load.image('peru','asset/peru.png');
    this.load.image('guayana','asset/guayana.png');
    this.load.image('surinam','asset/surinam.png');
    this.load.image('guayanaFrancesa','asset/guayanaFrancesa.png');
    this.load.image('brasil','asset/brasil.png');
    this.load.image('chile','asset/chile.png');
    this.load.image('bolivia','asset/bolivia.png');
    this.load.image('argentina','asset/argentina.png');
    this.load.image('paraguay','asset/paraguay.png');
    this.load.image('uruguay','asset/uruguay.png');
    this.load.image('menu','asset/menu.png');
    this.load.image('oceano','asset/oceano.jpg');
},

create: function () {        
    var oceano = this.add.sprite(0,0,'oceano');
   var menu = this.add.sprite(450,50,'menu');

    for(var i=0;i<3;i++){
        paises[i].addSprite();
    }

},


gameResized: function (width, height) {

    // This could be handy if you need to do any extra processing if the 
    // game resizes. A resize could happen if for example swapping 
    // orientation on a device or resizing the browser window. Note that 
    // this callback is only really useful if you use a ScaleMode of RESIZE 
    // and place it inside your main game state.

}};

Answer 1

嗨，大家好，它起作用了，解决方法是将函数移到对象外，然后将参数保存在对象内（x，y和文件名）。 我也将Paises变量设为全局变量。 它可能不是最优雅的解决方案，但可以满足我的需要。 我将发布代码，以防其他人可以从中受益。

var paises = [
{
    name:'venezuela',
    population: 30620404,
    brandRecognition: 0,
    clients:0,
    sales:0,
    x:85,
    y:2
},
{
    name:'colombia',
    population:48264000,
    brandRecognition:0,
    clients:0,
    sales:0,
    x:40,
    y:2
},
{
    name:'ecuador',
    population:16309000,
    brandRecognition:0,
    clients:0,
    sales:0,
    x:25,
y:80
},
{
    name:'guayana',
    population:747884,
    brandRecognition:0,
    clients:0,
    sales:0,
x: 164,
y:26
}];

BasicGame = {

};

BasicGame.Game = function (game) {
};

BasicGame.Game.prototype = {

init: function () {
    // set up input max pointers
    this.input.maxPointers = 1;
    // set up stage disable visibility change
    this.stage.disableVisibilityChange = true;
    // Set up the scaling method used by the ScaleManager
    // Valid values for scaleMode are:
    // * EXACT_FIT
    // * NO_SCALE
    // * SHOW_ALL
    // * RESIZE
    // See http://docs.phaser.io/Phaser.ScaleManager.html for full document
    this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    // If you wish to align your game in the middle of the page then you can
    // set this value to true. It will place a re-calculated margin-left
    // pixel value onto the canvas element which is updated on orientation /
    // resizing events. It doesn't care about any other DOM element that may
    // be on the page, it literally just sets the margin.
    this.scale.pageAlignHorizontally = true;
    this.scale.pageAlignVertically = false;
    // Force the orientation in landscape or portrait.
    // * Set first to true to force landscape. 
    // * Set second to true to force portrait.
    this.scale.forceOrientation(true, false);
    // Sets the callback that will be called when the window resize event
    // occurs, or if set the parent container changes dimensions. Use this 
    // to handle responsive game layout options. Note that the callback will
    // only be called if the ScaleManager.scaleMode is set to RESIZE.
    this.scale.setResizeCallback(this.gameResized, this);
    // Set screen size automatically based on the scaleMode. This is only
    // needed if ScaleMode is not set to RESIZE.
    this.scale.setScreenSize(true);
    // Re-calculate scale mode and update screen size. This only applies if
    // ScaleMode is not set to RESIZE.
    this.scale.refresh();

},


preload: function () {

    // Here we load the assets required for our preloader (in this case a 
    // background and a loading bar)
    this.load.image('logo', 'asset/phaser.png');
    this.load.image('brasil','asset/brasil.png');
    this.load.image('colombia','asset/colombia.png');
    this.load.image('venezuela','asset/venezuela.png');
    this.load.image('ecuador','asset/ecuador.png');
    this.load.image('peru','asset/peru.png');
    this.load.image('guayana','asset/guayana.png');
    this.load.image('surinam','asset/surinam.png');
    this.load.image('guayanaFrancesa','asset/guayanaFrancesa.png');
    this.load.image('brasil','asset/brasil.png');
    this.load.image('chile','asset/chile.png');
    this.load.image('bolivia','asset/bolivia.png');
    this.load.image('argentina','asset/argentina.png');
    this.load.image('paraguay','asset/paraguay.png');
    this.load.image('uruguay','asset/uruguay.png');
    this.load.image('menu','asset/menu.png');
    this.load.image('oceano','asset/oceano.jpg');
},

create: function () {        
    var oceano = this.add.sprite(0,0,'oceano');
   var menu = this.add.sprite(450,50,'menu');

    for(var i=0;i<3;i++){
        this.add.sprite(paises[i].x,paises[i].y,paises[i].name);
    }

},


gameResized: function (width, height) {

    // This could be handy if you need to do any extra processing if the 
    // game resizes. A resize could happen if for example swapping 
    // orientation on a device or resizing the browser window. Note that 
    // this callback is only really useful if you use a ScaleMode of RESIZE 
    // and place it inside your main game state.

}

};