Hướng Dẫn Lập Trình Game Piano 3D Trên Scratch (Phong Cách Magic Tiles) – Từ A Đến Z
Bạn đã bao giờ bị cuốn hút bởi những giai điệu piano trong game Magic Tiles hay Piano Tiles? Bạn có tin rằng mình có thể tự tay lập trình một phiên bản 3D xịn xò như vậy ngay trên Scratch mà không cần engine 3D phức tạp?
Trong bài viết này, Dare2Share sẽ hướng dẫn bạn từng bước để xây dựng “bộ khung” cho game Piano 3D: Từ việc giả lập không gian 3D, xử lý dữ liệu bản nhạc (MIDI) cho đến việc vẽ các nốt nhạc chuyển động mượt mà.
Phần 1: Bí Mật Của Không Gian 3D Trong Scratch
Scratch là môi trường 2D (chỉ có trục X và Y). Để tạo ra chiều sâu (Trục Z), chúng ta sử dụng một nguyên lý hội họa cơ bản: Phối cảnh (Perspective Projection).
Quy tắc vàng: Vật càng ở xa (Z càng lớn) thì kích thước càng nhỏ và vị trí càng bị hút về tâm màn hình.
1. Công thức “Biến hình” 2D thành 3D
Chúng ta sẽ tạo một khối lệnh tùy chỉnh (Custom Block) tên là Go to X Y Z. Nhiệm vụ của nó là tính toán xem một vật thể ở tọa độ không gian (x, y, z) sẽ nằm ở đâu trên màn hình máy tính.
Công thức cốt lõi:
Lưu ý quan trọng: Hệ số 0.1 nhân với Z_Cam là cực kỳ quan trọng. Nó giúp điều chỉnh tỷ lệ phóng đại. Nếu bạn để là 1, hình ảnh sẽ bị thu nhỏ quá mức (như lỗi thường gặp của người mới bắt đầu).
Phần 2: Dữ Liệu Bản Nhạc & Bảng Mã MIDI
Làm sao máy tính biết lúc nào thả nốt nhạc nào? Chúng ta cần một danh sách (List) chứa dữ liệu bản nhạc (ví dụ: Fur Elise). Mỗi phần tử trong danh sách là một con số gồm 3 chữ số theo quy tắc: L + NN.
1. Quy tắc giải mã
- Chữ số đầu (L – Lane): Xác định làn đường.
1: Làn Trái2: Làn Giữa3: Làn Phải
- Hai chữ số sau (NN – Note Number): Mã số nốt nhạc theo chuẩn MIDI.
2. Bảng Tra Cứu MIDI (Dành cho làm Game)
Để soạn nhạc, bạn hãy dùng bảng quy đổi sau (dựa trên Quãng 4 – Quãng phổ biến nhất của Piano):
| Tên Nốt | Ký hiệu | Quãng 2(Rất Trầm) | Quãng 3(Trầm) | Quãng 4(Trung Tâm) | Quãng 5(Cao) | Quãng 6(Rất Cao) |
| Đồ | C | 36 | 48 | 60 | 72 | 84 |
| Đồ thăng / Rê giáng | C# / Db | 37 | 49 | 61 | 73 | 85 |
| Rê | D | 38 | 50 | 62 | 74 | 86 |
| Rê thăng / Mi giáng | D# / Eb | 39 | 51 | 63 | 75 | 87 |
| Mi | E | 40 | 52 | 64 | 76 | 88 |
| Pha | F | 41 | 53 | 65 | 77 | 89 |
| Pha thăng / Sol giáng | F# / Gb | 42 | 54 | 66 | 78 | 90 |
| Sol | G | 43 | 55 | 67 | 79 | 91 |
| Sol thăng / La giáng | G# / Ab | 44 | 56 | 68 | 80 | 92 |
| La | A | 45 | 57 | 69 | 81 | 93 |
| La thăng / Si giáng | A# / Bb | 46 | 58 | 70 | 82 | 94 |
| Si | B | 47 | 59 | 71 | 83 | 95 |
Ví dụ:
| Tên Nốt | Ký hiệu | Mã MIDI (Quãng 4) | Ví dụ Nhập Vào Game |
| Đồ | C | 60 | 260 (Đồ – Giữa) |
| Rê | D | 62 | 162 (Rê – Trái) |
| Mi | E | 64 | 364 (Mi – Phải) |
| Pha | F | 65 | 165 (Pha – Trái) |
| Sol | G | 67 | 267 (Sol – Giữa) |
| La | A | 69 | 269 (La – Giữa) |
| Si | B | 71 | 371 (Si – Phải) |
| Đố (Cao) | C5 | 72 | 372 (Đố – Phải) |
Phần 3: Xây Dựng “Cỗ Máy Họa Sĩ” (Rendering)
Đây là trái tim của trò chơi. Khối lệnh Generate Level (Tạo Màn Chơi) hoạt động như một máy in tốc độ cao, vẽ lại toàn bộ màn hình hàng chục lần mỗi giây.
Quy trình vẽ tuân theo nguyên tắc: Vẽ vật ở xa trước, vật ở gần sau.
Bước 1: Vẽ Nốt Nhạc (The Notes)
Chúng ta dùng một vòng lặp Repeat 12 (Tầm nhìn xa) để quét dữ liệu bản nhạc.
- Vị trí X: Được tính bằng công thức
(Làn * 40) - 80. (Số 40 là độ rộng làn, -80 để căn giữa màn hình). - Vị trí Z (Độ sâu): Sử dụng công thức
i + (Tốc Độ * -1 * Timer).i: Vị trí tĩnh của nốt nhạc.Timer: Thời gian thực.- Phép trừ giúp tạo hiệu ứng Smooth Scrolling (Nốt nhạc trôi mượt mà từ xa lại gần).
Bước 2: Kỹ thuật vẽ khối 3D (Độ dày nốt nhạc)
Scratch bút vẽ 2D, vậy làm sao nốt nhạc có độ dày?
Chúng ta sử dụng biến ig (Index Graphics).
- Dùng vòng lặp
Repeat 20. - Vẽ 20 lớp hình chữ nhật xếp chồng lên nhau, mỗi lớp cách nhau một chút xíu (Z).
- Kết quả: Tạo ra ảo giác một khối hộp đặc ruột màu trắng.
Bước 3: Vẽ Giao Diện Điều Khiển (UI)
Cuối cùng, chúng ta vẽ lớp gần mắt người chơi nhất:
- Vạch đích (Hit Line): Vẽ 3 khung màu đỏ cố định tại
Z = -0.5(ngay sát đáy màn hình). - Con trỏ (Player Cursor): Vẽ khung màu xanh lá cây. Vị trí X của nó thay đổi linh hoạt dựa trên phím mũi tên bạn bấm.
Tổng Kết Thành Quả
Sau khi hoàn thành các bước trên, bạn bấm lá cờ xanh và sẽ thấy:
✅ Một không gian 3D hút sâu hút mắt.
✅ Các nốt nhạc của bài Fur Elise bay từ xa lại gần rất đúng nhịp.
✅ Khung xanh di chuyển mượt mà theo điều khiển của bạn.
Tuy nhiên, game vẫn chưa thể “chơi” được vì chúng ta chưa lập trình phần Xử lý va chạm (khi nốt nhạc chạm vạch đích thì phát tiếng và tính điểm).
???? Đừng quên đón xem video tiếp theo trên kênh Youtube Dare2Share! Mình sẽ hướng dẫn các bạn cách thổi “linh hồn” vào trò chơi: Logic tính điểm, phát nhạc và hiệu ứng nổ sao đẹp mắt.
