Question

我正在尝试在Phaser中创建旋转木马类型效果来选择角色，有很多关于创建标准轮播（网站幻灯片等）的教程，但我正在尝试创建一个可以同时显示3个选项的轮播，（如果有3个显示），我不确定是否有这个特定类型的轮播的名称，因为到目前为止我的谷歌搜索还没有找到我可以学习的任何内容。

在调用下一个和上一个函数时，我无法计算出将每个图像移动到下一个插槽所需的逻辑。

this.scrollingOptionsMenu.ShowSelectedOption();

ShowSelectedOption（）;在主题选择状态的更新功能中调用，除此之外，分别按左键或右键键盘调用Prev（），Next（）函数，除此之外，所有代码都在下面的文件中。

我已经包含了我到目前为止的代码ScrollingOptionsMenu（）在我的主题选择状态的create函数中被调用，options参数是一个文件数组（现在只是每个主题的缩略图）从json文件中提取。

根据我自己当前的尝试，图像看不到进入他们的新插槽，我得到了一个“x undefined”的属性，我理解并可以限制它过去但我不确定我是不是用这个“正确”的方式。

任何帮助表示赞赏，

谢谢！

function ScrollingOptionsMenu(game, x, y, options)
{
  this.x = x;
  this.y = y;
  this.options = options;
  this.optionsCount = options.length;
  this.game = game;
  this.currentIndex = 0;

  this.leftImage = game.add.sprite(x , y, 'theme1_thumbail');
  this.centerImage = game.add.sprite(x, y, 'theme2_thumbail');
  this.rightImage = game.add.sprite(x , y, 'theme3_thumbail');

  this.ImageGroup = [this.leftImage, this.centerImage, this.rightImage];

  this.leftImage.anchor.setTo(0.5);
  this.centerImage.anchor.setTo(0.5);
  this.rightImage.anchor.setTo(0.5);

  this.leftImage.x = x - this.leftImage.width;
  this.rightImage.x = x + this.rightImage.width;

  this.leftImage.scale.setTo(0.5);
  this.rightImage.scale.setTo(0.5);
  //console.log(width);
  console.log(this.leftImage);
  console.log(this.centerImage);
  console.log(this.rightImage);
}

//Display currently centerImage Option
ScrollingOptionsMenu.prototype.ShowSelectedOption = function()
{
  if(this.currentIndex == 0)
  {
    //if we are at 0 then the left slot should be empty
    this.leftImage.loadTexture('transParent', 0);
    this.centerImage.loadTexture(this.options[this.currentIndex].thumbnail.name, 0);
    this.rightImage.loadTexture(this.options[this.currentIndex+1].thumbnail.name, 0);
  }
  else{
    //if currentIndex is above 0 then place
    this.leftImage.loadTexture(this.options[this.currentIndex-1].thumbnail.name, 0);
    this.centerImage.loadTexture(this.options[this.currentIndex].thumbnail.name, 0);
    this.rightImage.loadTexture(this.options[this.currentIndex+1].thumbnail.name, 0);
  }
}

ScrollingOptionsMenu.prototype.NextOption = function()
{
  this.ChangeIndex(1);
}

ScrollingOptionsMenu.prototype.PreviousOption = function()
{
  this.ChangeIndex(-1);
}

//returns the index of the currently centerImage option
ScrollingOptionsMenu.prototype.GetCurrentIndex = function()
{
  return this.currentIndex;
}


ScrollingOptionsMenu.prototype.ChangeIndex = function(index)
{
  var optionsLength = this.options.length-1;
  if(this.currentIndex + index < 0)
  {
    this.currentIndex = 0;
  }
  else if(this.currentIndex + index > optionsLength)
  {
    this.currentIndex = optionsLength;
  }else{
    this.currentIndex += index;
  }
}

Answer 1

我为您设置了此示例，其中显示了解决此问题的一种方法： https://codepen.io/ChrisGhenea/pen/WZGjLg/

首先将所有可用主题添加到数组中，以便您可以跟踪它们。每个元素都需要初始化

//array of all available themes
var themes = [];
themes.push(game.add.sprite(0, 0, 'theme1'));
themes.push(game.add.sprite(0, 0, 'theme2'));
themes.push(game.add.sprite(0, 0, 'theme3'));
themes.push(game.add.sprite(0, 0, 'theme4'));
themes.push(game.add.sprite(0, 0, 'theme5'));
themes.push(game.add.sprite(0, 0, 'theme6'));

themes.forEach(function (item) {
  item.anchor.setTo(0.5, 0.5);
  item.x = game.width + 150;
  item.y = game.height / 2;
  item.inputEnabled = true;
  item.events.onInputDown.add(clickListener, this);
})

您设置突出显示的位置（中间的位置）并将元素放在舞台上：

function setToPosition(prime) {
  themes[prime].x = game.width / 2;

  //check if there is another theme available to display on the right side; if yes then position it
  if (prime<(totalThemes-1)) {
    themes[prime + 1].x = game.width / 2 + 140;
    themes[prime + 1].scale.setTo(0.5,0.5);
  }

  //check if there is another theme available to display on the left side; if yes then position it
  if (prime > 0) {
    themes[prime - 1].x = game.width / 2 - 140;
    themes[prime - 1].scale.setTo(0.5,0.5);
  }
}

动画发生在点击;根据点击的主题，列表向左或向右移动：

//move to next theme
function nextTheme() {
  //move prime left
  game.add.tween(themes[prime]).to( { x: xleft}, animationSpeed, null, true);
  game.add.tween(themes[prime].scale).to( { x: 0.5 , y: 0.5}, animationSpeed, null, true);
  //move right to prime
  if (prime < 5) {
    game.add.tween(themes[prime+1]).to( { x: xprime}, animationSpeed, null, true);
    game.add.tween(themes[prime+1].scale).to( { x: 1 , y: 1}, animationSpeed, null, true);
  }
  //move new to right
  if (prime < 4) {
    themes[prime+2].x = game.width + 150;
    themes[prime+2].scale.setTo(0.5,0.5);
    game.add.tween(themes[prime+2]).to( { x: xright}, animationSpeed, null, true);
  }
  //move left out
  if (prime>0) {
    //themes[prime+1].x = -150;
    themes[prime-1].scale.setTo(0.5,0.5);
    game.add.tween(themes[prime-1]).to( { x: -150}, animationSpeed, null, true);
  }
  prime++;

}

//move to previous theme
function previousTheme() {
  //move prime left
  game.add.tween(themes[prime]).to( { x: xright}, animationSpeed, null, true);
  game.add.tween(themes[prime].scale).to( { x: 0.5 , y: 0.5}, animationSpeed, null, true);
  //move left to prime
  if (prime > 0 ) {
    game.add.tween(themes[prime-1]).to( { x: xprime}, animationSpeed, null, true);
    game.add.tween(themes[prime-1].scale).to( { x: 1 , y: 1}, animationSpeed, null, true);
  }
  //move new to left
  if (prime > 1) {
    themes[prime-2].x = - 150;
    themes[prime-2].scale.setTo(0.5,0.5);
    game.add.tween(themes[prime-2]).to( { x: xleft}, animationSpeed, null, true);
  }
  //move right out
  if (prime < (totalThemes-1)) {
    //themes[prime+1].x = -150;
    themes[prime+1].scale.setTo(0.5,0.5);
    game.add.tween(themes[prime+1]).to( { x: game.width + 150}, animationSpeed, null, true);
  }
  prime--;
}

在Phaser.io中创建轮播

1 个答案: