Question

I am trying to bend my sprite upto a certain angle but cant figure out the right way to do it.. i tried to study process to skew a Sprite which existed in Cocos2d 1.00 version but i cant find it in the latest version 0.99.5
Please help me figure out How to skew a Sprite in cocos2d ??

Answer 1

How about this patch for CCNode.h and CCNode.m of version 0.99.5? This patch includes the difference for skew between version 0.99.5 and version 1.0.0.

I’ve also uploaded the patch to gist https://gist.github.com/1082368

diff --git a/cocos2d/CCNode.h b/cocos2d/CCNode.h
index d6faaf5..64acdc5 100644
--- a/cocos2d/CCNode.h
+++ b/cocos2d/CCNode.h
@@ -105,6 +107,9 @@ enum {
    // position of the node
    CGPoint position_;
    CGPoint positionInPixels_;
+   
+   // skew angles
+   float skewX_, skewY_;

    // is visible
    BOOL visible_;
@@ -174,6 +179,20 @@ enum {
  @since v0.8
  */
 @property (nonatomic,readwrite) float vertexZ;
+
+/** The X skew angle of the node in degrees.
+ This angle describes the shear distortion in the X direction.
+ Thus, it is the angle between the Y axis and the left edge of the shape
+ The default skewX angle is 0. Positive values distort the node in a CW direction.
+ */
+@property(nonatomic,readwrite,assign) float skewX;
+
+/** The Y skew angle of the node in degrees.
+ This angle describes the shear distortion in the Y direction.
+ Thus, it is the angle between the X axis and the bottom edge of the shape
+ The default skewY angle is 0. Positive values distort the node in a CCW direction.
+ */
+@property(nonatomic,readwrite,assign) float skewY;
 /** The rotation (angle) of the node in degrees. 0 is the default rotation angle. Positive values rotate node CW. */
 @property(nonatomic,readwrite,assign) float rotation;
 /** The scale factor of the node. 1.0 is the default scale factor. It modifies the X and Y scale at the same time. */
diff --git a/cocos2d/CCNode.m b/cocos2d/CCNode.m
index 5392905..569cb22 100644
--- a/cocos2d/CCNode.m
+++ b/cocos2d/CCNode.m
@@ -73,12 +75,32 @@
 #pragma mark CCNode - Transform related properties

 @synthesize rotation = rotation_, scaleX = scaleX_, scaleY = scaleY_;
+@synthesize skewX = skewX_, skewY = skewY_;
 @synthesize position = position_, positionInPixels = positionInPixels_;
 @synthesize anchorPoint = anchorPoint_, anchorPointInPixels = anchorPointInPixels_;
 @synthesize contentSize = contentSize_, contentSizeInPixels = contentSizeInPixels_;
 @synthesize isRelativeAnchorPoint = isRelativeAnchorPoint_;

 // getters synthesized, setters explicit
+
+-(void) setSkewX:(float)newSkewX
+{
+   skewX_ = newSkewX;
+   isTransformDirty_ = isInverseDirty_ = YES;
+#if CC_NODE_TRANSFORM_USING_AFFINE_MATRIX
+   isTransformGLDirty_ = YES;
+#endif
+}
+
+-(void) setSkewY:(float)newSkewY
+{
+   skewY_ = newSkewY;
+   isTransformDirty_ = isInverseDirty_ = YES;
+#if CC_NODE_TRANSFORM_USING_AFFINE_MATRIX
+   isTransformGLDirty_ = YES;
+#endif
+}
+
 -(void) setRotation: (float)newRotation
 {
    rotation_ = newRotation;
@@ -237,6 +259,7 @@

        isRunning_ = NO;

+       skewX_ = skewY_ = 0.0f;
        rotation_ = 0.0f;
        scaleX_ = scaleY_ = 1.0f;
        positionInPixels_ = position_ = CGPointZero;
@@ -615,6 +638,14 @@
    if (rotation_ != 0.0f )
        glRotatef( -rotation_, 0.0f, 0.0f, 1.0f );

+   // skew
+   if ( (skewX_ != 0.0f) || (skewY_ != 0.0f) ) {
+       CGAffineTransform skewMatrix = CGAffineTransformMake( 1.0f, tanf(CC_DEGREES_TO_RADIANS(skewY_)), tanf(CC_DEGREES_TO_RADIANS(skewX_)), 1.0f, 0.0f, 0.0f );
+       GLfloat glMatrix[16];
+       CGAffineToGL(&skewMatrix, glMatrix);                                                             
+       glMultMatrixf(glMatrix);
+   }
+   
    // scale
    if (scaleX_ != 1.0f || scaleY_ != 1.0f)
        glScalef( scaleX_, scaleY_, 1.0f );
@@ -757,19 +788,26 @@

        if ( !isRelativeAnchorPoint_ && !CGPointEqualToPoint(anchorPointInPixels_, CGPointZero) )
            transform_ = CGAffineTransformTranslate(transform_, anchorPointInPixels_.x, anchorPointInPixels_.y);
-       
+
        if( ! CGPointEqualToPoint(positionInPixels_, CGPointZero) )
            transform_ = CGAffineTransformTranslate(transform_, positionInPixels_.x, positionInPixels_.y);

        if( rotation_ != 0 )
            transform_ = CGAffineTransformRotate(transform_, -CC_DEGREES_TO_RADIANS(rotation_));

+       if( skewX_ != 0 || skewY_ != 0 ) {
+           // create a skewed coordinate system
+           CGAffineTransform skew = CGAffineTransformMake(1.0f, tanf(CC_DEGREES_TO_RADIANS(skewY_)), tanf(CC_DEGREES_TO_RADIANS(skewX_)), 1.0f, 0.0f, 0.0f);
+           // apply the skew to the transform
+           transform_ = CGAffineTransformConcat(skew, transform_);
+       }
+       
        if( ! (scaleX_ == 1 && scaleY_ == 1) ) 
            transform_ = CGAffineTransformScale(transform_, scaleX_, scaleY_);

        if( ! CGPointEqualToPoint(anchorPointInPixels_, CGPointZero) )
            transform_ = CGAffineTransformTranslate(transform_, -anchorPointInPixels_.x, -anchorPointInPixels_.y);
-       
+               
        isTransformDirty_ = NO;
    }