在 Phaser.io 中创建轮播

Question

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

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

this.scrollingOptionsMenu.ShowSelectedOption();

ShowSelectedOption();在主题 select 状态的更新函数中被调用，除了这个和 Prev()，Next() 函数分别在键盘向左或向右按下时调用，除此之外所有代码都在下面的文件中。

我已经将到目前为止的代码包含在主题 select 状态的创建函数中调用 ScrollingOptionsMenu()，options 参数是一个文件数组（目前只是每个主题的缩略图）从 json 文件中提取。

根据我自己目前的尝试，图像没有看到移动到它们的新插槽中，我得到一个“属性 of x undefined”，我理解并且可以限制它过去但我没有真的很确定我是否要用 'right' 方式处理这个。

感谢任何帮助，

谢谢！

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 中创建轮播

Creating a Carousel in Phaser.io

javascript

carousel

phaser-framework