Graphics 2D 2 Subject:T0934 / Multimedia Programming Foundation Session:7 Tahun:2009 Versi:1/0

Bina Nusantara Learning Outcomes In the end of this session, students must be able to: –Understand the basic principal of animation –Apply correct Java syntax to animate graphics primitives

Outline Java Coordinate System Animation Java 2D Graphics Bina Nusantara

Java Coordinate System The origin is located in the upper-left corner of the window All values are positive integers. Bina Nusantara

Animation in Java Animation is the sequencing of a series of static images to generate the illusion of movement. Bina Nusantara AnimationFrame-BasedCast-Based

Frame Based Animation Displaying a sequence of static frames –Simpler –Often used in nongaming animations –Background and objects are inseparable Bina Nusantara

Cast Based Animation Moving objects independently of the background –Also called sprite animation –Often used in games –Background and objects are separable Bina Nusantara

Frame Rate –The standard frame rate is 12 fps (frames per second). –The higher the frame rate is defined, the smoother the animations is. Bina Nusantara

Transparency Use Transparency Colors –colors in an image that are unused (aren't drawn along with the rest of the colors in the image) Use transparency supported image format –GIF –PNG Bina Nusantara Transparency color

Z-Order the relative depth of objects on the screen Bina Nusantara

Z-Order Bina Nusantara Setting Control when dragged Remove object

Z-Order Bina Nusantara Change Z-order Add the object match with it’s Z-order

Animation Process 1.Using Image objects to hold image files 2.Putting a series of images into an array 3.Display the image array sequentially in high speed to produce the animation 4.Set the movements of the image array Bina Nusantara

Drawing problems Flickering –Caused by drawing the images directly and consecutively on the screen Tearing –a splitting effect that occurs when drawing to the screen happens faster than the monitor's refresh rate Solution : Double Buffering Page Flipping Bina Nusantara

Double Buffering create an image on back buffer (off screen) call the image from back buffer onto the screen (Block Line Transfer/BLT) Bina Nusantara blitting

Double Buffering Bina Nusantara Full code downloadedable in additional materi.

Double Buffering Bina Nusantara Result This animation didn’t have any flicker.

Page Flipping Use 2 buffers called back buffer and primary surface use video pointer to switch between two buffers the pointed buffer will become primary surface and the other one back buffer Bina Nusantara

Page Flipping Bina Nusantara Check whether the PC is support for Page Flipping or not Create the back buffer

Page Flipping Bina Nusantara Draw something in back buffer

Page Flipping Bina Nusantara Flip the back buffer to screen Result Full code downloadable in Additional Materi

Animation Special Effects Tweening Warping Morphing Bina Nusantara

Tweening The interpolation of two images to yield a smooth-flowing animation Also called In-betweening Typically done with points, lines, or polygons Bina Nusantara

Warping the mathematical trick of stretching and squashing an image Bina Nusantara

Morphing DissolvingWarpingTweening Bina Nusantara

References Introduction to Java Programming Daniel Liang. Ch: Java 2D API Java Media APIs PA72&dq=user+coordinate+space+coordinate+java&source=bl&ots =vxxsy6CD9Z&sig=zKOxJ9Q7hGCqtxkajz9XFa8rS1I&hl=id&ei=j4s4 SvDXJabo6gPS05zQCw&sa=X&oi=book_result&ct=result&resnum= 5#PPA94,M1 PA72&dq=user+coordinate+space+coordinate+java&source=bl&ots =vxxsy6CD9Z&sig=zKOxJ9Q7hGCqtxkajz9XFa8rS1I&hl=id&ei=j4s4 SvDXJabo6gPS05zQCw&sa=X&oi=book_result&ct=result&resnum= 5#PPA94,M1 Java 2D Graphics (Jonathan Knudsen) PA23&dq=graphics+coordinate+user+device&source=bl&ots=hVj3O 0X5Ih&sig=XUWbcpuTLCrMQ1fZDvvDOj61g0w&hl=id&ei=fCw3So PVBJf6kAXfnaCcDQ&sa=X&oi=book_result&ct=result&resnum=6#P PA90,M1 PA23&dq=graphics+coordinate+user+device&source=bl&ots=hVj3O 0X5Ih&sig=XUWbcpuTLCrMQ1fZDvvDOj61g0w&hl=id&ei=fCw3So PVBJf6kAXfnaCcDQ&sa=X&oi=book_result&ct=result&resnum=6#P PA90,M1 Bina Nusantara

References Java Graphics Techniques /ch5.htm#TheGraphicsCoordinateSystem 3/ch5.htm#TheGraphicsCoordinateSystem Sprite Animation /ch6.htmhttp:// /ch6.htm Double Buffering and Page Flipping ml ml Morphing on Your PC evry.fr/~meunier/Morphing/DrDobbs3/printableArticle.jhtml.htmlhttp://www-inf.int- evry.fr/~meunier/Morphing/DrDobbs3/printableArticle.jhtml.html Fast Page Flipping Java code example Reducing Flicker: Step 1 Override Update reduceFlicker1.html reduceFlicker1.html Bina Nusantara

References Reducing Flicker: Step 2 Clipping reduceFlicker2.html reduceFlicker2.html Reducing Flicker: Step 3 Double Buffer. reduceFlicker3.html reduceFlicker3.html Bina Nusantara