Bài 37: Trò chơi ráp hình
Với kinh nghiệm đã có trong việc thực hiện trò chơi lật hình, bạn có thể tiếp tục thực hiện trò chơi tương tự: trò chơi ráp hình. Mỗi dự án cụ thể sẽ đem lại cho bạn những hiểu biết ngày càng sâu sắc về lập trình Flash. Trò chơi ráp hình có nhiều dạng. Ta sẽ chọn một dạng trò chơi ráp hình mà có lẽ bạn từng quen thuộc thuở bé: hình được phân thành những miếng nhựa hình vuông hoặc chữ nhật, được xếp "loạn xạ" vào một hộp, trong đó có một chỗ trống (nghĩa là nếu hộp chứa được 16 miếng nhựa, ta chỉ có 15 miếng nhựa trong hộp, chừa trống một vị trí). Người chơi phải xê dịch các miếng nhựa đến vị trí đúng bằng cách liên tiếp đẩy miếng nhựa nằm kề chỗ trống trượt vào chỗ trống. Với Flash, bạn có thể thực hiện trò chơi ráp hình giống như vậy, chỉ khác ở chỗ thay vì dùng tay đẩy miếng nhựa, bạn dùng chuột để đưa ô hình vào chỗ trống. Điều cần làm trước tiên là tìm một hình bitmap nào đó và phân nó thành 16 ô (vâng, 16 ô là chừng mực, khiến trò chơi không quá dễ, không quá khó). Bạn nên tìm hình đơn giản, như hình chuột Mickey trên nền trắng trơn chẳng hạn (hình 1), sao cho người chơi đoán ra ngay đó là hình gì dù các ô hình nằm lộn xộn. Cụ thể, ta sẽ phân một hình có kích thước 400x400 (tính bằng "pi-xôn", còn gọi là "điểm ảnh") thành 16 ô, mỗi ô có kích thước 100x100. Bạn có thể thực hiện việc này với chương trình Paint có sẵn trong Windows. Trong cửa sổ Paint, bạn hãy chọn công cụ Rectangle  (công cụ vẽ hình khung) và vẽ một hình khung có kích thước 400x400. Bạn trỏ vào góc trên, bên trái miền vẽ, giữ phím trái của chuột, kéo chuột qua phải, xuống dưới, đồng thời nhìn vào góc dưới, bên phải cửa sổ Paint để biết kích thước của hình khung đang vẽ. Khi thấy kích thước được hiển thị là 401x401, bạn thả phím chuột. Hình khung vừa vẽ có kích thước đúng 400x400 (tính luôn đường biên). Tiếp theo, bạn đưa hình mà bạn tìm được vào hình khung vừa vẽ: bấm-phải vào đâu đó trong miền vẽ, chọn mục Paste From trong trình đơn vừa hiện ra, rồi tìm chọn tập tin hình cần thiết trong thư mục nào đó. Khi hình được chọn xuất hiện trong cửa sổ Paint, bạn trỏ vào giữa hình và kéo nó vào trong hình khung. Nếu hình được chọn lớn hơn khung hình 400x400, bạn trỏ vào một góc hình và kéo cho hình nhỏ lại. Bạn bấm vào đâu đó bên ngoài hình được chọn để thực sự dán nó vào miền vẽ của Paint. Bên cạnh hình khung 400x400, bạn vẽ hình khung nhỏ có kích thước 100x100. Bạn bấm vào công cụ Select  (công cụ chọn), "căng" khung chọn bao quanh khung hình nhỏ và ấn Ctrl+C để sao chép.
Bạn ấn Ctrl+V. Hình khung nhỏ đã sao chép xuất hiện trong miền vẽ. Bạn kéo hình khung nhỏ vào hình khung lớn, sao cho góc trên, bên trái của chúng trùng nhau và bấm vào đâu đó bên ngoài hình khung nhỏ để thực sự dán nó vào miền vẽ. Bạn lại ấn Ctrl+V và dán hình khung nhỏ thứ hai vào hình khung lớn, nằm cạnh hình khung nhỏ đầu tiên. Bạn chú ý để cạnh của hình khung nhỏ thứ hai nằm sát cạnh của hình khung nhỏ đầu tiên, chứ không chồng lên. Cứ tiếp tục dán như vậy, bạn có được 16 ô hình trong hình khung lớn. Nói khác đi, hình bên trong khung lớn được phân thành 16 ô hình có kích thước 100x100 (hình 2). Nếu chưa có thì giờ tìm hình ưa thích và thực hiện thao tác phân chia hình thành nhiều ô như trên, bạn có thể dùng ngay hình 2 trong trang này: bấm-phải vào hình, chọn Save Image As (trình duyệt Firefox) hoặc Save Picture As (trình duyệt Internet Explorer) để tải hình ấy xuống máy của bạn.
Tiếp theo, ta cần lưu từng ô hình thành tập tin riêng biệt, lần lượt đặt tên là Tile11, Tile12, Tile13,... Hai ký số trong tên tập tin dùng để chỉ hàng và cột (hình 3). Ví dụ, với tên tập tin là Tile11, ta biết ngay rằng đó là ô hình ở hàng 1, cột 1. Điều này thuận tiện cho việc đưa các ô hình vào Flash, tạo nên các nhân vật và thể hiện tương ứng. Bạn chỉ cần lưu 15 tập tin ô hình. Trong hình ví dụ được trình bày ở đây, ta không lưu ô hình ở hàng 1, cột 4.
Để lưu từng ô hình thành tập tin, bạn bấm vào công cụ chọn , trỏ vào góc trên, bên trái của ô hình, kéo chuột qua phải, xuống dưới, đến góc dưới, bên phải của ô hình. Bạn chú ý, mỗi ô hình có đường biên riêng biệt dầy 1 pi-xôn. Bạn chọn ô hình cho chính xác như hình 4, đừng chọn nhầm đường biên của ô hình bên cạnh. Để bảo đảm chính xác, bạn nên lấy tầm nhìn gần trước khi chọn bằng cách bấm vào "kính lúp"  và bấm vào ô hình đang xét. Muốn trở lại tầm nhìn bình thường, bạn lại bấm vào kính lúp và bấm-phải vào miền vẽ. Chọn xong ô hình, bạn bấm-phải vào ô hình, chọn mục Copy To trong trình đơn vừa hiện ra, gõ tên tương ứng, chẳng hạn Tile23 (ô hình ở hàng 2, cột 3) và gõ Enter. Paint lập tức lưu ô hình đã chọn thành tập tin hình bitmap có tên đầy đủ là Tile23.bmp.
Bài 38: Sắp xếp các mẩu hình
Sau khi có 15 mẩu hình được cắt ra từ hình chú chuột Mickey hoặc hình nào đó mà bạn thích, bạn cần đưa từng mẩu hình vào Flash và chuyển nó thành nhân vật. Cụ thể, trong Flash, bạn chọn File > Import > Import to Stage (hoặc ấn Ctrl+R). Trong hộp thoại Import, bạn tìm chọn mẩu hình đầu tiên Tile11.bmp. Flash sẽ hiển thị cửa sổ thông báo, hỏi rằng "This file appears to be part of a sequence of images. Do you want to import all of the images in the sequences?". Thông báo ấy tử tế đề nghị lấy vào Flash tất cả các hình mà Flash nghĩ rằng thuộc cùng một loạt hình. Bạn nên bấm No để từ chối. Ta cứ chủ động lấy từng mẩu hình vào sân khấu của Flash và làm những việc cần thiết, không sợ nhầm lẫn.
Khi mẩu hình đầu tiên xuất hiện trên sân khấu, bạn bấm chọn nó và gõ phím F8 để làm xuất hiện cửa sổ Convert to Symbol (hình 1). Bạn gõ Tile11 để đặt tên cho nhân vật đầu tiên. Ở phần Registration, bạn bấm vào ô nhỏ ở góc trên, bên trái  để quy định điểm mốc của nhân vật. Điểm mốc ở góc trên, bên trái giúp bạn dễ dàng quy định vị trí của nhân vật khi lập trình. Tiếp theo, bạn chọn Export for ActionScript. Bạn đừng quên thao tác này, nếu không, bạn sẽ không tạo được thể hiện của nhân vật vào lúc chạy chương trình. Xong, bạn bấm OK. 
Thao tác vừa thực hiện làm cho mẩu hình đầu tiên trở thành một nhân vật trong thư viện. Bạn gõ phím Delete để xóa mẩu hình hiện có trên sân khấu. Nó không còn cần thiết nữa. Ta sẽ tạo ra và sắp xếp các mẩu hình trên sân khấu thông qua chương trình. Bạn lặp lại thao tác vừa nêu với mẩu hình thứ hai: lấy hình Tile12.bmp vào sân khấu, chuyển mẩu hình đó thành nhân vật và xóa nó đi. Cứ thế, bạn chuyển tất cả mẩu hình đã có thành nhân vật trong thư viện của Flash. Khi có đầy đủ 15 nhân vật (ứng với 15 mẩu hình), việc tiếp theo cần làm là viết chương trình để đưa tất cả mẩu hình vào sân khấu. Trước tiên, ta sắp xếp các mẩu hình đúng vị trí, việc xáo hình ngẫu nhiên sẽ được tính đến sau. Bạn gõ phím F9 để mở bảng Actions - Frame và gõ đoạn mã như sau (gần giống đoạn mã xếp hình trong trò chơi lật hình):
tiles = new Array();
n = 0;
for(i = 0; i < 4; i++) {
tiles[i] = new Array();
for(j = 0; j < 4; j++) {
if(i == 0 && j == 3)
continue;
r = i + 1;
c = j + 1;
attachMovie("Tile" + r + c, "tile" + i + j, n++);
tiles[i][j] = this["tile" + i + j];
tiles[i][j]._x = 100 * j;
tiles[i][j]._y = 100 * i;
}
}
Với kinh nghiệm từ trò chơi lật hình, bạn hiểu ngay ý nghĩa của đoạn mã nêu trên. Biến lặp i và j chạy từ 0 đến 3 trong khi các chỉ số hàng và cột trong tên nhân vật chạy từ 1 đến 4, vì vậy ta cần tạo thêm biến r và c cho chỉ số hàng và cột:
r = i + 1;
c = j + 1;
Trong vòng lặp, khi trị số của i là 0, trị số của j là 0, câu lệnh
attachMovie("Tile" + r + c, "tile" + i + j, n++);
tương đương với câu lệnh
attachMovie("Tile11", "tile00", 0);
Câu lệnh như vậy tạo ra một thể hiện từ nhân vật Tile11, gán tên là tile00 và đặt thể hiện đó ở độ cao 0 (đối mục thứ ba). Khi gọi hàm attachMovie(), bạn chú ý cho độ cao n (gọi là "độ sâu" cũng được) tăng dần để mỗi thể hiện được tạo ra có độ cao khác nhau. Biểu thức n++ nghĩa là "lấy trị số của biến n, rồi tăng trị số của biến n một đơn vị". Nhờ vậy, sau một lần lặp, trị số của n tăng thêm một đơn vị. Khi trị số của i là 0 và trị số của j là 3 (tức trị số của r là 1 và trị số của c là 4), ta bỏ qua, không gọi hàm attachMovie() vì ta không có mẩu hình ở hàng 1, cột 4 (vị trí trống). Cũng như trong trò chơi lật hình, ta quản lý các thể hiện bằng một dãy 2 chiều tên là tiles. Hai câu lệnh
tiles[i][j]._x = 100 * j;
tiles[i][j]._y = 100 * i;
quy định vị trí cho từng mẩu hình. Chúng được xếp sát nhau, không có khoảng hở. Chạy thử chương trình, bạn thấy rõ điều này. Có thể khi chạy chương trình, bạn thấy thiếu mẩu hình nào đó. Hiện tượng như vậy chứng tỏ rằng bạn quên chọn Export for ActionScript khi chuyển mẩu hình thành nhân vật. Giả sử bạn thấy thiếu mẩu hình ở hàng 1, cột 3 khi chạy chương trình, bạn sửa sai bằng cách gõ phím F11 để mở bảng Library, bấm-phải vào dòng Tile13 MovieClip, chọn Linkage trên trình đơn vừa hiện ra. Trong hộp thoại Linkage Properties (hình 2), bạn chọn Export for ActionScript và bấm OK.
Mỗi mẩu hình có kích thước 100 pi-xôn x 100 pi-xôn. Do vậy, kích thước tối thiểu của sân khấu là 400 pi-xôn x 400 pi-xôn. Dự trù trò chơi sẽ có dòng thông báo số lần bấm chuột ("đẳng cấp" của người chơi được thể hiện ở số lần bấm chuột, người bấm chuột ít nhất là người chơi giỏi nhất) ở cạnh dưới sân khấu, ta nên quy định chiều cao sân khấu lớn hơn, 440 pi-xôn chẳng hạn. Bạn hãy ấn Ctrl+F3 để mở bảng Properties (trình bày những thuộc tính của sân khấu), bấm nút Size. Trong hộp thoại Document Properties (hình 3), bạn quy định chiều rộng sân khấu (width) là 400 px, chiều cao sân khấu (height) là 440 px. Nhân tiện, bạn bấm vào ô màu nền Background color trong hộp thoại Document Properties để mở bảng màu, chọn một màu đậm làm màu nền. Nhờ vậy, người chơi sẽ thấy rất rõ vị trí trống trên sân khấu. Xong, bạn bấm OK. 
Chạy thử chương trình, bạn sẽ thấy kết quả như hình 4. 
Chia sẻ với bạn bè của bạn: |
