Jump to content

Search the Community

Showing results for tags 'carousel'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
    • Paid Promotion (Buy Banner)
  • Frameworks
    • Pixi.js
    • Phaser 3
    • Phaser 2
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
    • GameMonetize
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered
    • Marketplace (Sell Apps, Websites, Games)

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 1 result

  1. 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; } }
×
×
  • Create New...