Lập trình game 2D trên HTML5, Phần 2: Đồ họa và ảnh động

Chia sẻ: Nhung Nhung | Ngày: | Loại File: PDF | Số trang:18

Thêm vào BST

Báo xấu

136
lượt xem 25
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Đồ họa và hình ảnh động là những khía cạnh cơ bản nhất của bất kỳ trò chơi nào, vì vậy trong bài này, tôi bắt đầu bằng một tổng quan ngắn gọn về API 2D Canvas (Canvas 2D API), tiếp theo là một thảo luận về việc thực hiện hình ảnh động trung tâm của Snail Bait. Trong bài này, bạn sẽ học cách:

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Lập trình game 2D trên HTML5, Phần 2: Đồ họa và ảnh động

Lập trình game 2D trên HTML5, Phần 2: Đồ họa và ảnh động Đồ họa và hình ảnh động là những khía cạnh cơ bản nhất của bất kỳ trò chơi nào, vì vậy trong bài này, tôi bắt đầu bằng một tổng quan ngắn gọn về API 2D Canvas (Canvas 2D API), tiếp theo là một thảo luận về việc thực hiện hình ảnh động trung tâm của Snail Bait. Trong bài này, bạn sẽ học cách:  Vẽ các hình ảnh và các hình khối đồ họa thô sơ vào một canvas (khung nền ảnh).  Tạo các hình ảnh động mượt mà, không bị giật.  Thực hiện vòng lặp trong trò chơi.  Theo dõi tốc độ hình ảnh động tính theo số khung hình mỗi giây  Cuộn background khi di chuyển trong trò chơi.  Sử dụng thị sai để mô phỏng ba chiều.  Thực hiện chuyển động theo thời gian. Kết quả cuối cùng của mã được thảo luận trong bài này được thể hiện trong Hình 1: Hình 1. Cuộn background khi di chuyển và theo dõi tốc độ khung hình Background và các bậc thềm cuộn theo chiều ngang. Các bậc thềm ở phía trước, do đó, chúng di chuyển nhanh hơn đáng kể hơn so với nền sau, tạo ra một hiệu ứng thị sai nhẹ. Khi trò chơi bắt
đầu, background cuộn từ phải sang trái. Đến cuối màn, background và bậc thềm đảo chiều chuyển động. Ở giai đoạn phát triển, nhân vật (trong trò chơi) không di chuyển. Ngoài ra, trò chơi còn chưa có phát hiện va chạm, do đó, nhân vật lơ lửng giữa không trung khi không có bậc thềm nào ở dưới. Cuối cùng, các biểu tượng ở phía trên và sang bên trái khung nền ảnh của trò chơi sẽ cho biết số mạng sống còn lại của nhân vật (như thể hiện trong Hình 1 trong bài viết đầu tiên của loạt bài này). Tạm thời lúc này, trò chơi hiển thị tốc độ hình ảnh động theo số khung hình trên mỗi giây ở vị trí đó. Đồ họa trong chế độ hiển thị ngay lập tức Canvas (Khung nền ảnh) là một hệ thống đồ họa trong chế độ hiển thị ngay lập tức có nghĩa là nó vẽ ngay lập tức những gì bạn quy định và sau đó quên ngay lập tức. Các hệ thống đồ họa khác, chẳng hạn như Scalable Vector Graphics (SVG – Đồ họa Vectơ có thể điều chỉnh quy mô), thực hiện đồ họa trong chế độ-giữ lại, có nghĩa là chúng duy trì một danh sách các đối tượng cần vẽ. Do không cần chi phí duy trì một danh sách hiển thị, nên Canvas nhanh hơn SVG; tuy nhiên, nếu bạn muốn duy trì một danh sách các đối tượng để người dùng có thể thao tác, bạn phải tự mình thực hiện chức năng đó trong Canvas. Trước khi tiếp tục, bạn có thể muốn thử trò chơi như hiển thị trong Hình 1; các mã sẽ dễ hiểu hơn nếu bạn viết nó. (Xem phần Tải về để chạy thử trò Snail Bait trong bài này). Tổng quan về Canvas của HTML5 Bối cảnh 2D của Canvas cung cấp một API đồ họa có phạm vi rộng để cho phép bạn thực hiện mọi thứ từ các trình soạn thảo văn bản đến các trò chơi video. Vào thời điểm viết bài này, API đó đã có nhiều hơn 30 phương thức, nhưng Snail Bait chỉ sử dụng một ít trong số đó, được thể hiện trong Bảng 1: Bảng 1. Các phương thức bối cảnh 2D của Canvas được Snail Bait sử dụng Phương thức Mô tả Vẽ tất cả hoặc một phần của một hình ảnh tại một vị trí cụ thể trong một canvas. drawImage() Cũng có thể vẽ một canvas khác hoặc một khung hình từ một phần tử video. save() Lưu các thuộc tính bối cảnh vào một ngăn xếp. restore() Lấy các thuộc tính bối cảnh ra khỏi ngăn xếp và áp dụng chúng vào bối cảnh đó. strokeRect()Vẽ một hình chữ nhật rỗng. fillRect() Vẽ một hình chữ nhật đặc (được tô kín). Chuyển dịch hệ tọa độ. Đây là một phương thức mạnh, có ích trong nhiều tình translate() huống khác nhau. Tất cả việc cuộn di chuyển trong Snail Bait được thực hiện bằng một cuộc gọi phương thức này. Đồ họa theo đường
Như Cocoa của Apple và Illustrator của Adobe, API Canvas là đồ họa theo đường, có nghĩa là bạn vẽ các hình khối đồ họa thô sơ vào một canvas bằng cách vạch ra một tuyến đường và sau đó vẽ một đường mảnh hoặc tô đặc theo nó. Các phương thức strokeRect() và fillRect() là các phương thức tiện lợi, tương ứng vẽ một hình chữ nhật rỗng hoặc vẽ một hình chữ nhật đặc. Mọi thứ trong Snail Bait, ngoại trừ các bậc thềm thì đều là một hình ảnh. Background gồm có nhân vật đang chạy, tất cả những người tốt và kẻ xấu, đều là những hình ảnh mà trò chơi vẽ bằng phương thức drawImage(). Cuối cùng Snail Bait sẽ sử dụng một spritesheet — một hình ảnh duy nhất có chứa tất cả đồ họa của trò chơi — nhưng bây giờ tôi sử dụng các hình ảnh riêng biệt cho background và nhân vật đang chạy. Tôi vẽ nhân vật đang chạy bằng một hàm được hiển thị trong Liệt kê 1: Liệt kê 1. Vẽ cô bé đang chạy function drawRunner() { context.drawImage(runnerImage, // image STARTING_RUNNER_LEFT, // canvas left calculatePlatformTop(runnerTrack) - RUNNER_HEIGHT); // canvas top } Hàm drawRunner() chuyển ba đối số cho phương thức drawImage(): một hình ảnh và các tọa độ trái và tọa độ đỉnh để vẽ hình ảnh trong canvas ở đó. Tọa độ trái là một hằng số, trong khi tọa độ đỉnh được xác định bởi bậc thềm có nhân vật đang chạy ở trên đó. Tôi vẽ background theo cách tương tự như Liệt kê 2 minh họa: Liệt kê 2. Vẽ background function drawBackground() { context.drawImage(background, 0, 0); } Phương thức drawImage() đa năng Bạn có thể vẽ toàn bộ một hình ảnh hoặc bất kỳ vùng hình chữ nhật nào trong một hình ảnh, ở bất cứ nơi nào bên trong một canvas bằng phương thức drawImage() của bối cảnh 2D Canvas, với tùy chọn co giãn hình ảnh trong lúc vẽ. Ngoài các hình ảnh, bạn cũng có thể vẽ những nội dung của một canvas khác hoặc khung hình hiện tại của một phần tử video bằng phương thức drawImage(). Dù chỉ là một phương thức, nhưng phương thức drawImage() tạo điều kiện thuận lợi cho việc thực hiện đơn giản các ứng dụng thú vị nhưng lại khó thực hiện chẳng hạn như phần mềm chỉnh sửa video.
Hàm drawBackground() trong Liệt kê 2 vẽ background tại tọa độ (0,0) trong canvas. Sau đó trong bài này, tôi sửa đổi hàm đó để cuộn di chuyển nền sau này. Vẽ các bậc thềm, không phải là hình ảnh, đòi hỏi phải sử dụng nhiều hơn các API Canvas, như thể hiện trong Liệt kê 3: Liệt kê 3. Vẽ các bậc thềm var platformData = [ // Screen 1....................................................... { left: 10, width: 230, height: PLATFORM_HEIGHT, fillStyle: 'rgb(150,190,255)', opacity: 1.0, track: 1, pulsate: false, }, ... ], ... function drawPlatforms() { var data, top; context.save(); // Save the current state of the context context.translate(-platformOffset, 0); // Translate the coord system for all platforms for (var i=0; i < platformData.length; ++i) { data = platformData[i]; top = calculatePlatformTop(data.track); context.lineWidth = PLATFORM_STROKE_WIDTH; context.strokeStyle = PLATFORM_STROKE_STYLE; context.fillStyle = data.fillStyle; context.globalAlpha = data.opacity; context.strokeRect(data.left, top, data.width, data.height); context.fillRect (data.left, top, data.width, data.height); } context.restore(); // Restore context state saved above } Mã JavaScript trong Liệt kê 3 định nghĩa một mảng có tên là platformData. Mỗi đối tượng trong mảng đại diện cho siêu dữ liệu mô tả một bậc thềm riêng. Hàm drawPlatforms() sử dụng phương thức strokeRect() và fillRect() của bối cảnh Canvas để vẽ các bậc thềm hình chữ nhật. Sử dụng các đặc tính của những hình chữ nhật đó —
được lưu trữ trong các đối tượng trong mảng platformData — để thiết lập kiểu tô đặc của bối cảnh và thuộc tính globalAlpha, thiết lập mức độ mờ của bất cứ thứ gì để sau đó bạn vẽ trong canvas. Lời gọi hàm context.translate() chuyển dịch hệ thống tọa độ của canvas — được mô tả trong Hình 2 — theo một số điểm ảnh (pixel) đã quy định theo chiều ngang. Việc chuyển dịch đó và các giá trị thiết lập thuộc tính chỉ là tạm thời vì chúng được thực hiện giữa các lời gọi đến context.save() và context.restore(). Hình 2. Hệ thống tọa độ Canvas mặc định Theo mặc định, gốc của hệ tọa độ là ở góc trên bên trái của canvas. Bạn có thể di chuyển gốc của hệ tọa độ bằng context.translate(). Tôi thảo luận về việc cuộn di chuyển background bằng context.translate() trong phần Cuộn di chuyển nền sau. Nhưng vào lúc này, bạn đã biết gần như mọi thứ cần biết về Canvas HTML5 để thực hiện Snail Bait. Với phần còn lại của loạt bài này, tôi sẽ tập trung vào các khía cạnh khác về phát triển trò chơi với HTML5, bắt đầu với hình ảnh động. Về đầu trang Hình ảnh động trong HTML5 Về cơ bản, việc thực hiện hình ảnh động rất đơn giản: Bạn vẽ nhiều lần một chuỗi các hình ảnh để làm cho nó xuất hiện như thể các đối tượng đang hoạt động theo một cách nào đó. Điều đó có nghĩa là bạn phải thực hiện một vòng lặp để vẽ một hình ảnh theo định kỳ.
Theo truyền thống, các vòng lặp hình ảnh động đã được thực hiện trong JavaScript bằng setTimeout() hoặc như minh họa trong Liệt kê 4, bằng setInterval(): Liệt kê 4. Thực hiện các hình ảnh động bằng setInterval() setInterval( function (e) { // Don't do this for time-critical animations animate(); // A function that draws the current animation frame }, 1000 / 60); // Approximately 60 frames/second (fps) Lời khuyên Đừng bao giờ sử dụng setTimeout() hay setInterval() cho các hình ảnh động hạn chế thời gian. Mã trong Liệt kê 4 chắc chắn sẽ tạo ra một hình ảnh động bằng cách liên tục gọi một hàm animate() để vẽ khung hình của hình ảnh động tiếp theo; tuy nhiên, bạn có thể không hài lòng với các kết quả đó, vì setInterval() và setTimeout() không biết gì về hình ảnh động. (Lưu ý: Bạn phải thực hiện hàm animate(); nó không phải là một phần của API Canvas). Trong Liệt kê 4, tôi thiết lập khoảng thời gian 1000/60 mili giây, tương đương với khoảng 60 khung hình mỗi giây. Con số đó là ước tính tốt nhất của tôi về một tốc độ khung hình tối ưu và có thể nó không phải là một tốc độ rất tốt; tuy nhiên, vì setInterval() và setTimeout() không biết bất cứ điều gì về hình ảnh động, nên tôi phải quy định tốc độ khung hình. Sẽ là tốt hơn nếu thay vào đó trình duyệt quy định tốc độ khung hình, vì chắc chắn nó biết tốt hơn tôi khi nào cần vẽ khung hình ảnh động tiếp theo. Có một nhược điểm thậm chí còn nghiêm trọng hơn với việc sử dụng setTimeout và setInterval(). Mặc dù bạn chuyển cho các phương thức đó những khoảng thời gian tính bằng mili giây, nhưng các phương thức đó không làm chính xác đến milli giây. Trong thực tế, theo đặc tả của HTML, các phương thức này có thể kéo dài thoải mái thêm khoảng thời gian mà bạn quy định — vì nỗ lực để bảo tồn tài nguyên. Để tránh những nhược điểm này, bạn không nên sử dụng setTimeout() và setInterval() cho các hình ảnh động hạn chế thời gian; thay vào đó, bạn nên sử dụng phương thức requestAnimationFrame(). requestAnimationFrame() Trong đặc tả Kiểm soát định thời gian cho hình ảnh động dựa trên kịch bản lệnh (xem phần Tài nguyên), W3C định nghĩa một phương thức dựa trên đối tượng window có tên là requestAnimationFrame(). Không giống như setTimeout() hay setInterval(), phương thức requestAnimationFrame() đặc biệt được dành cho việc thực hiện hình ảnh động. Do đó, nó không bị một nhược điểm nào liên quan đến setTimeout() và setInterval(). Nó cũng dễ sử dụng, như Liệt kê 5 minh họa:
Liệt kê 5. Thực hiện hình ảnh động bằng requestAnimationFrame() function animate(time) { // Animation loop draw(time); // A function that draws the current animation frame requestAnimationFrame(animate); // Keep the animation going }; requestAnimationFrame(animate); // Start the animation Bạn chuyển cho phương thức requestAnimationFrame() một tài liệu tham khảo đến một hàm gọi lại và khi trình duyệt đã sẵn sàng vẽ khung hình ảnh động tiếp theo, nó gọi hàm gọi lại này. Để duy trì hình ảnh động, hàm gọi lại cũng gọi phương thức requestAnimationFrame(). Như bạn có thể thấy trong Liệt kê 5, trình duyệt chuyển một tham số time tới hàm gọi lại của bạn. Bạn có thể tự hỏi rằng chính xác tham số time có nghĩa là gì. Đó có phải là thời điểm hiện tại không? Có phải là thời điểm mà lúc đó trình duyệt sẽ vẽ khung hình ảnh động tiếp theo không? Thật đáng ngạc nhiên, không có định nghĩa nào về tham số time đó. Điều duy nhất mà bạn có thể tin chắc là đối với bất kỳ trình duyệt đã cho nào, tham số time luôn luôn chỉ biểu diễn thời gian mà thôi; do đó, bạn có thể sử dụng nó để tính toán thời gian trôi qua giữa các khung hình, như tôi minh họa trong Tính toán tốc độ hình ảnh động theo số khung hình mỗi giây (fps). Một polyfill của requestAnimationFrame() Trên nhiều phương diện, HTML5 là một thiên đường viễn tưởng của lập trình viên. Thoát khỏi các API độc quyền, các nhà phát triển sử dụng HTML5 để thực hiện các ứng dụng chạy trên nhiều nền tảng trong các trình duyệt phổ biến. Các đặc tả tiến bộ nhanh chóng, liên tục kết hợp với công nghệ mới và tinh chỉnh chức năng hiện có. Các Polyfill: Lập trình cho tương lai Trong quá khứ, hầu hết các phần mềm nhiều nền tảng đã được thực hiện với mẫu thức chung nhỏ nhất. Các Polyfill thay đổi hoàn toàn khái niệm đó bằng cách cho phép bạn truy cập vào các tính năng nâng cao nếu chúng có sẵn và quay lại với bản thực hiện kém khả năng hơn khi cần. Tuy nhiên, công nghệ mới thường đi vào đặc tả kỹ thuật theo cách của mình, thông qua các chức năng đặc trưng của trình duyệt hiện có. Các nhà cung cấp trình duyệt thường thêm phần tiền tố vào các chức năng như vậy để nó không can nhiễu với bản thực hiện của trình duyệt khác; ví dụ; phương thức requestAnimationFrame(), ban đầu đã được Mozilla thực hiện như mozRequestAnimationFrame(). Sau đó, WebKit đã thực hiện nó với tên là hàm webkitRequestAnimationFrame(). Cuối cùng, W3C đã tiêu chuẩn hóa nó thành requestAnimationFrame().
Các bản triển khai thực hiện có thêm tiền tố chỉ nhà cung cấp và sự hỗ trợ khác nhau cho việc thực hiện các tiêu chuẩn làm cho chức năng mới khó sử dụng, do đó, cộng đồng HTML5 đã phát minh ra một thứ được gọi là một polyfill. Các polyfill xác định mức hỗ trợ của trình duyệt cho một tính năng cụ thể và cung cấp cho bạn quyền truy cập trực tiếp nếu trình duyệt thực hiện nó hoặc một bản thực hiện tạm thời để bắt chước chức năng tiêu chuẩn đến mức tốt nhất có thể được. Các polyfill sử dụng đơn giản, nhưng có thể phức tạp khi triển khai thực hiện. Liệt kê 6 cho thấy việc thực hiện một polyfill dành cho requestAnimationFrame(): Liệt kê 6. Polyfill của requestNextAnimationFrame() // Reprinted from Core HTML5 Canvas window.requestNextAnimationFrame = (function () { var originalWebkitRequestAnimationFrame = undefined, wrapper = undefined, callback = undefined, geckoVersion = 0, userAgent = navigator.userAgent, index = 0, self = this; // Workaround for Chrome 10 bug where Chrome // does not pass the time to the animation function if (window.webkitRequestAnimationFrame) { // Define the wrapper wrapper = function (time) { if (time === undefined) { time = +new Date(); } self.callback(time); }; // Make the switch originalWebkitRequestAnimationFrame = window.webkitRequestAnimationFrame; window.webkitRequestAnimationFrame = function (callback, element) { self.callback = callback; // Browser calls the wrapper and wrapper calls the callback originalWebkitRequestAnimationFrame(wrapper, element); } } // Workaround for Gecko 2.0, which has a bug in // mozRequestAnimationFrame() that restricts animations
// to 30-40 fps. if (window.mozRequestAnimationFrame) { // Check the Gecko version. Gecko is used by browsers // other than Firefox. Gecko 2.0 corresponds to // Firefox 4.0. index = userAgent.indexOf('rv:'); if (userAgent.indexOf('Gecko') != -1) { geckoVersion = userAgent.substr(index + 3, 3); if (geckoVersion === '2.0') { // Forces the return statement to fall through // to the setTimeout() function. window.mozRequestAnimationFrame = undefined; } } } return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback, element) { var start, finish; window.setTimeout( function () { start = +new Date(); callback(start); finish = +new Date(); self.timeout = 1000 / 60 - (finish - start); }, self.timeout); }; } ) (); Polyfill: Định nghĩa Từ polyfill là một từ ghép của hai từ polymorphism (đa hình) và backfill. Giống như đa hình, các polyfill chọn mã thích hợp trong thời gian chạy và chúng lấp lại chức năng còn thiếu. Polyfill được thực hiện trong Liệt kê 6 gắn một hàm có tên là requestNextAnimationFrame() vào đối tượng window. Việc đưa Next vào tên hàm là để phân biệt nó với hàm requestAnimationFrame() cơ bản.
Hàm mà polyfill gán cho requestNextAnimationFrame() hoặc là requestAnimationFrame() nếu trình duyệt hỗ trợ nó hoặc là bản thực hiện có tên tiền tố chỉ nhà cung cấp. Nếu trình duyệt không hỗ trợ cả hai thứ đó, hàm này sẽ là một bản thực hiện tạm thời, sử dụng setTimeout() để bắt chước requestAnimationFrame() một cách tốt nhất có thể. Gần như tất cả tính phức tạp của polyfill đều liên quan đến việc giải quyết hai lỗi và tạo thành mã trước câu lệnh return. Lỗi đầu tiên liên quan đến Chrome 10, đó là nó chuyển một giá trị undefined (không xác định) cho tham số time. Lỗi thứ hai liên quan đến Firefox 4.0, đó là nó hạn chế tốc độ khung hình ở 35-40 khung hình mỗi giây. Mặc dù bản thực hiện polyfill của requestNextAnimationFrame() là thú vị, nhưng không cần thiết phải hiểu nó; thay vào đó, tất cả mọi thứ mà bạn cần biết là cách sử dụng nó, như tôi sẽ minh họa trong phần tiếp theo. Về đầu trang Vòng lặp trò chơi Bây giờ các điều tiên quyết về đồ họa và hình ảnh động đã xong, đây là lúc đưa Snail Bait vào chuyển động. Để bắt đầu, tôi đưa mã JavaScript dùng cho requestNextAnimationFrame() vào HTML của trò chơi, như thể hiện trong 7: Liệt kê 7. HTML ... ... Liệt kê 8 cho thấy vòng lặp hình ảnh động của trò chơi, thường được gọi là vòng lặp trò chơi: Liệt kê 8. Vòng lặp trò chơi var fps; function animate(now) { fps = calculateFps(now); draw(); requestNextAnimationFrame(animate); } function startGame() { requestNextAnimationFrame(animate);
} Hàm startGame(), do trình xử lý sự kiện onload của hình ảnh nền sau gọi ra, khởi động trò chơi bằng cách gọi polyfill requestNextAnimationFrame(). Khi đến thời gian vẽ khung hình của hình ảnh động đầu tiên của trò chơi, trình duyệt gọi hàm animate(). Hàm animate() tính toán tốc độ khung hình của hình ảnh động, dựa vào giá trị hiện tại của tham số time. (Xem requestAnimationFrame() để biết thêm về giá trị time). Sau khi tính toán tốc độ khung hình, hàm animate() sẽ gọi một hàm draw() để vẽ khung hình của hình ảnh động tiếp theo. Sau đó, hàm animate() gọi requestNextAnimationFrame() để duy trì hình ảnh động. Tính toán tốc độ hình ảnh động theo số khung hình mỗi giây (fps) Liệt kê 9 cho thấy cách Snail Bait tính toán tốc độ khung hình của mình và cách nó cập nhật giá trị đọc tốc độ khung hình được thể hiện trong Hình 1: Liệt kê 9. Tính fps và cập nhật phần tử fps var lastAnimationFrameTime = 0, lastFpsUpdateTime = 0, fpsElement = document.getElementById('fps'); function calculateFps(now) { var fps = 1000 / (now - lastAnimationFrameTime); lastAnimationFrameTime = now; if (now - lastFpsUpdateTime > 1000) { lastFpsUpdateTime = now; fpsElement.innerHTML = fps.toFixed(0) + ' fps'; } return fps; } Tốc độ khung hình chỉ đơn giản là khoảng thời gian trôi qua tính từ khung hình của hình ảnh động cuối cùng, vì vậy bạn có thể lý luận rằng đó là khung hình mỗi giây thay vì nhiều khung hình mỗi giây và điều đó làm cho nó không có vẻ nhanh chút nào. Bạn có thể theo cách tiếp cận chặt chẽ hơn và duy trì một tốc độ khung hình trung bình qua vài khung hình, nhưng tôi đã thấy là không cần thiết; thực vậy, thời gian trôi qua kể từ khung hình của hình ảnh động cuối cùng chính xác là những gì tôi sẽ cần trong phần Chuyển động theo thời gian. Liệt kê 9 cũng minh họa một kỹ thuật hình ảnh động quan trọng: thực hiện một nhiệm vụ với một tốc độ khác so với tốc độ của hình ảnh động. Nếu tôi cập nhật giá trị đọc số khung hình/giây cho từng khung hình của hình ảnh động, thì sẽ không thể đọc được vì nó sẽ luôn thay đổi; thay vào đó, tôi cập nhật giá trị đọc đó mỗi giây một lần.
Với vòng lặp trò chơi có sẵn và tốc độ khung hình trong tay, bây giờ tôi đã sẵn sàng để cuộn background. Về đầu trang Cuộn background Nền sau của Snail Bait, được thể hiện trong Hình 3, cuộn di chuyển chậm theo chiều ngang: Hình 3. Hình ảnh background Background sẽ cuộn liên tục vì các lề trái và lề phải của background giống hệt nhau, như minh họa ở Hình 4: Hình 4. Các lề giống hệt nhau làm cho các quá trình chuyển tiếp trơn tru (trái: lề phải;
phải: lề trái) Snail Bait không ngừng cuộn backgroud bằng cách vẽ nó hai lần, như thể hiện trong Hình 5. Ban đầu, như thể hiện trong ảnh chụp màn hình ở trên cùng trong Hình 5, hình ảnh nền sau ở bên trái hoàn toàn nằm trong màn hình, trong khi một hình ảnh nền sau ở bên phải hoàn toàn ở ngoài màn hình. Khi thời gian trôi đi, nền sau cuộn di chuyển, như được minh họa bằng các ảnh chụp màn hình ở giữa và ở dưới cùng trong Hình 5: Hình 5. Cuộn từ phải sang trái: các vùng mờ biểu diễn các phần hình ảnh nằm ngoài màn
hình Liệt kê 10 cho thấy mã tương quan với Hình 5. Hàm drawBackground() vẽ hình ảnh hai lần, luôn luôn ở cùng một vị trí. Việc cuộn di chuyển nhìn thấy được là kết quả của việc liên tục chuyển dịch hệ thống tọa độ của canvas sang trái, làm cho background có vẻ như được cuộn sang phải. (Đây là cách bạn có thể dung hòa vẻ mâu thuẫn bên ngoài của việc chuyển dịch sang trái nhưng lại là cuộn di chuyển hình sang phải: Hãy tưởng tượng canvas như một khung ảnh rỗng trên đỉnh của một tờ giấy dài. Tờ giấy này là hệ thống tọa độ và việc chuyển dịch nó sang trái giống như trượt nó sang bên trái bên dưới khung nền ảnh [canvas]. Do đó, canvas có vẻ như di chuyển sang bên phải). Liệt kê 10. Cuộn background var backgroundOffset; // This is set before calling drawBackground() function drawBackground() { context.translate(-backgroundOffset, 0); // Initially onscreen: context.drawImage(background, 0, 0); // Initially offscreen: context.drawImage(background, background.width, 0); context.translate(backgroundOffset, 0); }
Hàm setBackground() chuyển dịch các điểm ảnh theo -backgroundOffset của bối cảnh canvas theo chiều ngang. Nếu backgroundOffset là số dương, nền sau sẽ di chuyển sang phải; nếu nó là số âm, nền sau sẽ di chuyển trái. Sau khi chuyển dịch nền sau, drawBackground() vẽ hình ảnh nền sau hai lần rồi chuyển dịch bối cảnh quay lại nơi nó đã có trước khi gọi drawBackground(). Vẫn còn một bước tính: tính backgroundOffset, để xác định sẽ chuyển dịch hệ thống tọa độ của canvas cho mỗi khung hình của hình ảnh động đi xa bao nhiêu. Mặc dù bản thân việc tính toán này có vẻ tầm thường, nhưng nó có ý nghĩa rất quan trọng, vì vậy tôi sẽ thảo luận nó tiếp theo. Về đầu trang Chuyển động theo thời gian Tốc độ khung hình của hình ảnh động của bạn sẽ thay đổi, nhưng bạn phải ngăn không để cho sự thay đổi tốc độ khung hình ảnh hưởng đến tốc độ tiến triển hình ảnh động của bạn. Ví dụ, Snail Bait cuộn background với tốc độ 42 điểm ảnh/giây bất kể tốc độ khung hình cơ bản của hình ảnh động. Các hình ảnh động phải dựa vào thời gian, có nghĩa là các vận tốc được quy định theo số điểm ảnh/giây và phải không phụ thuộc vào tốc độ khung hình. Việc sử dụng chuyển động dựa theo thời gian để tính toán số lượng các điểm ảnh cần phải di chuyển một đối tượng cho một khung hình đã cho rất đơn giản: Chia vận tốc cho tốc độ khung hình hiện tại. Vận tốc (số điểm ảnh/giây) chia cho tốc độ khung hình (số khung hình/giây) ra kết quả là số điểm ảnh/khung hình, có nghĩa là số lượng điểm ảnh mà bạn cần di chuyển một cái gì đó đối với khung hình hiện tại. Gợi ý Tốc độ hình ảnh động phải độc lập với tốc độ khung hình. Liệt kê 11 cho thấy cách Snail Bait sử dụng chuyển động dựa theo thời gian để tính toán độ dịch chuyển của background: Liệt kê 11. Thiết lập giá trị độ dịch chuyển của background var BACKGROUND_VELOCITY = 42, // pixels / second bgVelocity = BACKGROUND_VELOCITY; function setBackgroundOffset() { var offset = backgroundOffset + bgVelocity/fps; // Time-based motion if (offset > 0 && offset < background.width) { backgroundOffset = offset; } else { backgroundOffset = 0; }
} Hàm setBackgroundOffset() tính toán số lượng điểm ảnh cần dịch chuyển background đối với khung hình hiện tại bằng cách chia vận tốc của background cho tốc độ khung hình hiện tại. Sau đó, nó cộng giá trị đó vào độ dịch chuyển background hiện có. Để liên tục cuộn background, hàm setBackgroundOffset() thiết lập lại độ dịch chuyển nền sau bằng 0 khi nó trở nên nhỏ hơn 0 hoặc lớn hơn độ rộng của nền sau. Về đầu trang Thị sai Nếu bạn đã từng ngồi ở ghế hành khách của một chiếc xe đang chạy và nhìn con dao nhíp trên tay bạn qua các cột điện thoại ở tốc độ cao, bạn biết rằng những thứ gần với bạn di chuyển nhanh hơn so với những thứ ở xa hơn. Điều đó được gọi là thị sai. Snail Bait là một trò chơi nhảy bậc thềm 2D (2D platformer), nhưng nó sử dụng một chút hiệu ứng thị sai để làm cho các bậc thềm có vẻ như ở gần bạn hơn so với background. Trò chơi này thực hiện thị sai đó bằng cách cuộn di chuyển các bậc thềm cần lưu ý nhanh hơn đáng kể so với background. Hình 6 minh họa cách Snail Bait thực hiện thị sai. Ảnh chụp màn hình trên cùng cho thấy background tại một thời điểm cụ thể, trong khi ảnh chụp màn hình phía dưới cùng cho thấy background tại một vài khung hình của hình ảnh động sau đó. Từ hai ảnh chụp màn hình đó, bạn có thể thấy rằng các bậc thềm đã di chuyển xa hơn background trong cùng một khoảng thời gian.
Hình 6. Thị sai: Các bậc thềm (gần) di chuyển nhanh hơn so với background (xa) Liệt kê 12 cho thấy các hàm thiết lập các vận tốc và các độ dịch chuyển của bậc thềm: Liệt kê 12. Thiết lập các vận tốc và các độ dịch chuyển của bậc thềm var PLATFORM_VELOCITY_MULTIPLIER = 4.35; function setPlatformVelocity() { // Platforms move 4.35 times as fast as the background platformVelocity = bgVelocity * PLATFORM_VELOCITY_MULTIPLIER; }
function setPlatformOffset() { platformOffset += platformVelocity/fps; // Time-based motion } Xem lại Liệt kê 8 có liệt kê vòng lặp trò chơi Snail Bait. Vòng lặp đó gồm một hàm animate() để trình duyệt sẽ gọi khi đến thời gian vẽ khung hình của hình ảnh động tiếp theo của trò chơi. Đến lượt mình, hàm animate() đó gọi một hàm draw() để vẽ khung hình của hình ảnh động tiếp theo. Mã dùng cho hàm draw() ở giai đoạn phát triển này được hiển thị trong Liệt kê 13: Liệt kê 13. Hàm draw() function setOffsets() { setBackgroundOffset(); setPlatformOffset(); } function draw() { setPlatformVelocity(); setOffsets(); drawBackground(); drawRunner(); drawPlatforms(); } Hàm draw() thiết lập vận tốc và các độ dịch chuyển cho cả hai, background và các bậc thềm. Sau đó, nó vẽ background, nhân vật đang chạy và các bậc thềm.