Chapter 4 Instructions

Transcription

1 Ch04 - Video Game Foundations - ITP 160 -VVA Eaton Chapter 4 Instructions ITP 160 or VVA Mrs. Eaton /2016 Chapter 4 Perspective, Scene Design, and Basic Animation Note: You can complete the activities before you have the textbook. Use the Video Game Design Foundations textbook 1st or 2nd Edition to complete this assignment. 2nd Edition 1st Edition Activity 4-6 Pixel Mapping Complete Activity 4-6 Pixel Mapping. This activity starts on the the 3rd page of this PDF file. Use Excel or the Sprite Editor in GameMaker and follow the instructions to create a sprite using pixel mapping. This is a great activity to help you create pixel art for your own original games in the future. Scoring for Activity 4-6 of 25 points Name This is the score sheet that I will use to score your activity. Make sure you do everything before you submit. ( 2 points) 7. Image is 32 x 32 pixels in size ( 2 points) 10. Magenta background color ( 2 points) 13. Fill ranges with red ( 2 points) 14. Fill ranges with yellow ( 2 points) 15. Fill ranges with white ( 2 points) 16. Fill ranges with black ( 2 points) 17. Fill ranges with gray ( 2 points) 18. Fill ranges with skintone (10 points) 19. Character should look like Figure 3 on page 117 ( 5 points) Antialiasing evident on red hat/yellow bill and red cap/black hair. ( 2 points) Save the file as "Pixel Map - Lastname" with an Excel extention or.bmp depending on the software you used Submit this file in the appropriate folder on or before the due date. VVA students submit your file to Dropbox. NRCC students submit your file to Blackboard. Remember you earn 0 points for late assignments. Read Chapter 4 Perspective, Scene Design, and Basic Animation file:///g / /ITP 160 Wrapper /ITP Web Site/gw-book/html-pdf-files/04-animation.html[9/8/2015 9:10:37 AM]

2 Ch04 - Video Game Foundations - ITP 160 -VVA Eaton Read Chapter 4 from the text book. You do NOT need to answer the review questions at the end of the chapter. Companion Web Site The companion web site DOES NOT INCLUDE the textbook. You will need to purchase the textbook. These items will help you with the chapter quiz so check them out. You don't need to submit anything. Go to the companion web site and expand the items under Chapter 3. Check out the Animated Review 4-1: Video Game Perspectives. There is also a quiz at the end. Check out the Matching Activity. Check out the Postttest. Take the Chapter Quiz Go under Quizzes to find the Quiz for this Chapter. The quiz is timed so be sure you have read the chapter carefully first. Questions or Comments about this assignment? Virtual Virginia students Mrs. Eaton at carlotta.eaton@virtualvirginia.org Community College students Mrs. Eaton at ceaton@nr.edu Please do not clog up my mailboxes by mailing to both s. I check my s every day Monday - Friday. Copyright Carlotta Eaton. All rights reserved. NRCC ceaton@nr.edu VVA carlotta.eaton@virtualvirginia.org Site Address: Last Updated:September 8, 2015 file:///g / /ITP 160 Wrapper /ITP Web Site/gw-book/html-pdf-files/04-animation.html[9/8/2015 9:10:37 AM]

3 Name: Date: Class: Activity 4-6 Pixel Mapping Objective Students will be able to create an image by pixel mapping. Students will be able to explain how a computer reads and displays a bitmap image. Students will be able to use the RGB color model to represent interpolated pixels. Students will modify pixels to perform antialiasing on a raster image. Situation The Really Cool Game Company wants to create a 2D tile-based game for low-memory handheld devices and cell phones. You need to create some sprite examples to send to the art department. The tile size for the game is 32 pixels square. Each art asset will have to fit within the 32 by 32 pixel square to properly display in the game. How to Begin 1. Launch Microsoft Excel 2007/2010 or other spreadsheet program. If using a different version of Excel or a different spreadsheet program, you may need to adjust these instructions. 2. Save the file as Pixel Mapping Art in your working folder. Fill Color Image Map Area 3. Click the column A header and drag to the right to highlight columns A through AF. 4. Right-click on any of the highlighted column headers and choose Column Width from the shortcut menu. 5. In the Column Width dialog box, enter 2 in the text box and click the OK button. 6. Using similar steps, change the row height for rows 1 through 32 to Highlight cells A1 through AF Click the Fill Color button in the Font panel of the Home tab on the ribbon and choose More Colors in the shortcut menu. 9. In the Colors dialog box, click the Custom tab. 10. Change the RGB settings to red 250, green 0, and blue 250 to create magenta. Then, click the OK button to fill the cells. See Figure 1. Magenta is commonly used in digital images as a masking color, or chroma key. A masking color denotes transparent areas of an image. Since magenta very rarely appears in photographs or other digital images unless intentionally added, it is an ideal masking color. 114 Video Game Design Foundations Software Design Guide

4 Name: Color to fill Figure 1 Fill Color Pixels On your display will be a magenta square that is 32 squares wide and 32 squares high. Each cell in the magenta colored area represents a single pixel in the sprite you are creating. Each pixel in the raster image can only contain a single color. When a computer reads a raster image, it needs to know both the location and color of each pixel. In this lesson, you will add an RGB fill color to each cell (pixel). The pixel location is determined by the column/row cell identification. 11. Select cells N1 to S1 by clicking and dragging. This selection is called a range. This range would be noted as N1:S With the range N1:S1 highlighted, change the fill color to red Fill each of the following ranges with red (R255, G0, B0). Refer to Figure 2. L2:U2 U5:Y5 F8:AA8 AA11:AB14 F32:M32 J3:M3 G6:L6 E9:J9 E15 T32:AA32 T3:W3 U6:Z6 W9:AB9 AB15 I4:L4 F7:L7 E10:H10 N27:S27 U4:X4 O7:R7 Y10:AB10 G31:K31 H5:L5 U7:AA7 E11:F14 V31:Z Fill each of the following ranges yellow (R255, G255, B0). K9:V9 U10:X10 W11:Z11 I10:L10 G11:J Fill each of the following ranges white (R255, G255, G255). N3:S3 S13:V13 N16:S19 K21:N21 M4:T6 J14:O15 H18:H19 S21:V21 M7:N7 R14:W15 Y18:19 L22:M22 S7:T7 X15:V20 L20:O20 T22:U22 K13:N13 I15:K20 R20:U20 Chapter 4 Perspective, Scene Design, and Basic Animation 115

5 Figure Fill each of the following ranges with black (R0, G0, B0). M10:T10 Z14:Z15 AA20 U23:V28 K11:O12 AA15:AA17 F20 I24:I26 P11:Q11 F15:F17 F21:G22 X24:X26 R11:V12 AB16:AB22 Z21:AA22 M25:T26 G12:J13 E16:E22 J22:J27 M27 W12:Z13 L16:M19 W22:W27 T27 G14:G15 T16:U19 K23:L28 M28:T Fill each of the following ranges gray (R150, G150, B150). C19:D20 AC19:AD Fill each of the following ranges with skin tone (R255, G225, B175). P12:Q15 AE18:AF21 X23:AB23 W28:Z28 O13 C21:D22 F24:H26 H29:Y29 R13 AC21:AD22 Y24:AA26 I30:X30 AC17:AD18 K22 G27:I27 L31:U31 C17:D18 V22 X27:Z27 N32:S32 A18:B21 E23:I23 G28:J Fill the remaining pixels around the eyes and for the nose with the skin tone to complete the image. See Figure 3. Do you recognize this famous game character? 116 Video Game Design Foundations Software Design Guide

6 Name: Figure 3 Aliasing Notice how the pixels on what should be the curved edges create a jagged line, like stairs. This effect is called aliasing. Since each pixel is square, the computer has to approximate a curved edge. By increasing the number of pixels in an image, or its resolution, aliasing becomes less obvious. In effect, increasing the resolution of an image reduces the size of each pixel. This effect can be simulated by zooming out. 20. Locate the Zoom control at the bottom-right corner of Excel, as shown in Figure 4. The Zoom setting is also located on the View tab of the ribbon. Click to zoom out Drag to zoom Click to zoom in Figure 4 Chapter 4 Perspective, Scene Design, and Basic Animation 117

7 21. Change the zoom to 10 percent. Notice how the smaller pixel size smoothes out the jagged edges. 22. Change the zoom setting to 150 percent. Notice how the larger pixel size makes the aliasing more pronounced. 23. Change the zoom setting to 100 percent to display the image in the normal view. Fill Color Antialiasing Antialiasing is a process of varying the color of pixels to smooth out the aliasing effect. By blending the colors of two adjacent pixels, the brain is fooled into seeing a reduced stair-step effect. Antialiasing is an important part of the graphic design of video games. 24. Select cell J Click on the Fill Color button and choose More Colors in the drop-down list. 26. In the Colors dialog box, click the Custom tab. The current RGB values for the cell fill color are displayed, which are R255, G0, B0. Make note of these values. 27. Close the Color dialog box. 28. Select cell I10 and open the Color dialog box. Make note of the color values for this cell (R255, G255, B0). 29. Close the Color dialog box. The boundary between the yellow and red pixels can be blended to apply antialiasing. The process of blending a pixel is called interpolation. A simple interpolation model for antialiasing is to average the RGB values of pixels along an edge. In Figure 5, notice how the RGB values for red and yellow are averaged to create a blended color. 30. Change the fill color of the following cells to the blended color R255, G128, B0. This will produce antialiasing between the red-yellow dividing line. J9 H10 X10 W9 I10 Y Determine the RGB value for a black pixel. Red Pixel RGB Value Yellow Pixel RGB Value Blended Pixel RGB Value 255,0,0 255,255,0 255,128,0 Calculation for blended color: Red value: ( ) = Green value: Blue value: ( ) 2 (0 + 0) 2 = 127.5, rounded up to 128 = 0 Figure Video Game Design Foundations Software Design Guide

8 Name: 32. Fill in the table below to average a red and black pixel. Red Pixel Black Pixel Blended Pixel 255,0,0 0,0,0 128,0,0 33. Change the fill color of the following ranges to the blended color calculated in the table above. AA12:AA14 AB15 F12:F14 E Fill in the table below to average a yellow and black pixel. Yellow Pixel Black Pixel Blended Pixel 255,255,0 0,0,0 128,128,0 35. Change the fill color of the following cells to the blended color calculated in the table above. G11 Z View the image at 10 percent zoom. Notice how antialiasing has smoothed the edges between the red cap and the yellow bill, as well as the red cap and the black hair. See Figure 6. Due to the very low pixel density, or resolution, of this image, all curved edges will appear jagged even with antialiasing. If time permits, continue calculating blended colors and apply antialiasing to the remaining curved edges of the image. Figure 6 Chapter 4 Perspective, Scene Design, and Basic Animation 119