Thiết kế đồ họa game

HỌC VIỆN CƠNG NGHỆ BƢU CHÍNH VIỄN THƠNG KHOA THIẾT KẾ VÀ SÁNG TẠO ĐA PHƢƠNG TIỆN ***** GIÁO TRÌNH BÀI GIẢNG (Phƣơng pháp đào tạo theo tín chỉ) TÊN HỌC PHẦN: IT THIẾT KẾ ĐỒ HỌA GAME PT (03 tín chỉ) Biên soạn ThS NGUYỄN ĐỨC HỒNG LƢU HÀNH NỘI BỘ Hà Nội, 12/2014 MỤC LỤC MỤC LỤC DANH MỤC CÁC HÌNH VẼ LỜI NÓI ĐẦU Chƣơng TỔNG QUAN VỀ THIẾT KẾ ĐỒ HỌA TRÕ CHƠI 10 1.1 Lịch sử thiết kế đồ họa trò chơi 10 1.1.1 Lịch sử thiết kế trò chơi 10 1.1.2 Lịch sử thiết kế đồ họa trò chơi 10 1.2 Quy trình thiết kế đồ họa trị chơi 14 1.2.1 Một số bƣớc quy trình sản xuất trò chơi 16 IT 1.2.2 Quy trình thiết kế đồ họa trị chơi 17 1.3 Vai trò nhiệm vụ nhà thiết kế đồ họa trò chơi 21 1.3.1 Mơ hình tổ chức nhóm thiết kế trò chơi 21 1.3.2 Vai trò nhà thiết kế Game - Game Artist 22 PT 1.4 Mối quan hệ thiết kế trò chơi đồ họa trò chơi 34 1.5 Các công cụ thiết kế đồ họa trò chơi 36 1.5.1 Giới thiệu công cụ thiết kế đồ họa trò chơi 36 1.5.2 Các đối tƣợng đồ họa Game Engine 39 Chƣơng CÁC ĐẶC ĐIỂM, KỸ NĂNG VÀ NGUYÊN TẮC THIẾT KẾ ĐỒ HỌA GAME 59 2.1 Đặc điểm thiết kế đồ họa trò chơi 59 2.2 Các kỹ cần có thiết kế đồ họa trị chơi 62 2.2.1 Kỹ vẽ phác họa 62 2.2.2 Kỹ thiết kế đồ họa máy tính 65 2.3 Nguyên tắc thiết kế đồ họa trò chơi 73 2.3.1 Nguyên tắc thiết kế đồ họa mơi trƣờng trị chơi 73 2.3.2 Nguyên tắc thiết kế đồ họa nhân vật game 77 2.3.3 Nguyên tắc thiết kế đồ họa UI game 84 Chƣơng THIẾT KẾ ĐỒ HỌA MÔI TRƢỜNG TRÕ CHƠI 98 3.1 Thiết kế địa hình (Terrain) 98 3.2 Thiết kế Light mapping 99 3.3 Thiết kế đối tƣợng tự nhiên 101 3.3.1 Tạo đối tƣợng Unity 3D 101 3.3.2 Gắn đối tƣợng tự nhiên vào Project 103 Chƣơng THIẾT KẾ ĐỒ HỌA NHÂN VẬT TRÕ CHƠI 105 4.1 Các kỹ thuật đồ họa 105 4.2 Thiết kế chi tiết nhân vật 107 4.2.1 Modeling nhân vật 107 4.2.2 Tạo map texture nhân vật 109 IT 4.2.3 Tạo ring skin nhân vật 110 4.2.4 Tạo chuyển động nhân vật 112 4.3 Nhập liệu nhân vật vào Game Engine 113 Chƣơng THIẾT KẾ ĐỒ HỌA UI TRÕ CHƠI 115 5.1 Thiết kế HUD game 115 PT 5.1.1 Sắp xếp HUD cho game 115 5.1.2 Thiết kế HUD cho game 115 5.1.3 Gắn HUD vào game 115 5.2 Thiết kế phím bấm trị chơi 116 5.3 Thiết kế chữ trò chơi 117 5.4 Thiết kế icon trò chơi 118 TÀI LIỆU THAM KHẢO 120 PHỤ LỤC: BÀI THỰC HÀNH THIẾT KẾ ĐỒ HỌA GAME 122 Phần I BÀI THỰC HÀNH THIẾT KẾ ĐỒ HỌA MÔI TRƢỜNG TRÕ CHƠI 122 I Thiết kế địa hình (Terrain) 122 II Thiết kế Light mapping 132 III Thiết kế đối tƣợng tự nhiên 135 III.1 Tạo đối tƣợng Unity 3D 135 III.2 Gắn đối tƣợng tự nhiên vào Project 144 Phần II BÀI THỰC HÀNH THIẾT KẾ ĐỒ HỌA NHÂN VẬT TRÕ CHƠI 145 II.1 Các kỹ thuật đồ họa 145 II.2 Thiết kế chi tiết nhân vật 175 II.2.1 Modeling nhân vật 175 II.2.2 Tạo ring skin nhân vật 271 II.2.3 Tạo chuyển động nhân vật 280 PT IT II.3 Nhập liệu nhân vật vào Game Engine 309 DANH MỤC CÁC HÌNH VẼ Hình I-1: Đồ họa trò chơi Tennis of two 11 Hình I-2: Máy chơi trò chơi 11 Hình I-3: Final fantasy VII 12 Hình I-4: Võ lâm truyền kỳ 2.5D 12 Hình I-5: Võ lâm truyền kỳ 3D 13 Hình I-6: World of Warcraft 13 Hình I-7: Rắn săn mồi điện thoại Nokia 14 Hình I-8: Ace of tennis 3D 14 IT Hình I-9: Quy trình thiết kế đồ họa Game 18 Hình I-10: Sprite sheet Game 2D 19 Hình I-11: Gắn xương cho nhân vật trò chơi Maya 20 Hình I-12: Camera Unity 3D 21 PT Hình I-13: Mơ hình tổ chức nhóm thiết kế đa phương tiện 21 Hình I-14: Mơ hình tổ chức nhóm thiết kế trị chơi 22 Hình I-15: Concept art nhân vật Malelf 25 Hình I-16: Concept art mơ tả cảnh quan trò chơi 26 Hình I-17: Concept art Pokemon 27 Hình I-18: Concept art cơng nghiệp 27 Hình I-19: Storyboard cho trò chơi Ironman 28 Hình I-20: Mơi trường game 2D 29 Hình I-21: Mơi trường game 3D 30 Hình I-22: Hiệu ứng đồ họa Game 32 Hình I-23: Bản đồ chuyển động Game 2D 33 Hình I-24: Gắn xương cho nhân vật Game 34 Hình I-25: Một mơ tả tóm tắt nhân vật trò chơi 35 Hình I-26: Sản phẩm đồ họa Game Farm wars 36 Hình I-27: Một số cơng cụ đồ họa 2D 37 Hình I-28: Một số cơng cụ đồ họa 3D 38 Hình I-29: Các tảng hỗ trợ Unity 39 Hình I-30: Màn hình Unity3D 41 Hình I-31: Màn hình khởi tạo 42 Hình I-32: Màn hình sau khởi tạo 43 Hình I-33: Tạo folder Unity 43 Hình I-34: Tạo empty object 44 Hình I-35: Tạo đối tượng 45 Hình I-36: Tag Game object 45 IT Hình I-37: Single sprite 45 Hình I-38: Import new assets 46 Hình I-39: Sprite render 47 Hình I-40: Tạo ánh sáng Unity3D 48 Hình I-41: Điều chinh tham số ánh sáng 48 PT Hình I-42: Bật chế độ đổ bóng 49 Hình I-43: Điều khiển chất lượng bóng 49 Hình I-44: Đối tượng đổ bóng 50 Hình I-45: Tạo particale 50 Hình I-46: Đối tượng particle system 51 Hình I-47: Tạo prefab cho particle system 52 Hình I-48: Particle system 52 Hình I-49: Gắn particle system nhân vật 53 Hình I-50: Tạo text GUI cho trò chơi 55 Hình I-51: Tham số GUI text 55 Hình I-52: Đối tượng gắn GUI text 56 Hình I-53: Image UI 58 Hình II-1: Cây cối tạo hình phương thức lặp Game Thế giới hồn mỹ 60 Hình II-2: Thiết kế nhân vật trò chơi kỹ thuật Lowpoly 61 Hình II-3: Texture bề mặt gỗ 61 Hình II-4: Bảy nét 62 Hình II-5: Tỉ lệ nét vẽ không gian ba chiều sai 64 Hình II-6: Đậm nhạt 64 Hình II-7: Phương pháp đo bút chì 65 Hình II-8: Cận cảnh Game Heavy rain 66 Hình II-9: Trung cảnh Game Journey 66 Hình II-10: Toàn cảnh Game Journey 67 Hình II-11: Đường chân trời Assasin's Creed II 67 Hình II-12: Đường chân trời hình Assasin's Creed II 68 IT Hình II-13: Góc máy thấp Shadow of Colossus 68 Hình II-14: Góc máy nghiêng Uncharted III 69 Hình II-15: Nhóm đối tượng Game chiến thuật Empire: Total war 70 Hình II-16: Grand Thief Auto IV 71 Hình II-17: Đường đua Mario Kart Wii 71 PT Hình II-18: Hình khối thiết kế oto 72 Hình II-19: Hình khối thiết kế nhân vật game 72 Hình II-20: Tương quan hình khối nhân vật môi trường 73 Hình II-21: Sự hài hịa hình khối nhân vật mơi trường Super Mario Galaxy 74 Hình II-22: Biến đổi hình dạng kiến trúc theo tính chất trị chơi 75 Hình II-23: Phong cách mơi trường trị chơi thống với nhân vật 75 Hình II-24: Góc nhìn từ xuống thường thấy game 76 Hình II-25: Bản đồ Gears of war 77 Hình II-26: Bảng mơ tả đồ họa chung cho dự án Game 79 Hình II-27: Nghiên cứu cho nhân vật Game 80 Hình II-28: Xác định hình dạng chung nhân vật 80 Hình II-29: Tạo hình cho nhân vật gắn với keyword 81 Hình II-30: Phác họa nhân vật Game 82 Hình II-31: Hình ảnh hồn thiện cho nhân vật Game 83 Hình II-32: Mơ tả chuyển động nhân vật Game 84 Hình II-33: UI game 84 Hình II-34: Flow chart cho menu Game 86 Hình II-35: Một số cách xếp HUD 87 Hình II-36: Nhân vật bị choáng 88 Hình II-37: HUD game DoTA 89 Hình II-38: Một HUD game 89 Hình II-39: Mobile HUD game Colonel Kart racing 90 Hình II-40: Phím bấm suốt Flappy bird 91 Hình II-41: Button gắn liền với vật thể Game 91 IT Hình II-42: Hình dạng đặc biệt phím bấm trị chơi 92 Hình II-43: Hướng dẫn "Press A to Start" 93 Hình II-44: Phím ảo mơ lại phím thực máy chơi game 94 Hình II-45: Các thành phần chữ 95 Hình II-46: Điều chỉnh giãn cách chữ 96 PT Hình II-47: Một số theme font chữ khó đọc 97 Hình V-1: Một HUD game (2) 116 Hình V-2: Màn hình khởi động Game Where's my water? 117 Hình V-3: Bộ font chữ cho Game 118 Hình V-4: Bộ icon điều khiển Game 119 Hình V-5: Bộ icon nhân vật Game Angry bird 118 LỜI NĨI ĐẦU Hiện nay, ngành cơng nghiệp trị chơi ngành cơng nghiệp có tỉ lệ tăng trƣởng, doanh thu nhƣ lợi nhuận đạt đƣợc số ấn tƣợng Trên Thế giới, lĩnh vực cơng nghiệp trị chơi điện tử, nhóm ngành nghề đƣợc phân chia cụ thể sát với yêu cầu thực tế công việc Trong bao gồm: Thiết kế trị chơi (Game design), Thiết kế đồ họa trị chơi (Game art), Lập trình trị chơi (Game development), Kiểm thử trò chơi (Game testing) Vận hành trò chơi (Game operation) IT Thiết kế đồ họa trò chơi lĩnh vực đặc thù có ý nghĩa quan trọng ảnh hƣởng đến thành cơng hay thất bại trị chơi tung thị trƣờng Ngƣời thiết kế đồ họa trò chơi ngƣời tạo diện mạo trò chơi, định hấp dẫn thành công mặt nghệ thuật nhƣ thƣơng mại trò chơi Chính trƣớc trở thành nhà thiết kế đồ họa game, ngƣời học cần phải có kiến thức kỹ lĩnh vực PT Các kiến thức việc thiết kế đồ họa trò chơi giúp ngƣời học nắm đƣợc lý thuyết chung mặt mỹ thuật, kỹ thuật đặc thù riêng việc tạo thiết kế đồ họa cho trị chơi Ngồi ra, mơn học mang tính đặc thù thực hành cao, nội dung chƣơng trình bao gồm hƣớng dẫn cho ngƣời học kỹ để tạo đối tƣợng game thƣờng gặp Tác giả xin chân thành cám ơn cán Viện công nghệ Thông tin Truyền thông CDIT, Học viện Công nghệ Bƣu Viễn thơng PTIT trợ giúp để hoàn thành tài liệu Chƣơng TỔNG QUAN VỀ THIẾT KẾ ĐỒ HỌA GAME 1.1 Lịch sử thiết kế đồ họa Game 1.1.1 Lịch sử thiết kế game Lịch sử trị chơi điện tử chia thành giai đoạn Lịch sử video game gắn liền với lịch sử phát triển của máy vi tính, thiết bị chơi game chuyên dụng phát triển thiết bị điện tử cầm tay Bên cạnh thiết bị đầu cuối, lịch sử video game gắn liền với lịch sử phát triển kỹ thuật trí tuệ nhân tạo (AI) IT 1952: Sự đời trò chơi Tennis of Two: đƣợc phát triển William Higinbotham Đây chƣơng trình mơ mơn thể thao tennis hình oscilloscope cho phép hai ngƣời chơi sử dụng thiết bị cầm box-shaped với viên bi để chỉnh hƣớng phím để đánh bóng 1971-1977: Giai đoạn cơng nghiệp mới: trò chơi máy trò chơi PT 1978 – 1986: Giai đoạn hồng kim trị chơi máy trò chơi 1983 – 1995: Giai đoạn game Console hệ III (Máy Nintendo) Giai đoạn 1990: Đánh dấu đời game online 1988 – 1999: Giai đoạn Game console hệ IV Giai đoạn 2010: Sự đời Mobile Game 1.1.2 Lịch sử thiết kế đồ họa game Cùng với đời trò chơi điện tử, việc thiết kế đồ họa cho trò chơi đời Ban đầu, trị chơi điện tử sử dụng tín hiệu điện tử để thể đối tƣợng trị chơi Ví dụ: Trong trị chơi tennis of two, tín hiệu hiển thị máy Oscilloscope đƣợc sử dụng để miêu tả bóng tennis sân tennis 10 IT Tiếp tục Project -> Animation -> Mở rộng WalkForwardandTurns Kéo WalkFwdTurnRight vào ô Motion số (Bên Inspector) PT Kéo WalkFwdTurnLeft vào ô Motion số (Bên Inspector) Ta đƣợc kết nhƣ sau: 297 IT Click Blend Tree set sang -1: PT Phần Parameter chọn sang Direction Ở Animation, chọn BlendTree bên dƣới: 298 IT Ở bên Inspector, ấn + tạo New Motion (3 lần) Trong Project -> Chọn Animation -> Chọn Runs Add vào Run Left vào ô PT Run Right vào ô thứ Tiếp tục điền -1 nhƣ hình: 299 IT Chọn Direction Mục Parameter PT Sau thay đổi, Phần Animator ta đƣợc nhƣ sau: Thay đổi tên phần Insector: 300 IT Quay trở lại Base Layer để tạo mối liên kết Idle Locomotion PT Click chuột phải vào Iddle chọn make Transition kéo thả vào Locomotion Chọn đƣờng lên kết Idle Locomotion, tab Inspector thay đổi Condition: Speed – Greater – 0.1 301 Click chuột phải vào Locomotion ->Make Transition kéo vào Iddle IT Chọn đƣờng liên kết vừa tạo từ Locomotion đến Iddle, thay đổi tab Inspector: Condition: Speed – Less – 0.1 PT Sauk hi thay đổi ta đƣợc hình Base Layer nhƣ sau: Ở Hierachy -> Chọn Main Camera Ở Project chọn Thƣ mục Script Kéo Script tên ThirPersonCamera vào Main Camera phần Inspector: 302 IT PT Vào Project -> Folder Prefabs -> Thả Prefab CamPos tab bên cạnh vào Robot Hierachy 303 Phần 6: Tạo animation nhảy cho nhân vật Quay trở lại phần Animation, ta add thêm tính nhảy nhân vật PT IT Ở Project -> Thƣ mục Animation -> Mở rộng phần Jump -> Kiếm animation Jump -> Kéo thả vào phần bên Animation: Ta tiếp tục tạo kết nối Locomotion Jump click chuột phải vào Locomotion chọn Make Transition Làm tƣơng tự để tạo kết nối ngƣợc từ Jump đến Locomotion Bởi Jumping ta cần lệnh để điều khiển nên ta thiết lập cách click + phần Parameters chọn Bool 304 IT Thay tên Bool Jump PT Chọn kết nối từ Locomotion đến Jump thay đổi thông số Inspector nhƣ sau: Tƣơng tự từ chiều ngƣợc lại từ Jump đến Locomotion: Ở Animator, mục Parameters tạo Float Đặt tên New Float thành ColliderHeight 305 PT IT Quay trở lại Robot Hierachy, check vào phần Use Curves Bot Control Script (Inspector): Bƣớc 7: Tạo animation nhảy từ cao xuống Từ Animator -> Parameters -> Tạo Bool Thay tên thành JumpDown 306 Phần Project -> Chọn thƣ mục Animation -> Mở rộng JumpDownRollnRun IT Chọn Animation tên JumpDown kéo thả vào Animator: Tiếp tục tạo Transition Locomotion JumpDown chỉnh thông số bên Inspector: PT Phần Project -> Chọn thƣ mục Animation -> Mở rộng JumpDownRollnRun Chọn Animation tên Fall kéo thả vào Animator: Tạo Transition JumpDown Fall Để thông số bên Inspector: 307 Phần Project -> Chọn thƣ mục Animation -> Mở rộng JumpDownRollnRun IT Chọn Animation tên Roll kéo thả vào Animator: PT Tạo Transition nối Fall đến Roll điều chỉnh thông số Inspector Cuối ta tạo Transition từ Roll đến Locomotion 308 Và điều chỉnh thông số Inspector: Bƣớc 9: Điều chỉnh nhảy, phần Collider nhân vật thu gọn lại theo dáng nhảy nhân vật: PT IT Từ Animator -> Parameters -> Tạo Float -> Đổi tên thành ColliderY II.3 Nhập liệu nhân vật vào Game Engine Phần 1: Chuẩn bị Setup Nhân vật Import Character vào Project 309 IT PT Kiểm tra tab Animation Inspector: Chuyển sang Tab Rig chọn Humanoid phần Animation Type nhấn Apply ( Lƣu ý Avatar Definition chế độ Creat From This Model) 310 IT PT Nhấn Button Configure chọn Save 311 ... Nguyên tắc thiết kế đồ họa môi trƣờng trò chơi 73 2.3.2 Nguyên tắc thiết kế đồ họa nhân vật game 77 2.3.3 Nguyên tắc thiết kế đồ họa UI game 84 Chƣơng THIẾT KẾ ĐỒ HỌA MÔI... thành ba loại cơng cụ chính:  Cơng cụ thiết kế đồ họa 2D  Công cụ thiết kế đồ họa 3D  Game Engine 1.5.1.1 Công cụ thiết kế đồ họa 2D Các công cụ thiết kế đồ họa 2D đa dạng đƣợc phát triển nhiều... cầu 35 IT Hình 1-26: Sản phẩm đồ họa Game Farm wars 1.5 Các công cụ thiết kế đồ họa game PT 1.5.1 Giới thiệu công cụ thiết kế đồ họa game Hiện có nhiều cơng cụ thiết kế trị chơi, nhiên chia thành