Cocos2d 利用继承Draw方法制作可显示三维数据（宠物三维等）的三角形显示面板

很久没有写博客了，这段时间比较忙，又是搬家又是做自己的项目，还有太多琐碎的事情缠身，好不容易抽出时间把最近自己做的一些简单例子记录一下。

在我的项目中，我需要一个显示面板来显示游戏中的一个三维数据，例如，力量，速度，耐力，来直观的显示出物体的特征，让玩家能够一眼看出区别

首先我们需要准备一下素材

显示面板的背景"Panel.png"，比如：尽量能够以三角形为背景

1- 新建一个继承自CCSprite的类，命名为CCPanel

2- 在头文件中添加

@interface ZOPanel : CCSprite
{
    id<ZOPanelDataSource> s_dataSource;
}
- (id)initWithDataSource:(id<ZOPanelDataSource>)dataSource;
+ (id)panelWithDataSource:(id<ZOPanelDataSource>)dataSource;
@end

这里我们需要利用代理的方式，来传入面板所需要显示的值，这样我们就能在不同的类中使用到这个面板，而不需要重新修改代码

初始化方法中，需要设置一个代理，这里作为数据库的作用

接着我们需要完成这个代理的协议，在前面添加代码：

@protocol ZOPanelDataSource <NSObject>
@required
@property (nonatomic, readonly) float Power;
@property (nonatomic, readonly) float Speed;
@property (nonatomic, readonly) float Endurance;;
@end
// before @interface

这段代码申明了ZOPanelDataSource需要实现3个属性，分别为Power，Speed，Endurance

ZOPanel将会根据ZOPanelDataSource的3个属性，自动更新面板显示的数据

3- 在实现文件中实现初始化方法

@implementation ZOPanel

- (id)initWithDataSource:(id<ZOPanelDataSource>)dataSource;
{
    self = [super initWithSpriteFrameName:@"Panel.png"];
    if (self) {
        s_dataSource = dataSource;
    }
    return self;
}

+ (id)panelWithDataSource:(id<ZOPanelDataSource>)dataSource;
{
    return [[[self alloc] initWithDataSource:dataSource] autorelease];
}

4- 继承Draw方法来绘制三角形，在初始化方法后添加以下代码：

- (void)draw
{
    [super draw];
    //draw 方法是CCNode用来绘制自身显示内容的方法，将会在每个最小时间间隔dt内不断更新，一般要在CCNode中自己绘制点，线，面，都需要继承原来的draw方法，在之后添加自定义的绘制代码
    if (s_dataSource) {
        float power = s_dataSource.Power;//读取数据库Power属性
        float speed = s_dataSource.Speed;//读取数据库Speed属性
        float endurance = s_dataSource.Endurance;//读取数据库Endurance属性

        ccDrawColor4F(0, 0, 0, 1);//设置OpenGL绘制图像的颜色为R:0，B:0，G:0，A:1
        CGPoint center = ccpAdd(self.anchorPointInPoints, ccp(0,-2));//计算绘制三角形的中心位置，在我的例子中为背景图像的中心向Y轴负方向移动2个像素，根据不同的背景图像，需要重新计算
        float redRotation = 90;//红色三角形定点的角度
        CGPoint powerDirection = ccpForAngle(CC_DEGREES_TO_RADIANS(redRotation));
        CGPoint speedDirection = ccpForAngle(CC_DEGREES_TO_RADIANS(redRotation + 120));
        CGPoint enduranceDirection = ccpForAngle(CC_DEGREES_TO_RADIANS(redRotation + 240));
        
        CGPoint powerPoint = ccpAdd(center, ccpMult(powerDirection, 1 + power * 15 / 50));//计算出Power顶点
        CGPoint speedPoint = ccpAdd(center, ccpMult(speedDirection, 1 + speed * 15 / 50));//计算出Speed顶点
        CGPoint endurancePoint = ccpAdd(center, ccpMult(enduranceDirection, 1 + endurance * 15 / 50));//计算出Endurance顶点
        CGPoint points[] = {
            powerPoint,
            speedPoint,
            endurancePoint
        };
        ccDrawSolidPoly(points, 3, ccc4FFromccc3B(ccBLACK));//调用Cocos2d的绘制方法，绘制一个黑色实心三角形
}

至此一个简单的三角形显示控件完成

使用起来也非常简单，在任何一个CCNode实现中，添加代码

#import "ZOPanel.h"

{
    ZOPanel *panel = [ZOPanel panelWithDataSource:self];
    [self addchild:panel];
}

//实现数据库代理
- (float)Power
{
    reture 0;
}

- (float)Speed
{
    reture 0;
}

- (float)Endurance
{
    reture 0;
}

最终效果如下，希望能够对大家有帮助