Xây dựng webgame “sâm lốc” sử dụng công cụ cocos creator và smartfoxserver

LỜI CẢM ƠN Trong thời gian thực đồ án với giúp đỡ tạo điều kiện Trường Đại Học Công nghệ Thông Tin Truyền Thông - ĐH Thái Nguyên, góp ý bạn đặc biệt hướng dẫn trực tiếp, bảo tận tình ThS Nguyễn Thu Phương em hồn thành đề tài với báo cáo thời gian quy định Bài báo cáo đồ án tốt nghiệp em thực 10 tuần, bước đầu em gặp nhiều khó khăn, bỡ ngỡ vốn kiến thức hạn chế nên nội dung đề tài tránh khỏi sai sót, em mong nhận đóng góp ý kiến, phê bình thầy Em xin chân thành cảm ơn! Thái Nguyên, ngày 05 tháng 05 năm 2017 Sinh viên thực Trịnh Quốc Tuấn LỜI CAM ĐOAN Nhận thức Đồ án tốt nghiệp sản phẩm hoàn thiện sinh viên CNTT trường, cần tới miệt mài thân hướng dẫn bảo tận tình Thầy giáo Em tổng hợp kiến thức học kinh nghiệm số liệu khảo sát thực tế nhằm hoàn thành Đồ án tốt nghiệp Em xin cam đoan: Những nội dung đồ án tốt nghiệp em thực trực tiếp hướng dẫn cô ThS Nguyễn Thu Phương Mọi tham khảo dùng đồ án trích dẫn rõ ràng tên tác giả, tên cơng trình, thời gian, địa điểm cơng bố danh mục tài liệu tham khảo Nội dung Đồ án em không chép nội dung Đồ án sản phẩm thân em nghiên cứu thực tế xây dựng lên Mọi chép không hợp lệ, vi phạm quy chế đào tạo, hay gian trá, em xin cam đoan chịu hoàn toàn trách nhiệm trước Hội đồng bảo vệ Thái Nguyên, ngày 05 tháng 05 năm 2017 Sinh viên thực Trịnh Quốc Tuấn MỤC LỤC CHƯƠNG CƠ SỞ LÝ THUYẾT 1.1 Cocos Creator 1.1.1 Tổng quan Cocos Creator 1.1.2 Giao diện Cocos Creator 1.1.3 Các thành phần 10 1.2 SmartFoxServer 16 1.2.1 Tổng quan SmartFoxServer2X 16 1.2.2 SmartFoxServer 2X 17 CHƯƠNG KHẢO SÁT VÀ PHÂN TÍCH THIẾT KẾ HỆ THỐNG 27 2.1 Khảo sát 27 2.1.1 Ý tưởng xây dựng 27 2.1.2 Luật chơi 27 2.2 Phân tích thiết kế hệ thống 30 2.2.1 Biểu đồ Use Case 30 2.2.2 Biểu đồ trình tự 33 2.2.3 Biểu đồ lớp 35 2.2.4 Biểu đồ trạng thái 36 CHƯƠNG XÂY DỰNG GAME 37 3.1 Client 37 3.1.1 Giao diện 38 3.1.2 Xây dựng thuật toán 41 3.2 Server 45 3.2.1 Xây dựng Server 46 3.2.2 Xây dựng thuật toán Server 49 3.3 Hướng phát triển 52 KẾT LUẬN 53 TÀI LIỆU THAM KHẢO 54 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN 55 DANH MỤC HÌNH ẢNH Hình 1.1: Bảng điều khiển Cocos Creator Hình 1.2: Bảng Resource Manager Hình 1.3: Bảng Scene Manager Hình 1.4: Bảng Layer Manager Hình 1.5 : Property Inspector Hình 1.6: Toolbar 10 Hình 1.7: Prefab 11 Hình 1.8: Prefab 11 Hình 1.9 : Animation 11 Hình 1.10 : Atlas 12 Hình 1.11: Value type attribute 12 Hình 1.12: Reference type attribute 13 Hình 1.13 :Console 14 Hình 1.14 Kiến trúc chung 19 Hình 1.15 Một ví dụ cách mở rộng cấu hình admintool 22 Hình 1.16 Hai điều khiển chạy khu luồng riêng biệt 23 Hình 1.17 Cấu trúc SmartFox Server 2X 25 Hình 2.1 Biểu đồ Usen Case hệ thống 30 Hình 2.2 Biểu đồ Usen Case admin 31 Hình 2.3 Biểu đồ Use Case Register 31 Hình 2.4 Biểu đồ Use Case Login 32 Hình 2.5 Biểu đồ Use Case Play 32 Hình 2.6 Biểu đồ Use Case Logout 32 Hình 2.7 Biểu đồ trình tự hệ thống(Phiên làm việc bản) 33 Hình 2.8 Biểu đồ trình tự Login 34 Hình 2.9 Biểu đồ trình tự Play 34 Hình 2.10 Biểu đồ lớp hệ thống 35 Hình 2.11 Biểu đồ trạng thái hệ thống 36 Hình 3.1 Tải cài đặt Cocos Creator http://www.cocos2d-x.org/download 37 Hình 3.2 Giao diện Login 38 Hình 3.3 Giao diện Register 39 Hình 3.4 Giao diện Play Game 40 Hình 3.5 Xây dựng Prefab cho game 41 Hình 3.6 Xây dựng file JavaScript 42 Hình 3.7 Xây dựng Sence 43 Hình 3.8 Chạy thử trình duyệt Web 44 Hình 3.9 Tải cài đặt SmartFox Server 2X http://www.smartfoxserver.com/download/sfs2x#p=installer 45 Hình 3.10 Xây dựng Zone game 46 Hình 3.11 Xây dựng Room game 47 Hình 3.12 Cài đặt chung 48 Hình 3.13 Xây dựng file Java 49 Hình 3.14 Build Java đuôi” jar” thư mục Extension riêng SmartFox Server 50 Hình 3.15 Gán code Java cho Zone 51 Hình 3.16 Kết nối MySQL để lưu trữ đọc liệu 52 LỜI NÓI ĐẦU Ngày nay, với phát triển mạnh mẽ khoa học kỹ thuật, công nghệ thông tin ngày phát triển dần đóng vai trò quan trọng thiết yếu kinh tế trị quốc gia Đặc biệt phát triển vượt bậc lĩnh vực ngân hàng, qn giải trí Trong đó, lĩnh vực phát triển ứng dụng game giải trí đánh giá cao lợi nhuận mà thu Đi đôi với phát triển công nghệ kỹ thuật cao đòi hỏi cao khắt khe từ người dùng, không tương tác game chân thực mà đòi hỏi yêu cầu kết nối tương tác tới nhiều người thời gian thực Điều đặt thách thức lớn tới người sản xuất game sử dụng công cụ hỗ trợ đa tảng có khả đáp ứng cầu tương tác game người chơi mà cần hiệu xuất game với nhiều người dùng đâu Với thực tế vậy, em tìm hiểu sử dụng công cụ Cocos Creator SmartFox Server Và lý em chọn đề tài: Xây dựng Webgame “Sâm lốc” sử dụng công cụ Cocos Creator SmartfoxServer Thái Nguyên, ngày 05 tháng 05 năm 2017 Sinh viên thực Trịnh Quốc Tuấn CHƯƠNG CƠ SỞ LÝ THUYẾT 1.1 Cocos Creator 1.1.1 Tổng quan Cocos Creator Bắt đầu từ năm 2010, Cocos2d-x mã nguồn mở, tảng engine game Nó nạp với tính mạnh mẽ cho phép nhà phát triển để tạo trò chơi ngoạn mục cách dễ dàng Cocos Creator trình soạn thảo tảng phát triển trò chơi miễn phí hỗ trợ Cocos2d-js, giúp nhà phát triển xây dựng 2D cảnh trò chơi 3D, chỉnh sửa trò chơi giao diện người dùng tài nguyên trò chơi khác cách nhanh chóng hiệu Cocos Creator Engine hỗ trợ lập trình đa tảng : Mobile(IOS, Android, Blackbeery, TIZEN,WP) window, MacOS,Web Cocos Creator hỗ trợ sử dụng Javascript 1.1.2 Giao diện Cocos Creator Cocos Creator bao gồm nhiều bảng điều khiển di chuyển kết hợp cách tự để đáp ứng nhu cầu dự án nhà phát triển khác Dưới cách bố trí soạn thảo mặc định ví dụ để nhanh chóng duyệt tên chức bảng điều khiển: Hình 1.1: Bảng điều khiển Cocos Creator  Asset manager Asset manager cho thấy tất tài sản tập tin tài sản dự án ( ‘ asset ’) Nó hiển thị thư mục cấu trúc tính tự động đồng hóa nội dung thay đổi đuôi thư mục tài nguyên dự án từ hệ điều hành Bạn kéo tập tin sử dụng menu để thêm tài nguyên Hình 1.2: Bảng Resource Manager  Scene editor Hình 1.3: Bảng Scene Manager Sence sử dụng để hiển thị chỉnh sửa khu vực làm việc nhìn thấy  Hierarchy Hình 1.4: Bảng Layer Manager Hierarchy hiển thị tất nút hệ thống cấp bậc thành phần hình thức danh sách Đối với tất nội dung mà bạn thấy scene editor Các nội dung tạo dựng lên cảnh đồng hình thường sử dụng hai lúc để xây dựng giao diện  Attribute inspector Hình 1.5 : Property Inspector Attribute inspector khu vực làm việc mà xem chỉnh sửa nút thành phần thuộc tính chọn bảng hiển thị chỉnh sửa liệu thuộc tính xác định tập lệnh theo cách phù hợp  Toolbar Hình 1.6: Toolbar Toolbar bao gồm cảnh chỉnh sửa công cụ nút hoạt động cho xem trước Phía bên phải hiển thị địa truy cập để kiểm tra từ xa gỡ lỗi số lượng thiết bị thiết bị kết nối  Asset Asset sử dụng để truy cập quản lý tài nguyên dự án Thêm tài nguyên thường bước cần thiết bắt đầu để làm game 1.1.3 Các thành phần  Node Node thành phần coi quan trọng công cụ Node tương ứng điểm hình, thành phần sử dụng nằm Node Một Node bao gồm thuộc tính vị trí,tâm sử dụng,độ nghiêng Một Node cha bao gồm nhiều node – node tồn node cha  Sprite Sprite hình ảnh 2D hoạt hình biến đổi cách thay đổi thuộc tính nó, bao gồm rotation, position, scale, color, etc Hiện Cocos Creator hỗ trợ định dạng ảnh : PNG, JPEG, TIFF  Prefab Prefab thành phần quan trọng việc tái sử dụng Nó thành phần Node Bạn hiểu thiết kế sẵn bao gồm thành phần, thuộc tính mà bạn tạo lập sử muốn sử dụng cần lấy sử dụng không cần tạo nhiều sản phẩm mà giống thiết kế 10 3.1.2 Xây dựng thuật tốn Hình 3.5 Xây dựng Prefab cho game 41 Hình 3.6 Xây dựng file JavaScript 42 Hình 3.7 Xây dựng Sence 43 Hình 3.8 Chạy thử trình duyệt Web 44 3.2 Server Hình 3.9 Tải cài đặt SmartFox Server 2X http://www.smartfoxserver.com/download/sfs2x#p=installer 45 3.2.1 Xây dựng Server Hình 3.10 Xây dựng Zone game 46 Hình 3.11 Xây dựng Room game 47 Hình 3.12 Cài đặt chung 48 3.2.2 Xây dựng thuật tốn Server Hình 3.13 Xây dựng file Java 49 Hình 3.14 Build Java đuôi” jar” thư mục Extension riêng SmartFox Server 50 Hình 3.15 Gán code Java cho Zone 51 Hình 3.16 Kết nối MySQL để lưu trữ đọc liệu 3.3 Hướng phát triển - Nâng cấp giao diện tương thích với nhiều tầng lớp người dùng - Bổ sung thêm nhiều Webgame thể loại để tạo thành trang Webgame đa dạng - Xây dựng thêm nhiều chức thách đấu, giao lưu chơi tổ đội - Xây dựng Webgame lớn phục vụ người chơi tảng 52 KẾT LUẬN Sau thời gian làm đồ án đề tài: “Xây dựng Webgame “Sâm Lốc” sử dụng công cụ Cocos Creator SmartFox Server” em đạt kết quả:  Sử dụng thành thạo Cocos Creator SmartFox Server  Xây dựng tư lập trình game ứng dụng  Thực hành trải nghiệm sống lập trình  Nâng cao trình độ đọc hiểu tài liệu Tiếng Anh Sau năm học tập trường Đại học Công Nghệ Thông Tin Truyền Thông – Đại học Thái Nguyên em thầy cô giáo cung cấp truyền đạt kiến thức chuyên môn sâu sắc quý giá Nơi môi trường học tập, rèn luyện ý chí, độc lập, đầy sáng tạo tuổi trẻ, hành trang, kiến thức để chúng em bắt tay vào nghề nghiệp tương lai Em hy vọng đề tài tiền đề tạo kỹ làm việc nhóm, kỹ lập trình, xây dựng ý tưởng, tạo điều kiện trình làm việc học tập em Em xin chân thành cảm ơn ban giám hiệu, ban chủ nhiệm khoa, thầy cô giáo môn Công nghệ phần mềm hướng dẫn dạy chúng em suốt thời gian học tập trường, đặc biệt em xin cảm ơn cô ThS Nguyễn Thu Phương tận tình hướng dẫn, giúp đỡ em hồn thành đồ án Em xin chân thành cám ơn! Thái Nguyên, ngày 05 tháng 05 năm 2017 Sinh viên thực Trịnh Quốc Tuấn 53 TÀI LIỆU THAM KHẢO [1] Cocos Creator, Chukong Technologies Inc, 2014-2016 ( http://cocos2d-x.org/docs/editors_and_tools/creator/index.html ) [2] SmartFoxServer, 2014-2017 ( http://docs2x.smartfoxserver.com ) [3] Javascript bản, 14-12-2015 (https://freetuts.net/hoc-javascript/javascript-can-ban) [4] Giáo trình JAVA tiếng Việt, 10-03-2017 (https://techtalk.vn/tai-lieu-giao-trinh-java-co-ban-tieng-viet.html) [5] Giáo trình thuật tốn thuật giải, 02-11-2009 (http://tailieu.vn/doc/giao-trinh-thuat-toan-va-thuat-giai-96687.html) 54 NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN Thái Nguyên, ngày tháng năm 201 GIÁO VIÊN HƯỚNG DẪN 55 ... Càng ngày thị trường Webgame phát triển, nhiềutựa game xây dựng môi trường Một thể loại game quân Do đó, em chọn tựa game “Sâm lốc” để xây dựng Webgame sử dụng công cụ Cocos Creator SmartFox Server,... em tìm hiểu sử dụng cơng cụ Cocos Creator SmartFox Server Và lý em chọn đề tài: Xây dựng Webgame “Sâm lốc” sử dụng công cụ Cocos Creator SmartfoxServer Thái Nguyên, ngày 05 tháng 05 năm 2017 Sinh... Server, 2.1.1 Ý tưởng xây dựng Hiện thị trường game ngày phát triển đa dạng phong phú, “Sâm lốc” mà phát triển theo Em sử dụng Cocos Creator xây dựng Client game SmartFox Server xây dựng Server Ưu nhược