2012-07-19 41 views
7

Tôi đang phát triển trò chơi trên web bằng cách sử dụng html <canvas> và javascript. Trò chơi cũng phải có chức năng trên iPad, tốt nhất là cả màn hình võng mạc và màn hình không phải võng mạc. Trong trò chơi này, tôi sử dụng một png spritesheet. Spritesheet này rộng 3500 pixel và cao 3700 pixel.Làm cách nào để ngăn @ 2x phóng to hình ảnh trong javascript trên iPad võng mạc?

Trong logic cho trò chơi của mình, tôi đang sử dụng canvas 'context.drawImage() để lấy họa tiết và vẽ chúng vào khung vẽ của tôi. Trong trình duyệt dành cho máy tính để bàn, công cụ này hoạt động hoàn hảo và mọi thứ đều tuyệt vời. Trên iPad võng mạc, hình ảnh chỉ chiếm một phần tư kích thước của nó, khiến nhiều cuộc gọi drawImage() của tôi không thành công, cho rằng họ đang cố gắng lấy pixel bên ngoài ranh giới của hình ảnh được tải. (Nếu tôi lấy một hình ảnh ở vị trí 1200, 1400 và iPad cho rằng hình ảnh của tôi nhỏ hơn, thì lỗi INDEX_SIZE_ERR sẽ bị ném.)

Ví dụ, mã được viết bên dưới là những gì tôi có trong dự án của mình. Khi cảnh báo chiều rộng và chiều cao, tôi nhận được kết quả là 875 pixel, rộng gấp 925 pixel - chính xác 1/4 kích thước của hình ảnh ban đầu.

spritesheet = new Image(); 
spritesheet.onload = function() { 
    splashInterval = setInterval(renderFrame, 30); 
    alert(spritesheet.width); // returns 875 on retina iPad 
    alert(spritesheet.height); // returns 925 on retina iPad 
}; 
spritesheet.src = "/spritesheet.png"; 

Giải pháp bình thường cho màn hình võng mạc này là tạo ra một hình ảnh tăng kích thước để iPad hạ thấp nó, mọi thứ đều ổn. Tuy nhiên, theo các kích thước được báo cáo ở trên, tôi sẽ phải tạo một hình ảnh có kích thước gấp 4 lần chiều rộng và chiều cao. Điều đó tạo ra một hình ảnh có chiều rộng 14.000 pixel, cao 14.800 pixel. Ngay cả khi một jpg trắng rắn, hình ảnh này không lưu trong Photoshop, và được báo cáo trong GIMP là 1.9GB lớn. Đương nhiên đây không phải là một giải pháp. ;)

Vì vậy, câu hỏi của tôi là viết tắt: Có cách nào để ngăn màn hình iPad võng mạc khỏi hình ảnh thu nhỏ được tải qua Javascript không? Khi tôi tải hình ảnh có kích thước 3500x3700 pixel, tôi cần nó ở mức 3500x3700 pixel, vì vậy các cuộc gọi context.drawImage() hoạt động như dự định.

Bất kỳ và tất cả ý tưởng sẽ được đánh giá cao. Cảm ơn!

+0

Để thêm sự xúc phạm đến chấn thương tôi đã nhận thấy iPad3 Retina săn thoại di động và Safari trên mac để xử lý vải và devicePixelRatio cách khác nhau khi nói đến kích thước dữ liệu hình ảnh ngữ cảnh. –

+0

CẬP NHẬT ở trên * Rõ ràng đó là lỗi được khắc phục trong Safari 6 dành cho OSX. Bây giờ, màn hình nền của máy tính để bàn hoạt động như iPad và iPhone –

+1

Giải pháp mà tôi đã sử dụng là chia nhỏ spritesheet thành nhiều spritesheet nhỏ hơn (cả kích thước tệp nhỏ hơn và kích thước pixel). Với hình ảnh nhỏ hơn ~ 3000 pixel theo một trong hai hướng, iPad võng mạc không cố gắng hạ thấp hình ảnh, điều chỉnh độ rộng và chiều cao được báo cáo thông qua '.width()' và '.ightight()'. –

Trả lời

1

bạn có thể tìm cho dù màn hình là võng mạc hoặc không sử dụng sau đây:

var retina = window.devicePixelRatio > 1 ? true : false; 

if (retina) { 
    // the user has a retina display 
    // do something 

} 
else { 
    // the user has a non-retina display 
    // do something else 
} 
+1

Đó là phần dễ dàng! :) Khi tôi tìm ra khi tôi đang ở trên màn hình hiển thị võng mạc, làm thế nào tôi có thể tải hình ảnh và vẫn giữ nguyên kích thước hình ảnh tôi cần? Cố gắng phân phối một hình ảnh 14.000 pixel theo quy mô võng mạc sẽ không (và không) hoạt động, thật không may. –

+0

chức năng nào sẽ chạy khi màn hình hiển thị võng mạc? im tìm thấy khó khăn trong việc tìm kiếm vấn đề ur. u có thể cho tôi biết những gì pixel shud nạp khi nó s võng mạc và wat nếu nó không? – Shreedhar

Các vấn đề liên quan