How do I make a side-scrolling iPhone app? - iphone

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...

If you're writing a game, you may benefit from a lot of the features given to you by engines such as Cocos2D.

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?

If the image being side-scrolled is large, I'd suggest scrolled view while taking advantage of CATiledLayer. See the WWDC10 Session 104 video and the "Tiling" sample code.
BTW, there is nothing in the Apple docs that seem to prejudge the use of scroll views for utility or menus.

Are you trying to use a UIScrollView? If so, just set your scrollView's content size to something wider than the screen. For example:
self.scrollView.contentSize = CGSizeMake(640, 480);

You should use a UIScollView (http://www.iphonedevsdk.com/forum/iphone-sdk-tutorials/3393-uiscrollview-tutorial.html). Or am I missing the point?

Just make the main view wider than the screen and change the bounds accordingly to show a different portion of the main view. This assumes your main view does have some kind of a limited width. It's slightly trickier if that view just goes forever. In that case you change the bounds and draw the newly revealed content.
If this doesn't make sense then I think you need to reword your question or do some experimentation to narrow down what you're asking.

Take a look at Cocos2D for the iPhone which also includes a choice of 2 collision engines, chipmunk and box2d
I can also recommend the oreilly book iPhone game development, which if you are new to game development will teach you how to roll a basic game framework

Related

Animating Background image /layer in iPhone

I started working on sample application, where I have some objects(images) which are animated on a UIView. I would like to have a background image which also should animate along with these objects.Two animations should happen at the same time. The background image occupies all the screen space and on the top of this the other images should be animated. Could someone guide me to achieve this.
I tried the following things mentioned in the link below.
for (int i = 0; i < IMAGE_COUNT; i++)
[_imageArray addObject:[UIImage imageNamed:[NSString stringWithFormat:#"D%d.png", i]]];
_animatedImages = [[UIImageView alloc]
initWithFrame:CGRectMake(
(SCREEN_WIDTH / 2) - (IMAGE_WIDTH / 2),
(SCREEN_HEIGHT / 2) - (IMAGE_HEIGHT / 2) + STATUS_BAR_HEIGHT,
IMAGE_WIDTH, IMAGE_HEIGHT)];
_animatedImages.animationImages = [NSArray arrayWithArray:_imageArray];
_animatedImages.animationDuration = 1.0;
_animatedImages.animationRepeatCount = -1;
The iPhone Game Background as Video or Animated Image?
But two animations are happening independently. I would like to animate the objects on the top of background image which also need to be animated.If this is not possible can I use layers or some other object to achieve this.Please suggest.
It seems like `UIImageView' provides no way to control the time the animation begins.
There is such an API, but it's in lower level CoreAnimation framework (which UIImageView must use in its implementation...)
You could re-implement you own UIImageView animation.
Then, to set different animations with relative timing, see "How can I chain Core Animations for different Layers one after the other?"
and How to group two CABasicAnimation animations and kick them off at the exact same time?.
As you don't need an offset between all your layers animations but want them to run at the same time, you should create a CAAnimationGroup, and put all of them with the same beginTime.
The CAMediaTiming protocol (implemented by CAAnimation) is pretty baldy documented - but this is the part you're interested in : timing your Core Animations - Check this post for some API clarification

Is it good choice to move a Sublayer around a view using UIPanGestureRecognizer?

I have a CALayer and as sublayer to this CALayer i have added an imageLayer which contains an image of resolution 276x183.
I added a UIPanGestureRecognizer to the main view and calculation the coordinates of the CALayer as follows:
- (void)panned:(UIPanGestureRecognizer *)sender{
subLayer.frame=CGRectMake([sender locationInView:self.view].x-138, [sender locationInView:self.view].y-92, 276, 183);
}
in viedDidLoad i have:
subLayer.backgroundColor=[UIColor whiteColor].CGColor;
subLayer.frame=CGRectMake(22, 33, 276, 183);
imageLayer.contents=(id)[UIImage imageNamed:#"A.jpg"].CGImage;
imageLayer.frame=subLayer.bounds;
imageLayer.masksToBounds=YES;
imageLayer.cornerRadius=15.0;
subLayer.shadowColor=[UIColor blackColor].CGColor;
subLayer.cornerRadius=15.0;
subLayer.shadowOpacity=0.8;
subLayer.shadowOffset=CGSizeMake(0, 3);
[subLayer addSublayer:imageLayer];
[self.view.layer addSublayer:subLayer];
It is giving desired output but a bit slow in the simulator. I have not yet tested it in Device. so my question is - Is it OK to move a CALayer containing an image??
Yes, it is OK to move a CALayer containing an image.
If all you want to do with the panning gesture is move the image, then instead of updating the whole frame, you should just update the layer's position property. Like thus:
- (void)panned:(UIPanGestureRecognizer *)sender {
subLayer.position=CGPointMake([sender locationInView:self.view].x, [sender locationInView:self.view].y);
}
Two things:
First, you can't draw ANY conclusions based on the performance of the simulator. Some things on the simulator are an order of magnitude faster than on a device, and other things are significantly slower. Animation is especially a mixed bag.
If you're doing performance-critical work, test it on the device, early and often.
Second, you can certainly animate a layer using a gesture recognizer, but that is an awfully round-about way to do it. Gesture recognizers are designed to work on views, and it's much easier and cleaner to tie the recognizer to a subview rather than a sub layer.
One of the big problems you will have with using a layer is hit-testing. If you let go of your image, then try to drag it some more, you'll have to have the gesture on the containing view, take the gesture coordinates and do hit testing on the layer. Ugh.
Take a look at the gesture based version of the touches sample app from Apple. It shows you how to cleanly move UIView objects around the screen using gestures.
Note that you can create a view that has custom layer content, and drag that around.

iOS: Creating tip / help popups

Are there any built in, open source, or tutorials for creating a reusable easy to use popup for use with in game-help.
Essentially I would like to, on first run of a game, show popup tips / help that "point to" various on screen objects to help a user orient themselves with the game.
Update: Here is an example of how I ultimately want it to look / behave although I don't need it that generic but as close as possible would be good
I like those: https://github.com/chrismiles/CMPopTipView.
Nice and easy to set up.
Essentially what you need is a custom view.
You cannot use Apple's UIAlertView since its purpose is very different from what you are looking for.
I don't know what are your specific needs, but you may use a simple UILabel:
CGRect ref = objectToAddress.frame;
UILabel *tip = [[UILabel alloc] initWithFrame:CGRectMake(ref.x+ref.width,
ref.y+ref.height,
width,
height)];
[tip setText:messageToShow];
[self.view addSubview:tip];
[tip release];
where width and height are the dimensions of the tip you want to show and messageToShow is the message you want to display.
You can, of course, customize your UILabel as you like, changing font or background color. Check the reference for additional informations.
EDIT:
You may take a look at a possible popover implementation for iPhone: WEPopover. On the iPad you can use directly Apple's UIPopoverController
What I've done is to create two functions
- (void) showOverlay: (BOOL) show withMessage: (NSString*) message
{
if(show)
{
// I create or load a UIView with labels, etc, and with an alpha of 0.6/07
// give it a tag for later dismissal
overlay.tag = tag; // any arbitrary value
// add as subview
[self.view addSubview: overlay];
}
else
{
// hide the view
UIView *overlay = [self.view viewWithTag: tag];
[overlay removeFromSuperview];
}
}
Then I have a hide overlay function
- (void) hideOverlayInSecs: (NSInterval) time
{
[self performSelector: #selector(hideOverlay) withObject: nil afterDelay: time];
}
Then you can write a wrapper function to show / dismiss it for varying durations
[self showOverlay: YES withMessage: #"help tip"];
[self hideOverlayInSecs: 2];
In my App, the tips were fairly static, so I created an tip image using my favorite image editor, and then simply created a UIImageView with the tip image, and then added that as a subview to the current view, making sure to place it on top of other views.
It worked out pretty nicely, but again, my tips are fairly static.
If you want to display them only on the first run through, you'll need to create a BOOL that is saved in NSUserDefaults or something.
How about this?
I wrote this myself. It's pretty simple and probably what you are looking for.
Popup any UIView instance on top or bottom then disappear after a few seconds.
https://github.com/SaKKo/SKTipAlertView
Hope you find it useful. cheers,

How to add UITextView in CCLayer or CCScene in cocos2d-iphone

I want to add an instruction page where instruction written in UITextView. How to do it in Cocos2d. Because this is a game page and I want to take menu transaction effects of cocos2d like CCTransitionRadialCCW.
I wrote this code
UITextView *textView = [[UITextView alloc] initWithFrame:CGRectMake(10,60, 300,360)];
textView.backgroundColor = [UIColor clearColor];
textView.text = #"I am First enemy";
[textView setEditable:NO];
[[[CCDirector sharedDirector]openGLView]addSubview:textView];
But there is problem that it is added to the main CCDirector page, while I am writing this code
// [[[CCDirector sharedDirector]openGLView]addSubview:textView];
// replaced by :-
[self addChild:textView];
It gives me error. Please tell me how to add UITextView in CCScene or CCLayer.
I know that [self addChild:(CCNode *)node];
addChild: method needs CCNode so please tell me that how can typecast or convert UITextView object to CCNode.
If there is some alternate option for that please tell me .Like CCLabelTTF is alternate for UILabel, is there alternate for UITableView in Cocos2d-iphone.
Thanks in advance
Have a look at CCTableView: http://www.cocos2d-iphone.org/archives/943.
Combining UIKit and Cocos2D in such a way that you have the interleaving you have mentioned is likely to be very difficult, because everything done in Cocos2D is drawn in one OpenGL view. When you add a UIView, you can only add it in front of or behind Cocos2D's view.
No matter which way you're adding the UIView to cocos2d, it will not be animated by the cocos2d transition effects because simply speaking the UIView objects exist outside the OpenGL view that cocos2d uses (and animates in the case of transitions).
Adding UIViews to a cocos2d view as in your first example code is correct. But in order to position the view like a node, you should consider using the CCUIViewWrapper.

MPMoviePlayer Audio Album art

I am streaming an MP3 file using MPMoviePlayer, and I would like to have an image displayed instead of the default Quicktime logo in the background.
I found out a way to have an image overlay the player, but the problem with that, is you have to tap outside the image to get the player controls to appear. And when they do appear, they are underneath the image.
Does someone know how to do this?
Thanks,
John
backgroundColor is deprecated, and diving into private View structures is dangerous. This worked fine for me:
UIImageView *coverImageView = [[UIImageView alloc] initWithImage:coverImage];
coverImageView.contentMode = UIViewContentModeScaleAspectFit;
coverImageView.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;
coverImageView.frame = moviePlayerController.view.bounds;
[moviePlayerController.view addSubview:coverImageView];
Most every app on the iPhone is made of a hierarchy of views. You could go up to the top root node of the movie player and walk down the child views recursively and set the hidden value to YES until you find the right item, then insert your UIImageView below that item. That way, the controls stay on top and still respond to user inputs.
The risk you run is if Apple changes the MPMoviePlayer UI and shuffles the view hierarchy, but you'll probably have lots of advance notice and can patch your app to allow for the new layout.
There is a question as to whether this is kosher for appstore apps, but many current apps (especially camera/picture-taking ones) are doing it to get rid of standard window elements.
Use AVAudioPlayer and implement your own player UI.
it will work check this
MPMoviePlayerController *moviePlayerController=[[MPMoviePlayerController alloc] initWithContentURL:theURL];
moviePlayerController.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:#"Default.png"]];