Search code examples
iphoneside-scroller

How do I make a side-scrolling iPhone app?


I am working on a side-scrolling iPhone app, and I have every resource, except the actual side scrolling part! How do I make an app so that it side-scrolls? To be more specific, I want the view of the app to scroll when a UIImageview(player) hits the right/left border of the screen.

<:EDIT:>
I am extremely sorry for all of this confusion! All I am making is a SAMPLE iPhone app only to be used in the simulator. In the app, I have a UIImaageview that moves when you touch arrow UIImageviews. PLEASE NOTE THAT ALL INFORMATION SAID BEFORE THIS SENTENCE WORKS PERFECTLY! Now, my problem is that I want the UIView to scroll only ONE picture(this means it doesn't go forever ;)). I have tried using a UIScrollView, but that didn't work. Finally, I am not planning to use Cocos2D or any other game engine besides a basic UIview. This is only a test app, not a coding extravaganza...


Solution

  • Start with a view-based application template so you can get the gist of how this works. Later you can integrate with your existing code.

    Create a seamless background image 320 x 960 pixels, named "seamless.png"

    Add this ivar to your view controller .h file

    UIImageView *bg;
    
    @property (nonatomic, retain) UIImageView *bg;
    

    In your .m file add these #defines before the @implementation line, the @synthesize after.

    #define kUpdateRate (1.0 / 60.0)
    #define kMoveY (3.0)
    #define kTopY (0.0)
    #define kBottomY (480.0)
    @synthesize bg;
    

    Add this method.

    -(void)scrollView; {
     float oldY = self.bg.center.y + kMoveY;
     float newY = oldY;
    
     if (oldY > kBottomY) {
      newY = kTopY;
      }
    
     self.bg.center = CGPointMake(self.bg.center.x, newY);
    }
    

    Add this to your viewDidLoad method.

     self.bg = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"endless.png"]];
     [self.view addSubview:self.bg];
     self.bg.center = CGPointMake(self.bg.center.x, kTopY);
    
     [NSTimer scheduledTimerWithTimeInterval:kUpdateRate target:self selector:@selector(scrollView) userInfo:nil repeats:YES];
    

    When you run the app, you should have a nice scrolling background.

    To sum up what happens: A timer is set up to repeatedly call scrollView:

    There, the image is moved downwards until it reaches a predefined point (kBottomY), at which time its position is jumped back up to the top (kTopY) and it starts over again.

    You can customize it to only scroll when you want it to or scroll the other way on your own, right?