Forums » Help » Animated background on start screen

Hi,

I am trying to create a start screen with a repetitive scrolling background. What do you think its the best approach?

Right now i am extending the game class to create a start screen like this:

StartScreen = ig.Game.extend({
           // instructText: new ig.Font('media/04b03-small.font.png'),
            background: new ig.Image('media/forest.png'),
            init: function(){
                ig.input.bind(ig.KEY.SPACE, 'start');
            },
            update: function(){
                if(ig.input.pressed('start')){
                    ig.system.setGame(MyGame);
                }
                this.parent();
            },
            draw: function(){
                this.parent();
                this.background.draw(0,0);
            }
        });

create two image objects, draw one on top of the other, looping them.

so one will start at y=0, the other off-screen at y = -height. then, for each one, you'll increment y++ each update/whatever speed you want, since once per tick would be a pretty fast scroll. Once y= height of screen, y = -height, placing it above the other.

@Rybar

Just found a plug in that works
http://impactjs.com/forums/help/main-menu-w-parallax-scrolling/page/1#post20575

But your solution seems simpler i will try it either.

Thanks