从侧面而不是从中心缩放 CCSprite

Scale a CCSprite from the side and not from the center

本文关键字：缩放 CCSprite 侧面      更新时间：2023-10-16

我正在尝试制作自定义进度条。我想做的是让"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 ，但我想使用纯粹的精灵作为进度条。

将 spriet 的 anchorPoint 属性更改为 （0.f， 0.5f）。所有转换都与节点的锚点相关。默认情况下，角色的锚点为 （0.5f， 0.5f）。这就是为什么默认情况下，您的缩放比例与精灵的中心相关。

另一种可能实现的方法是使用 draw 方法和一些 openGL。我在我的太空射击应用程序中将其用于敌人的生命条，根据剩余的敌人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];

}

edit 看起来我的代码块省略了最后一个右大括号 - 如果您想尝试上面的 draw 方法，请不要忘记！

相关文章：