Custom Drawing & Animation. CS 442: Mobile App Development Michael Saelee

Transcription

1 Custom Drawing & Animation CS 442: Mobile App Development Michael Saelee 1

2 Frameworks - UIKit - Core Graphics / Quartz - Core Animation - OpenGL ES 2

3 UIKit OpenGL ES Core Graphics Core Animation 3

4 UIKit (mostly) ObjC API UI... classes/functions 4

5 UIKit Base view class: UIView Pre-built controls: UIControls 5

6 UIKit typically, use concrete subclasses as is (no need to subclass) e.g., UILabel, UIButton, UITableView, UIImageView 6

7 UIKit can also subclass UIView to draw custom UI elements 7

8 UIKit support for - 2D drawing - transformations - predefined transitions - basic animation 8

9 CG aka Quartz 2D C API for drawing 9

10 CG support for: - layer-based graphics - patterns, gradients, etc. - color spaces - working with bitmaps 10

11 CG mostly, UIKit draws using CG i.e., more than one way of doing anything 11

12 UIKit CG // clear with white rectangle [[UIColor whitecolor] set]; UIRectFill(self.bounds); // load and draw image at (0,0) [[UIImage drawatpoint:cgpointmake(0, 0)]; // get current graphics context to draw into CGContextRef context = UIGraphicsGetCurrentContext(); // clear with white rectangle CGContextSetRGBFillColor(context, 1.0, 1.0, 1.0, 1.0); CGContextFillRect(context, self.bounds); // load image from file NSString* imagefilename = [[[NSBundle mainbundle] resourcepath] stringbyappendingpathcomponent:@"image.png"]; CGDataProviderRef provider = CGDataProviderCreateWithFilename([imageFileName UTF8String]); CGImageRef image = CGImageCreateWithPNGDataProvider(provider, NULL, true, kcgrenderingintentdefault); CGDataProviderRelease(provider); // draw image at (0,0) CGContextDrawImage(context, CGRectMake(0, 0, CGImageGetWidth(image), CGImageGetHeight(image)), image); CGImageRelease(image); 12

13 CA ObjC API for animation and compositing verb [ trans. ] [usu. as n. ] ( compositing) combine (two or more images) to make a single picture, esp. electronically : photographic compositing by computer. 13

14 CA all UIViews are backed by CA layers 14

15 CA can create a hierarchy of CALayers within a single view (in addition to creating a hierarchy of views) 15

16 CA generally, layers are: - more lightweight - more flexible - more complex 16

17 CA CALayer properties can be automatically animated 17

18 CA support for: - simple value interpolation - key frame animation - transition effects - animation groups 18

19 UIKit CA // load image and add to view at position (100,100) UIImageView *imageview = [[UIImageView alloc] initwithimage:[uiimage imagenamed:@"image.png"]]; imageview.center = CGPointMake(100, 100); [self.view addsubview:imageview]; // animate using a block - - bounce between start position and (300,300) [UIView animatewithduration:5.0 delay:0.0 options:uiviewanimationoptionrepeat UIViewAnimationOptionAutoreverse animations:^{ imageview.center = CGPointMake(300, 300); } completion:null]; // create new CA layer and populate with image CALayer *layer = [CALayer layer]; UIImage *image = [UIImage imagenamed:@"image.png"]; layer.contents = image.cgimage; layer.frame = CGRectMake(0, 0, image.size.width, image.size.height); // add layer to view layer [self.view.layer addsublayer:layer]; // create basic animation to interpolate position between (100,100) and (300,300) CABasicAnimation *anim = [CABasicAnimation animationwithkeypath:@"position"]; anim.fromvalue = [NSValue valuewithcgpoint:cgpointmake(100, 100)]; anim.tovalue = [NSValue valuewithcgpoint:cgpointmake(300, 300)]; anim.duration = 5.0; anim.autoreverses = YES; anim.repeatcount = HUGE_VALF; anim.timingfunction = [CAMediaTimingFunction functionwithname:kcamediatimingfunctioneaseineaseout]; [layer addanimation:anim forkey:@"backandforth"]; 19

20 OpenGL industry standard 2D/3D graphics API 20

21 OpenGL technically, OpenGL ES; i.e., for Embedded Systems 21

22 OpenGL OpenGL ES 2.0 not backwards compatible (fixed-function vs. shaders) 22

23 OpenGL hardware acceleration (ipad 2: CPUx2, GPUx9, ipad 3: CPUx1, GPUx2-3) 23

24 OpenGL OpenGL render destination: CAEAGLLayer in UIView 24

25 OpenGL generally, don t mix OpenGL and UIKit/CA/CG functions (e.g., no layer transforms) 25

26 UIKit OpenGL ES Core Graphics Core Animation 26

27 Drawing 27

28 (0,0) x 320 y 480 ULO 28

29 (0,0) x 480 y 320 ULO 29

30 320 x 480 points (not necessarily = pixels!) 30

31 resolution independence scale factor points = pixels (retina display: scale = 2.0) 31

32 principal data types: CGPoint, CGSize, CGRect /* Points. */ typedef struct { float x; float y; } CGPoint; /* Sizes. */ typedef struct { float width; float height; } CGSize; /* Rectangles. */ typedef struct { CGPoint origin; CGSize size; } CGRect; 32

33 /* Make a point from (x, y). */ CGPoint CGPointMake(CGFloat x, CGFloat y); /* Make a size from (width, height). */ CGSize CGSizeMake(CGFloat width, CGFloat height); /* Make a rect from (x, y; width, height). */ CGRect CGRectMake(CGFloat x, CGFloat y, CGFloat width, CGFloat height); 33

34 /* Return the left/mid/right x- value of rect. */ CGFloat CGRectGetMinX(CGRect rect); CGFloat CGRectGetMidX(CGRect rect); CGFloat CGRectGetMaxX(CGRect rect); /* Return the top/mid/bottom y- value of rect. */ CGFloat CGRectGetMinY(CGRect rect); CGFloat CGRectGetMidY(CGRect rect); CGFloat CGRectGetMaxY(CGRect rect); /* Return the width/height of rect. */ CGFloat CGRectGetWidth(CGRect rect); CGFloat CGRectGetHeight(CGRect rect); /* Standardize rect - - i.e., convert it to an equivalent rect which has positive width and height. */ CGRect CGRectStandardize(CGRect rect); /* Return true if rect is empty (that is, if it has zero width or height), false otherwise. A null rect is defined to be empty. */ bool CGRectIsEmpty(CGRect rect); 34

35 locating/placing things: frame & bounds rectangles 35

36 frame = origin & size in superview s coordinate system 36

37 bounds = origin & size in local view s coordinate system 37

38 application window 38

39 view frame: - origin = (6, 5) - size = (15, 10) view application window 39

40 view bounds: - origin = (0, 0) - size = (15, 10) subview frame: - origin = (3, 4) - size = (6, 5) subview view application window 40

41 size of frame, bounds are automatically linked 41

42 reposition view by changing frame origin or center (changing one automatically adjusts the other) 42

43 can change bounds origin to adjust local coordinate system 43

44 view bounds: - origin = (0, 0) - size = (15, 10) subview frame: - origin = (3, 4) - size = (6, 5) 44

45 view bounds: - origin = (-1, 4) - size = (15, 10) subview frame: - origin = (3, 4) - size = (6, 5) 45

46 /* Fill `rect' with solid color */ void UIRectFill(CGRect rect); void UIRectFillUsingBlendMode(CGRect rect, CGBlendMode blendmode); /* Draw 1px frame inside `rect'. */ void UIRectFrame(CGRect rect); void UIRectFrameUsingBlendMode(CGRect rect, CGBlendMode blendmode); Simple Drawing 46

47 @interface UIColor // Convenience methods for creating autoreleased colors + (UIColor *)colorwithred:(cgfloat)red green:(cgfloat)green blue:(cgfloat)blue alpha:(cgfloat)alpha; // Some convenience methods to create colors. These colors are cached. + (UIColor *)blackcolor; // 0.0 white + (UIColor *)redcolor; // 1.0, 0.0, 0.0 RGB + (UIColor *)greencolor; // 0.0, 1.0, 0.0 RGB + (UIColor *)bluecolor; // 0.0, 0.0, 1.0 RGB + (UIColor *)clearcolor; // 0.0 white, 0.0 alpha // Set the color: Sets the fill and stroke colors in the current drawing context. - (void)set; // Set the fill or stroke colors individually. - (void)setfill; - (void)setstroke; // Access the underlying CGColorRef Color? 47

48 UIKit framework always draws to implicit, current Graphics Context 48

49 CG maintains a stack of graphics contexts (empty, by default) 49

50 UIView object pushes graphics context for its layer before calling drawrect: 50

51 @interface UIView(UIViewRendering) /* All custom drawing must happen from this method. Should limit drawing to rect - - on first call rect is usually equal to our bounds. */ - (void)drawrect:(cgrect)rect; /* drawrect: is called lazily. If view must be redrawn, we must notify the system by calling one of these methods below. */ - (void)setneedsdisplay; - 51

52 Q: draw in current view vs. adding subview? - it depends - subviews allow us to add/remove objects - but adds memory + processing overhead 52

53 HelloWorldView -discuss root view frame origin/ size Rectangle1 -using setneedsdisplay to force refresh Rectangle2 -use multiple views to track drawn rectangles -ignore contentstretch for now GameBoard - handling demo 53

54 subview size > superview? 54

55 default: no subview clipping. but no scrolling, either 55

56 Clipping Demo - effect of clipstobounds ScrollView Demo -automatic pan support based on contentsize -also: pinch to zoom demo 56

57 view transformations: translating, scaling, rotating 57

58 common strategy: - draw unit object at (0,0) - translate, scale, rotate to final position/size/orientation 58

59 drawrect: can be very lazy i.e., draw once, transform many times 59

60 implementation: affine transform matrices 60

61 transformed coordinates x 0 y 0 1 = x y 1 transformation matrix 2 4 original coordinates a b 0 c d 0 t x t y x 0 = ax + cy + t x y 0 = bx + dy + t y e.g. x 0 y 0 1 = x y = x + t x y + t y t x t y

62 typedef struct { CGFloat a, b, c, d; CGFloat tx, ty; } CGAffineTransform; /* The identity transform: [ ]. */ extern const CGAffineTransform CGAffineTransformIdentity; /* Return a transform which translates by `(tx, ty)': t' = [ tx ty ] */ CGAffineTransform CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty); /* Return a transform which scales by `(sx, sy)': t' = [ sx 0 0 sy 0 0 ] */ CGAffineTransform CGAffineTransformMakeScale(CGFloat sx, CGFloat sy); /* Return a transform which rotates by `angle' radians: t' = [ cos(angle) sin(angle) - sin(angle) cos(angle) 0 0 ] */ CGAffineTransform CGAffineTransformMakeRotation(CGFloat angle) /* Concatenate translation, scaling, rotation transforms to existing matrices. */ CGAffineTransform CGAffineTransformTranslate(CGAffineTransform t, CGFloat tx, CGFloat ty); CGAffineTransform CGAffineTransformScale(CGAffineTransform t, CGFloat sx, CGFloat sy); CGAffineTransform CGAffineTransformRotate(CGAffineTransform t, CGFloat angle); 62

63 for given graphics context (e.g., in drawrect:), change current transform matrix (CTM) 63

64 /* Scale the current graphics state's transformation matrix (the CTM) by `(sx, sy)'. */ void CGContextScaleCTM(CGContextRef c, CGFloat sx, CGFloat sy); /* Translate the current graphics state's transformation matrix (the CTM) by `(tx, ty)'. */ void CGContextTranslateCTM(CGContextRef c, CGFloat tx, CGFloat ty); /* Rotate the current graphics state's transformation matrix (the CTM) by `angle' radians. */ void CGContextRotateCTM(CGContextRef c, CGFloat angle); /* Concatenate the current graphics state's transformation matrix (the CTM) with the affine transform `transform'. */ void CGContextConcatCTM(CGContextRef c, CGAffineTransform transform); 64

65 ExpandingFrame -look at RotatingView drawrect -motivate CGContextSave/ RestoreGState -explore frame/bounds relationship demo 65

66 cubic & quadratic Bézier curves Drawing Other Shapes 66

67 @interface UIBezierPath : NSObject<NSCopying, NSCoding> { + (UIBezierPath *)bezierpath; - (void)movetopoint:(cgpoint)point; - (void)addlinetopoint:(cgpoint)point; - (void)addcurvetopoint:(cgpoint)endpoint controlpoint1:(cgpoint)controlpoint1 controlpoint2:(cgpoint)controlpoint2; - (void)addquadcurvetopoint:(cgpoint)endpoint controlpoint:(cgpoint)controlpoint; - (void)addarcwithcenter:(cgpoint)center radius:(cgfloat)radius startangle:(cgfloat)startangle endangle:(cgfloat)endangle clockwise:(bool)clockwise; - (void)closepath; + (UIBezierPath *)bezierpathwithrect:(cgrect)rect; + (UIBezierPath *)bezierpathwithovalinrect:(cgrect)rect; + (UIBezierPath *)bezierpathwithroundedrect:(cgrect)rect CGPathRef 67

68 Bézier curves can be created, stored, and reused, independent of graphics context 68

69 BezierDrawing demo 69

70 rects, curves, etc. = vector graphics infinite scaleability 70

71 raster graphics? e.g., bitmaps, JPG, PNG 71

72 UIKit: load with UIImage 72

73 imagenamed: Returns the image object associated with the specified filename. + (UIImage *)imagenamed:(nsstring *)name Parameters name The name of the file. If this is the first time the image is being loaded, the method looks for an image with the specified name in the application s main bundle. Return Value The image object for the specified file, or nil if the method could not find the specified image. Discussion This method looks in the system caches for an image object with the specified name and returns that object if it exists. If a matching image object is not already in the cache, this method loads the image data from the specified file, caches it, and then returns the resulting object. On a device running ios 4 or later, the behavior is identical if the device s screen has a scale of 1.0. If the screen has a scale of 2.0, this method first searches for an image file with the same filename with suffix appended to it. For example, if the file s name is button, it first searches for button@2x. If it finds a 2x, it loads that image and sets the scale property of the returned UIImage object to 2.0. Otherwise, it loads the unmodified filename and sets the scale property to

74 caveat emptor: imagenamed cache can be quite aggressive! (Google: imagenamed cache ) 74

75 raster graphics problem: scaling pixelation 75

76 UIView contentstretch property defines which parts of an image are stretched 76

77 ContentStretching demo 77

78 image = [UIImage imagenamed:@"image.png"]; ➊ UIKit (subview) UIImageView *imageview = [[UIImageView alloc] initwithimage:image]; [self.view addsubview:imageview]; ➋ CG (drawing) - (void)drawrect:(cgrect)rect { [image drawatpoint:cgpointmake(0, 0)]; } ➌ CA (compositing) CALayer *layer = [CALayer layer]; layer.contents = image.cgimage; [self.view.layer addsublayer:layer]; Image Drawing Options 78

79 ImageDrawing -run all three versions (view, layer, drawrect) --- may want to keep num_image < 100 for the last -run through instruments: memory allocations (num_images=10000 for view, layer version), and time profiler (esp. interesting for drawrect based) demo 79

80 more reading (Xcode library): - View Programming Guide for ios - Quartz 2D Programming Guide 80

81 Animation 81

82 UIKit / CoreAnimation 82

83 typically, use magic UIView / CALayer animation mechanism 83

84 i.e., provide new view properties in animation block along with time frame core animation does the rest 84

85 note: CA updates happen in a separate thread! 85

86 animated parameters are updated according to a specified interpolation curve (aka timing function) 86

87 timing functions 87

88 e.g., sprites 88

89 e.g., basic magic animations 89

90 e.g., how it works (CA equivalent with CAAction) 90

91 e.g., view transitions 91

92 e.g., UIImage based animations (multiple images) 92

93 e.g., CABasicAnimation 93

94 e.g., CAKeyFrameAnimation 94