Wednesday, October 24, 2012

Drawing smooth lines in Cocos2d 2.x

So when I originally coded Tracer I used cocos2d 1.0 which used openGL 1.1 and there was this great method I found online which you can find here on the cocos2d forms However when I upgraded to cocos2d 2.0 I could no longer use this because cocos2d 2.x uses OpenGL2.0. I couldn't find a solution for drawing smooth lines online that was exactly what I needed so I just looked at the cocos2d source code and modified the original method to make it work. Hopefully this will save you some time if you need the same.
-(void) drawSmoothLine: (CGPoint) pos1: (CGPoint) pos2: (ccColor4F) someColor
    [shaderProgram_ use];
    [shaderProgram_ setUniformsForBuiltins];
 [shaderProgram_ setUniformLocation:-1 with4fv:(GLfloat*) &someColor.r count:1];
    ccGLEnableVertexAttribs(kCCVertexAttribFlag_Position | kCCVertexAttribFlag_Color );
    GLfloat lineVertices[12];
    CGPoint dir, tan;
    float width = 1.2f;
    dir.x = pos2.x - pos1.x;
    dir.y = pos2.y - pos1.y;
    float len = sqrtf(dir.x*dir.x+dir.y*dir.y);
    dir.x = dir.x/len;
    dir.y = dir.y/len;
    tan.x = -width*dir.y;
    tan.y = width*dir.x;
    lineVertices[0] = pos1.x + tan.x;
    lineVertices[1] = pos1.y + tan.y;
    lineVertices[2] = pos2.x + tan.x;
    lineVertices[3] = pos2.y + tan.y;
    lineVertices[4] = pos1.x;
    lineVertices[5] = pos1.y;
    lineVertices[6] = pos2.x;
    lineVertices[7] = pos2.y;
    lineVertices[8] = pos1.x - tan.x;
    lineVertices[9] = pos1.y - tan.y;
    lineVertices[10] = pos2.x - tan.x;
    lineVertices[11] = pos2.y - tan.y;
    ccColor4F vertices[6];
    ccColor4F color1 = {rCol, gCol, bCol, 0};
    ccColor4F color2 = {rCol, gCol, bCol, opacity};
    vertices[0] = color1;
    vertices[1] = color1;
    vertices[2] = color2;
    vertices[3] = color2;
    vertices[4] = color1;
    vertices[5] = color1;
 glVertexAttribPointer(kCCVertexAttrib_Position, 2, GL_FLOAT, GL_FALSE, 0, lineVertices);
    glVertexAttribPointer(kCCVertexAttrib_Color, 4, GL_FLOAT, GL_FALSE, 0, vertices);
 glDrawArrays(GL_TRIANGLE_STRIP, 0, 6);
Now you may notice that when you draw lines there are tiny dots that appear in the line, well that's because of the way the triangles are drawn and I'll get into that in the next post and how to get rid of it! Also, if you use the above, make sure to go into ccConfig.h and enable CC_ENABLE_GL_STATE_CACHE, I got a huge performance improvement from that. In the above method, the values rCol, gCol and bCol are just the current rgb values which you can manually modify or get from the passed in ccColor4f value.

Dutch Cheese Games

Wednesday, September 26, 2012


We'd love to hear from you if you'd like to give us feedback on any of our apps or have anything else to tell us! Send us an e-mail at

Monday, September 24, 2012

Tracer breaks into the top 200!

We've been overwhelmed with the response we've gotten from Tracer. With absolutely no marketing done, Tracer has broken into the top 200 apps in both the Action games and Arcade games category's on the US App Store! Check it out if you haven't already!

Tuesday, September 18, 2012

Tracer Press Release

St. Maarten, Netherlands Antilles - Trace over the lines before they disappear. That's all you need to do in the new free app Tracer from Dutch Cheese. It's extremely simple to pick up but challenging to master. Fans of drawing or people who want to learn to draw will find this app refreshing and thrilling. With over 70 drawings to trace over, Tracer is a must have that's available for free for the iPhone, iPad and iPod touch.

Lines will appear on the screen, your goal is to trace over them as accurately as possible before they disappear. After you have traced over all the lines, you will have drawn something. There are over 70 different artworks to trace over including animals, flowers, the body and more. The drawings are analyzed and given a ranking. The better the ranking the more points are awarded the user. Points can be used to purchase amazing upgrades such as funky line colors!

This unique app is family friendly, fun for all ages and designed for people of all drawing abilities. Not only is it amusing to see your own tracings, it's incredibly fun to see how other people trace and so Tracer has built in sharing capabilities. Tracings can be uploaded and shared on Facebook or saved to the iOS device with a single click. Tracer is a truly original idea and is now available for free on the App Store.

Feature Highlights:
* Simple drawing
* Over 70 drawings to trace over
* Easily share drawings to Facebook or save to device
* Amazing upgrades
* Universal app
* Free

Device Requirements:
* iPhone 3GS, iPhone 4/4s, iPad/2/3, iPod touch
* Requires iOS 4.3 or later
* Universal Application
* 10.9 MB

Pricing and Availability:
Tracer 1.0 is a free app now available on the App Store in the Games category.

Dutch Cheese is an independent iOS game developer based on St. Maarten in the Caribbean. They have previously released other apps for the iPhone and iPad including Crazy Lights which has garnered thousands of downloads worldwide. Copyright (C) 2012 Dutch Cheese. All Rights Reserved. Apple, the Apple logo, iPhone and iPod are registered trademarks of Apple Inc. in the U.S. and/or other countries. Other trademarks and registered trademarks may be the property of their respective owners.

Monday, September 17, 2012

Tracer Trailer

Hey Friends!

Here's a trailer for our new app Tracer!  Check it out for free on the App Store now!
Available for the iPhone, iPad and iPod Touch.

Sunday, September 16, 2012

Tracer now available

Our new app Tracer is now available on the App Store! It's amazingly simple yet super fun. Trace over the lines before they disappear, that's all you need to do! It's available for free for the iPhone, iPad and iPod Touch! Check it out on the App Store.