Diego bezares

videojuegos adaptables a cualquier pantalla

1 Desarrollos multipantalla

2 Desarrollos multipantalla

Fragmentación “infinita”

3 Desarrollos multipantalla

muchos problemas distintos

4 Desarrollos multipantalla

RESOLUCIÓN

ASPECT RATIO

REESCALADO IMÁGENES, TAMAÑO MEMORIA, FACILIDAD MAQUETACIÓN

TAMAÑO ( FÍSICO )

Afrontar el problema

5 Desarrollos multipantalla

- “ya lo portaré”

RESOLUCIÓN

6 Desarrollos multipantalla

RESOLUCIÓN

7 Desarrollos multipantalla

Unidades virtuales

RESOLUCIÓN

8 Desarrollos multipantalla

RESOLUCIÓN : lógica de juego

9 Desarrollos multipantalla

Aspect Ratio

10 Desarrollos multipantalla

ASPECT RATIO

11 Desarrollos multipantalla

ASPECT RATIO / marco de seguridad

12 Desarrollos multipantalla

ASPECT RATIO

13 Desarrollos multipantalla

Visualización != afecta al juego

14 Desarrollos multipantalla

Tamaño físico

15 Desarrollos multipantalla

“PULGADAS” : 3', 4', 5', 7', 10', 26', 40'

Problemas → Tamaño físico

16 Desarrollos multipantalla

Tamaño físico

17 Desarrollos multipantalla

Tamaño físico

18 Desarrollos multipantalla

- 1 / varias Maquetaciones ( móvil, tablet … )

- Zoom, cámaras con estrategias distintas ( HUD … )

- ¡¡ Complejidad desarrollo / testeo !!

Visualización != afecta al juego

19 Desarrollos multipantalla

Tamaño físico

20 Desarrollos multipantalla

- Probar continuamente en nuestro menor dispositivo.

- Plantillas

maquetación sencilla

21 Desarrollos multipantalla

escalado de pÍXELES

22 Desarrollos multipantalla

escalado de pÍXELES

23 Desarrollos multipantalla

Sets de gráficos( píxeles )

Maquetación y lógica de juego( unidades virtuales )

Pantalla dispositivo(píxeles )

Ipad2

Ipad Air

escalado de pÍXELES

24 Desarrollos multipantalla

escalado de pÍXELES

25 Desarrollos multipantalla

escalado de pÍXELES

26 Desarrollos multipantalla

- Mantener DPI de imágenes fuente.

- NO ESCALAR, Cambiar imágenes fuente

- Resolución pantallazo vs imagen fuente.

Muchos píxeles que pintar

27 Desarrollos multipantalla

METALLICARS

28 Desarrollos multipantalla

Queremos llenar los píxeles de cualquier pantalla con

píxeles de calidad.

( y no de imágenes reescaladas )

Limitaciones técnicas 2005

29 Desarrollos multipantalla

- 64 kb Max jar.

- 128 kb max memoria.

- 128 x 128 píxeles, 176 x 208, 240 x 320

Limitaciones técnicas

30 Desarrollos multipantalla

- 64 kb Max jar.

- 128 kb max memoria.

- 128 x 128 píxeles, 176 x 208, 240 x 320

“Menos mal que ya no hace falta optimizar tanto” ¿?

Limitaciones técnicas

31 Desarrollos multipantalla

¿ Seguro ?

“Menos mal que ya no hace falta optimizar tanto” ¿?

Optimizar sigue siendo clave

32 Desarrollos multipantalla

“Menos mal que ya no hace falta optimizar tanto”

Junio 2.005 J2ME Nokia 6111

- 128 x 160 = 20.000 píxeles en pantalla- 500 kb jar- 2 MB memoria

Ejecutable ( jar ) : 500Kb / 20.000 = 31 ( bytes/ pixel ) Memoria : 2MB / 20.000 = 100 ( bytes / pixel )

Noviembre 2013 . IPAD AIR

- 2048 x 1536 = 3.145.000 píxeles en pantalla- 100 MB / 2 GB Ipa- 1024 MB Memoria.

Ejecutable ( Ipa ) :100 MB / 3.145.000 = 31 ( bytes / pixel ) “memoria”1024 MB / 3.145.000 = 325 ( bytes / pixel )

Ahora es técnicamente más fácil hacer UN [mal] juego.Ahora es técnicamente más difícil hacer un BUEN juego.

A tener en cuenta → MipMapping

33 Desarrollos multipantalla

A tener en cuenta → COMPRESIóN HARDWARE

34 Desarrollos multipantalla

A tener en cuenta → COMPRESIóN HARDWARE

35 Desarrollos multipantalla

FormatoTamaño

en memoria

Tamaño en disco

Rendimiento

pintado

Tiempo de carga

PVRTC Poco, comprimi

do

Poco, comprimido +

zip

mejor Muy poco

Sin comprimir 32 bits 4 * 512 * 512 = 1mb

1mb comprimido en

zip

normal poco

PNG 32 bits 4 * 512 * 512 = 1mb

Png + zip normal Mucho. ( descomprime PNG a memoria por software )

Soluciones → “Borders”

36 Desarrollos multipantalla

Soluciones → Otros trucos

37 Desarrollos multipantalla

- Degradado en fondo Candy Crush.- Mapa muy grande- Tilear, repetir...

Ejemplo de estrategia

38 Desarrollos multipantalla

Sets de gráficos( píxeles )

Maquetación y lógica de juego( unidades virtuales )

Pantalla dispositivo(píxeles )

Ipad2

Ipad Air

Soluciones → WEB : responsive design

39 Desarrollos multipantalla

.

Soluciones → Qué dice Google

40 Desarrollos multipantalla

.

- http://developer.android.com/guide/practices/screens_support.html

- Provide different layouts for different screen sizes

- Android resizes your application layout to fit the current device screen. In most cases, this works fine

- Density-independent pixel (dp)A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way.The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen

Soluciones → Qué dice Google

41 Desarrollos multipantalla

.

- Do not use hard coded pixel values in your application code.( usar unidades virtuales ).

- Do not use AbsoluteLayout (it's deprecated).

- Nine-Patch drawables . ( borders ) .

- Varios sets de graficos. Provide different bitmap drawables for different screen densities

Soluciones → Google . Multiple APK Support

42 Desarrollos multipantalla

.

- Publish different APKs for your application, but share the same application listing on Google Play

- we encourage you to develop and publish a single APK. You should generally use multiple APKs to support different device configurations only when your APK is too large (greater than 50MB) due to the alternative resources needed for different device configurations.

- Support different OpenGL texture compression formats with each APK.

- Support different screen sizes and densities with each APK.

- Support different platform versions with each APK, different CPU architectures ( ARM, x86, and MIPS, when your app uses the Android NDK)

Soluciones → Qué dice Apple

43 Desarrollos multipantalla

- Maquetación Iphone ( + variante iphone 5 ) + Maquetación Ipad

- Set gráficos normal Iphone +Set gráficos retina Iphone +Set gráficos normal Ipad +Set gráficos retina Ipad

- Mejor 1 sólo “Ipad” ( Iphone+ Ipad ).ASO, etc ...

Gracias ! .Diego Bezares

@diegobez

PREGUNTAS