Actualizar la aplicación de lona no retina a la pantalla retina

Question

Tengo una aplicación de lona iPad 2 (juego) y me gustaría que se ejecute en la nueva pantalla retina del iPad.

En pocas palabras, ¿cuál es el mejor método para estirar/contraer mi imagen de iPad2 para los modelos de iPad Retina?

De la búsqueda en Google que he hecho, he visto varios métodos, pero muchos incluyen comenzar con imágenes de tamaño retina y escalado hecho.

También he escuchado que el rendimiento de empujar píxeles de tamaño de retina a la pantalla es lento, y que es mejor usar imágenes de tamaño de iPad a expensas de alguna calidad.

Como lo es ahora, en el nuevo iPad veo el cuarto superior izquierdo de la aplicación, lo cual tiene sentido, pero el rendimiento es chocante en comparación con el iPad 2.

técnicas que he visto incluyen consultas de medios CSS , utilizando la densidad de píxeles y las transformaciones CSS, que aparentemente son bastante rápidas.

Gracias

Answer 1

He creado una función simple de manejar este problema. Básicamente, toma el tamaño actual del lienzo y lo escala por la relación dispositivo-píxel, reduciéndolo de nuevo usando CSS. Luego escala el contexto por la relación para que todas las funciones originales funcionen como siempre.

Puede darle una oportunidad y ver cómo funciona el rendimiento. Si no es lo que esperabas, simplemente puedes eliminarlo.

function enhanceContext(canvas, context) { 
    var ratio = window.devicePixelRatio || 1, 
     width = canvas.width, 
     height = canvas.height; 

    if (ratio > 1) { 
     canvas.width = width * ratio; 
     canvas.height = height * ratio; 
     canvas.style.width = width + "px"; 
     canvas.style.height = height + "px"; 
     context.scale(ratio, ratio); 
    } 
}