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;
}

最終效果以下，但願可以對你們有幫助