Sephy Posted January 30, 2017 Share Posted January 30, 2017 Hi there! I'm a ionic developer, and I came through a project that is using Phaser (which I have absolutely no idea) to create an animated menu that consists in a series of slides containing a button that redirects a part of my app.. The thing is that I'm told that a slide is required to have two buttons that redirects to two part of the app (two links). The problem is that in the slider with two button, only the first one works... Enter.prototype.slides = [ { url: 'assets/x1/img/enter/menu-option-bg-3.png', url_logo: 'assets/x1/img/enter/menu-option-logo-3.png', url_logo2: 'assets/x1/img/enter/menu-option-logo-3b.png', href: 'app.html#/app/about?option=3', href2: 'app.html#/app/about?option=4', deltaX: -410, pos: {x: 0}, }, // And more slides... ]; Enter.prototype.preload = function() { game.stage.backgroundColor = '#fdfdfd'; for(key in this.slides){ var slide = this.slides[key]; slide.bg = game.load.image('slidebg' + key, slide.url); if(key == 0){ slide.logo1 = game.load.image('logo1', slide.url_logo); slide.logo2 = game.load.image('logo2', slide.url_logo2); }else{ slide.logo = game.load.image('logo' + key, slide.url_logo); } } }; Enter.prototype.create = function() { for(key in this.slides){ var slide = this.slides[key]; slide.sprite = game.add.sprite( this.slideWidth + this.stageWidth, 0, 'slidebg' + key ); slide.sprite.inputEnabled = true; slide.sprite.events.onInputDown.add(function(sprite, pointer){ if( game.tweens.getAll().length == 0 ){ if( this.selected == -1 ) { this.selected = parseInt( pointer.x / this.slideWidth ); enter.animate(); } else { this.selected = -1; enter.reset(); } } }, this); var mask = game.add.graphics(0, 0); var mask = game.add.graphics(( this.slideWidth * key ) + this.stageWidth, 0); mask.beginFill(0xffffff); mask.drawRect(0,0,this.stageWidth - (this.slideWidth * key),this.stageHeight); mask.endFill(); slide.sprite.mask = mask; if(key == 0){ slide.logo1 = game.add.sprite(game.world.centerX/2, game.world.centerY, 'logoAdi'); slide.logo1.anchor.set(0.5, 0.5); /*slide.logo1.y = this.stageHeight; slide.logo1.alpha = 0;*/ slide.logo1.inputEnabled = true; slide.logo1.href = slide.href; slide.logo1.events.onInputDown.add(function(sprite){ if(sprite.alpha == 1){ location.href = sprite.href; } }, this); slide.logo2 = game.add.sprite(game.world.centerX + game.world.centerX/2, game.world.centerY, 'logoEmpresa'); slide.logo2.anchor.set(0.5, 0.5); /*slide.logo2.y = this.stageHeight; slide.logo2.alpha = 0;*/ slide.logo2.inputEnabled = true; slide.logo2.href = slide.href2; slide.logo2.events.onInputDown.add(function(sprite){ if(sprite.alpha == 1){ location.href = sprite.href; } }, this); }else{ slide.logo = game.add.sprite(game.world.centerX, game.world.centerY, 'logo' + key); slide.logo.anchor.set(0.5, 0.5); slide.logo.y = this.stageHeight; slide.logo.alpha = 0; slide.logo.inputEnabled = true; slide.logo.href = slide.href; slide.logo.events.onInputDown.add(function(sprite){ if(sprite.alpha == 1){ location.href = sprite.href; } }, this); } } this.enter(); }; Enter.prototype.enter = function(){ var tweens = []; for(key in this.slides){ var slide = this.slides[key]; var finalSpriteX = 0; tweens.push(game.add.tween(slide.sprite).to( { x: finalSpriteX }, 4000 - (250 * key), Phaser.Easing.Exponential.Out, false, 750 * key )); var finalMaskX = this.slideWidth * key; tweens.push(game.add.tween(slide.sprite.mask).to( { x: finalMaskX, }, 4000 - (250 * key), Phaser.Easing.Exponential.Out, false, 750 * key )); } for(t in tweens){ tweens[t].start(); } }; Enter.prototype.reset = function(){ var tweenDuration = 1000; for(key in this.slides){ var slide = this.slides[key]; var finalSpriteX = 0; game.add.tween(slide.sprite).to( { x: finalSpriteX }, tweenDuration, Phaser.Easing.Exponential.Out, true, parseInt( tweenDuration / 4 ) ); var finalMaskX = this.slideWidth * key; game.add.tween(slide.sprite.mask).to( { x: finalMaskX, }, tweenDuration, Phaser.Easing.Exponential.Out, true, parseInt( tweenDuration / 4 ) ); var finalMaskW = this.slideWidth; game.add.tween(slide.sprite.mask.graphicsData[0].points).to( { 2: finalMaskW }, tweenDuration, Phaser.Easing.Exponential.Out, true, parseInt( tweenDuration / 4 ) ); if(key == 0){ /*game.add.tween(slide.logo1).to( { alpha: 0 }, parseInt( tweenDuration / 2 ), Phaser.Easing.Exponential.Out, true ); game.add.tween(slide.logo2).to( { alpha: 0 }, parseInt( tweenDuration / 2 ), Phaser.Easing.Exponential.Out, true ); game.add.tween(slide.logo1).to( { y: 0 - slide.logo1.height }, parseInt( tweenDuration / 2 ), Phaser.Easing.Exponential.InOut, true ); game.add.tween(slide.logo2).to( { y: 0 - slide.logo2.height }, parseInt( tweenDuration / 2 ), Phaser.Easing.Exponential.InOut, true );*/ }else{ game.add.tween(slide.logo).to( { alpha: 0 }, parseInt( tweenDuration / 2 ), Phaser.Easing.Exponential.Out, true ); game.add.tween(slide.logo).to( { y: 0 - slide.logo.height }, parseInt( tweenDuration / 2 ), Phaser.Easing.Exponential.InOut, true ); } } }; Enter.prototype.animate = function() { var tweenDuration = 1200; for(key in this.slides){ var slide = this.slides[key]; if ( key == this.selected ) { finalSpriteX = 0; finalMaskX = 0; finalMaskW = this.stageWidth; game.add.tween(slide.sprite).to( { x: finalSpriteX }, tweenDuration, Phaser.Easing.Exponential.Out, true ); game.add.tween(slide.sprite.mask).to( { x: finalMaskX, }, tweenDuration, Phaser.Easing.Exponential.Out, true ); game.add.tween(slide.sprite.mask.graphicsData[0].points).to( { 2: finalMaskW }, tweenDuration, Phaser.Easing.Exponential.Out, true ); if(key == 0){ /*slide.logo1.bringToTop(); slide.logo1.alpha = 0; slide.logo1.y = this.stageHeight - slide.logo1.height; game.add.tween(slide.logo1).to( { alpha: 1 }, parseInt( tweenDuration / 2 ), Phaser.Easing.Exponential.Out, true ); game.add.tween(slide.logo1).to( { alpha: 1 }, parseInt( tweenDuration / 2 ), Phaser.Easing.Exponential.Out, true ); slide.logo2.bringToTop(); slide.logo2.alpha = 0; slide.logo2.y = this.stageHeight - slide.logo2.height; game.add.tween(slide.logo2).to( { y: game.world.centerY }, parseInt( tweenDuration / 2 ), Phaser.Easing.Exponential.Out, true ); game.add.tween(slide.logo2).to( { y: game.world.centerY }, parseInt( tweenDuration / 2 ), Phaser.Easing.Exponential.Out, true );*/ }else{ slide.logo.bringToTop(); slide.logo.alpha = 0; slide.logo.y = this.stageHeight - slide.logo.height; game.add.tween(slide.logo).to( { alpha: 1 }, parseInt( tweenDuration / 2 ), Phaser.Easing.Exponential.Out, true ); game.add.tween(slide.logo).to( { y: game.world.centerY }, parseInt( tweenDuration / 2 ), Phaser.Easing.Exponential.Out, true ); } } else { if ( key < this.selected ) { finalSpriteX = slide.sprite.x - ( this.slideWidth * this.selected ); finalMaskX = slide.sprite.mask.x - ( this.slideWidth * this.selected ); } else { finalSpriteX = slide.sprite.x + ( this.slideWidth * ( this.slides.length - this.selected - 1) ); finalMaskX = slide.sprite.mask.x + ( this.slideWidth * ( this.slides.length - this.selected - 1 ) ); } game.add.tween(slide.sprite).to( { x: finalSpriteX }, tweenDuration, Phaser.Easing.Exponential.Out, true ); game.add.tween(slide.sprite.mask).to( { x: finalMaskX }, tweenDuration, Phaser.Easing.Exponential.Out, true ); } } }; I commented the animation parts because I can't make work the link for "logo2"...Any help would be appreciated. Link to comment Share on other sites More sharing options...
Recommended Posts