Phaser 使用对象函数加载图像
Phaser loading images using object function
大家好，我是 Phaser 的新手，它真的很酷，但我在尝试使用 add.sprite 时遇到问题，我有一个包含游戏信息的数组，我正在尝试粘贴图片在屏幕上导入地图的代码如下。这是完整的游戏代码，但我会进一步详细说明。我有一个名为 'paises' 的数组，其中包含每个国家/地区的名称以及人口和更多信息。我正在尝试添加一个用于添加精灵（图像）的功能，以便稍后我可以使用 for 循环将它们全部添加到屏幕上。此函数称为 addSprite();
我收到的错误消息是 addSprite 函数将使用的图像位置被视为未定义，因为它不知道以下代码中 'venezuela' 的位置：
addSprite:function(){ this.add.sprite(85,2,'venezuela');}
其他 addSprite 函数也有同样的问题。
我对原型制作有点陌生，所以可能就是这样。还尝试在 create 函数中添加数组 paises 以使其有时间加载资产，但没有成功。
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.
}};
大家好，刚刚开始工作，解决方案涉及将函数移到对象外部，并将参数保存在对象内部（x、y 和文件名）。我还将 paises 变量设为全局变量。它可能不是最优雅的解决方案，但它完成了我需要它做的事情。我将 post 代码以防其他人可以从中受益。
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.
}
};
大家好，我是 Phaser 的新手，它真的很酷，但我在尝试使用 add.sprite 时遇到问题，我有一个包含游戏信息的数组，我正在尝试粘贴图片在屏幕上导入地图的代码如下。这是完整的游戏代码，但我会进一步详细说明。我有一个名为 'paises' 的数组，其中包含每个国家/地区的名称以及人口和更多信息。我正在尝试添加一个用于添加精灵（图像）的功能，以便稍后我可以使用 for 循环将它们全部添加到屏幕上。此函数称为 addSprite();
我收到的错误消息是 addSprite 函数将使用的图像位置被视为未定义，因为它不知道以下代码中 'venezuela' 的位置：
addSprite:function(){ this.add.sprite(85,2,'venezuela');}
其他 addSprite 函数也有同样的问题。
我对原型制作有点陌生，所以可能就是这样。还尝试在 create 函数中添加数组 paises 以使其有时间加载资产，但没有成功。
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.
}};
大家好，刚刚开始工作，解决方案涉及将函数移到对象外部，并将参数保存在对象内部（x、y 和文件名）。我还将 paises 变量设为全局变量。它可能不是最优雅的解决方案，但它完成了我需要它做的事情。我将 post 代码以防其他人可以从中受益。
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.
}
};