This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
tutorials:non_destructive_drawing [2011/03/22 08:25] – pixelrevision | tutorials:non_destructive_drawing [2013/03/05 10:19] (current) – external edit 127.0.0.1 | ||
---|---|---|---|
Line 1: | Line 1: | ||
+ | ====== Non-destructive Drawing ====== | ||
+ | |||
+ | Sparrow' | ||
+ | |||
+ | {{http:// | ||
+ | |||
+ | To do this you will want to create 2x SPImages. | ||
+ | |||
+ | Once you have all this in place you will start logging the touches when the user touches. | ||
+ | |||
+ | One thing that is super handy in Sparrow is the ability to change the color of an image. | ||
+ | |||
+ | There is lots of room for experimentation here. Since the canvas never gets destroyed you can do things like create particles to follow your touches drawing lines everywhere or use extra brushes to create things like drips. | ||
+ | |||
+ | <code objc> | ||
+ | #import < | ||
+ | #import " | ||
+ | |||
+ | #define numSteps 6 | ||
+ | |||
+ | @interface SparrowPainting : SPStage{ | ||
+ | CGPoint lastTouch; | ||
+ | CGPoint newTouch; | ||
+ | SPImage *brush; | ||
+ | SPRenderTexture *canvasTexture; | ||
+ | SPImage *canvasImage; | ||
+ | BOOL drawing; | ||
+ | } | ||
+ | |||
+ | - (void)update: | ||
+ | - (void)touched: | ||
+ | - (void)changeBrushColor: | ||
+ | |||
+ | @end | ||
+ | </ | ||
+ | <code objc> | ||
+ | #import " | ||
+ | |||
+ | @implementation SparrowPainting | ||
+ | |||
+ | - (id)initWithWidth: | ||
+ | self = [super initWithWidth: | ||
+ | |||
+ | // create a brush to draw with | ||
+ | brush = [SPImage imageWithContentsOfFile: | ||
+ | [brush retain]; | ||
+ | |||
+ | // create the render texture to draw on | ||
+ | canvasTexture = [[SPRenderTexture alloc] initWithWidth: | ||
+ | [canvasTexture clearWithColor: | ||
+ | canvasImage = [SPImage imageWithTexture: | ||
+ | [self addChild: | ||
+ | |||
+ | // change the color of the brush | ||
+ | [self changeBrushColor: | ||
+ | |||
+ | // add event listeners | ||
+ | [self addEventListener: | ||
+ | [self addEventListener: | ||
+ | |||
+ | return self; | ||
+ | } | ||
+ | |||
+ | |||
+ | - (void)update: | ||
+ | |||
+ | if(drawing){ | ||
+ | // group the draw calls together for speed | ||
+ | [canvasTexture bundleDrawCalls: | ||
+ | double incX = (newTouch.x - lastTouch.x)/ | ||
+ | double incY = (newTouch.y - lastTouch.y)/ | ||
+ | brush.x = lastTouch.x - (brush.width/ | ||
+ | brush.y = lastTouch.y - (brush.height/ | ||
+ | // loop through so that if our touches are far apart we still create a line | ||
+ | for (int i=0; i< | ||
+ | [canvasTexture drawObject: | ||
+ | brush.x += incX; | ||
+ | brush.y += incY; | ||
+ | |||
+ | } | ||
+ | }]; | ||
+ | lastTouch = CGPointMake(newTouch.x, | ||
+ | } | ||
+ | } | ||
+ | |||
+ | - (void)touched: | ||
+ | SPTouch *touchStart = [[event touchesWithTarget: | ||
+ | SPPoint *touchPosition; | ||
+ | if(touchStart){ | ||
+ | touchPosition = [touchStart locationInSpace: | ||
+ | lastTouch = CGPointMake(touchPosition.x, | ||
+ | newTouch = CGPointMake(touchPosition.x, | ||
+ | } | ||
+ | |||
+ | SPTouch *touchMove = [[event touchesWithTarget: | ||
+ | if(touchMove){ | ||
+ | touchPosition = [touchMove locationInSpace: | ||
+ | newTouch = CGPointMake(touchPosition.x, | ||
+ | drawing = YES; | ||
+ | } | ||
+ | |||
+ | SPTouch *touchEnd = [[event touchesWithTarget: | ||
+ | if(touchEnd){ | ||
+ | touchPosition = [touchEnd locationInSpace: | ||
+ | lastTouch = CGPointMake(touchPosition.x, | ||
+ | newTouch = CGPointMake(touchPosition.x, | ||
+ | drawing = NO; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | - (void)changeBrushColor: | ||
+ | // changes the brush color based on the pixels in the image | ||
+ | brush.color = brushColor; | ||
+ | } | ||
+ | |||
+ | - (void)dealloc{ | ||
+ | // cleanup | ||
+ | [self removeEventListener: | ||
+ | [self removeEventListener: | ||
+ | |||
+ | [brush release]; | ||
+ | [canvasTexture release]; | ||
+ | [self removeChild: | ||
+ | |||
+ | [super dealloc]; | ||
+ | } | ||
+ | |||
+ | @end | ||
+ | </ | ||
+ | |||