(Last Updated On: April 2, 2024)

Hãy cùng tìm hiểu cách thiết kế trò chơi Đường Về Nhà với phần mềm thiết kế bài giảng điện tử ActivePresenter. 

Với thiết kế đẹp mắt, sinh động, các bạn học sinh nhỏ tuổi sẽ rất yêu thích trò chơi này. Trò chơi có thể được sử dụng trong quá trình củng cố hay kiểm tra kiến thức của học sinh. Sau khi nắm được kỹ thuật tạo ra trò chơi, bạn có thể tùy chỉnh và sáng tạo ra nhiều trò chơi khác. 

Bạn có thể tải về bài giảng mẫu tại đây.

Bài viết gồm những nội dung sau:

Trước khi bắt tay vào thiết kế trò chơi, hãy cùng tìm hiểu về luật chơi.

Luật Chơi Đường Về Nhà

Trên đường về nhà, nhân vật sẽ gặp rất nhiều chướng ngại vật (CNV). Để vượt qua, nhân vật sẽ phải trả lời đúng những câu hỏi được ẩn trong mỗi CNV.

Ở slide Nội dung, khi nhân vật di chuyển lần lượt đến vị trí các CNV và nhấp chuột vào CNV, trò chơi sẽ chuyển đến một slide câu hỏi ngẫu nhiên. Phản hồi thông báo kết quả sẽ xuất hiện khi người chơi trả lời đúng. Nhấp vào nút Tiếp tục, trò chơi sẽ trở về slide nội dung, và nhân vật tiếp tục di chuyển đến một vị trí mới. Nếu người chơi trả lời sai, trò chơi sẽ dừng lại và chuyển đến slide Kết thúc. Người chơi có thể nhấp nút Chơi lại để bắt đầu lại trò chơi.

Như vậy, người chơi sẽ giúp nhân vật tìm đường về nhà bằng cách trả lời đúng tất cả các câu hỏi trong trò chơi. Lúc này, trò chơi sẽ tự động chuyển đến slide Chúc mừng

Giai Đoạn Chuẩn Bị

Hãy cùng tìm hiểu bước chuẩn bị để thiết kế trò chơi Đường Về Nhà. 

Thứ nhất, thêm tất cả các hình ảnh và âm thanh sử dụng trong trò chơi vào khung Tài nguyên

Mở tab Khung nhìn > Tài nguyên để mở khung Tài nguyên. Sau đó, kéo và thả vào đây tất cả những hình ảnh và âm thanh bạn muốn dùng. Thao tác này giúp bạn tiết kiệm thời gian trong quá trình thiết kế trò chơi. Thay vì tìm các đối tượng trong tệp máy tính, bạn có thể trực tiếp chọn chúng từ khung Tài nguyên

Khung tài nguyên của trò chơi Đường về nhà

Thứ hai, tùy chỉnh Bản cái slide (tab Khung nhìn > Bản cái slide

  • Cài đặt ảnh nền cho các slide. (khung Thuộc tính > Thuộc tính của slide Tô màu nền > Tô ảnh > Chọn ảnh nền từ bài giảng và chọn một ảnh từ khung Tài nguyên).
  • Tùy chỉnh định dạng Question Bố cục. Bạn có thể thay đổi kích cỡ và loại font chữ, màu sắc chữ, nút, và các thuộc tính khác. 
  • Bỏ chọn tính năng Tự chuyển slide. Chọn tất cả các slide > khung Thuộc tính > Thuộc tính của slide Thông tin chung > bỏ chọn Tự chuyển slide. Như vậy, trò chơi sẽ không tự chuyển sang slide tiếp theo khi slide trước đó kết thúc.
  • Tạo hiệu ứng chuyển tiếp giữa các slide. Vào tab Chuyển tiếp > Mở ra > Từ bên phải.
  • Đóng dạng xem bản cái để lưu các thay đổi. 

Thứ ba, thêm slide cho trò chơi và đặt tên cho các slide

Trò chơi Đường Về Nhà được xây dựng dựa trên 10 slides. Nếu bạn đang trong một bài giảng trống, hãy vào tab Trang đầu hoặc Tab Thêm Slide mới để thêm lần lượt 10 slide. Mỗi slide được đặt tên theo mục đích sử dụng của chúng (Để đổi tên slide > khung Thuộc tính > tab Thuộc tính của slide > Thông tin chung > Tên). 

Bố Cục Trò Chơi Đường Về Nhà 

Bố cục trò chơi Đường về nhà

Trò chơi Đường Về Nhà gồm 10 slides với thứ tự như sau:

  • Slide 1: Mở đầu.
  • Slide 2: Nội dung
  • Slide 3: CH1 – Câu hỏi Đúng/Sai
  • Slide 4: CH2 – Câu hỏi Nhiều lựa chọn
  • Slide 5: CH3 – Câu hỏi Nhiều đáp án
  • Slide 6: CH4 – Câu hỏi Điền vào chỗ trống
  • Slide 7: CH5 – Câu hỏi Điền vào đoạn văn 
  • Slide 8: CH6 – Câu hỏi Điểm ảnh
  • Slide 9: Kết thúc
  • Slide 10: Chúc mừng

Thiết Kế Chi Tiết Trò Chơi Đường Về Nhà

Để xây dựng trò chơi Đường Về Nhà, hãy thực hiện từng phần sau:

  1. Tạo Ngân Hàng Câu Hỏi & Thêm Câu Hỏi Ngẫu Nhiên
  2. Thiết Kế Slide Mở Đầu
  3. Thiết Kế Slide Nội Dung
  4. Tạo Slide Kết Thúc
  5. Tạo Slide Chúc Mừng
  6. Tùy Chỉnh Bản Cái Phản Hồi
  7. Xem Trước & Xuất Bản Trò Chơi

Bây giờ, hãy khám phá phần đầu tiên!

1. Tạo Ngân Hàng Câu Hỏi & Thêm Câu Hỏi Ngẫu Nhiên

Như đã nhắc đến ở phần trước đó, Đường Về Nhà gồm 6 slide câu hỏi. Để mỗi lần tham gia trò chơi, các câu hỏi xuất hiện ngẫu nhiên không theo thứ tự định trước, chúng ta cần tạo ra ngân hàng câu hỏi và thêm câu hỏi ngẫu nhiên. 

Bước 1: Tạo ra các câu hỏi như ý muốn. Nếu bạn đã nhấp chọn slide Question từ danh sách Slide mới, hãy nhấp vào biểu tượng để thêm câu hỏi tương ứng.

Nhấp vào biểu tượng để thêm câu hỏi cho của trò chơi Đường về nhà

Bước 2: Vào tab Khung nhìn Các kho slide. Khung Kho slide sẽ xuất hiện ngay bên phải Canvas.  

Bước 3: Nhấp Đổi tên kho trên thanh công cụ của khung Các kho Slide. Trong hộp thoại xuất hiện, nhập tên Ngân hàng câu hỏi > OK.

Đổi tên kho

Bước 4: Chọn 6 slide câu hỏi ở khung Slide > chuột phải > Chuyển slide tới Ngân hàng câu hỏi. Lúc này, 6 slide câu hỏi đã được chuyển tới Ngân hàng câu hỏi và không còn xuất hiện trên khung Slide.

Ngân hàng câu hỏi

Lưu ý:

Mỗi câu hỏi đều được cài đặt giá trị Điểm và Số lần thực hiện là 1. (Nhấp chọn phần đáp án của mỗi câu hỏi > khung Thuộc tính > tab Tương tác > Điểm và Báo cáo > Điểm và Số lần thực hiện). Với sự cài đặt như vậy, người chơi chỉ có một lần gửi đáp án trả lời. Và họ sẽ có thêm 1 điểm cho mỗi câu trả lời đúng. 

Bước 5: Cài đặt sự kiện – hành động để chuyển đến slide Kết thúc khi người chơi trả lời sai. (Sự kiện Khi thực hiện sai > xóa tất cả các hành động được tạo sẵn > thêm hành động Chuyển đến slide > Kết thúc.

Khi thực hiện sai

Lưu ý: Lặp lại thao tác này cho tất cả các câu hỏi.

Bước 6: Thêm 6 slide ngẫu nhiên vào sau slide Nội dung trên khung Slide. Vào tab Câu hỏi > nhấp chọn Câu hỏi ngẫu nhiên 6 lần. 6 slide ngẫu nhiên này liên kết trực tiếp với Ngân hàng câu hỏi. Mỗi lần người chơi tham gia trò chơi, 6 câu hỏi sẽ xuất hiện ngẫu nhiên. 

Như vậy, chúng ta có tổng 10 slide; trong đó, 6 slide ngẫu nhiên thay thế cho 6 slide câu hỏi ban đầu. 

Thêm slide câu hỏi ngẫu nhiên cho trò chơi Đường Về Nhà

Để hiểu rõ hơn, mời các bạn xem video ActivePresenter e-Learing 15: Ngân hàng câu hỏi và Câu hỏi ngẫu nhiên.

2. Thiết Kế Slide Mở Đầu

Như có thể thấy, slide Mở đầu gồm tên trò chơi, lời giới thiệu và nút Bắt đầu

Nếu bạn đã chuẩn bị một hình ảnh đẹp biểu thị nút bắt đầu, bạn có thể trực tiếp kéo và thả lên trên Canvas. Tuy nhiên, bạn sẽ phải tự tạo các trạng thái cũng như sự kiện – hành động để hiển thị các trạng thái. Trong trường hợp này, tôi sẽ sử dụng đối tượng Nút được tạo sẵn trong ActivePresenter. Nhờ vậy, tôi có thể dễ dàng chỉnh sửa và dùng lại những trạng thái của nút. 

Hãy thực hiện theo các thao tác sau để tạo ra slide Mở đầu:

  • Thêm tên và lời giới thiệu cho trò chơi (tab Thêm > Chú thích văn bản).
  • Thêm nút (tab Thêm > Nút > nhấp vào các vị trí bất kì trên Canvas).
  • Chỉnh sửa trạng thái cho nút. (tab Khung nhìn > Trạng thái đối tượng > Chỉnh sửa trạng thái > chọn Thông thường > khung Thuộc tính > tab Kiểu  & Hiệu ứng > Tô > Tô ảnh > Chọn ảnh nền từ bài giảng). Sau đó, chỉnh sửa trạng thái Di chuột qua
Chỉnh sửa trạng thái đối tượng
  • Thêm sự kiện – hành động cho nút. (khung Thuộc tính > tab Tương tác > Sự kiện – Hành động > sự kiện Khi nhấp chuột > Chuyển đến slide > Nội dung). Nhờ đó, khi nhấp chuột vào nút Bắt đầu, trò chơi sẽ chuyển đến slide Nội dung.
  • Thêm âm thanh nhấp chuột cho nút. (sự kiện Khi nhấp chuột > Phát âm thanh > Mouse Click 1 từ danh sách âm thanh có sẵn)  

3. Thiết Kế Slide Nội Dung

Đây là slide thể hiện toàn bộ các CNV và quá trình di chuyển của nhân vật. Hãy tiếp tục theo dõi bài viết để tìm hiểu cách hoàn thiện slide này. 

3.1. Thêm Hình Ảnh Nhân Vật & CNV

  • Kéo – thả những hình ảnh bạn cần từ khung Tài nguyên lên Canvas.
  • Thêm trạng thái “Chuyển hướng” cho nhân vật. (tab Kích thước & Thuộc tính > Hình ảnh > chọn một hình ảnh khác từ khung Tài nguyên). 
Thêm trạng thái cho nhân vật
  • Thay đổi hình ảnh hiển thị con trỏ chuột khi di chuột trên các CNV. (Chọn tất cả CNV > khung Thuộc tính > tab Tương tác > Thông tin chung > Con trỏ chuột).
Thay đổi thuộc tính con trỏ chuột

3.2. Tạo Các Dòng Thời Gian & Đường Di Chuyển Của Nhân Vật

Tiếp theo, chúng ta sẽ tạo thêm nhiều dòng thời gian ở slide Nội dung, mỗi dòng thời gian tương ứng với 1 đoạn đường nhân vật di chuyển. 

Bước 1: Thêm dòng thời gian mới.

Nhấp vào mũi tên ở Dòng thời gian chính (1) > Thêm dòng thời gian (2). 

thêm dòng thời gian cho trò chơi Đường Về Nhà

Ngay sau đó, dòng thời gian mới xuất hiện với tên gọi mặc định là Dòng thời gian 1.

Bước 2: Đổi tên dòng thời gian mới.

Nhấp vào mũi tên bên cạnh Dòng thời gian 1 Đổi tên dòng thời gian… > nhập tên mới: Đoạn đường 1 trên hộp thoại xuất hiện > OK.

Đổi tên dòng thời gian
Bước 3: Tạo đường chuyển động của nhân vật.

Nhấp chọn nhân vật trên Canvas > tab Hoạt hình > Thêm hoạt hình > Đường chuyển động > Đường viền.

Bạn có thể tùy ý kéo, thả, thay đổi hướng, tùy chỉnh hiệu ứng trên Canvas cho phù hợp

Phần hiệu ứng di chuyển của nhân vật sẽ được hiển thị trên dòng thời gian. Theo luật chơi, nhân vật sẽ di chuyển đến chướng ngại vật 1. Vậy, ta thêm hiệu ứng cho CNV1 để thu hút và kích thích trí tò mò của người chơi. 

Bước 4: Đặt Playhead vào cuối hiệu ứng đường chuyển động của nhân vật trên dòng thời gian.

Sau đó, chọn CNV1 > hiệu ứng Chệnh choạng.  

Dòng thời gian 1

Lưu ý: Lặp lại 4 bước trên, lần lượt tạo thêm 5 dòng thời gian tương ứng với 5 đoạn đường còn lại. Ở mỗi dòng thời gian, tạo hiệu ứng đường di chuyển của nhân vật và hiệu ứng cho CNV tương ứng. 

6 Dòng thời gian

Sau khi hoàn thành việc tạo các dòng thời gian và đường di chuyển của nhân vật trong trò chơi Đường về nhà, chúng ta sẽ cài đặt sự kiện – hành động cho slide, nhân vật và các CNV.

3.3. Cài Đặt Sự Kiện – Hành Động 

Slide Nội dung là slide có nhiều sự kiện, hành động được thiết lập nhất. Chúng ta thực hiện theo các bước sau đây: 

Bước 1: Cài đặt hành động và điều kiện để bắt đầu dòng thời gian.
  • Sự kiện Khi tải của slide > thêm hành động Bắt đầu dòng thời gian > chọn Đoạn đường 1.
  • Điều kiện NẾU apQuizScore bằng với 0.

Biến tổng điểm apQuizScore được sử dụng trong trường hợp này. Với mỗi câu trả lời đúng, người chơi sẽ được cộng 1 điểm. Nếu trả lời đúng tất cả các câu hỏi trong trò chơi, người chơi sẽ đạt được 6 điểm. 

Trước khi bắt đầu, tổng điểm của trò chơi đang là 0. Điều kiện trên nghĩa là nếu tổng điểm của trò chơi bằng 0 thì Đoạn đường 1 bắt đầu. Nói cách khác, ngay khi slide nội dung hiện lên, nhân vật đã bắt đầu di chuyển trên đoạn đường 1. 

cài đặt đk cho apQuizScore

Tiếp theo, khi nhân vật gặp CNV, người chơi sẽ nhấp vào CNV để chuyển đến slide câu hỏi ngẫu nhiên. 

Bước 2: Cài đặt sự kiện – hành động và điều kiện cho CNV.
  • Chọn CNV1 > thêm sự kiện Khi nhấp chuột > chọn hành động Chuyển đến slide > Slide 3
  • Thêm điều kiện cho CVN1.
  • Thêm hành động Phát âm thanh để làm người chơi hứng thú với mỗi lần nhấp chuột.
Sự kiện - hành động CNV1

Đoạn đường 2 được bắt đầu với điều kiện người chơi đã trả lời đúng câu hỏi ở chướng ngại vật đầu tiên và dành được 1 điểm. 

Bước 3: Cài đặt hành động và sự kiện để CNV biến mất khi người chơi trả lời đúng câu hỏi tương ứng. 
  • Thêm hành động Ẩn đối tượng ở sự kiện Khi tải của slide > chọn CNV1
  • Thêm điều kiện NẾU apQuizScore lớn hơn hoặc bằng 1
Thêm điều kiện cho hành động Ẩn đối tượng CNV

Đồng thời lúc này, Đoạn đường 2 sẽ tự động bắt đầu. Do đó, lặp lại các bước trên cho các dòng thời gian và CNV tương ứng trên slide Nội dung. Để tối ưu hóa thời gian làm việc, bạn có thể dùng tổ hợp phím tắt Ctrl+C và Ctrl+V để sao chép và dán các sự kiện, hành động, điều kiện; sau đó tùy chỉnh chính xác.

Ví dụ, ở sự kiện Khi tải của slide Nội dung, ta sao chép và dán hành động Bắt đầu dòng thời gian > chọn Đoạn đường 2. Chỉnh sửa điều kiện thành NẾU apQuizScore bằng với 1 thì Đoạn đường 2 sẽ bắt đầu. 

Khi nhân vật di chuyển đến CNV2 và nhấp chuột. Ta sao chép và dán hành động Khi nhấp chuột của CNV1 > chọn chuyển đến Slide 4. Chỉnh điều kiện người chơi đã trả lời đúng câu hỏi trước đó, và đang có tổng điểm là 1. 

Lưu ý: Sau khi vượt qua CNV2 và dành được 2 điểm, nhân vật sẽ đổi hướng và tiếp tục di chuyển trên Đoạn đường 3 (4). Tuy nhiên, sau khi băng qua CNV4, nhân vật sẽ trở về trạng thái ban đầu (5). Vì vậy, ta cần thêm sự kiện Thay đổi trạng thái đối tượng và điều kiện trên sự kiện Khi tải của slide như sau: 

Thay đổi trạng thái đối tượng

Khi người chơi trả lời đúng hết các câu hỏi và dành được 6 điểm, trò chơi sẽ chuyển đến slide Chúc mừng

Bước 4: Thêm hành động chuyển tới slide Chúc mừng.

Ở sự kiện Khi tải của slide Nội dung > thêm hành động Chuyển đến slide Chúc mừng. Cài đặt điều kiện Nếu apQuizScore bằng với 6

Kết quả được hiển thị trong ảnh minh họa dưới đây:

Sự kiện Khi tải của trò chơi Đường về nhà

4. Tạo Slide Kết Thúc

Slide này nhằm thông báo trò chơi kết thúc khi người chơi trả lời sai bất kỳ câu hỏi nào. Người chơi có thể thực hiện lại trò chơi ngay sau khi họ nhấp nút Chơi lại. Hãy thực hiện theo các thao tác sau để tạo slide Kết thúc:

  • Kéo và thả âm thanh Kết thúc từ khung Tài nguyên lên trên Canvas. 
  • Chọn nút Chơi lại > thêm sự kiện Khi nhấp chuột > Chạy lại bài trình chiếu
  • Thêm hành động Phát âm thanh > chọn Mouse Click 1 từ danh sách âm thanh tạo sẵn.
Slide Kết thúc của trò chơi Đường về nhà

5. Tạo Slide Chúc Mừng

Trò chơi sẽ tự động chuyển đến slide chúc mừng ngay sau khi người chơi trả lời đúng tất cả các câu hỏi. Bên cạnh thông tin chúc mừng chiến thắng, bạn có thể thêm âm thanh để người chơi hào hứng hơn. Kéo và thả âm thanh Chúc mừng từ khung Tài nguyên vào Canvas để hoàn thành điều đó.   

6. Tùy Chỉnh Bản Cái Phản Hồi

Như có thể thấy, các lớp phản hồi xuất hiện sinh động với sự hòa hợp màu sắc, hình ảnh và âm thanh. Hãy thực hiện các thao tác sau:

  • Vào tab Khung nhìn > Bản cái phản hồi
  • Thay đổi định dạng các lớp phản hồi: nhấp chọn Bố cục Bản cái phản hồi > vào tab Định dạng > thay đổi kích cỡ, màu sắc, font chữ, đường viền, …
  • Thêm âm thanh cho Lớp phản hồi đúng: kéo và thả âm thanh từ khung Tài nguyên vào Lớp phản hồi đúng.
  • Tùy chỉnh nút Tiếp tục trên Lớp phản hồi đúng: chọn nút Tiếp tục > xóa hành động mặc định > thêm hành động Chuyển đến slide > Nội dung. Sau đó, thêm hành động Phát âm thanh > Mouse Click 1.
Nút tiếp tục

Sau đó, đóng dạng xem bản cái để lưu những thay đổi bạn vừa tạo. 

7. Xem Trước & Xuất Bản Trò Chơi Đường Về Nhà

Sau khi hoàn thiện Đường Về Nhà, bạn có thể xem trước trò chơi bằng cách nhấn Xem trước HTML5. Hoặc bấm phím F5 thay thế. Điều này giúp bạn dễ dàng nhận ra những vấn đề cần chỉnh sửa trước khi xuất trò chơi.

Xem trước và Xuất trò chơi Đường về nhà

Cuối cùng, khi đã hài lòng với kết quả, bạn có thể xuất trò chơi ra HTML5SCORM hay xAPI tùy theo nhu cầu sử dụng. Hoặc, chọn Xuất bản LMS để xuất trò chơi lên hệ thống LMS của chúng tôi.

Lời kết

Slide Mở đầu trò chơi Đường về nhà

Trên đây là hướng dẫn cách tạo trò chơi Đường Về Nhà. Hãy thử tải về phần mềm và khám phá các tính năng hữu ích của ActivePresenter. Đừng quên đăng ký kênh YouTube của chúng tôi để cập nhật những video mới nhất. 

Xem thêm: