Drawing a continuous line with onTouchMoved callback

Question

i'm trying to draw a continues spline on every onTouchMoved call, the functionality is supposed to be similar to the line drawing used in the iOS game - flight control.

i'm using it in the following manner:

constructor init:

conPointsArray = new PointArray();
conPointsArray->initWithCapacity(DEF_ARRAY_SIZE);
lineDrawer = DrawNode::create();

the onTouchMoved callback usage:

void line::onTouchMoved(cocos2d::Touch *Touch, cocos2d::Event *Event)
{
conPointsArray->addControlPoint(Touch->getLocation());
lineDrawer->drawCardinalSpline((conPointsArray), 0.5f, 100, Color4F::BLUE);
CCLOG("on touch moved x: %f y %f", Touch->getLocation().x, Touch->getLocation().y);
}

But the app is always crashing in a certain openGL function.

I assumed the reason for it is because the array is constantly changing and openGL is having trouble with it (and the fact i'm always sending the same array which is a bad idea, but just to see how things work), so i moved the drawing call to onTouchEnded, And indeed, The line was drawn, but only (as expected) after the onTouch action has ended.

What is the solution/best practice for this issue?

Cheers.

Answer 1

I created an drawing app for kids and I think the RenderTexture is the best solution for such applications.

You can use visit() method of Sprite and draw(=visit) a point ( probably a circle sprite) on your canvas(=RenderTexture) while touch is moving(=onTouchMoved).

Don't forget to call RenderTexture->begin()/end() when using visit function.

This if for cocos2dx v2 but not so different with v3:

void PaintingScene::ccTouchesMoved(CCSet* touches, CCEvent* event)
{
    CCTouch *touch = (CCTouch*)touches->anyObject();
    brush->setPosition(touch->getLocation());
    RT_currentSession->begin(); //RT_currentSession : CCRenderTexture
    brush->setVisible(true);
    brush->visit(); 
    brush->setVisible(false);
    RT_currentSession->end();
}

Answer 2

Re:

"It Works great, Thank you. There is one little issue i'm trying to solve, and its how to get a full line in case we have quick movements (saw some examples online, non of them work but using an array of brushes and drawing them, which kills the CPU), it's in the example i gave in the comments above. How did u solve it?"

I use a different language and software, so the code below is more psuedocode, than code. You will need to properly type the position parameter of doIt, etc. The idea should be "gettable"; if not, let me know. initialPoint is set to true in the TouchDown callback (or possibly TouchUp).

Consider:

void doIt(position)
{
  brush->setPosition(position);
  brush->setVisible(true);
  brush->visit(); 
  brush->setVisible(false);
}
void PaintingScene::ccTouchesMoved(CCSet* touches, CCEvent* event)
{
   RT_currentSession->begin(); //RT_currentSession : CCRenderTexture
   touchLocation = touch->getLocation();
   if (initialPoint)
   {
     previousTouchLocation = touchLocation;
     initialPoint = false;
   }
   dragDistance = distance(touchLocation - previousTouchLocation);
   for (i = 0; i <= dragDistance; i++)
   {
     //doIt(previousTouchLocation + ((touchLocation - previousTouchLocation) * (float)i / dragDistance)));
     //doIt(lerp(previousTouchLocation, touchLocation, (float)i / dragDistance));
     doIt(lerp(previousTouchLocation, touchLocation, i, dragDistance));
     //Linearly interpolate between previousTouchLocation and touchLocation
     //turning on each pixel along the way
   }
   RT_currentSession->end();
   previousTouchLocation = touchLocation;
}