Best way to create a "Life" Bar (non OpenGL)

[AdamsApple]

Hi, I am thinking now what is the best way to create a life bar for my character. (non openGL)

Currenly it is using UIProgressView. Which is too thick and not to my liking.

I'd like to just make a simple rectangle that reduces in x-size with a black rectangle behind it.

I was thinking to use UIView, but.. is that ok? or how would you go about creating it?

TKS!

[AdamsApple]

Anybody can help me, please....

[rocotilos]

Hey actually I am working on something similar to what you want (working on my 2nd game). If you can wait, I'd be able to post a tutorial for it soon. Basically I will be subclassing the UIView.

[AdamsApple]

Great! Please do share it here or send to my pm. TKS!

[rocotilos]

Hi AdamsApple, sorry this is a bit late.

Just create a new file (of iTouch class).. this should create 2 files in your project (.m and .h) as normal.

Paste these two files:

BarView.h

#import <UIKit/UIKit.h>


@interface BarView : UIView {
	CGFloat barHeight;
	CGFloat barMainWidth;
	CGFloat barValWidth;
    CGFloat barMR, barMG, barMB;
	CGFloat barVR, barVG, barVB;
}

@property (nonatomic, assign) CGFloat barHeight;
@property (nonatomic, assign) CGFloat barMainWidth;
@property (nonatomic, assign) CGFloat barValWidth;
@property (nonatomic, assign) CGFloat barMR, barMG, barMB;
@property (nonatomic, assign) CGFloat barVR, barVG, barVB;


-(void)drawInContext:(CGContextRef)context;


@end

BarView.m

//
//  BarView.m
//  BattleGame
//
//  Created by Emir on 3/17/11.
//  Copyright 2011 __MyCompanyName__. All rights reserved.
//

#import "BarView.h"


@implementation BarView

@synthesize barHeight,barMainWidth,barValWidth,barMR, barMG, barMB,barVR, barVG, barVB;

- (id)initWithFrame:(CGRect)frame {
    if ((self = [super initWithFrame:frame])) {
        // Initialization code
		self.barHeight = 10.0;
		self.barMainWidth = 50.0;
		self.barValWidth = 25.0;
		self.barMR = 0.0; 
		self.barMG = 0.0;
		self.barMB = 0.0;
		self.barVR = 1.0;
		self.barVG = 1.0;
		self.barVB = 1.0;
    }
    return self;
}


// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
    // Drawing code
	[self drawInContext:UIGraphicsGetCurrentContext()];
}




//draw the text using custom loaded font
-(void)drawInContext:(CGContextRef)context
{
	CGContextSaveGState(context);
	CGContextSetRGBFillColor(context, self.barMR, self.barMG, self.barMB, 1.0);
	CGContextFillRect(context, CGRectMake(0.0, 0.0, self.barMainWidth, self.barHeight));
	CGContextSetRGBStrokeColor(context, 0.0, 0.0, 0.0, 1.0);
	CGContextStrokeRect(context, CGRectMake(0.0, 0.0, self.barMainWidth, self.barHeight));
	CGContextRestoreGState(context);
	CGContextSaveGState(context); 
	CGContextSetRGBFillColor(context, self.barVR, self.barVG, self.barVB, 1.0);
	CGContextFillRect(context, CGRectMake(1.0, 1.0, self.barValWidth, self.barHeight-2));
	CGContextRestoreGState(context);
}


- (void)dealloc {
    [super dealloc];
}


@end

Ah.. You also need to dealloc those that you sythesized... i forgotten that and just realizing it when pasting it here.


To use this class is simple, you need to declare it and create it at viewDidload or when your game starts. Such as:

// in your VC.h
#import "BarView.h"

@class BarView;

// in implementation declare it
BarView *lifeBar;

lifeBar = [[BarView alloc] initWithFrame:CGRectMake(Tank.center.x,Tank.center.y-30,35,3)];
	lifeBar.barMR = 0.0; lifeBar.barMG = 0.0; lifeBar.barMB = 0.0; 
	lifeBar.barVR = 0.0; lifeBar.barVG = 1.0; lifeBar.barVB = 0.0; 
	lifeBar.barHeight = 3.0;
	lifeBar.barMainWidth = 35.0;
	lifeBar.barValWidth = 35.0;
	[self.view addSubview:self.lifeBar];

barMR,G,B are the color components of the Main bar (the background bar) and barVR,G,B are the color components of the Value bar (the bar that gets updated when the character get hits etc).

To update it as the game progresses, I create a simple method in my VC:

-(void)updateBar:(BarView *)bar:(CGFloat)ratio {
	bar.barValWidth = ratio * bar.barMainWidth;
	
	if (bar==lifeBar) { // here i want the color of the bar changes with the ratio
		if (ratio>0.5) {bar.barVR = 0.0; bar.barVG = 1.0; bar.barVB = 0.0;}
		if ((ratio>0.3)&&(ratio<=0.5)) {bar.barVR = 1.0; bar.barVG = 1.0; bar.barVB = 0.0;}
		if ((ratio<=0.3)) {bar.barVR = 1.0; bar.barVG = 0.0; bar.barVB = 0.0;}
	}
	
	[bar setNeedsDisplay];
}

Calling this method when your character is hit:

[self updateBar:self.lifeBar:(MYLIFE/TOTMYLIFE)];

You can see we use ratio, so that we can show the life in ratio to the full bar.
Here it is in my "in progress" 2nd game.. :-



Good luck.

[AdamsApple]

Wow... thanks!! I just implemented it.. it didn't work at first. But after I add the QuartzCore.framework then it works.

TKS for this.......!!