Chuyển đến nội dung chính

#1 Thiết kế lowpoly scene với các assets miễn phí



Hôm nay mình sẽ thực hiện thiết kế một scene lowpoly đơn giản cho tựa mini game Counting Sheep. 

Như cách mình vẫn thường làm, là lên ý tưởng và thực hiện prototype. Các nguốn ý tưởng các bạn có thể tham khảo ở pinterest, google store, apple store... Thường mình rất hay xem các concept art trên pinterest.

Dự định khi mình làm là sẽ chọn phối cảnh isometric, và lướt thấy game này


Ảnh chụp màn hình

Và mình đã chọn theme này cho game của Couting Sheep. Ở đó có biển, hòn đảo nhỏ, cây cối và các chú cừu.

Ý tưởng đã có, concept đã có bắt tay vào thực hiện thôi.

Bước đầu tiên, chúng ta sẽ sửa lại góc quay của camera.



Mình sẽ tạo một object cube để làm mốc căn chỉnh camera cũng như vị trí của hòn đảo trong bố cục game.


Tiếp theo mình sẽ tạo hòn đảo, mình sẽ dùng công cụ Probuilder được tích hợp sẵn trong unity. Các bạn có thể tải về trong Package Manager. Với Probuilder, chúng ta có thể nhanh chóng tạo dưng các hình khối như plane, cube, polyshape... có thể chỉnh sửa các khối đó về mesh hay texture. 

Ở đây mình sẽ tạo hòn đảo với polyshape.


Đơn giản là chấm các điểm trong khối đa giác. Mình sẽ form hòn đảo này dựa trên concept ở trên. Cuối cùng thì mình có được hòn đảo như sau.


Bây giờ, mình sẽ phủ màu cho hòn đảo. Với style game này, mình muốn cách điệu hình ảnh kiểu cartoon nên đa phần các object enviroment sẽ dùng các shader về toon shading (cel shading) để tạo cảm giác cách điệu nhẹ  nhàng.

Các bạn có thể tải package Toon Color Free để tạo các material cartoon. Phiên bản có phí của assets này hỗ trợ nhiều kiểu phối màu và shaing hơn, đồng thời cũng optimize cho mobile. Mình sẽ giới thiệu bản trả phí ở các bài viết sau.



Mình sẽ tạo một material với shader là Toon Color Free/Regular. Ở đó có các input về Color, Highling Color, Shadow Color... Mình sẽ nhập màu của hòn đảo dựa trên concept.

Như cách mình thường làm, là sẽ tạo một canvas chứa image là concept art để reference bố cục trong game.



Ok, mình sẽ nhập màu của hòn đảo thông qua color picker lấy màu trên Image này. Kết quả


Cúng khá ổn đúng không :). Bước tiếp theo, tạo một đại dương mêng mông.

Các bạn có thể tải về free package Lowpoly Water Free để tạo một vùng biển trên có sóng dập dìu luôn nhé. Tuy nhiên, có vẻ là assets này không được optimize lắm cho mobile, Nhưng không sao, chúng ta sẽ thực hiện optimize nó sau.

Mình đơn giản là kéo luôn object Ocean trong _Demo Scene của assets này vô trong scene game, scale lại và chỉnh một vài thông số về tần số sóng, độ cao sóng.



Ở đây có một vấn đề là phần shader mặc định của package này không hỗ trợ cho platform android (ios thì mình chưa test). Nên mình sẽ dùng luôn shader của Toon Color.

Mình chọn Shader Toon Color Free/Rim Out Line để tạo effect highlight viền các gơn sóng trông nó sáng hơn. Đồng thời, input thêm Ramp Texture để thực đổ bóng dựa vào texture này bởi hướng sáng (Directional Light) mình để phương chiếu thẳng nên bóng của sóng ko thể hiện được từ hướng chiếu nên giả lập đổ bóng bằng một ramp texture.

Tiếp theo, mình sẽ thêm vùng trời. Các bạn có thể chọn một cube box, skybox hay skydome tùy vào concept. Ở đây mình sử dụng free asset Simple Sky để tạo một skydome trong game. Chỉ việc tải assets về và kéo prefab skydome vài scene, sau đó tinh chỉnh scale cho phù hợp.

Assets SkyDome này còn có input để  mình có thể thay đổi texture offset thể hiện ánh sáng ngày đêm, mình sẽ tận dụng input này trong khi code gameplay.


Tiếp đến, mình sẽ thêm cây cối, nhà và các con cừu vào scene được lấy từ free asset Lowpoly Template


Và cuối cùng mình cơ bản hoàn thiện scene này dựa vào concept art phía trên. 

Dưới đây là toàn bộ quá trình mình thực hiện design scene.


Bài tới, mình sẽ code phần gameplay đếm cừu. Trong đó mình sẽ giới thiệu về một số component hay ho như NavMesh Component, Audio Processor, DOTween... Các bạn nhớ đón xem nhé. Phần project mình sẽ up lên github để các bạn tiện theo dõi. 

Having fun like always!! :")

Nhận xét

Bài đăng phổ biến từ blog này

#4 Unity Pathfinding, NavMesh Component, A* PathFinding Project

Thuật toán tìm kiếm đường đi là một trong số các thuật toán hay áp dụng nhiều nhất trong quá trình phát triển game. Thuật toán tìm kiếm đường đi đưa ra lời giải cho vấn đề làm cách nào đi từ điểm A đến điểm B trong một bản đồ. Hẳn các bạn làm việc với unity, khi nghĩ đến thuật toán tìm kiếm đường đi chúng ta thường sử dụng component NavMesh do unity phát triển và có mã nguồn mở đặt ở đây https://github.com/Unity-Technologies/NavMeshComponents. Và rất nhanh chóng, chúng ta có thể cài đặt vào trong game, giải quyết vấn đề như di chuyển nhân vật của chúng ta đi từ điểm A đến điểm B tránh các vật cản hay cài đặt logic cho những con Bot theo dấu nhân vật chính, hoặc một ví dụ cụ thể là cài đặt logic di chuyển theo đội hình... Việc cài đặt và ứng dụng component NavMesh như thế nào mình sẽ không đi sâu vào chi tiết mà hướng đến các vấn đề mình ứng dụng navmesh trong game như thế nào. Các bài viết về NavMesh dễ hiểu các bạn có thể tham khảo ở video sau: Như video trên, việc cài đặt ...

#3 Animation trong Unity và giới thiệu về thư viện Rigged Animation Maximo

Các yếu tố về chuyển động, hoạt hình lúc nào cũng xuất hiện trong game. Unity cung cấp cho chúng ta bộ công cụ animation Mecanim để thực hiện các animation cho nhân vật, ui… Như các bài viết trước, mình sẽ không đi vào lý thuyết mà tập trung vào áp dụng. Chi tiết Mecanim các bạn có thể tham khảo ở đây: https://viblo.asia/p/unity-co-ban-mecanim-oaKYMN9YR83E Và đối với prototype Couting Sheep này, mình dùng mecanim để thực hiện các chuyển động chạy, nhảy của cừu. Các chuyển động nhảy, đứng im, hay chạy của cừu được lưu trữ trong animation clip của file fbx mình import vào. Với các parametes là Moving: bool, Jump: Trigger, PickingUp: bool để kiểm soát các trạng thái animation của cừu trong lúc runtime. Các parameters này đóng nhiệm vụ là biến kiểm soát trạng thái animation của cừu, ví dụ từ trạng thái Idle sang Move mình sẽ bật biến Moving = true hay từ trạng thái Move sang Jump mình sẽ bật trigger Jump. Việc kiểm soát các parameters thông qua code sẽ sử dụng com...

#2 DOTween Unity

Trong bài viết trước, mình đã thực hiện thiết kế một map lowpoly. Ở bài viết này và các bài viết sau mình sẽ thực hiện xây dựng logic game. Nội dung dự định mình sẽ xây dựng giống tựa game Merge Plane: Đại khái, mình sẽ implement logic cừu chạy xung quanh trên map của đã xây dựng với thư viện tween animation DOTween. Bài viết này không đi sâu vào kỹ thuật mà chủ yếu giới thiệu đến các bạn về thư viện DOTween. Vậy mình sẽ giới thiệu về DOTWeen một xíu nhé. DOTween gồm 2 bản, bản miễn phí và bản Pro giá 15$ tầm 350k VNĐ.  Trang chủ của nó ở đây  http://dotween.demigiant.com/ . Với thư viện này, mình có thể thực hiện các dạng animation transform thường gặp như: Move Position, Scale, Rotate, Move theo Path, Fade, Color v.v hay các hàm tiện ích như DelayCalls, Sequence… Ở bản free thì thư viện chỉ cung cấp các hàm để gọi trong code, còn ở bản Pro được cung cấp thêm giao diện cài đặt các animation trong inspector. Ngoài DOTween, mình có sử dụng qua thư viện LeanTween ...