Advertise here




Advertise here

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Slider Puzzle - iOS Game Tutorial 1

ShmoopiShmoopi Posts: 213Tutorial Authors, Registered Users
edited May 2012 in iPhone SDK Tutorials
Welcome Everybody! This tutorial is the first in a three part series that will be teaching you how to create a simple iOS game from start to finish. This tutorial series will include animations, graphics, sounds, save games, timers, and settings.

The game we are going to develop is a simple slider puzzle - based on the code by: Josh. We will start with the basic layout of the game in this first tutorial, then move onto incorporating sound effects in the second, and finally incorporate in-app settings in the third and final tutorial. So without further ado, let's get started!

Check it out here: Shmoopi

Thanks for reading! Let me know if you have any comments, questions, or concerns!
Post edited by Shmoopi on
[SIGPIC][/SIGPIC]<br />
<a href="http://www.shmoopi.net/"; target="_blank">Check Out The Official Shmoopi LLC Website</a><br />
<a href="http://itunes.apple.com/us/app/iprivatebrowser/id314281847?mt=8"; target="_blank">iPrivateBrowser</a> | <a href="http:

Replies

  • samurlesamurle Posts: 254Registered Users
    edited February 2012
    Shmoopi wrote: »
    Welcome Everybody! This tutorial is the first in a three part series that will be teaching you how to create a simple iOS game from start to finish. This tutorial series will include animations, graphics, sounds, save games, timers, and settings.

    The game we are going to develop is a simple slider puzzle - based on the code by: Josh. We will start with the basic layout of the game in this first tutorial, then move onto incorporating sound effects in the second, and finally incorporate in-app settings in the third and final tutorial. So without further ado, let's get started!

    Check it out here: Shmoopi

    Thanks for reading! Let me know if you have any comments, questions, or concerns!

    Thanks, I've looked at this code before, and there is much room for improvement.

    Generally, sliding pieces should be square, and the image should not be distorted in anyway.
    The image should fit to the puzzle layout (which is always fixed), and not the other way around.

    I don't think the original code follows these basic rules.
  • ShmoopiShmoopi Posts: 213Tutorial Authors, Registered Users
    edited February 2012
    samurle wrote: »
    Thanks, I've looked at this code before, and there is much room for improvement.

    Generally, sliding pieces should be square, and the image should not be distorted in anyway.
    The image should fit to the puzzle layout (which is always fixed), and not the other way around.

    I don't think the original code follows these basic rules.

    Excellent points! I would agree with you about the square pieces and the image fitting the layout, both are things that can easily be fixed. I will definitely consider making those improvements in the next tutorial. Thank you for the feedback.
    [SIGPIC][/SIGPIC]<br />
    <a href="http://www.shmoopi.net/"; target="_blank">Check Out The Official Shmoopi LLC Website</a><br />
    <a href="http://itunes.apple.com/us/app/iprivatebrowser/id314281847?mt=8"; target="_blank">iPrivateBrowser</a> | <a href="http:
  • LarrySputnikLarrySputnik Posts: 14Registered Users
    edited April 2012
    Shmoopi wrote: »
    Excellent points! I would agree with you about the square pieces and the image fitting the layout, both are things that can easily be fixed. I will definitely consider making those improvements in the next tutorial. Thank you for the feedback.

    Newbie here; second post. I have been working with Josh's code for a while (thanks Josh!) and I can't seem to figure out the best way to loop it while adding new pictures. Any advice would be greatly appreciated. Also, is there a way to sign up for the next tutorial so that I know when it is posted?

    Cheers :cool:
    Business in the front, party in the back <br />
    My wife's book <a href="http://www.pciop.com"; target="_blank">www.pciop.com</a>
  • LarrySputnikLarrySputnik Posts: 14Registered Users
    edited April 2012
    Still working on it. I seem to find a new approach everyday that sounds like it might be better than the last, but nothing ends up working. The latest thing I have been trying is making a NSMutableArray of NSStrings and trying to figure out how to code it so that the cancelButton on the alertView triggers the next image in the array. Any thoughts?
    Business in the front, party in the back <br />
    My wife's book <a href="http://www.pciop.com"; target="_blank">www.pciop.com</a>
  • LarrySputnikLarrySputnik Posts: 14Registered Users
    edited April 2012
    A little help for a newbie would be great. Though I don't mind being the only poster here, it's nice and private. :cool:

    :mullet:
    Business in the front, party in the back <br />
    My wife's book <a href="http://www.pciop.com"; target="_blank">www.pciop.com</a>
  • AllahAllah Posts: 144Registered Users
    edited April 2012
    Still working on it. I seem to find a new approach everyday that sounds like it might be better than the last, but nothing ends up working. The latest thing I have been trying is making a NSMutableArray of NSStrings and trying to figure out how to code it so that the cancelButton on the alertView triggers the next image in the array. Any thoughts?

    Post some of the things you have tried and we might be able to help out.
  • LarrySputnikLarrySputnik Posts: 14Registered Users
    edited April 2012
    Yes! Thank you my friend. I'll start with my most recent thought process:

    What happens, no matter what I try, is the puzzle ends but I cannot remove the starter image from the view. I have managed to load the next image when the puzzle is over but it is underneath the image of the original first puzzle. :eek:

    Now:
    I figured I could build an NSMutableArray of the image files, and for lack of a better idea, I have decided to place the code for it in the viewDidLoad like this:
    - (void)viewDidLoad {

    self.view.backgroundColor = [UIColor purpleColor];

    self.tiles = [[NSMutableArray alloc] init];
    fileNames = [[NSMutableArray alloc]initWithObjects:@picture1.png, @picture2.png, @picture3.png, @picture4.png, nil];

    NSString *Pic = [fileNames objectAtIndex:0];
    [self initPuzzle:Pic];

    [super viewDidLoad];
    }

    Where NSString *Pic loads the first image. In the original code (from shmoopi tutorial) NSString *Pic = @picture1.png As you can see, I changed it. Now, I'm sure there is an error with my coding here, but I also want to show where I am working on code to recognize that the puzzle has been completed and that the objectAtIndex:0 needs to be removed and the next object in the index needs to be called.
    -(void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex
    {
    [self.fileNames removeObjectAtIndex:0];

    }

    :o
    Business in the front, party in the back <br />
    My wife's book <a href="http://www.pciop.com"; target="_blank">www.pciop.com</a>
  • LarrySputnikLarrySputnik Posts: 14Registered Users
    edited April 2012
    I mean, I know there is some obvious code missing from the array and the alert view that I posted, but I guess I'm making sure if, thus far, am I heading in the right direction at least? I have played around with an NSDictionary instead of an array, a loop, even just if-else statements. It just seems like there is more than one way to do what I want to do, but I can't seem to close the deal on any way that I try. Maybe with this latest one I can get a little help and stick with it to see it through.

    Also, I know there are a ton of you who have already used this code. In what ways have you added to it?
    Business in the front, party in the back <br />
    My wife's book <a href="http://www.pciop.com"; target="_blank">www.pciop.com</a>
  • LarrySputnikLarrySputnik Posts: 14Registered Users
    edited April 2012
    Ok, so I've given up on the NSMutableArray again. Now I am just working on the alertView to release the original pic and load a new one. How do I remove the completed picture? Nothing works. I tried releasing it from the view and it still won't go away. Any thoughts?
    - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch *touch = [touches anyObject];
    CGPoint currentTouch = [touch locationInView:self.view];

    Tiles *t = [self getPieceAtPoint:currentTouch];
    if( t != nil ){
    [self movePiece:t withAnimation:YES];
    if([self puzzleCompleted]){

    UIAlertView *message = [[UIAlertView alloc] initWithTitle:@You Won
    message:@Congratulations!
    delegate:self
    cancelButtonTitle:@New Puzzle
    otherButtonTitles:nil];

    [message show];
    [message release];
    }
    }
    return;
    }

    -(void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex
    {
    NSString *Pic = (@picture2.png);
    [self initPuzzle:Pic];

    [super viewDidLoad];
    }


    - (void)dealloc {
    [tiles release];
    [super dealloc];
    }
    Business in the front, party in the back <br />
    My wife's book <a href="http://www.pciop.com"; target="_blank">www.pciop.com</a>
  • LarrySputnikLarrySputnik Posts: 14Registered Users
    edited April 2012
    Seriously guys, I feel like you're all just watching me talk to myself as I work it out. Even just some silly banter and jokes at my expense would liven this thread up. And don't look at me sideways, I didn't start this thread, nor was I the first one to ask for help with this code... :cool:

    :p
    Business in the front, party in the back <br />
    My wife's book <a href="http://www.pciop.com"; target="_blank">www.pciop.com</a>
  • LarrySputnikLarrySputnik Posts: 14Registered Users
    edited April 2012
    I have decided to rename the NSString NSMutableString. That way I can just replace the NSMutableString with a new picture file when the "Next Puzzle" button is clicked. Still trying to learn how to write it correctly, but this seems like a better option than an array of pictures. Thoughts?
    Business in the front, party in the back <br />
    My wife's book <a href="http://www.pciop.com"; target="_blank">www.pciop.com</a>
  • beckabecka Posts: 49Registered Users
    edited April 2012
    awesome tutorial! i never thought it would be easy. when are you going to post the next part? :)
    add me! i would be delighted! <img src="http://www.iphonedevsdk.com/forum/images/smilies/biggrin.gif"; border="0" alt="" title="Big Grin" class="inlineimg" />
  • LarrySputnikLarrySputnik Posts: 14Registered Users
    edited April 2012
    becka wrote: »
    awesome tutorial! i never thought it would be easy. when are you going to post the next part? :)

    Perfect! This is exactly what this thread needed. If no one responds to a hot chick like becka then I NEVER had a chance at getting some help. :D Welcome to the thread becka. If you happen to get any useful info on when the next part is coming be sure to stop back here to fill me in.

    The name's Sputnik and I'm the last man standing with the half-finished slider puzzle. :rolleyes:
    Business in the front, party in the back <br />
    My wife's book <a href="http://www.pciop.com"; target="_blank">www.pciop.com</a>
  • ShmoopiShmoopi Posts: 213Tutorial Authors, Registered Users
    edited April 2012
    becka wrote: »
    awesome tutorial! i never thought it would be easy. when are you going to post the next part? :)

    Just posted tutorial #2. Check it out Here!
    [SIGPIC][/SIGPIC]<br />
    <a href="http://www.shmoopi.net/"; target="_blank">Check Out The Official Shmoopi LLC Website</a><br />
    <a href="http://itunes.apple.com/us/app/iprivatebrowser/id314281847?mt=8"; target="_blank">iPrivateBrowser</a> | <a href="http:
  • beckabecka Posts: 49Registered Users
    edited April 2012
    Perfect! This is exactly what this thread needed. If no one responds to a hot chick like becka then I NEVER had a chance at getting some help. :D Welcome to the thread becka. If you happen to get any useful info on when the next part is coming be sure to stop back here to fill me in.

    The name's Sputnik and I'm the last man standing with the half-finished slider puzzle. :rolleyes:

    hello there sputnik! thank you :)
    Shmoopi wrote: »
    Just posted tutorial #2. Check it out Here!

    ooh! will check it out! thanks a lot ;)
    add me! i would be delighted! <img src="http://www.iphonedevsdk.com/forum/images/smilies/biggrin.gif"; border="0" alt="" title="Big Grin" class="inlineimg" />
  • LarrySputnikLarrySputnik Posts: 14Registered Users
    edited May 2012
    becka wrote: »
    hello there sputnik! thank you :)



    ooh! will check it out! thanks a lot ;)

    Cheers! ;)

    Now if I can only figure out this damn slider puzzle...:mad:
    Business in the front, party in the back <br />
    My wife's book <a href="http://www.pciop.com"; target="_blank">www.pciop.com</a>
  • spagosxspagosx Posts: 2New Users
    edited May 2012
    I'm trying to figure out how to handle retina display...
  • LarrySputnikLarrySputnik Posts: 14Registered Users
    edited May 2012
    spagosx wrote: »
    I'm trying to figure out how to handle retina display...

    What's retina display?
    Business in the front, party in the back <br />
    My wife's book <a href="http://www.pciop.com"; target="_blank">www.pciop.com</a>
  • spagosxspagosx Posts: 2New Users
    edited May 2012
    When i load on retina display the image isn't cutter well.. also if I load a doubled png for retina display tiles obviously get twice bigger... I'm working on iPad..
Sign In or Register to comment.