Trò Chơi Tô Màu là một trò chơi thú vị và hấp dẫn. Thông qua việc khám phá quy luật màu sắc của các hình giống nhau trong cùng một hàng, trò chơi này không chỉ giúp các bé nhận biết màu sắc mà còn khơi gợi trí tưởng tượng cũng như rèn luyện tư duy logic của các bé. 

Trong bài viết ngày hôm nay, xin mời thầy cô và các bạn hãy cùng khám phá cách thiết kế Trò Chơi Tô Màu cùng phần mềm ActivePresenter 8.

Mục Lục:

Cách Chơi Trò Chơi Tô Màu

Trong trò chơi này, thử thách đặt ra cho các bé đó là tìm ra quy luật màu sắc trong mỗi hàng. Sau khi tìm được quy luật màu sắc, các bé cần chọn một bút chì màu và tô vào hình màu trắng để hoàn thành chuỗi quy luật:

Trò Chơi Tô Màu

Ví dụ, trong hàng đầu tiên, các hình tròn giống nhau được sắp xếp theo thứ tự màu sắc: Vàng – Xanh – Đỏ. Sau khi tìm ra ra quy luật này, các bé cần chọn bút chì màu đỏ để tô vào hình tròn ở cuối hàng. Nếu các bé tô đúng màu cho hình đó, các bé sẽ được chơi tiếp. Trong trường hợp các bé tô sai màu, một phản hồi sai xuất hiện để thông báo rằng các bé cần chơi lại trò chơi này.

Ngay bây giờ, hãy cùng bắt tay vào thiết kế trò chơi này nhé!

Thêm Các Hình Dạng Và Hình Ảnh

Đây là bước chuẩn bị cho trò chơi. Để tiện cho việc thiết kế và tạo bố cục trò chơi, chúng ta nên thêm các hình dạng và hình ảnh cần thiết.

Thêm Các Hình Và Tạo Quy Luật Màu Sắc Cho Mỗi Hàng

Để thêm các hình, mở tab Thêm > Hình dạng > chọn hình mà bạn muốn thêm từ trong danh sách:

Thêm Hình Dạng Cho Trò Chơi Tô Màu

Trong trò chơi này, 4 hình được thêm bao gồm hình tròn, hình kim cương, hình trái tim, và hình ngôi sao. Theo mặc định, các hình này có màu xanh đậm và không có đường viền. Nếu bạn muốn tạo đường viền cho hình, trong khung Thuộc tính > tab Kiểu & Hiệu ứng > Đường > chọn Đường liền. Sau đó, tùy ý chỉnh các thuộc tính của đường viền (chiều rộng, màu sắc, độ mờ đục…) theo ý mình. 

Sử dụng tổ hợp phím tắt CTRL + CCTRL + V để sao chép và dán. Thao tác này giúp tạo ra các hình giống nhau một cách dễ dàng. 

Để tạo quy luật màu sắc cho mỗi hàng, hãy thay đổi màu sắc của các hình trong khung Thuộc tính > tab Kiểu & Hiệu ứng > > Màu Sắc.

Lưu ý: Bạn có thể căn chỉnh các hình một cách nhanh chóng. Hãy chọn các hình, trong tab Định dạng > Căn Chỉnh > chọn một lệnh để căn chỉnh một cách tự động. 

Thêm Ảnh

Để thêm ảnh, mở tab Thêm > Hình ảnh > chọn một hoặc nhiều ảnh từ máy tính. 

Lưu ý: Sau khi thêm hình ảnh, hãy nhớ đổi tên chúng trong khung Thuộc tính > tab Tương Tác > Thông tin chung > Tên:

Đổi Tên Cho Các Ảnh Trong Trò Chơi Tô Màu

Ví dụ, trong trò chơi này, bạn cần thêm 5 hình ảnh bút chì màu. Nếu bạn không đặt tên cụ thể cho từng bút chì, sẽ rất khó để phân biệt chúng trong các bước sau. 

Tạo Hiệu Ứng Tô Màu Sử Dụng Trạng Thái Đối Tượng

Như đề cập ở phần mô tả cách chơi, người chơi cần chọn một bút chì màu để tô vào các hình màu trắng. Ví dụ, nếu họ chọn bút chì màu xanh, hình màu trắng sẽ được tô thành màu xanh. Để tạo được hiệu ứng này, chúng ta cần sử dụng tính năng Trạng thái đối tượng

Bước đầu tiên chúng ta cần làm đó là tạo 5 trạng thái đối tượng cho mỗi hình màu trắng. 5 trạng thái đối tượng này tương ứng với 5 màu sắc khác nhau. Chọn một hình, mở tab Khung nhìn > Trạng thái đối tượng > nhấp chuột chọn nút Chỉnh sửa trạng thái. Thao tác này giúp bật chế độ chỉnh sửa trạng thái đối tượng:

Nhấp Chuột Chọn Nút Chỉnh Sửa Trạng Thái

Nhấp vào nút Thêm trạng thái > Trạng thái mới > hộp thoại Thêm trạng thái mới xuất hiện. Đặt tên cho trạng thái và chọn OK để hoàn thành:

Thêm Trạng Thái Mới Cho Hình
Lưu ý:
  • Khi đặt tên cho các trạng thái của hình, bạn nên đặt tên chúng theo tên màu sắc của các bút chì màu. Sau đó, nhớ thay đổi màu sắc của mỗi trạng thái theo tên của chúng. (Trong khung Thuộc tính > tab Kiểu & Hiệu ứng > > Màu Sắc).
5 Trạng Thái Của Một Hình
  • Sẽ mất khá nhiều thời gian và công sức nếu bạn phải tạo 5 trạng thái như trên cho mỗi hình màu trắng. Để giúp quá trình này trở nên nhanh chóng hơn, bạn có thể sao chép (CTRL + C) một hình mà bạn đã tạo đủ 5 trạng thái và dán (CTRL + V) vào Canvas. Kéo hình này tới vị trí mới. Mở tab Định dạng > Thay đổi hình dạng > chọn một hình khác từ danh sách. Bằng cách này, bạn có thể tạo một hình mới với đầy đủ các trạng thái một cách dễ dàng. 
  • Lưu ý rằng sau khi thay thay đổi hình dạng, bạn nên đổi tên các hình này. Thao tác này sẽ rất hữu ích khi làm việc với nhiều đối tượng khác nhau trong các bước tiếp theo. Nhờ đó, bạn có thể phân biệt các hình một cách dễ dàng. Đặc biệt là khi bạn tạo các hành động nâng cao và thêm sự kiện – hành động.

Tạo Tương Tác Cho Trò Chơi Tô Màu

Như vậy, các bước chuẩn bị cho trò chơi đã được hoàn thành. Bây giờ, hãy cùng bắt tay để thực hiện các hoạt động chính để thiết kế Trò Chơi Tô Màu. Tận dụng các tính năng ưu việt của phần mềm ActivePresenter để tạo tính tương tác cao cho trò chơi. Các tính năng này bao gồm Biến, Hành Động Nâng Cao, và Sự kiện – Hành động.

Tạo Biến

Trong trò chơi này, chúng ta cần tạo 5 biến như ảnh dưới đây:

Tạo Biến Mới

Để tạo một biến mới, hãy làm theo các bước sau:

Bước 1: Mở tab Trang đầu > Biến.

Bước 2: Trong hộp thoại Biến, nhấp chuột vào nút dấu cộng màu xanh để tạo một biến mới. Trong hộp thoại mới xuất hiện:

Tạo Một Biến Mới
  • Đặt tên cho biến
  • Chọn ĐÚNG/SAI từ danh sách các loại biến
  • Chọn Sai làm giá trị mặc định
  • Thêm mô tả cho biến (không bắt buộc)
  • Nhấp chọn nút Thêm & Tiếp tục để tiếp tục tạo biến mới. Nhấp chọn Thêm & Đóng > Đóng để hoàn thành việc tạo biến.

Tạo Hành Động Nâng Cao

Trong trò chơi này, chúng ta cần tạo hai hành động nâng cao.

Hành Động Nâng Cao 1

Khi người chơi nhấp chọn một bút chì màu, họ đã chọn một trong năm màu để tô một hình màu trắng. Dựa trên logic trò chơi, hãy đặt tên cho hành động nâng cao đầu tiên là MàuĐượcChọn:

  • Trong phần Tham số, chúng tạo cần tạo 2 loại tham số sau:

Đối tượng slide (STT 1): Tham số này đại diện cho một bút chì màu được người chơi lựa chọn.

Biến (Đúng/Sai) (STT 2-6): Các tham số này đại diện cho màu được lựa chọn hoặc màu không được lựa chọn. 

Tạo Hành Động Nâng Cao Cho Trò Chơi Tô Màu

Trong phần Hành động, tạo 6 hành động như trong ảnh trên:

  • Đánh dấu đối tượng: Tạo hiệu ứng làm nổi bật bút chì màu được người chơi lựa chọn. 
  • Chỉnh sửa biến: Nhận biết đâu là màu được lựa chọn và gán các màu với giá trị đúng hoặc sai. Màu của bút chì được chọn được nhận là giá trị đúng. Các màu còn lại được coi là các giá trị sai. 

Hành Động Nâng Cao 2

Khi người chơi nhấp chuột chọn một hình trắng để tô màu, hình đó sẽ được tô theo màu của bút chì mà người chơi đã chọn. Sẽ có 2 trường hợp xảy ra:

  • Nếu người chơi tô đúng màu, một âm thanh được phát ra để thông báo rằng người chơi đã chọn đúng. Sau đó, họ có thể tiếp tục chơi.
  • Nếu người chơi tô sai màu, một âm thanh được phát ra đồng thời một thông báo hiện lên cảnh báo người chơi về sự lựa chọn sai của họ. Sau đó, họ phải chơi lại từ đầu.

Dựa trên logic này của trò chơi, hãy tạo một hành động nâng cao khác có tên là TôMàu:

  • Trong phần Tham số, tạo 2 loại sau:
Tham Số Của Hành Động Nâng Cao 2

Trạng thái dữ liệu (STT 1, 7-10): Tham số đại điện cho hành động tô một màu vào hình màu trắng. Màu ở đây có thể là màu đúng hoặc màu sai. 

Biến (Đúng/Sai) (STT 2-6): Tham số này đại diện cho màu đúng hoặc màu sai.

  • Trong phần Hành động, thêm các hành động sau:
Thêm Hành Động

Thay đổi trạng thái đối tượng (1, 3-6): Khi người chơi chọn một bút chì màu để tô, hình màu trắng sẽ được tô theo màu của bút chì được lựa chọn. 

Phát âm thanh (2): Nếu người chơi tô màu đúng, âm thanh đúng sẽ phát để thông báo cho người chơi họ vừa đưa ra sự lựa chọn đúng.

Hiển thị lớp phản hồi

+ (7) Nếu người chơi tô sai màu, một thông báo xuất hiện cảnh báo họ đã tô sai và cần chơi lại từ đầu.

+ (8) Khi người chơi tô đúng tất cả các hình màu trắng, một thông báo xuất hiện chúc mừng họ đã hoàn thành trò chơi. 

Thêm Sự Kiện – Hành Động

Sau khi tạo hành động nâng cao, bạn cần thêm sự kiện – hành động cho các bút chì màu và các hình màu trắng:

  • Chọn một bút chì màu. Trong khung Thuộc tính > tab Tương tác > Sự kiện – Hành động > thêm sự kiện Khi nhấp chuột. Sau đó, thêm Hành động nâng cao và gán các giá trị cụ thể vào các tham số:
Gán Các Gía Trị Cụ Thể Cho Tham Số (1)

Ví dụ, nếu bạn chọn bút chì màu đỏ, màu được chọn ở đây sẽ là màu đỏ. Bốn màu còn lại là màu không được chọn. 

Thực hiện các bước tương tự để tạo sự kiện – hành động cho các bút chì màu còn lại. Hoặc, bạn cũng có thể sao chép và dán sự kiện – hành động. 

  • Chọn một hình màu trắng, sau đó thêm sự kiện Khi nhấp chuột > Hành động nâng cao. Gán các giá trị cụ thể vào các tham số như ảnh dưới đây:
Gán Các Gía Trị Cụ Thể Cho Tham Số (2)

Ví dụ, nếu bạn chọn hình tròn màu trắng ở hàng 1, màu đúng cần tô sẽ là màu đỏ. Những màu còn lại sẽ là màu sai. 

Thực hiện các bước tương tự với các hình màu trắng còn lại.

Tùy Chỉnh Các Lớp Phản Hồi Của Trò Chơi Tô Màu

Trong phần trên, chúng ta đã tạo hai hành động Hiển thị lớp phản hồi (7 & 8) cho hành động nâng cao 2. Hình ảnh dưới đây minh họa lớp phản hồi đúng và lớp phản hồi sai theo mặc định:

Lớp Phản Hồi

Để tạo lớp phản hồi sinh động và bắt mắt hơn, mở tab Khung nhìn > Bản cái phản hồi. Tiếp theo, hãy lựa chọn Lớp phản hồi đúng/ Lớp phản hồi sai để chỉnh sửa. Ví dụ, bạn có thể:

  • Thêm âm thanh: Mở tab Thêm > Âm thanh. Chọn một âm thanh từ danh sách Tạo sẵn. Ngoài ra, bạn cũng có thể thêm file âm thanh Từ tập tin… 
  • Thêm hình ảnh/ biểu tượng: Mở tab Thêm > Hình ảnh/ Biểu tượng để thêm hình ảnh từ máy tính hoặc thêm biểu tượng từ danh sách. 
  • Chỉnh sửa nút, cỡ chữ, font chữ, màu sắc trong tab Trang đầu hoặc tab Định dạng
Chỉnh Sửa Các Lớp Phản Hồi Của Trò Chơi Tô Màu

Trong lớp phản hồi sai, hãy xóa hành động cũ và thêm các hành động sau đây cho nút:

Thêm Hành Động Cho Nút
  • Ẩn lớp phản hồi: Khi người chơi nhấp chuột vào nút này, lớp phản hồi sẽ bị ẩn.
  • Chạy lại bài trình chiếu: Khi người chơi nhấp chuột vào nút này, trò chơi sẽ được bắt đầu lại. 

Xem Trước Và Xuất Bản Trò Chơi Tô Màu

Vậy là chúng ta đã cùng nhau hoàn thành việc thiết kế Trò Chơi Tô Màu. Bây giờ xin mời thầy cô và các bạn hãy cùng xem thành quả của mình. Mở tab Xuất > Xem trước HTML5 để xem trước và chơi thử trò chơi. Nếu bạn hài lòng, bạn có thể xuất bản trò chơi ra các định dạng đầu ra như HTML5, SCORM, hoặc xAPI tùy thuộc vào nhu cầu của bạn.

Hi vọng thầy cô và các bạn đã có một thời gian thú vị với việc thiết kế Trò Chơi Tô Màu cùng phần mềm ActivePresenter 8. Hãy tiếp tục theo dõi trang webkênh YouTube của chúng tôi để tìm hiểu thêm cách tạo các trò chơi eLearning khác.