Re: Parallax Scrolling

[Michael Shapiro]

That is a kickass implementation, thanks Kyle!

I've added in keyboard support and a little Sonic The Hedgehog ;)
I get that couple-pixel gap problem too, very strange.

class Parallax
  def initialize(slot, img, z)
    @iw = [slot.width, slot.width*z].max
    @layers = [slot.image(img, :top=>0, :left=>0),  
slot.image(img, :top=>0, :left=>@iw)]
    @z = z
  end

  def right
    @layers.each do |layer|
      layer.move layer.le...@z, 0
      layer.move @iw, 0 if layer.le...@iw <= 5
    end
  end

  def left
    @layers.each do |layer|
      layer.move layer.le...@z, 0
      layer.move -...@iw, 0 if layer.left+layer.wid...@iw >= @iw
    end
  end
end

Shoes.app :width=>320, :height=>200 do
  $app = self

  def draw_star(degrees=0)
    star_radius = 20
    $app.fill blue
    @star.remove unless @star.nil?
    $app.rotate degrees
    @star = $app.star(width/2-star_radius/2, height-star_radius-20,  
10, star_radius, star_radius/2)
  end

  def right
    @layers.each do |l|
      l.right
    end
    draw_star(-45)
  end

  def left
    @layers.each do |l|
      l.left
    end
    draw_star(45)
  end

  keypress do |key|
    case key
      when :right : right
      when :left : left
    end
  end


  wiki = 'http://upload.wikimedia.org/wikipedia/commons'
  @layers = [
    Parallax.new(self, "#{wiki}/f/f5/Parallax-scroll-example- 
layer-0.gif", 0),
    Parallax.new(self, "#{wiki}/0/09/Parallax-scroll-example- 
layer-1.gif", 1),
    Parallax.new(self, "#{wiki}/0/0a/Parallax-scroll-example- 
layer-2.gif", 2),
    Parallax.new(self, "#{wiki}/8/85/Parallax-scroll-example- 
layer-3.gif", 3)
  ]
  draw_star(0)
end

--Mike

On Mar 22, 2009, at 1:12 PM, Kyle King wrote:

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