Re: Parallax Scrolling

[Kyle King]

Well done! Very cool. Not a lot of code either. Hopefully someone will  
sort out the gap bug (I'm becoming more and more convinced it is, in  
fact, a bug).

If your game ever finds its way to the shoebox, you should post a link  
here. I love those scrolling games.

Kyle

On Mar 22, 2009, at 10:30 PM, Michael Shapiro wrote:

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