Search the Community

I am trying to create a carousel type effect in Phaser for selecting a character, there are many tutorials on creating a standard Carousel (Website Slideshows etc) but I am trying to create a Carousel that can display up 3 options at once, (if there are 3 to display), which I am not sure if there's a name for this specific type of carousel as my google searches so far haven't turned up anything I can learn from. Example Image 1 Example Image 2 I cannot work out the logic needed to shift each image into the next slot along when the next and previous functions are called. this.scrollingOptionsMenu.ShowSelectedOption(); ShowSelectedOption(); is called in the update function of the theme select state, other than this and the Prev(), Next() functions are called on keyboard press left or right respectively other than this all code is in the below file. I have included the code I have so far below ScrollingOptionsMenu() is called in my create function of the theme select state, the options parameter is an array of files (for now just the thumbnail of each theme) pulled from a json file. With my own current attempt, the images don't see to move into their new slots and I get an "property of x undefined' which I understand and could limit it going over but I am not really sure if I'm going the 'right' way with this. Any help appreciated, Thanks! 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; } }