Hướng Dẫn Tạo Thanh Loading Bar Đẹp Mắt Bằng Scratch!

Dưới đây là phân tích và hướng dẫn chi tiết về project Loading Bar được lập trình bằng ngôn ngữ lập trình Scratch

Phân Tích Tổng Quan

1. Chức năng chính
   • Vẽ thanh tiến trình (loading bar) trên sân khấu.
   • Hiển thị phần trăm tiến trình (0% – 100%).
   • Có hiệu ứng “quay” loading bar khi đạt 100%.
   • Có xử lý khi người chơi di chuột hoặc nhấn các nút điều khiển.
2. Cấu trúc chính
   • Stage (Sân khấu): Quản lý nền (background) và các kịch bản chính khi nhấn lá cờ xanh.
   • Sprite Loading Bar: Xử lý việc vẽ thanh tiến trình.
   • Sprite Text Creator: Dùng để hiển thị text phần trăm.
3. Biến quan trọng
   • #Progress: Biến lưu tiến trình hiện tại (0-100).
   • #Rotation: Biến lưu góc quay của thanh tiến trình (khi đạt 100%).

---

Danh sách các bước cần làm

Bước 1. Tạo nền sân khấu (Stage)

• Có thể sử dụng backdrop mặc định hoặc backdrop do người thiết kế.
• Trong file đã có sẵn các backdrop (backdrop1, backdrop2 và Thumb).

---

Bước 2. Tạo Sprite Loading Bar

• Sprite này có chứa các script quan trọng:
  1. Custom Block: draw loading bar at x y with size progress
     • Vẽ thanh tiến trình bằng Pen.
     • Thay đổi màu, độ rộng và chiều dài tương ứng với biến progress.
  2. Xử lý khi nhấn cờ xanh:
     • Reset thanh tiến trình về 0.
     • Gọi custom block để vẽ thanh loading ở vị trí trung tâm (x=0, y=0), size=300.
     • Sau đó chờ điều kiện (chuột hoặc phím được nhấn) mới bắt đầu tiến trình loading.

---

Bước 3. Tạo Sprite Text Creator

• Dùng để vẽ text phần trăm (ví dụ 20%).
• Script trong Sprite này sử dụng pen để vẽ từng ký tự.
• Dựa trên giá trị biến #Progress, làm tròn xuống phần nguyên để ghép với dấu %.

---

Bước 4. Tạo các biến

• #Progress: Giá trị từ 0 đến 100.
• #Rotation: Góc quay khi hoàn thành.

---

Hướng dẫn chi tiết từng bước

1. Sprite: Loading Bar

Script 1 — Khi nhấn lá cờ xanh

when green flag clicked
pen clear
set [#Progress v] to [0]
draw loading bar at (0) y (0) size (300) progress (0)
wait until <mouse x = 240 or mouse x = -240 or mouse y = 180 or mouse y = -180>
forever
  set [#Progress v] to (-0.3)
  repeat until <(#Progress) > (100)>
    change [#Progress v] by (0.3)
    pen clear
    draw loading bar at (0) y (0) size (300) progress (#Progress)
  end
  set [#Progress v] to (100)
  set [#Rotation v] to (90)
  repeat (15)
    pen clear
    draw loading bar at (0) y (0) size (300) progress (#Progress) rotation (#Rotation)
    change [#Rotation v] by (-1)
  end
  repeat until <(#Progress) < (1)>
    change [#Progress v] by (-2)
    pen clear
    draw loading bar at (0) y (0) size (300) progress (#Progress) rotation (#Rotation)
  end
  set [#Progress v] to (0)
end

Script 2 — Custom Block: draw loading bar

define draw loading bar at (x) y (y) size (size) progress (progress)
pen up
hide
go to x: (x - (size) / 2) y: (y)
set pen color to [#7f7f7f]
set pen size to ((size) * 0.1)
pen down
change x by (size)
pen up

go to x: (x - (size) / 2) y: (y)
set pen color to [#cccccc]
set pen size to ((size) * 0.085)
pen down
change x by (size)
pen up

go to x: (x - (size) / 2) y: (y)
set pen color to [#02ff02]
set pen size to ((size) * 0.085)
pen down
if <progress > 0> then
  if <progress < 100> then
    change x by ((size) * (progress) / 100)
  else
    change x by (size)
  end
end
pen up

2. Sprite: Text Creator

Script 1 — Khi nhận tin nhắn “message1”

when I receive [message1 v]
draw text (join (round of (#Progress of [Loading Bar v])) (%)) size (150) x (-27) y (-27) brightness (-100)

Script 2 — Custom Block: draw text

define draw text (text) size (size) x (x) y (y) brightness (brightness)
go to x: (x) y: (y)
set [brightness v] effect to (brightness)
set size to (size)
set [#Text Position v] to (1)
repeat (length of (text))
  set [#Char Index v] to (1)
  repeat (length of (#Supported Chars))
    if <(letter (#Char Index) of (#Supported Chars)) = (letter (#Text Position) of (text))> then
      switch costume to (letter (#Char Index) of (#Supported Chars))
      stamp
    end
    change [#Char Index v] by (1)
  end
  change x by ((13) * ((size) / 100))
  change [#Text Position v] by (1)
end

3. Stage

Script 1 — Khi nhấn lá cờ xanh

when green flag clicked
switch backdrop to [backdrop1 v]
wait until <mouse x = 240 or mouse x = -240 or mouse y = 180 or mouse y = -180>
forever
  switch backdrop to [backdrop2 v]
  wait until <mouse x = 240 or mouse x = -240 or mouse y = 180 or mouse y = -180>
  switch backdrop to [Thumb v]
  wait until <not (mouse x = 240 or mouse x = -240 or mouse y = 180 or mouse y = -180)>
  stop all sounds
end

Tổng kết

Loading Bar: Quản lý tiến trình loading và vẽ thanh tiến trình.
Text Creator: Hiển thị % tiến trình.
Stage: Xử lý các thay đổi phông nền và sự kiện.

Download

Click tại đây để download source code