SKScrollView: SKSpriteKit ScrollView for Games Levels

Hey guys how are you doing? Hope you are doing great.

I have a sample project to share. Well, as usual, I wanted to do something and then search around and most of available solution is way too complicated or not to my liking. So I MAKE ONE MYSELF. YAYYYYYYY xD Great way to spend my Sunday evening with a cuppa coffee.

SKSpriteKit: How to fill SKScene background with a Texture? (Code Snippet)

Yo guys.

Just submitted my latest iOS game. Check out the demo video here: FreakOut - Tribute to Breakout (iOS Game)

Anyways, I am updating one of my apps - Particle X to include the SpriteKit support. One thing that I need is to put a background texture to the SKScene background. In a normal UIView, we can simply specify self.view.backgroundColor = [UIColor colorWithPatternImage:yourUIImageHere]; and iOS will repeat that texture throughout the UIView. Which is cool.

But unfortunately there is no such method in SKScene. 

How To: SKLabelNode Border Outline Quick Hack

Hey guys.

Today I would like to share you a simple hack on SKLabelNode. Since it is a simple snippet, there will be no project to download.

I am making my latest game (FreakOut) and was in need of SKLabelNode with outline. There are some 3rd party codes but I just want a simple and quick hack for it. So I made up this method:

Atari Online Voice Synthesizer

WAZZZUUPPPPP

This is not a tutorial. But I have something cool for you. See I am in the making of my 5th iOS Game, then in need of some 8 bit voice. Freesound.org, gives me some. But I need to have it say a certain customized words. So I went on and search for the Atari Simulator for Mac. Found some, but I can't figure out how the heck do I install the speech simulator.

Upon searching further I encountered this cool online Voice Synthesizer that sounds exactly like the one I want - Atari version! So without further delay here is:

Multiline SKLabelNode? Hell Yes Please XD

Woah. Another Noobies Tutorial yayyyyyy....

Apple, naughty Apple. You made SpriteKit and SKLabelNode, but not make multiline labelnode. This is supposed to be expected!! OMG!! UILabel has multiline function, why not SKLabelNode?

Ok, lets not get crazy. Relax I am here to solve your woes.

How To: Create a Dynamic "More Apps..." Page & How to Customize UITableView Cells

BOO!!

WTF man. This short movie is super scary. I hope they make it into a longer one. It is called "Lights Out". You can watch it here:

iOS: Designing Particles with CAEmitterLayer / CAEmitterCells

Since iOS5, iOS incorporates an easy way to create particles in your app.

This is good news, since we no longer need to delve into the complicated world of
OpenGLES or cocos2d or other engine.

However, hard coding particles can be a pain since there are quite many parameters
to play with. I wanted to incorporate this particle system into my old game - Blast The Droids,
and while playing with it, I find I am stuck in the "change one parameter, and execute" loop.
It takes hours(!) to design a simple explosion.

How To: Make Custom iOS Number Keyboard on iPad

OMG I just submitted my latest app. XD


So today, I am going to tutor wonderful programmers to make a custom UIKeyboard buttons. In particular, we are making numbers keyboard for iPad only. As we know, iPads don't have a "numbers only" keyboard. Since iPad is like a PC really and generally users must be provided with full keyboard. But on some apps, surely we want to limit input only to numbers. So here's what it's gonna look like.

Ugly? Well, I leave that part for you to make it pretty then. I am no artist. ;)

As noobs, we don't need to go into actually customizing the UIKeyboard (because that probably be illegal and also it is probably too complicated for us, noobs) So how do we accomplish things the easy way? CHEAT! OF course!

Hahah!

Firstly, what we need to do is design the keyboard by using a single UIView and UIButtons. You can make your own custom button images and apply it. But for me, I am going to use UIButton dynamic images that are created on the fly. Ok sue me I am lazy to draw button images. :P

We are going to use the same custom method in PREVIOUS TUTORIAL (with a little modifications) to create these buttons so that they appear "nice" in all devices and in all resolutions!  I am not going to delve into making these dynamic UIButton images (refer prev tutorial for that), but rather concentrate on the functionality of it instead.

Now, each UIButtons have unique functions, so we need to id them using tag property and link all of them to a single method. For my case, I simply put the button tags from 11 - 22 (a total of 12 buttons). There is also a "Done" button to dismiss the keyboard but we'll get to it later. Below is a picture of where to assign the tags.

 Once you tagged all UIButtons with unique numbers (it can be any numbers really, your choice), declare a UIView as an IBOutlet for the custom keyboard:

@interface ViewController : UIViewController {

 IBOutlet UIView *customKeyboard;

}

@property (nonatomic, retain)  UIView *customKeyboard;

Make sure to synthesize it and connect the keyboard UIView that you designed earlier.

Next, implement 2 methods:

-(IBAction)keysTapped:(id)sender;

-(IBAction)dismissKeyboard:(id)sender;

Link keysTapped to all the keyboard buttons (except Done button). And link dismissKeyboard to the Done button.

Now here's the trick. When we tap on any UITextField, normally a standard Keyboard will appear. To override the standard keyboard, we make use of UITextField's property inputView and points it to our custom keyboard.

But how do we do this efficiently? What if we have 100 UITextFields? Do we need to write 100 lines of codes to point all UITextFields to our custom keyboard? No of course (but you thought of that didn't you, you noobs you :D)

Smart way to do it is to ITERATE through subviews of our viewcontroller and if we find UITextFields, then assign it. Here's the code:

for(UIView *v in [self.view subviews]) {

         if ([v isKindOfClass:[UITextField class]]) {

             UITextField *tmp = (UITextField *)v; // typecasting so that we can use inputView property

             tmp.inputView = customKeyboard; // here we assign it

         }

}

5 lines of codes! BOOM!! No we're not done. :P

NOTE: We can use for(UIView *v in [self.view subviews]) { } to Iterate through any objects in our viewController for any other purpose too!

Ok now if we run the app, whenever we tap on any textfield, our custom keyboard will pops up from the bottom automatically (like default keyboard)! But if you tap on any buttons, it will do nothing. So how do we point the keys to input to the active uitextfield?

We are going to need to make a custom method to tell us which textfield is active. Enter the following method:

- (UIView *)findFirstResponder:(UIView *)view {
    
    if ([view isFirstResponder]) return view; // Base case
    
    for (UIView *subView in [view subviews]) {
        if ([subView isFirstResponder]) return subView; 
    }
    
    return nil;
}

The key property is "isFirstResponder". Again we make use of the iteration loop to find out who is the first responder (ie. the active control) and return that view to the caller. Now we can write the keyTapped method!

-(IBAction)keysTapped:(id)sender {
    UIButton *tmp = (UIButton*)sender;
    
    UITextField *inputTo = (UITextField *)[self findFirstResponder:self.view];
    
    int wat = tmp.tag;
    
    switch (wat) {
        case 11:
            inputTo.text = [NSString stringWithFormat:@"%@1", inputTo.text];
            break;
        case 12:
            inputTo.text = [NSString stringWithFormat:@"%@2", inputTo.text];
            break;
        case 13:
            inputTo.text = [NSString stringWithFormat:@"%@3", inputTo.text];
            break;
        case 14:
            inputTo.text = [NSString stringWithFormat:@"%@4", inputTo.text];
            break;
        case 15:
            inputTo.text = [NSString stringWithFormat:@"%@5", inputTo.text];
            break;
        case 16:
            inputTo.text = [NSString stringWithFormat:@"%@6", inputTo.text];
            break;
        case 17:
            inputTo.text = [NSString stringWithFormat:@"%@7", inputTo.text];
            break;
        case 18:
            inputTo.text = [NSString stringWithFormat:@"%@8", inputTo.text];
            break;
        case 19:
            inputTo.text = [NSString stringWithFormat:@"%@9", inputTo.text];
            break;
        case 20:
            inputTo.text = [NSString stringWithFormat:@"%@0", inputTo.text];
            break;
        case 21:
            inputTo.text = [NSString stringWithFormat:@"%@.", inputTo.text];
            break;
        case 22: {
            
            
            if ([inputTo.text length]>0) {
                
                NSString *newString = [inputTo.text substringToIndex:[inputTo.text length]-1];
                
                inputTo.text = newString;
                
            }
            
        }break;
        default:
            break;
    }

}

At the top line, we do a typecasting to "sender" so that we can get the UIButton's tag property. sender is basically an ID of who is calling this method. Since we're linking all our keyboard buttons to this method, so all senders are actually UIButtons.

Next we do another typecasting so that we can get the UITextField that is currently on focus. The return object pointer of findFirstResponder is a UIView. So we do the typecasting as UITextField so that we can change the active textfield's property.

Using switch statement, we detect which button is tapped, and do the necessary actions. Here are all of your custom key functions that you must write by yourself. Here my buttons are just simply typing numbers into the active textfields.

Finally, to dismiss our keyboard, again we use the iteration loop and resignFirstResponder for all views.

-(IBAction)dismissKeyboard:(id)sender {
    for (UIView *subView in [self.view subviews]) {
        [subView resignFirstResponder];
    }
}

And that is all you need! Ok now we're done.

How To: Convert Your App Into Flat Design (iOS7) Easily

What's up?

The sky.

iOS7 Flat Design. Many thought flat design is easy. But after trying to design it myself I find that flat design is WAY HARDER than Skeumorphic design. With flat design, every single aspect of the design MUST come together in perfect harmony to produce a cool looking and beautiful interface.

As I am updating my apps to the flat design, I created a few custom methods that makes converting apps into flat design a walk in the park (Ok, walking in the park is probably not easy, and not safe either, you'd get mugged, or might step on dog's poo, etc, but you get my meaning :P)

I made a fake Application with the normal old design. The app doesn't do anything. It just shows  some controls on it. Here how it looks like:

Now, with a single loop we will turn all these into a flat design User Interface. It's like magic :D

Since we want to be able to call the method to convert all controls into flat designed controls, we better create a class, so that we can simply call the class from other ViewControllers. For me, I have one class that contains all the general and common methods, it is called "CommonMethods.h and .m".

So how are we going to do this?

The secret to this is to create images ON THE FLY and use it as "custom" backgrounds for each of the controls. So in each of your existing Viewcontrollers, you only need to call these loops in the viewDidLoad method:

    
for(UIView *v in [self.view subviews]) {
        if ([v isKindOfClass:[UIButton class]]) {
            [CommonMethods createCustomBtn:(UIButton *)v];
        }
        
        if ([v isKindOfClass:[UISegmentedControl class]]) {
            [CommonMethods createCustomSegmented:(UISegmentedControl *)v];
        }
        
        if ([v isKindOfClass:[UISlider class]]) {
            [CommonMethods createCustomSlider:(UISlider *)v];
        }
    }

Isn't that cool? Let's take a look at one of the CommonMethods' custom class method - createCustomBtn. This method is custom made - you decide the name of the method and what it does. In this case, we name it createCustomBtn because we want it to uh.. well, create a custom button for us. :P

Flat design is great because, it is simple. There are no fancy shadows, no fancy textures, there are just colors. And sometimes simple gradients. Hence we can make use CoreGraphics to create these designs dynamically and apply to each controls on the fly. Genius? I know. Thanks.

So for all buttons, what we want to do is create individual buttons images and then apply it to them. To create a rectangle gradient, we use the following code (read the comments for explanation):

    
CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB(); // creates an RGB color space.
    
    // gradient colors from top to bottom (only 2 colors allowed)
    CGFloat colors[] =
    {
        133.0 / 255.0, 149.0 / 255.0, 96.0 / 255.0, 1.00,
        90.0 / 255.0,  109.0 / 255.0, 49.0 / 255.0, 1.00,
    };
    // initiate the gradient
    CGGradientRef gradient = CGGradientCreateWithColorComponents(rgb, colors, NULL, sizeof(colors)/(sizeof(colors[0])*4));
    CGColorSpaceRelease(rgb);
    
    // start image context (so we can draw on it) with the same size as the button
    UIGraphicsBeginImageContext(myButton.frame.size);
    
    UIImage *btnImage;
       
    // get the context for CoreGraphics
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    // start and end point of gradient
    CGPoint startPoint = CGPointMake(0,0);
    CGPoint endPoint = CGPointMake(0, myButton.frame.size.height);
    
    // DRAW the gradient 
    CGContextDrawLinearGradient(ctx, gradient, startPoint, endPoint, kCGGradientDrawsBeforeStartLocation);
 
    // make image out of bitmap context
    btnImage = UIGraphicsGetImageFromCurrentImageContext();
    
    // free the context
    UIGraphicsEndImageContext();

Easy right? Now that we got the rectangular colored gradient as an image, we then can apply this image as the button's background image. Also, if we want the rounded corner on the button, we set the button layer's cornerRadius property to 10.0 or other float values. Remember to setClipsToBound to YES otherwise the radius will not work.

    [myButton setBackgroundImage:btnImage forState:UIControlStateNormal];
// you can also create another image of different color using the code above and
// apply it to other states of the button like UIControlStateSelected
    myButton.clipsToBounds = YES;
    myButton.layer.cornerRadius = 5.0;
    // Change font to iOS7 common font and color to white
    UIFont *myFont = [UIFont fontWithName:@"Helvetica Neue" size:18];
    [[myButton titleLabel] setFont:myFont];
    [[myButton titleLabel] setTextColor:[UIColor whiteColor]];

DONE! Woah? So easy. What you do is just customize your button as you like once in CommonMethods.m and call the loop in all viewController's viewDidLoad method. And all your buttons now are Flat Designed!

Open up CommonMethods.m to see other customizations. And here is the flat designed new User Interface! Cool eh?

What's more cool, is that now your app bundle doesn't even have ANY user interface images. Non of that btn.png, btn@2.png, btn@2x~ipad.png, btn~ipad.png ANYMORE!

Based on my example, you could convert most objects the same way (but you gotta write code by yourself).



This is an easy way for us noobs to convert our apps' interface. But if you are writing a new app, the way to go is subclassing your controls. But that, is another topic altogether.

So that's all and good luck updating your app to flat design app!.

Oh yeah, you need to choose colors carefully for a flat design - This site http://flatuicolors.com is really cool where you can find Flat Colors easily.

Free Custom UISwitch - Flexible Colors and Size

What's up wonderful people?

This is NOT a tutorial. :D

However there is a downloadable Sample Code. I'd like to give away this little custom UISwitch-like class I made. I realize there are already other custom UISwitches that are cool (like https://github.com/domesticcatsoftware/DCRoundSwitch), however mine consists of simple readily available UIControls like UIViews and UILabels, and it has MORE FLEXIBILITY in its components.
Also, since this component is created entirely on UIKit, it will look nice in all resolution (retina or not), ipad or whatever.



Here is the screenshot of samples of custom UISwitch that can be created with this class:

Using this class is simple.

1. Copy Switchy.h and Switchy.m to your folder and add them to your project.
Then import the Switchy.h in your viewcontroller's header.

#import "Switchy.h"

2. Add QuartzCore.framework to your project.

2. Declare the switch it in your header.

Switchy *mySwitch;

3. Create it in viewDidLoad and customize everything in the initWithFrame custom method.

mySwitch = [[Switchy alloc] initWithFrame:CGRectMake(0, 0, 79, 27) withOnLabel:@"ON" andOfflabel:@"OFF"
                     withContainerColor1:[UIColor colorWithRed:0.1 green:0.7 blue:1.0 alpha:1.0]
                      andContainerColor2:[UIColor colorWithRed:0.1 green:0.7 blue:0.9 alpha:1.0]
                          withKnobColor1:[UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:1.0]
                           andKnobColor2:[UIColor colorWithRed:0.7 green:0.7 blue:0.7 alpha:1.0] withShine:YES];
    

4. Hook a method of your own when user toggles the switch:

 
[sw1 addTarget:self action:@selector(customMethod) forControlEvents:UIControlEventTouchUpInside];

5. Add to your viewcontroller's view and position it anywhere.

[self.view addSubview:sw1];
    sw1.center = CGPointMake(160, 50);

Feel free to modify the Switchy.m and .h to your liking (add a border, or other things).
Switchy Class is provided for 100% Free.

Enjoy!