我正在尝试制作自定义进度条。我想要做的是让“barMask.png”具有X比例,具体取决于数字的百分比。我试过这样做:
barBack = CCSprite::create( "barBack.png" );
this -> addChild( barBack );
barMask = CCSprite::create( "barMask.png" );
barMask -> setPosition( barBack -> getPosition( ) );
this -> addChild( barMask );
然后是更新方法
// Scale the width of barMask depending on the percentage of the progress.
barMask -> setScaleX( CURRENT_AMOUNT / TOTAL_AMOUNT );
然而,精灵的缩放如下:
Frame 1: [ |||||||||| ]
Frame 2: [ |||||||| ]
Frame 3: [ |||||| ]
它缩小到中间。我该怎么做才能缩小到左/右?像这样:
Frame 1: [ |||||||||| ]
Frame 2: [ ||||||||| ]
Frame 3: [ |||||||| ]
Frame 4: [ ||||||| ]
我知道CCProgressTimer,但我想在进度条上使用纯粹的精灵。
答案 0 :(得分:3)
将spriet的anchorPoint
属性更改为(0.f,0.5f)。所有变换都与节点的锚点相关联。默认情况下,精灵的锚点是(0.5f,0.5f)。这就是为什么你的缩放默认情况下会重新定位到精灵的中心。
答案 1 :(得分:2)
另一种可能实现的方法是使用draw方法和一些openGL。我用这个健康酒吧为我的空间shootem up app中的敌人,根据敌人HP剩余的规模。它改编自Ray Wenderlich的教程之一。无论如何,这是我的绘制方法,它遍历屏幕上的每个老板“怪物”并绘制他们的健康栏。这可以调整,用于进度指示条的方法......
- (void)draw {
for (CCSprite *target in _targets) {
Monster *monster = (Monster *)target;
if (monster.monsterisboss == YES) {
static int lineBuffer = 5;
int lineHeight = 7;
int startY = monster.position.x - (monster.contentSize.width/2);
int endY = monster.position.x + (monster.contentSize.width/2) - lineBuffer;
int actualX = monster.position.y + (monster.contentSize.height/2) + lineHeight*2;
static int maxColor = 200;
static int colorBuffer = 55;
float percentage = ((float) monster.hp) / ((float) monster.maxHp);
int actualY = ((endY-startY) * percentage) + startY;
int amtRed = ((1.0f-percentage)*maxColor)+colorBuffer;
int amtGreen = (percentage*maxColor)+colorBuffer;
glEnable(GL_LINE_SMOOTH);
glLineWidth(lineHeight);
glColor4ub(amtRed,amtGreen,0,255);
ccDrawLine(ccp(startY, actualX), ccp(actualY, actualX));
}
}
[super draw];
}
编辑看起来我的代码块遗漏了最后一个大括号 - 请不要忘记,如果你想尝试上面的绘制方法!