Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

different href.location in two differents sprites?? [Newbie incoming...]


Sephy
 Share

Recommended Posts

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

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...