LẬP TRÌNH TRÒ CHƠI mô PHỎNG THỂ LOẠI GAME DẠNG BẢNG, MULTIPLAYER

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM TRẦN XUÂN BẮC KHÓA LUẬN TỐT NGHIỆP LẬP TRÌNH TRÒ CHƠI MÔ PHỎNG THỂ LOẠI GAME DẠNG BẢNG, MULTIPLAYER Game programming to simulate board games, multiplayer KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM TP HỒ CHÍ MINH, 2021 ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM TRẦN XUÂN BẮC – 16520069 KHÓA LUẬN TỐT NGHIỆP LẬP TRÌNH TRÒ CHƠI MÔ PHỎNG THỂ LOẠI GAME DẠNG BẢNG, MULTIPLAYER Game programming to simulate board games, multiplayer KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM GIẢNG VIÊN HƯỚNG DẪN ThS ĐINH NGUYỄN ANH DŨNG TP HỒ CHÍ MINH, 2021 THƠNG TIN HỘI ĐỒNG CHẤM KHĨA LUẬN TỐT NGHIỆP Hội đồng chấm khóa luận tốt nghiệp, thành lập theo Quyết định số …………… …… ngày … tháng … Hiệu trưởng Trường Đại học Công nghệ Thông tin ………………………… – Chủ tịch ………………………… – Thư ký ………………………… – Ủy viên ………………………… – Ủy viên LỜI CẢM ƠN Nhóm xin cảm ơn thầy (ThS.) Đinh Nguyễn Anh Dũng tận tâm bảo, góp ý và định hướng phát triển cho ứng dụng Những lời khuyên thầy giúp ứng dụng trở nên thực tế và dễ dàng tiếp cận thị trường hơn Nhóm xin gửi lời cảm ơn đến quý thầy cô, bạn bè và gia đình, quá trình xây dựng dùng thử ứng dụng và cho nhiều góp ý tích cực để ứng dụng hoàn thiện Trong trình thực hiện, nhóm tham khảo và tìm kiếm tài liệu từ nhiều nguồn khác nhau, nhiều người trải qua vấn đề và để lại giải pháp, không thể kể tên nhóm xin cảm ơn sự đóng góp cộng đồng người Xin chân thành cảm ơn tất Thành phố Hồ Chí Minh, tháng 06 năm 2021 Trần Xuân Bắc MỤC LỤC TÓM TẮT KHÓA LUẬN MỞ ĐẦU .2 Phát biểu đề tài Mục tiêu Phạm vi ứng dụng Đối tượng ứng dụng Phương pháp thực Kết mong đợi Tính khả thi ứng dụng Nội dung luận văn Chương TỔNG QUAN .4 1.1 Giới thiệu khái quát .4 1.1.1 Board game 1.1.2 Mutilplayer game 1.2 Game, game online và board game phát triển 1.2.1 Sự tăng trưởng ngành game đại dịch covid 19 1.2.2 Khối lượng người chơi board game khổng lồ ngày tăng 1.2.3 Các vấn đề được giải Chương GIỚI THIỆU CÔNG NGHỆ .7 2.1 Unity3D engine 2.2 WebGL 2.3 Unity Photon Network 2.4 Gamesparks (baas: backend as a service) Chương TRÒ CHƠI BOARDGAME SIMULATOR .11 3.1 Giới thiệu tổng quát .11 3.2 Thiết kế kiến trúc 11 3.2.1 Kiến trúc hệ thống .11 3.2.2 Mô tả các chế 12 3.2.3 Sơ đồ, biểu đồ 17 3.3 Thiết kế giao diện 24 3.3.1 Phần đăng nhập 25 3.2.2 Màn hình chính .27 3.3.2 Phần editor 34 3.3.3 Phần game 39 3.4 Tinh chỉnh resource .41 Chương MỘT SỐ KỸ THUẬT SỬ DỤNG 42 4.1 Kỹ thuật sử dụng Unity3D, C# 42 4.1.1 Raycast 42 4.1.2 ScriptableObject 43 4.1.3 Script define symbol setting 45 4.1.4 JsonUtility 45 4.1.5 Convert base64 46 4.1.6 3D Text 47 4.1.7 Một số plugin được sử dụng: .48 4.2 Kỹ thuật sủ dụng framework Unity Photon Network 49 4.2.1 PhotonView Component 49 4.2.2 Photon Transform View Component 50 4.2.3 PunRPC .50 4.3 Kỹ thuật sử dụng GameSparks (Baas) 51 4.3.1 Cài đặt GameSparks unity3D 51 4.3.2 Các cài đặt GameSparks service .53 4.4 Triển khai ứng dụng itch.io 58 Chương DÙNG THỬ VÀ PHẢN HỒI 60 5.1 Một số phản hồi tiêu biểu 60 5.2 So sánh với số ứng dụng tương tự thị trường .61 Chương TỔNG KẾT VÀ HƯỚNG PHÁT TRIỂN 63 6.1 Tổng kết .63 6.2 Hướng phát triển 63 6.2.1 Phần editor 63 6.2.2 Phần game 63 6.2.3 Quảng bá game 63 TÀI LIỆU THAM KHẢO 64 DANH MỤC HÌNH VẼ Hình 1.1 Minh họa board game cổ điển [1] .4 Hình 1.2 Tổng doanh thu ngàng game và sự tăng trưởng [4] .5 Hình 1.3 Board game Ludo cổ điển [5] Hình 2.1 Unity engine, engine hỡ trợ làm game đa nền tảng [6] .7 Hình 2.2 Unity Photon Network asset store packages [9] Hình 2.3 GameSparks logo [11] .9 Hình 3.1 Entity – Compornent – System [13] 11 Hình 3.2 Kết nối client – server .12 Hình 3.3 Các thành phần chính phần editor 13 Hình 3.4 Cơ chế spawn object editor 13 Hình 3.5 Cơ chế load project editor 14 Hình 3.6 Cơ chế người chơi phòng .14 Hình 3.7 Mô phỏng chế hoạt động camera 15 Hình 3.8 Cơ chế xử lý mouse input [15] 16 Hình 3.9 Cơ chế kế thừa object chung .16 Hình 3.10 Sơ đồ use-case đăng nhập .17 Hình 3.11 Sơ đồ use-case chính .17 Hình 3.12 Sơ đồ use-case room .17 Hình 3.13 Biểu đồ sequence đăng nhập 18 Hình 3.14 Biểu đồ sequence đăng ký .19 Hình 3.15 Biểu đồ sequence quên mật khẩu 19 Hình 3.16 Biểu đồ sequence danh sách project .20 Hình 3.17 Biểu đồ sequence tạo mới project 21 Hình 3.18 Biểu đồ sequence lưu project 22 Hình 3.19 Biểu đồ sequence tạo mới phòng chơi 23 Hình 3.20 Biểu đồ sequence gia nhập phòng chơi 24 Hình 3.21 Giao diện màn hình đăng nhập .25 Hình 3.22 Giao diện màn hình đăng ký 25 Hình 3.23 Giao diện màn hình yêu cầu mật khẩu mới 26 Hình 3.24 Màn hình chính .27 Hình 3.25 Giao diện màn hình quản lý project 28 Hình 3.26 Giao diện màn hình tạo mới project 29 Hình 3.27 Giao diện màn hình tạo phòng chơi 30 Hình 3.28 Giao diện màn hình gia nhập phòng chơi .31 Hình 3.29 Giao diện màn hình thơng tin tài khoản 31 Hình 3.30 Giao diện màn hình thay đổi mật khẩu 32 Hình 3.31 Giao diện màn hình cập nhật DisplayName 33 Hình 3.32 Giao diện chính phần editor .34 Hình 3.33 Giao diện bảng chỉnh sửa thơng tin object 36 Hình 3.34 Giao diện màn hình danh sách hình ảnh đăng tải 37 Hình 3.35 Giao diện màn hình đăng tải hình ảnh 38 Hình 3.36 Giao diện màn hình phòng chơi 39 Hình 3.37 Giao diện màn hình chơi game 40 Hình 4.1 Đoạn mã xử dụng raycast [15] 42 Hình 4.2 Mơ phỏng chế ánh xạ ảnh chuột các người chơi 42 Hình 4.3 Đoạn mã sử dụng raycast ánh xạ ảnh chuột .43 Hình 4.4 Đoạn mã tạo object config bằng ScriptableObject 43 Hình 4.5 Đoạn mã sử dụng AssetDatabase load asset .44 Hình 4.6 Cấu hình Scriptable object config .44 Hình 4.7 Cài đặt Script define symbol setting Unity3D 45 Hình 4.8 Đoạn mã sử dụng script define symbol .45 Hình 4.9 Đoạn mã sử dụng JsonUtility lưu, load ch̃i json 46 Hình 4.10 Đoạn mã convert từ base64 sang texture [20] 46 Hình 4.11 Đoạn mã convert từ texture sang base64 47 Hình 4.12 Material 3D text shader 47 Hình 4.13 Đoạn mã sử dụng DoTween làm animation UI 48 Hình 4.14 Component WebGL input object Input Field 48 Hình 4.15 Đoạn mã hàm GetImage 49 Hình 4.16 Photon View component 49 Hình 4.17 Photon Transform View component .50 Hình 4.18 Đoạn mã gửi RPC qua tất client 50 Hình 4.19 Đoạn mã nhận lệnh gọi RPC 51 Hình 4.20 Cài đặt RPCs Photon Unity Network .51 Hình 4.21 GameSparks API .52 Hình 4.22 Setting GameSparks Unity3D .52 Hình 4.23 Cấu hình GameData GameSparks 53 Hình 4.24 Cấu hình Event GameSparks 53 Hình 4.25 Đoạn mã CloudCode save project model [29] 54 Hình 4.26 Đoạn mã gửi LogEventRequest save project model từ ứng dụng 54 Hình 4.27 Đoạn mã gửi AuthenticationRequest từ ứng dụng 55 Hình 4.28 Đoạn mã gửi RgistrationRequest từ ứng dụng 55 Hình 4.29 Đoạn mã gửi ChangeUserDetailsRequest từ ứng dụng 56 Hình 4.30 Đoạn mã custom AuthenticationRequest BaaS 56 Hình 4.31 Đoạn mã gọi Maijet API send mail BaaS 57 Hình 4.32 Đoạn mã xử lý resetPassword BaaS 57 Hình 4.33 Đoạn mã gửi AuthenticationRequest với hành động resetPassword 58 Hình 4.34 Itch.io lưu trữ và phát hành trò chơi [35] 58 Hình 4.35 Giao diện ứng dụng trang web 59 Hình 5.1 Tabletop Simulator Stream [36] 61 4.3.2 Các cài đặt GameSparks service 4.3.2.1 GameData Hình 4.23 Cấu hình GameData GameSparks - Các gói liệu được lưu sever, với thông tin biến số Kiểu giữ liệu cho phép lưu bao gồm string và number - Short code thông số quan trọng, tương ứng với id phục vụ cho việc lưu cũng load data 4.3.2.2 Event Hình 4.24 Cấu hình Event GameSparks - Các sự kiện được tạo với short code attributes (thuộc tính) với kiểu liệu vào 53 4.3.2.3 Cloud code Hình 4.25 Đoạn mã CloudCode save project model [29] - Xử lý liệu được gửi lên sever, hết script cloud code response được tự động gửi về client 4.3.2.4 - LogEventRequest Gửi sự kiện lên sever với thuộc tính được truyền, sau sever xử lý xong nhận response trả về chứa errors code, json data, script data hay số thông tin khác (những thông tin được server gửi về) [30] - Đảm bảo EventKey hay EventAttributeKey đồng với shortCode events GameSpacks sever Hình 4.26 Đoạn mã gửi LogEventRequest save project model từ ứng dụng 54 4.3.2.5 - Authencation GameSparks hỗ trợ authencation request, register request, changeUserDetailsRequest [31] [32] [33] Hình 4.27 Đoạn mã gửi AuthenticationRequest từ ứng dụng Hình 4.28 Đoạn mã gửi RgistrationRequest từ ứng dụng 55 Hình 4.29 Đoạn mã gửi ChangeUserDetailsRequest từ ứng dụng - Các hàm Authencation cloud code GameSparks có thể custom phục vụ cho số tính bổ sung Hình 4.30 Đoạn mã custom AuthenticationRequest BaaS 4.3.2.6 - Maijet API Sử dụng maijet API hỡ trợ việc gửi email reset password 56 Hình 4.31 Đoạn mã gọi Maijet API send mail BaaS - Cloud code function send mail sử dụng maijet API [34] - SetBasicAuth sử dụng basic auth username password tài khoản maijet - Cloud code authencation request custom sử dụng cho việc reset password với biến action được gửi lên “resetPassword” Hình 4.32 Đoạn mã xử lý resetPassword BaaS 57 - Ở client code Hình 4.33 Đoạn mã gửi AuthenticationRequest với hành động resetPassword 4.4 Triển khai ứng dụng itch.io Hình 4.34 Itch.io lưu trữ và phát hành trò chơi [35] - Itch.io trang web để người dùng lưu trữ, bán tải xuống các video game độc lập Được phát hành vào tháng năm 2013 Leaf Corcora, dịch vụ này lưu trữ gần 100.000 trò chơi và vật phẩm tính đến tháng năm 2018 - Có thể coi Itch.io là chợ game PC (tương tự Appstore hay Gooogle play store moble) phù hợp cho việc phát hành các trò chơi quy mô nhỏ và dễ dàng tiếp cận cộng đồng - Itch.io hỗ trợ đăng bán game và lấy phí 10% cho mỗi giao dịch - Hiện trò chơi được đăng tải chơi miễn phí, đường dẫn: https://banogames.itch.io/board-game-simulator 58 Hình 4.35 Giao diện ứng dụng trang web 59 Chương DÙNG THỬ VÀ PHẢN HỒI 5.1 STT Một số phản hồi tiêu biểu Thành phần Chức Ý kiến đóng góp Giao diện Notification Thông báo còn quá dài, không Quản lý tài User info Không có cập nhật hiển thị thay đổi khoản thông tin DisplayName Password Password phải có lượng ký tự định Editor Camera Camera quay khó điều khiển, tốc độ nhanh Drag object Drag object theo chiều dọc màn hình không được tối ưu Object property Cần có snap cho các slider theo đơn vị số nguyên Leave editor Hỏi người chơi có save game trước thoát editor không Game Camera Camera quay khó điều khiển, tốc độ nhanh Drag object Drag object theo chiều dọc màn hình khơng được tối ưu 10 Lag Đôi lúc drag object bị giật, rõ sinh card từ bài Bảng 5.1 Bảng ý kiến phản hồi tiêu biểu 60 5.2 So sánh với số ứng dụng tương tự thị trường Hiện có ứng dụng tiêu biểu: Tabletop simulator Berserk Games (Steam) Hình 5.1 Tabletop Simulator Stream [36] Đánh giá Số lượng Board game simulator 1000 model Điểm - trội Đơn giản, dễ dàng tiếp - object nhiều cận - Khối lượng model, Độ tương thích cao - Tính tương tác vật lý - Hỗ trợ nhiều tính mở rộng - Mức độ custom cao - Hỗ trợ chèn script vào object Nền tảng Yêu cầu Web Window, Mac, Linux - Bộ nhớ: - Bộ nhớ: RAM GB - Đồ họa: - Đồ họa: Card đồ họa với khả đổ bóng 61 Khơng u cầu lưu trữ mơ hình 4.0 - DirectX: Phiên 10 - Lưu trữ: GB chỗ trống Bảng 5.2 Bảng so sánh ứng dụng và TableTop Simulator 62 Chương TỔNG KẾT VÀ HƯỚNG PHÁT TRIỂN 6.1 Tổng kết - Mức độ hoàn thiện: 80% - Mức độ hài lòng trải nghiệm: 70% 6.2 Hướng phát triển 6.2.1 Phần editor - Bổ sung thêm model, sáng tạo các object behavior mới - Cập nhật chế camera tốt - Bổ sung âm - Bổ sung tính chia sẻ game lên các mạng xã hội xếp hạng deginer (người chơi tạo board game) theo số lượng người chơi board game tạo - Hỗ trợ các tính khen thưởng, vinh danh deginer có đóng góp cao (tiêu chí đánh giá: board game có nhiều người chơi lần đầu, mức độ chơi thường xuyên, …) 6.2.2 Phần game - Có thể thay đổi chủ phòng (thay đổi host) - Người chơi khác gia nhập phòng chơi lúc chơiz - Cập nhật chế camera tốt - Bổ sung âm - Bổ sung phần chat - Chuyển đổi xử lý multiplayer Photon Network sang GameSparks server 6.2.3 Quảng bá game - Quảng bá game cộng đồng: đăng bài lên các nhóm, diễn đàn người hâm mộ board game - Làm video design board game up lên youtube - Tập trung hướng quảng bá tự phát mỗi designe 63 TÀI LIỆU THAM KHẢO [1] "Board game là gì? thể loại phổ biến nhiều người chơi nhất," Board game là gì? Nghĩa là gì? Tìm hiểu về trào lưu Board game, [Online] Available: http://firststep.vn/board-game-la-gi-nghia-la-gi-tim-hieu-ve-trao-luu-boardgame/ [2] "Board game là gì? thể loại phổ biến nhiều người chơi nhất," [Online] Available: https://www.thegioididong.com/game-app/board-game-la-gi-8the-loai-pho-bien-nhieu-nguoi-choi-nhat-1330329 [3] "Multiplayer ? 41 tựa game đình đám nhất," [Online] Available: https://tranvanthong.com/multiplayer/ [4] "COVID-19’s Impact on the Mobile Games Market: Consumer Engagement Spikes as Revenues Exceed $77 Billion in 2020," [Online] Available: https://newzoo.com/insights/articles/mobile-games-market-engagementrevenues-covid-19-gaming/ [5] L ( game) [Online] Available: https://en.wikipedia.org/wiki/Ludo_(board_game) [6] "Unity3D engine," [Online] Available: https://unity.com/ [7] "VÌ SAO NÊN LÀM GAME BẰNG UNITY3D?," [Online] Available: http://itplus-academy.edu.vn/vi-sao-nen-lam-game-bang-unity3d-2032.html [8] "Webgl gì," [Online] Available: https://onfire-bg.com/webgl-la-gi/ [9] "Photon Unity Networking," [Online] Available: https://www.photonengine.com/pun [10] "MULTIPLAYER WITH PHOTON UNITY NETWORKING," [Online] 64 Available: https://viblo.asia/p/multiplayer-with-photon-unity-networkingQ7eEREw6GgNj [11] "GameSparks - back end service for game," [Online] Available: https://www.gamesparks.com/ [12] "GameSparks - Cơ sở liệu cloud miễn phí cho game," [Online] Available: https://viblo.asia/p/gamesparks-co-so-du-lieu-cloud-mien-phicho-game-eoaRLJJbzOm [13] "Why use an Entity Component System architecture for game development?," [Online] Available: https://www.richardlord.net/blog/ecs/why-use-an-entity-framework.html [14] "Position objects around other object forming a circle," [Online] Available: https://answers.unity.com/questions/170413/position-objects-around-otherobject-forming-a-cir.html [15] "Getting object hit with raycast," [Online] Available: https://forum.unity.com/threads/getting-object-hit-with-raycast.573982/ [16] "How to convert the mouse position to world space in Unity (2D + 3D)," [Online] Available: https://gamedevbeginner.com/how-to-convert-themouse-position-to-world-space-in-unity-2d-3d/ [17] "ScriptableObject," [Online] Available: https://docs.unity3d.com/Manual/class-ScriptableObject.html [18] "PlayerSettings.SetScriptingDefineSymbolsForGroup," [Online] Available: https://docs.unity3d.com/ScriptReference/PlayerSettings.SetScriptingDefine SymbolsForGroup.html [19] "JsonUtility," [Online] Available: https://docs.unity3d.com/ScriptReference/JsonUtility.html 65 [20] "Unity encodes Base64 code into Texture2D," [Online] Available: https://www.programmersought.com/article/75901523490/ [21] "Unity 3D text," [Online] Available: http://wiki.unity3d.com/index.php?title=3DText&_gl=1*qt5f9c*_ga*MjA0N Tc5MjIyMy4xNjE4ODM3MjM1*_ga_1S78EFL1W5*MTYyNDg2MzY1O S42My4wLjE2MjQ4NjM2NTkuNjA.&_ga=2.60123949.1662855965.16247 91036-2045792223.1618837235 [22] "Dotween," [Online] Available: http://dotween.demigiant.com/ [23] "WebGLInput plugin," [Online] Available: https://github.com/kouyeung/WebGLInput [24] "Tab between input fields," [Online] Available: https://forum.unity.com/threads/tab-between-input-fields.263779/ [25] "Unity3D - Upload a image from PC memory to WebGL app," [Online] Available: https://stackoverflow.com/questions/35183253/unity3d-upload-aimage-from-pc-memory-to-webgl-app/35201934#35201934 [26] "Easy question for PhotonView and Observed Components," [Online] Available: https://forum.photonengine.com/discussion/6963/easy-questionfor-photonview-and-observed-components [27] "PhotonTransformView and PhotonRigidbodyView," [Online] Available: https://forum.photonengine.com/discussion/8204/photontransformview-andphotonrigidbodyview [28] "RPCs and RaiseEvent," [Online] Available: https://doc.photonengine.com/enus/pun/current/gameplay/rpcsandraiseevent [29] "Cloud storage : delete and browse," [Online] Available: 66 https://support.gamesparks.net/support/discussions/topics/1000070954 [30] "LogEventRequest," [Online] Available: https://docs.gamesparks.com/apidocumentation/request-api/player/logeventrequest.html [31] "GameSparks authencation," [Online] Available: https://docs.gamesparks.com/documentation/key-concepts/authentication/ [32] "User Password Change Using Game Data Service," [Online] Available: https://docs.gamesparks.com/tutorials/social-authentication-and-playerprofile/automating-password-change-using-game-data-service.html [33] "User Password Change," [Online] Available: https://docs.gamesparks.com/tutorials/social-authentication-and-playerprofile/automating-user-password-change.html [34] "Send API v3.1 Mailjet," [Online] Available: https://dev.mailjet.com/email/guides/send-api-v31/ [35] "Download the lastest indie games," [Online] Available: https://itch.io/ [36] "Tabletop Simulator on Stream," [Online] Available: https://store.steampowered.com/app/286160/Tabletop_Simulator/ 67 ... XUÂN BẮC – 16520069 KHÓA LUẬN TỐT NGHIỆP LẬP TRÌNH TRÒ CHƠI MÔ PHỎNG THỂ LOẠI GAME DẠNG BẢNG, MULTIPLAYER Game programming to simulate board games, multiplayer KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM... thiệu về xu hướng chơi game tương lai, cách chơi các trò chơi dạng bảng thay đổi - Giới thiệu về trò chơi và đánh giá mức độ khả thi trò chơi - So sánh với các trò chơi tương tự... thể loại game như: - MoBa (trò chơi trực tuyến mô phỏng trận chiến) o MMORPG (game nhập vai trực tuyến nhiều người chơi) o MMOFPS (game bắn súng trực tuyến) o Và, nhiều thể loại game