从侧面而不是从中心缩放CCSprite(Scale a CCSprite from the side and not from the center)

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

I am trying to make a customized progress bar. What I want to do is to have "barMask.png" have it's X scale depending on a percentage of the number. I've tried to do it like this:

Then on the update method

// Scale the width of barMask depending on the percentage of the progress. barMask -> setScaleX( CURRENT_AMOUNT / TOTAL_AMOUNT );

However, the sprite is scaled like this:

Frame 1: [ |||||||||| ] Frame 2: [ |||||||| ] Frame 3: [ |||||| ]

It shrinks down into the middle. How can I do so that it shrinks down to the left/right? Like this:

Frame 1: [ |||||||||| ] Frame 2: [ ||||||||| ] Frame 3: [ |||||||| ] Frame 4: [ ||||||| ]

I know about CCProgressTimer but I want to use purely sprites for the progress bar.

最满意答案

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

Change spriet's anchorPoint property to (0.f, 0.5f). All transformations are made relatieve to the node's anchor point. By default anchor point of the sprite is (0.5f, 0.5f). Thats why your scaling is relatieve to the center of your sprite by default.

更多推荐