Erstellen einer Karussell in Phaser.io

Question

Ich versuche, für die Auswahl eines Charakters, gibt es viele Anleitungen zum Erstellen einer Standard-Karussell (Website Diashows etc.) ein Karussell Typ Effekt in Phaser zu schaffen, aber ich versuche, ein Karussell zu schaffen, das kann zeige 3 Optionen gleichzeitig an, (wenn 3 angezeigt werden sollen), wobei ich mir nicht sicher bin, ob es einen Namen für diese bestimmte Art von Karussell gibt, da meine Google-Suche bisher nichts ergeben hat, von dem ich lernen kann.

Ich kann die Logik funktionieren benötigt, um jedes Bild in den nächsten Schlitz verschieben entlang, wenn die nächsten und vorherigen Funktionen aufgerufen werden.

this.scrollingOptionsMenu.ShowSelectedOption(); 

ShowSelectedOption(); Wird in der Update-Funktion des Themenauswahl-Status aufgerufen, anders als dies und die Prev() -, Next() -Funktionen werden auf der Tastatur drücken Sie nach links oder rechts bzw. anders als dies der gesamte Code in der folgenden Datei ist.

ich den Code enthalten sind, ich habe so weit unter ScrollingOptionsMenu() in meinem erstellen Funktion des Themas wählen Zustand genannt wird, ist der options Parameter ein Array von Dateien (für jetzt nur die Miniaturansicht jedes Thema) von einem gezogen JSON-Datei.

Mit meinem eigenen aktuellen Versuch, die Bilder sehen nicht in ihre neuen Slots zu bewegen und ich bekomme eine "Eigenschaft von x undefined ', die ich verstehe und könnte es begrenzen, aber ich bin nicht wirklich sicher, ob ich' m die 'richtige' Art und Weise mit dieser gehen.

Jede Hilfe dankbar,

Dank!

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

ich ein Setup für Sie in diesem Beispiel zeigt eine Möglichkeit, dieses Problem zu nähern: https://codepen.io/ChrisGhenea/pen/WZGjLg/

Zunächst werden alle verfügbaren Themen zu einem Array hinzugefügt werden, so dass Sie den Überblick behalten können. Jedes Element muss

//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); 
}) 

Die initialisiert werden stellen Sie die markierte Position (die in der Mitte) und legen Sie die Elemente auf der Bühne:

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); 
    } 
} 

Die Animation auf Klick geschieht; je nachdem, welches Thema wird die Liste geklickt bewegt wird links oder rechts:

//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--; 
}