C2 Guide: Bài 2 - Hái lượm, năng nhặt chặt bị

Thảo luận trong 'Game Development' bắt đầu bởi 01lifeleft, 26/2/12.

  1. 01lifeleft

    01lifeleft Youtube Master Race

    Tham gia ngày:
    10/3/09
    Bài viết:
    69
    Không dài dòng nữa, chúng ta bắt đầu làm game nào.

    Bạn tạo Project mới xong thì save những hình dưới đây nhé:

    [​IMG] [​IMG] [​IMG] [​IMG]

    Import sprite vào game:
    Save xong các bạn nhớ đổi tên file lại cho ngắn, rồi thì các bạn kéo 4 hình Loli, màu đen, trái táo và kẹo vào Layout nhé (nhớ kéo lần lượt từng file vào, đừng kéo cùng 1 lúc 4 file, nó sẽ hiểu đó là 1 sprite có 4 animation). Có thể import bằng cách click chuột phải, chọn "Insert new object" hoặc double click vào Layout, sau đó chọn Sprite.

    [​IMG]
    ảnh project sau khi import sprite

    Phân vai
    Bây giờ chúng ta sẽ phân vai cho các object vừa import vào:
    • Loli: đây là nhân vật chính của game, có nhiệm vụ bay nhảy và nhặt đồ ăn :">
    • Quả táo, kẹo: đồ ăn rơi xuống từ trên trời.
    • Màu đen: nó sẽ đóng vai trò là cục gạch để Loli đứng trên đó, nếu ko Loli sẽ đứng trên không khí và rơi tự do.
    Tiến hành nhập vai nào:
    • Click chọn Loli, nhìn qua bảng Properties bên trái, chỗ Behaviors, click Add/Edit, Bấm vào dấu cộng (Add new) rồi chọn Platform. Nếu thấy Platform ở bảng Properties là ok rồi đó.
    • Click chọn Màu Đen, làm tương tự như trên nhưng chọn Solid thay cho Platform.
    • Click chọn Quả Táo, Kẹo và chọn Bullet.

    Đặt Màu Đen ngay dưới Loli và test thử nào ^^:
    [​IMG]
    nút test

    Hài thật phải không? Loli bị lún xuống Màu Đen, còn Quả Táo và Kẹo bay vù vù qua bên phải.
    [​IMG]

    Giải thích: Góc độ mặc định của Bullet là 0 độ, còn Loli bị lún là do chưa thiết lập Collision Polygon cho nó (nôm na là xương).
    [​IMG]
    góc độ mặc định của Sprite là 0

    Sửa lại cho đúng nào:
    Loli: double click vào Loli, cửa sổ Edit Image sẽ hiện ra, nhấn vào "Set Collision Polygon". Có thể nhấn vào chấm đỏ, nhấn chuột phải -> delete hoặc add thêm point vào. Các bạn chỉnh tựa tựa như hình dưới nhé, càng vuông vứt càng đỡ bug.
    [​IMG]
    thế là ổn rồi

    Quả Táo và Kẹo: nhấn vào Quả Táo, Kẹo và chỉnh thông số của chúng như hình dưới đây:
    [​IMG]

    Speed = 0, tức là nó sẽ không có tốc độ để bay đi đâu cả. Gravity = 40 sẽ khiến nó nặng dần và từ từ rơi xuống dưới (đúng ý đồ của chúng ta^^). Các bạn có thể tùy chỉnh Gravity theo ý thích.

    Test lần nữa xem nào:

    [​IMG]

    Đẹp rồi nhé, Loli đứng gọn gàng trên Màu Đen. Táo và Kẹo từ từ rơi xuống.

    Fix xong rồi chúng ta tiếp tục tiến độ của game nào.

    Màu Đen:
    Click chọn Màu Đen, bấm và kéo mấy ô vuông xung quanh để kéo dãn Màu Đen ra, nó sẽ là ground cho game, và cho Loli di chuyển trên đó.
    [​IMG]

    Test tiếp, dùng phím mũi tên để di chuyển Loli bay nhảy nào ^^

    Nếu bạn đi qua góc ngoài màn hình thì sẽ biến mất luôn phải ko? Để tránh trường hợp đó, các bạn thêm vào cho Loli behavior "Bound to Layout", Loli sẽ ko bị lọt ra ngoài màn hình nữa.

    [​IMG]

    1 game mini thì ko thể thiếu điểm số đc, chúng ta add thêm object Text vào. Để nó ở góc nào đẹp nhé. Bây giờ chúng ta qua tab Layers nào.

    Các bạn nhấn vào dấu cộng để tạo thêm 3 Layer nữa. Sau đó sửa tên cho mỗi Layer nhé:
    Layer HUD: chứa những thứ nên nằm trên đầu như Điểm Số...
    Layer Front: chưa biết =.=
    Layer Mid: Táo, Kẹo, Loli
    Layer Bot: Background

    Chúng ta không nên dùng phím di chuyển mặc định của Loli, chọn Loli và qua bên Properties chỉnh Default controls thành "NO":
    [​IMG]

    Trước khi qua phần event sheet, bạn Insert new object là Keyboard, Mouse và Audio nhé.
    Event sheet:
    Chúng ta qua Event sheet 1 để tự thiết lập logic, cách di chuyển cho Loli.
    Nhấn chuột phải vào "Add group" (Group sẽ giúp event sheet của bạn dễ nhìn hơn), đặt tên Group là "Loli" ^^.
    Chuột phải vào "Group Loli", chọn Add sub-event.
    Làm logic như sau: Bấm chuột phải vào Group -> Add sub-event -> Keyboard -> Key is down -> click to choose -> chọn hotkey cho nút di chuyển -> Done.
    Add action -> char -> Simulate control -> Left -> Done.

    [​IMG]

    Đây là sự khác nhau giữa MirroredNot Mirrored. Not Mirrored tức là ko thay đổi.
    [​IMG]

    Test thử xem, phần Loli có vẻ ổn rồi nhỉ?

    Mình nhận thấy Táo và Kẹo rơi xuống chỉ dựa vào trọng lực nhìn ko hay, nên sẽ thay đổi lại cho nó đi xuống như viên đạn luôn. Qua phần Layout, click Táo và Kẹo và chỉnh lại properties như sau:

    [​IMG]

    Tuy nhiên làm thế này viên đạn sẽ chỉ đi từ trái qua phải, nên chúng ta sẽ phải can thiệp bằng logic.

    Tiếp theo qua phần Event sheet, Tạo 1 group đặt tên là "Spawn".
    Tạo logic như sau:

    [​IMG]
    Logic trên nghĩa là: Luôn luôn - khiến cho hướng nhìn của Táo và Kẹo là 90 độ.

    [​IMG]
    Để xóa object Táo và Kẹo ban đầu, tránh trường hợp vừa load game đã thấy object rơi vù vù.

    [​IMG]
    Để cho Táo và Kẹo khi rơi xuống đất sẽ biến mất (còn có tác dụng chống leak, để quá nhiều object rơi ra khỏi layout sẽ khiến game lag)

    [​IMG]
    Mỗi 2s layout sẽ tự tạo ra Táo và Kẹo tại Layer 1 (Mid) ở vị trí X và Y của layout.

    [​IMG]
    Biểu đồ XY của C2, giống y môn đại số phải ko? ^^

    Đây là logic chúng ta đã làm:

    [​IMG]

    Test thử xem Táo và Kẹo có spawn ra ko?

    Tiếp theo chúng ta sẽ làm tương tác của Loli với Táo và Kẹo.

    Tạo 1 group đặt tên là "Bonus".
    Sau đó click chuột phải -> Add global variable -> đặt tên biến là "Scores".

    [​IMG]

    Tiếp theo chúng ta tạo 2 logic như sau:
    [​IMG]
    Khi Loli chạm vào Táo hoặc Kẹo, chúng sẽ biến mất.

    Bây giờ chúng ta cần tính điểm khi Loli chạm vào Táo và Kẹo.
    Add thêm action vào mỗi logic vừa tạo: Systems -> Add to -> 1

    [​IMG]

    Logic của chúng ta sẽ trông như thế này:

    [​IMG]
    Loli chạm vào Táo sẽ đc 3 điểm, chạm vào Kẹo sẽ đc 1 điểm.

    Nhưng bây giờ làm sao để điểm số hiện lên trong game?

    Trở lại phần Layout nào. Nhấn chuột phải -> Insert new object -> Text
    Đặt nó ở vị trí gọn trên Layout, sau đó qua tab Properties chỉnh Layer của nó là HUD nhé.

    [​IMG]

    Qua lại phần Event sheet.
    Tạo thêm 1 group đặt tên là "HUD"
    Tạo 1 logic với event là "Every tick"

    [​IMG]

    Action như sau: Text -> Set text
    Đến phần "Parameters for Text: Set text". Nhìn bên trên bạn sẽ thấy bảng "Objects with expressions" . Chọn Systems -> Scores -> Done.

    Đây là logic sau cùng:

    [​IMG]

    Test game và thấy kết quả ^^

    Bạn để ý thấy object khi di chuyển hơi mờ phải không? Các bạn bấm chọn Project và nhìn qua bên Properties, chỗ Pixel rounding bạn chọn "ON".

    [​IMG]

    Phần game ổn rồi, bây giờ chúng ta qua phần âm thanh.
    Bạn tải 2 file sound này nhé:
    http://dl.dropbox.com/u/48963688/Sound/Candy sound.wav
    http://dl.dropbox.com/u/48963688/Sound/Apple sound.wav

    Sau khi tải xong, nhìn ở tab Projects, bạn thấy folder có ghi chứ "Sounds", nhấn chuột phải vào đó, chọn Import sounds. Sau đó chọn 2 file sound vừa nãy -> Import -> Ok.

    [​IMG]

    Qua Event sheet, chỗ Group Bonus, các bạn thêm vào action cho 2 logic đã tạo. Add action -> Audio -> Play -> chọn file nhạc phù hợp.
    Đây là logic đầy đủ:

    [​IMG]

    Done. Test game và thưởng thức. ^^

    [​IMG]



    Video hướng dẫn:
    [video=youtube;R-JWsXaRhdQ]http://www.youtube.com/watch?v=R-JWsXaRhdQ&feature=youtu.be[/video]
    Link download video: http://www.mediafire.com/?lr367izzbbgzgch


    Bài 2 đến đây là hết, có thắc mắc gì xin các bạn cứ hỏi.
     
    Chỉnh sửa cuối: 1/3/12
  2. S.Dentatus

    S.Dentatus Legend of Zelda

    Tham gia ngày:
    15/9/11
    Bài viết:
    1,116
    Nơi ở:
    Whiterun
    Bài viết của bạn rất hay. nhưng tại sao không gộp chung 1 topic để dễ theo dõi ?
     
  3. 01lifeleft

    01lifeleft Youtube Master Race

    Tham gia ngày:
    10/3/09
    Bài viết:
    69
    Sau khi hoàn thành Bài 1 mình sẽ gộp chung lại.
    Hiện đang làm video tutorial, sau này nếu bí chỗ nào các bạn có thể nhìn vào video. \m/
     
  4. drafanasa

    drafanasa Legend of Zelda Lão Làng GVN

    Tham gia ngày:
    7/7/11
    Bài viết:
    952
    Nơi ở:
    Ho chi Minh City
    C2 dùng tài nguyên thế nào cũng đc phải k nhỉ:-/
     
  5. 01lifeleft

    01lifeleft Youtube Master Race

    Tham gia ngày:
    10/3/09
    Bài viết:
    69
    Ừ, JPEG, PNG cũng đc. Nếu là hình GIF nó sẽ tự động chia frame ra (add video cũng đc nhưng phải dùng thêm plugin).
    Game Bastion này có phiên bản HTML5 trên app web store nè:

    [video=youtube;mX48y24t9iU]http://www.youtube.com/watch?v=mX48y24t9iU[/video]

    HTML5 tuy đang phát triển nhưng vẫn có thể làm đc game hay :D
     

Chia sẻ trang này