I didn't know parallax scrolling had a name! Clever stuff.

Here's a shoes implementation of the parallax scrolling example on Wikipedia. I'm not sure if this will display correctly on all platforms since I can't quite figure out why I get a gap in the scroll when I change the <= 5 to <= 0. Perhaps a deeper bug lurks there. Not really sure.

Hopefully this is enough to get you started anyway:

Shoes.app :width=>320, :height=>200 do
        def parallax img, z
                iw = [width, width*z].max
layers = [image(img, :top=>0, :left=>0), image(img, :top=>0, :left=>iw)]
        
                animate 24 do
                        layers.each do |layer|
                                layer.move layer.left-z, 0
                                layer.move iw, 0 if layer.left+iw <= 5
                        end
                end
        end
        
        wiki = 'http://upload.wikimedia.org/wikipedia/commons'
        parallax "#{wiki}/f/f5/Parallax-scroll-example-layer-0.gif", 0
        parallax "#{wiki}/0/09/Parallax-scroll-example-layer-1.gif", 1
        parallax "#{wiki}/0/0a/Parallax-scroll-example-layer-2.gif", 2
        parallax "#{wiki}/8/85/Parallax-scroll-example-layer-3.gif", 3
end


On Mar 22, 2009, at 1:16 AM, Michael Shapiro wrote:

Hi Folks,
For fun, I'd like to build a little side-scrolling game kit for shoes.

Has any attempted to implement parallax scrolling? (http://en.wikipedia.org/wiki/Parallax_scrolling )

--Mike

Reply via email to