Creating custom view for iPhone

Currently I am trying to create simple game for iPhone. To create game first thing I needed to learn is to create custom view and custom drawing. So here I am putting down my learning in hope that it will help some one who started learning iPhone development.

I started with creating new window based project and named it CustomView.

Then I created new class named CustomView and derived it from UIView.

After creating class derived from UIVIew, we need to make sure that application's window add newly created class as its subview like shown in code below. 

- (void)applicationDidFinishLaunching:(UIApplication *)application {   

    CustomView *view = [[CustomView alloc] initWithFrame:window.frame];
   
    // Override point for customization after application launch
    [window addSubview:view];
    [window makeKeyAndVisible];
}

Then finally implement drawRect with custom drawing code. Here is my code with comment, in following code I am drawing a text, a rectangle , a circle and an Image.

- (void)drawRect:(CGRect)rect {
    // Drawing code
    //acquire graphics context
    CGContextRef ctxt = UIGraphicsGetCurrentContext();
   
    //set brush and set brush color to yellow
    CGContextSetFillColorWithColor(ctxt, [[UIColor yellowColor] CGColor]);
   
    //create string to draw
    NSString *hello = @"Hello World!";
    //create font to be used
    UIFont* font = [UIFont systemFontOfSize:20];
   
    //find horizontal center position for text
    int xLocation = ([self frame].size.width / 2) - ( [hello sizeWithFont:font].width /2 );
    [hello drawAtPoint:CGPointMake( xLocation, 100 ) withFont:[UIFont systemFontOfSize:16.0]];
   
    //draw rect
    CGContextFillRect(ctxt, CGRectMake(50, 50, 50, 50));
    //change brush color to green and draw circle
    CGContextSetFillColorWithColor(ctxt, [[UIColor greenColor] CGColor]);
    CGContextFillEllipseInRect(ctxt, CGRectMake(150, 150, 50, 50));
   
    //draw image
    UIImage *image = [UIImage imageNamed:@"red-ind.png"];
    [image drawAtPoint:CGPointMake( 100,200)];
}

So end result looks like following.

Simple sprite animation using Qt

I was always wondering how character are animated in games so I thought to create simple animated character using Qt.

Technique is quite simple, you need to draw sequence of image with different character position.
To hold image of different character position I am using QList.

mLeftSprite.append( QPixmap(":left_1.png"));
mLeftSprite.append( QPixmap(":left_2.png"));
mLeftSprite.append( QPixmap(":left_3.png"));
mLeftSprite.append( QPixmap(":left_4.png"));
mLeftSprite.append( QPixmap(":left_5.png"));
mLeftSprite.append( QPixmap(":left_6.png"));  

To animate character I have used timer which timeout after every 100ms and I am displaying next caracter image when timer expire and also updating character position on screen at same time

mCurrentFrame = ++mCurrentFrame % 6;
mPos.setX( mPos.x() + mXDir * 10 ); 

And finally draw image on screen
 

painter->drawPixmap(mPos,(*mCurrentSprite)[mCurrentFrame]);

So end result is like following.



If you are instrested in looking at code than here is link to gitorious.

Creating UIButton manually on IPhone SDK

Recently I started to learn iPhone development just for fun. iPhone sdk comes with great IDE which has great tool like memory leak finder, profiler, interface builder and other such tool. To create UI for iPhone application interface builder is great tool, but sometime we need to create control programatically at runtime. I also faced same situation to create UIButton control at runtime.

So here I am sharing my learning to create UIButton at runtime and adding it to view.

In following, I am creating UIButton named customButton, setting its location and size on screen and then image for normal and highlighted state.

UIButton* customButton = [UIButton buttonWithType:UIButtonTypeCustom];
[customButton setFrame:CGRectMake(10,10, 100, 100)];
[customButton setImage:[UIImage imageNamed:@"blue-ind.png"] forState:UIControlStateNormal];
[customButton setImage:[UIImage imageNamed:@"red-ind.png"] forState:UIControlStateHighlighted];

Then I am specify what function needed to be called when button get pressed using addTarget method of UIButton.

[customButton addTarget:self action:@selector(btnClicked) forControlEvents:UIControlEventTouchUpInside];

Finally adding button to view.

[self.view addSubview:customButton];

Now when above button is clicked, btnClicked method will be get called. I have used following declaration and definition for btnClicked method.

-(void) btnClicked ;

-(void) btnClicked {
    NSLog(@"Custom button clicked");
}

Here is output of above code.

Live Wallpapers for N900

I found this cool application that makes your wallpaper live and animated.

Here is video fro that application.



Find more information on original blog here.

Video cutter in Ubuntu

Recently I needed to create video demo for one for my developed application, and I needed to remove some unwanted portion from video. In windows there are plenty of application for doing so, but now I use Ubuntu operating system. I search for video editing software for Ubuntu and I found one great application.

Its command line tool and its name is ffmpeg.

It can cut video clip from large video, if you want to crop video it support this as well and it support wide range of video codec.

To install this tool type following command on terminal


sudo apt-get install ffmpeg

Following command will clip video and put it in output file

ffmpeg -i movie.avi -ss 00:51:42 -t 00:03:30 clip.avi

To crop video , use following commands

ffmpeg -i input.avi -croptop 50 output.avi
ffmpeg -i input.avi -cropbottom 50 output.avi

To change aspect ration use following command

ffmpeg -i input.avi -aspect 16:9 output.avi

Here is documentation for ffmpeg tool it you need some more options.

Interesting concept from Intel

Check out this project from Intel Research & the University of Washington that users pico projectors and cameras to extend the user interface to our surroundings.

Speed match in Reaction game

Recently I was not able to post anything new. I was busy in updating Reaction game with new game option called Speed Match.

In Speed match you have to remember shape and you have to answer if currnely displayed shape is matching previous shape or not. This game help you to improve your reaction time, working memory and also information processing speed.

Here are few snaps from game.

Scoring is still not in proper shape, i have not considered time taken to answer. I am currenly working on that will update it soon.

If you are instrested in code than i have uploded code on gitorious. To try game on N900, add extra devel repository to application manager and then type "apt-get install reaction" on xterm.