Cái này thì thực sự đã có quá nhiều video, bài viết nói tới rồi, tìm bừa trên mạng cũng ra một đống. Nhưng dành cho ai chưa biết thì những quy tắc này cực kỳ quan trọng và có thể áp dụng được cho rất nhiều thứ sau này, thực sự là nhiều phết đấy.
Nhiều người nghĩ 12 quy tắc animation chỉ dành cho làm phim. Nhưng thực tế, khi làm mảng Game, việc nắm vững và áp dụng đống quy tắc này sẽ tạo ra sự khác biệt khổng lồ giữa một sản phẩm nhìn đơ cứng, sượng trân và một sản phẩm mượt mà, đã tay.
Quý bạn có thể đọc chi tiết định nghĩa lý thuyết của từng nguyên tắc qua list bài viết cực kỳ chi tiết của Dee Dee Animation Studio dưới đây. T sẽ yap nhanh cách áp dụng thực tế của từng quy tắc vào việc làm chuyển động giao diện (UI) và hiệu ứng (VFX) trong game cho dễ hình dung nhé.
Nguyên Tắc 1: Squash and Stretch
Lý thuyết: Squash and Stretch – Thể hiện trọng lượng và độ mềm dẻo của vật thể khi va đập hoặc chuyển động.
- Áp dụng trong UI: Khi người chơi ấn vào một button, thay vì chỉ scale nhỏ lại đều đặn, hãy cho nó hơi bẹt xuống một chút (Squash) rồi nảy nhẹ giãn ra theo chiều dọc (Stretch) khi nhấc ngón tay lên. Việc này tạo cảm giác nút bấm có độ đàn hồi vật lý thực sự.
- Áp dụng trong VFX: Một tia sét hoặc luồng năng lượng khi bắn ra sẽ được kéo giãn cực mạnh (Stretch) theo hướng di chuyển để tạo cảm giác tốc độ cao. Hoặc khi một quả cầu lửa đập trúng mục tiêu, nó sẽ dẹt lại (Squash) ngay frame va chạm trước khi nổ tung.
Nguyên Tắc 2: Anticipation
Lý thuyết: Anticipation – Hành động chuẩn bị trước khi một chuyển động chính xảy ra để người xem kịp chú ý.
- Áp dụng trong UI: Trước khi một popup to đùng xuất hiện giữa màn hình, ta có thể cho giao diện xung quanh hơi tối nhẹ đi hoặc thu nhỏ nhẹ các yếu tố nền lại trong vài mili-giây để người chơi tập trung mắt vào tâm màn hình.
- Áp dụng trong VFX: Một chiêu thức nổ diện rộng (AOE) luôn cần có một vòng tròn năng lượng co bóp lại dưới đất (lấy đà gom tụ lực) trước khi vụ nổ thực sự bùng phát lên. Không có lấy đà, vụ nổ nhìn sẽ rất hẫng và đột ngột.
Nguyên Tắc 3: Staging
Lý thuyết: Staging – Sắp xếp các yếu tố để hướng sự chú ý của người xem vào điểm quan trọng nhất.
- Áp dụng trong UI: Khi mở hòm báu vật, tất cả các nút bấm phụ và bảng menu xung quanh phải được làm mờ hoặc ẩn đi, chỉ để lại hòm báu phát sáng rực rỡ ở chính giữa. Sự tập trung của người chơi ko được phép bị phân tán.
- Áp dụng trong VFX: Trong một combat hỗn loạn với hàng chục hiệu ứng chồng chéo, VFX của đòn đánh chí mạng (Critical Hit) hoặc kỹ năng tối thượng (Ulti) phải được đẩy sáng vượt trội, làm chậm nhịp xung quanh hoặc giảm độ sáng của các VFX phụ để người chơi nhìn rõ tiêu điểm trận đấu.
Nguyên Tắc 4: Straight Ahead & Pose To Pose
Lý thuyết: Straight Ahead & Pose To Pose – Hai cách tiếp cận để tạo ra chuyển động.
- Áp dụng trong UI: Khi làm chuyển động popup, ta dùng Pose To Pose – xác định điểm xuất phát và điểm kết thúc, sau đó dùng công cụ chỉnh đường cong (Curve) để xử lý các frame ở giữa (In-between).
- Áp dụng trong VFX: Khi vẽ hiệu ứng khói lửa bằng tay (Frame-by-frame), ta thường dùng Straight Ahead (vẽ liên tục từ frame 1 đến hết) để khói lan tỏa tự nhiên, ko theo quy luật cố định nào.
Nguyên Tắc 5: Follow Through & Overlapping Action
Lý thuyết: Follow Through & Overlapping Action – Các bộ phận của vật thể ko dừng lại cùng một lúc; bộ phận phụ sẽ tiếp tục chuyển động theo quán tính sau khi bộ phận chính đã dừng.
- Áp dụng trong UI: Khi một popup rơi từ trên xuống và dừng lại, dải ruy-băng trang trí hoặc các icon nhỏ đính kèm trên popup đó nên nẩy nhẹ thêm một nhịp nữa rồi mới dừng hẳn, chứ ko được dừng khựng lại cùng lúc với khung popup chính.
- Áp dụng trong VFX: Khi một nhân vật tung cú đấm vung ra một dải lửa băng qua màn hình, cú đấm đã dừng lại nhưng vệt lửa VFX vẫn phải tiếp tục bay thêm một đoạn nữa rồi mới tan biến dần.
Nguyên Tắc 6: Slow In & Slow Out
Lý thuyết: Slow In & Slow Out – Chuyển động bắt đầu chậm, tăng tốc ở giữa và giảm tốc trước khi dừng lại.
- Áp dụng trong UI: Tuyệt đối ko bao giờ được để chuyển động tuyến tính (Linear – đều đều từ đầu đến cuối). Một bảng thông báo trượt vào màn hình phải bắt đầu thật nhanh (Slow Out từ vị trí ẩn) rồi từ từ giảm tốc và dừng lại nhẹ nhàng ở tâm màn hình (Slow In).
- Áp dụng trong VFX: Một quả cầu lửa bay ra từ tay pháp sư sẽ bắn đi và tăng tốc độ nhanh dần trước khi va chạm rồi phát nổ.
Nguyên Tắc 7: Arcs
Lý thuyết: Arcs – Hầu hết các chuyển động tự nhiên trong đời thực đều đi theo đường cong chứ ko đi theo đường thẳng tắp.
- Áp dụng trong UI: Khi người chơi nhận được tiền vàng, đống đồng xu bay về góc túi đồ trên UI ko nên bay theo một đường thẳng tắp như thước kẻ. Chúng phải bay vút lên theo một quỹ đạo hình parabol (đường cong) nhìn mới tự nhiên và đẹp mắt.
- Áp dụng trong VFX: Các tia lửa bắn ra từ một vụ nổ lớn phải bay tỏa ra theo các đường cong hình cánh cung chịu ảnh hưởng của trọng lực rơi xuống đất, chứ ko bay thẳng tuột như các tia laser phát ra từ tâm.
Nguyên Tắc 8: Secondary Action
Lý thuyết: Secondary Action – Hành động bổ trợ để làm nổi bật và tăng tính chân thực cho hành động chính.
- Áp dụng trong UI: Hành động chính là popup xuất hiện. Hành động phụ kèm theo là các tia sáng nhỏ lấp lánh (sparkles) tỏa nhẹ ra xung quanh mép popup hoặc chiếc ruy-băng trên tiêu đề hơi đung đưa để làm tăng sự chú ý.
- Áp dụng trong VFX: Hành động chính là một tia sét đánh xuống đất. Hành động phụ kèm theo là các mảnh đất đá nhỏ văng lên tại điểm va chạm, kèm theo một lớp khói mỏng bốc lên từ mặt đất bị cháy xém.
Nguyên Tắc 9: Timing & Spacing
Lý thuyết: Timing & Spacing – Số lượng frame cho một chuyển động (Timing) và cách bố trí các vị trí của vật thể giữa các frame đó (Spacing).
- Áp dụng trong UI: Timing trong game mobile thường phải nhanh (dưới 0.3 giây cho các thao tác click UI thông thường) để tránh gây cảm giác lâu la, khó chịu cho người chơi. Spacing phải được tinh chỉnh bằng Curve để chuyển động có nhịp sinh động chứ ko đều đều.
- Áp dụng trong VFX: Một cú chém kiếm có timing cực ngắn (chỉ khoảng 3-5 frames) nhưng spacing giữa các frame phải cực rộng để tạo cảm giác nhát chém sắc bén, uy lực và dứt khoát.
Nguyên Tắc 10: Exaggeration
Lý thuyết: Exaggeration – Đẩy chuyển động hoặc biểu cảm vượt quá thực tế một chút để tạo ra tác động mạnh mẽ hơn đến thị giác.
- Áp dụng trong UI: Khi nâng cấp thành công một món đồ xịn, thay vì chỉ hiện dòng chữ “Thành công” đơn điệu, hãy làm hiệu ứng nổ bùm một phát, luồng sáng quét qua màn hình kèm theo rung giật nhẹ camera để người chơi sướng tột độ.
- Áp dụng trong VFX: Một đòn đánh chí mạng ko chỉ là một tia máu bắn ra to hơn bình thường. Cường điệu hóa nó bằng cách cho cả màn hình chớp sáng trắng trong 1 frame, kéo giãn vệt máu và tạo ra một làn sóng xung kích lan ra.
Nguyên Tắc 11: Solid Drawing
Lý thuyết: Solid Drawing – Hiểu rõ không gian 3 chiều, thể tích và trọng lượng của vật thể khi vẽ trên mặt phẳng 2D.
- Áp dụng trong UI: Thiết kế các nút bấm, popup có chiều sâu, đổ bóng (shadow) hợp lý để người chơi nhận diện rõ ràng lớp nào nằm trên, lớp nào nằm dưới, chỗ nào bấm được và chỗ nào ko.
- Áp dụng trong VFX: Khi làm VFX lốc xoáy bằng các texture 2D phẳng, ta phải xếp đặt các lớp sprite xoay theo các trục khác nhau trong không gian 3D để tạo ra cảm giác cơn lốc có thể tích và độ dày thực sự chứ ko phải là một tấm ảnh phẳng dẹt xoay tròn.
Nguyên Tắc 12: Appeal
Lý thuyết: Appeal – Sức hút, tính nghệ thuật và cá tính riêng của nhân vật/chuyển động để giữ chân người xem.
- Áp dụng trong UI: Đó là phong cách riêng biệt của con game. Game casual puzzle thì UI phải bouching, tươi sáng đầy sức sống; còn game hardcore dark fantasy thì UI cần nặng nề, dứt khoát, mang màu sắc u tối và sắc lạnh.
- Áp dụng trong VFX: Hiệu ứng của game phải đồng bộ với thế giới game. Game phép thuật cổ tích thì VFX phép có màu sắc lung linh, lấp lánh hạt bụi tiên; còn game cyberpunk thì hiệu ứng phải mang tính chất nhiễu sóng kỹ thuật số, giật điện các thứ các thứ.
Và đó là hết,
Cảm ơn quý bạn đã rảnh rảnh đọc bài hehe !
Chupapi.
