-->

  • Game Development with Construct 2 - Chương 5 - Phần 1




    Chương 5. Thêm các tính năng
     cho trò chơi của bạn


    Bất cứ khi nào bạn học các kĩ thuật mới trong phát triển game, hãy quay lại các trò chơi cũ của bạn và áp dụng nó, điều này rất được khuyến khích. Thêm các cơ chế gameplay hoặc các tính năng sẽ cải thiện đồ họa và hiệu ứng của trò chơi. Trong chương này, bạn sẽ thực hiện trên dự án trò chơi đầu tiên: Starfish Collector, và thêm một hình ảnh dựa trên hoạt ảnh và văn bản để hiển thị tiến độ của bạn. Sau đó, bạn sẽ học vài kĩ thuật mới và các tính năng bạn có thể sử dụng trong tất cả các trò chơi: thêm các nút giao diện, thêm âm thanh, thêm hệ thống menu, và một số thứ khác.


    Để bắt đầu, hãy tải các asset được sử dụng cho chương này tại đây

    Bài 1. Thêm hoạt ảnh và văn bản

    Đầu tiên, bạn sẽ thay đổi hình ảnh duy nhất đang được sử dụng cho con rùa bằng một hoạt ảnh. Không giống như chương trước (các hoạt ảnh nằm trong một hình ảnh), thì lần này các hoạt ảnh nằm ở các hình ảnh riêng biệt. Trong bảng Objects, kích chuột phải vào đối tượng Turtle và lựa chọn Edit animations để mở cửa sổ chỉnh sửa hình ảnh. Trong cửa sổ Animation frames, kích chuột phải và lựa chọn Import frame... và lựa chọn From files. Từ cửa sổ Open, bạn có thể lựa chọn nhiều hình ảnh cùng một lúc như sau: trong cửa sổ này. kích vào tệp hình ảnh turtle-2.png rồi sau đó giữ Ctrl và kích vào tất cả các hình ảnh tương tự (từ 3 đến 6). Tổng cộng, sẽ có 5 tệp được chọn và tên của tất cả tệp này đều được xuất hiện như ở hình bên dưới. Sau đó, kích vào nút Open và bạn sẽ thấy cả 6 hình ảnh xuất hiện trong cửa sổ Animation frames. Thiết lập thuộc tính Speed thành 12 và Loop thành Yes. Đóng cửa sổ chỉnh sửa hình ảnh.


    Tiếp theo, bạn cần thêm sự kiện để dừng sự chuyển động của hoạt ảnh khi con rùa không di chuyển nữa và tiếp tục chuyển động hoạt ảnh khi con rùa di chuyển. Các sprite có hành động liên quan đến hoạt ảnh có thể được sử dụng để bắt đầu và dừng hoạt ảnh, nhưng nó sẽ làm ảnh hưởng đến tốc độ khung hình hiện tại nếu không được sử dụng đúng cách. Tạo sự kiện mới với điều kiện Turtle - 8-Direction: Is moving, đảo ngược (invert), thêm hành động Turtle - Animation: Set Speed và thiết lập Speed thành 0. Thêm một sự kiện khác với điều kiện Turtle - 8-Direction: Is moving, thêm hành động Turtle - Animation: Set Speed, và thiết lập Speed thành 12. Khi đã hoàn thành, sự kiện của bạn sẽ xuất hiện như hình dưới đây. Lưu và test thử để xác minh rằng hoạt ảnh của con rùa hoạt động như mong đợi.



    Tiếp theo, bạn sẽ tạo một đối tượng Text để hiển thị số lượng sao biển còn lại. Tạo một đối tượng Text tên là TextStarfish. Thay đổi thuộc tính Layer thành UI, chỉnh lại sao cho văn bản được nằm ở giữa và thay đổi chữ Text thành Starfish Left: N (bạn nên thay N bằng số sao biển bạn có lúc đầu). Để cho văn bản trông trực quan hơn, thay đổi Font thành Comic Sans MS, thay đổi Style thành Bold, và thay đổi Size thành 36. Tăng kích cỡ đối tượng Text để chúng có thể xuất hiện trong cùng một dòng. Thay đổi màu chữ thành màu xanh đậm. Đặt đối tượng ở vị trí trung tâm bên trên layout:


    Bạn không cần phải tạo một biến để theo dõi bao nhiêu con sao biển còn sót lại vì thông tin này được lưu trữ trong Starfish.Count. Tuy nhiên, bạn vẫn cần một sự kiện để cập nhật văn bản; văn bản được thiết lập thành "Starfish Left: " & Starfish.Count. Tuy nhiên, vị trí của hành động này cần phải được xem xét cẩn thận. Trong quá khứ, bạn cập nhật đối tượng Text ngay sau khi biến liên quan được thay đổi, những hành động này là một phần của cùng một sự kiện. Nhưng trong trường hợp này, các hành động nhất định sẽ gây ra kết quả không mong đợi bởi vì hành động phá hủy một sprite không thật sự loại bỏ đối tượng ra khỏi trò chơi đến khi kết thúc sự kiện (Điều này có thể hữu ích trong một số trường hợp, ví dụ như có một tiểu hành tinh - vừa mới bị phá hủy, rồi sinh ra một vụ nổ trong hành động tiếp theo). Trong trường hợp hiện tại, điều này có nghĩa là giá trị của Starfish.Count không thay đổi đến hết sự kiện, vì vậy việc cập nhật văn bản phải diễn ra trong một sự kiện sau đó. Để thực hiện điều này, tạo ra một sự kiện với điều kiện System - Every tick, thêm hành động TextStarfish - Text: Set Text, và nhập "Starfish Left: " & Starfish.Count. Sự kiện đã hoàn thành sẽ như hình dưới đây. Lưu lại và kiểm tra xem nó có hoạt động tốt hay không.




    WAITING FOR LUV
    Bạn có muốn cải thiện khả năng thiết kế đồ họa của mình? Chắc hẳn các bạn cũng biết, nếu các dòng code là linh hồn của một trò chơi, thì đồ họa chính là bộ mặt của trò chơi đó. Đồ họa đẹp, dễ nhìn sẽ khiến trò chơi của bạn tăng tỉ lệ hấp dẫn người xem đến 90%. Hiện tại có hai công cụ hỗ trợ thiết kế đồ họa game tiện nhất mà mình biết, đó là Photoshop và Illustrator. Mình sẽ cố gắng tìm kiếm và chia sẻ các đồ họa game miễn phí cho các bạn tại blog này; tuy nhiên, một trò chơi mà 100% do chính mình tạo ra vẫn hơn là đi cóp nhặt hình ảnh từ nơi khác đúng không nào. Tiện đây, mình có chia sẻ một khóa học thiết kế đồ họa Game 2D cho Mobile. Các bạn có thể tham khảo dưới đây để được giảm 40% học phí nhé.

    Bài 2. Các nút cơ bản

    Tiếp theo, bạn sẽ thêm một vài cái nút có tác dụng dừng và tiếp tục trò chơi. Các nút được kích hoạt bằng cách kích chuột vào nó. Để nâng cao phản hồi trực quan cho mắt của người chơi, các nút sẽ hơi trong suốt, khi đó nếu bấm vào sẽ không có gì xảy ra (chẳng hạn như bấm vào nút dừng khi game đã dừng rồi). Để bắt đầu, tạo một đối tượng sprite mới đặt tên là ButtonPause, sử dụng hình ảnh pause.png. Tạo một đối tượng sprite mới, sử dụng tệp hình ảnh play.png, đặt tên nó là ButtonResume, thiết lập Opacity của nó thành 50. Đặt hai nút ở phía trên bên phải layout hoặc chỗ nào bạn thấy vừa mắt. Để kích hoạt chuột, thêm một đối tượng Mouse (tương tự như đối tượng Keyboard). Kích chuột phải vào khu vực layout, và trong cửa sổ Add New Object chọn Mouse.



    Việc tạm dừng trò chơi có thể được thực hiện bằng cách thiết lập một trong các thuộc tính hệ thống được gọi là time scale, cái này điều khiển tốc độ vào lúc thời gian được xử lí bởi C2. Giá trị khoảng thời gian mặc định là 1. Đặt giá trị này là 2 sẽ khiến hoạt ảnh hiển thị nhanh gấp 2 lần, các đối tượng di chuyển nhanh gấp 2 lần. Thiết lập ở mức 0.5 sẽ làm các tính năng chậm đi một nửa. Đặt nó thành 0 để dừng tất cả các tính năng này, và sẽ không có gì xảy ra trong trò chơi (mặc dù C2 vẫn đáp ứng các đầu vào như bàn phím và chuột). Đầu tiên, bạn sẽ thiết lập tính năng tạm dừng. Tạo một sự kiện mới với điều kiện Mouse - On object clicked, và lựa chọn đối tượng ButtonPause. Tham số Mouse button cho phép bạn lựa chọn nút chuột cụ thể (trái, giữa hoặc phải), trong khi đó Click type chỉ định bất cứ khi nào người dùng cần kích một lần hoặc nháy đúp; nói chung, bạn sẽ để các giá trị này được thiết lập mặc định (nút chuột trái và kích chuột). Bạn cũng có tùy chọn để chọn nút chuột. Thêm 3 hành động sau:

    • Thêm  System - Set time scale và nhập 0.
    • Thêm ButtonPause - Set opacity và nhập 50.
    • Thêm ButtonResume - Set opacity và nhập 100.
    Tiếp theo, bạn sẽ thiết lập tính năng tiếp tục, sự kiện của cái này khá giống bên trên. Một lần nữa, tạo một sự kiện mới với điều kiện Mouse - On object clicked, và lựa chọn đối tượng ButtonResume. Thêm ba hành động tương tự như trước, nhưng các giá trị thông số khác nhau, lần lượt là 1, 100, 50. Khi kết thúc, sự kiện sẽ trông như hình dưới đây. Lưu lại và chạy thử layout của bạn.


    Bài 3. Âm thanh

    Âm thanh là một thành phần rất quan trọng mà bạn nên thêm vào trong mỗi trò chơi. Nhạc nền và nhạc môi trường (chẳng hạn như tiếng suối chảy hoặc tiếng còi xe) có hiệu quả trong việc thiết lập tông và nhịp điệu của trò chơi, trong khi đó âm thanh hiệu ứng mang lại cho người chơi một dạng cảm nhận khác; tất cả các khía cạnh này đều tương tác và hỗ trợ lẫn nhau để tăng trải nghiệm người dùng.

    C2 chia âm thanh thành hai loại: âm thanh và âm nhạc. Âm thanh sẽ được tải hoàn toàn trước khi chơi và thường là các âm thanh ngắn được sử dụng cho các hiệu ứng âm thanh, chẳng hạn như vụ nổ hoặc bắn súng. Còn âm nhạc thì không được tải trước khi chơi mà nó được phát trực tuyến hoặc phát trong khi tải xuống. Các tệp âm thanh lớn chẳng hạn như nhạc nền hoặc nhạc môi trường, thường nằm trong phần này.

    C2 hỗ trợ rất nhiều các dạng âm thanh khác nhau, tuy nhiên các trình duyệt web lại yêu cầu các dạng âm thanh khác nhau. Khi các âm thanh được thêm vào C2, phần mềm sẽ chuyển đổi nó thành nhiều dạng nhất có thể. Về khía cạnh đa nền tảng, bạn có thể cân nhắc dạng âm thanh Waveform (.wav) cho tệp âm thanh và dạng Ogg Vorbis (.ogg) cho tệp âm nhạc. Đặc biệt, các dạng tệp MP3 cơ bản thường không được phát chính xác trong nhiều trình duyệt. Tuy nhiên có rất nhiều công cụ miễn phí và online có thể được sử dụng để chuyển đổi âm thanh sang định dạng mà bạn chọn; bạn có thể tìm kiếm chúng trên Google.

    Trong trò chơi Starfish Collector, bạn sẽ thêm hai yếu tố âm thanh: nhạc nền và nhạc hiệu ứng (âm thanh của giọt nước mỗi khi sao biển được thu thập). Để bắt đầu, trong bảng Projects ở phía trên bên phải cửa sổ C2, kích chuột phải vào tệp Sounds, lựa chọn tùy chọn Import Sounds từ menu xuất hiện, và lựa chọn tệp Water_Drop.wav tự asset mà bạn đã tải về ở đầu chương. Sau đó, một cửa sổ với tiêu đề Import audio files sẽ xuất hiện, kích vào nút OK. Tiếp theo, nhấp chuột phải vào thư mục Music, chọn Import Music và thực hiện như quy trình trước đó để nhập tệp Master_of_the_Feast.ogg.

    Tiếp theo, trong khu vực layout, chọn Add new Object, và sau đó lựa chọn đối tượng Audio. Cũng giống như việc nhập đối tượng Keyboard Mouse cho phép bạn sử dụng các đối tượng này trong event sheet, đối tượng Audio cho phép bạn chơi âm nhạc và nó còn chứa các chức năng nâng cao như hiệu ứng thay đổi âm thanh đang phát. Chương này chỉ đề cập đến những tính năng cơ bản.

    Trong event sheet, tìm sự kiện với điều kiện con rùa va chạm với sao biển. Tới đây, thêm hành động Audio - General: Play, và trong cửa sổ tham số, thiết lập Audio file tới Water_Drop, và thiết lập Loop thành not looping. Tiếp theo, tạo một sự kiện mới với điều kiện System - Start & End: On start of layout, thêm hành động Audio - General: Play, thiết lập Audio file thành Master_of_the_Feast và thiết lập Loop thành looping. Khi bạn hoàn thành, bạn sẽ có bảng sự kiện như hình dưới. Lưu dự án của bạn lại và chạy layout để xác minh nhạc nền khi trò chơi bắt đầu và âm thanh khi con rùa va chạm với sao biển.



    Cuối cùng, bạn sẽ thêm một vài nút trên layout để cho phép bật - tắt âm thanh đang phát. Để bắt đầu, tạo hai sprite mới: một được đặt tên là ButtonMute với hình ảnh audio-off.png và một cái khác được đặt tên là ButtonUnmute với hình ảnh audio-on.png và Opacity thiết lập thành 50. Đặt chúng ở góc trên bên phải của layout, đối xứng với các nút tạm dừng và tiếp tục mà bạn đã tạo, như hình dưới đây:



    Trong event sheet, tạo sự kiện mới với điều kiện Mouse - On object clicked, và thiết lập Object clicked thành ButtonMute. Thêm 3 hành động sau:

    • Thêm Audio - General: Set silent và thay đổi Mode thành silent.
    • Thêm ButtonMute - Set opacity, và nhập 50.
    • Thêm ButtonUnmute - Set opacity và nhập 100.

    Quá trình thiết lập nút bật tiếng cũng tương tự. Một lần nữa tạo một sự kiện mới với điều kiện Mouse - On object clicked, và lựa chọn đối tượng ButtonUnmute. Thêm ba sự kiện như bên trên, nhưng thay đổi giá trị lần lượt là: not silent, 100, 50. Khi kết thúc, sự kiện sẽ như hình dưới. lưu dự án và test thử.



    Bản dịch do construct2vn.ga thực hiện
    Ai sao chép hay chia sẻ hãy ghi nguồn và đưa link www.construct2vn.ga vào đầu bài chia sẻ nhé

  • DONATE TINH THẦN CHO BLOG TẠI ĐÂY

    Nếu các bạn thấy blog có ích hãy ủng hộ blog hàng ngày tại đây. Chỉ cần thi thoảng chơi game và tìm bug cho tụi mình là được. Đây là ủng hộ tinh thần, không phải tiền mặt, vật chất và không bắt buộc. Xin chân thành cảm ơn ahihi. Chúc các bạn một ngày zui zẻ.

    TELEPHONE

    02273 7x2 xxx
    02273 xxx 27x

    MOBILE

    0162 x15 xx33