Download - Desarrollo Multipantalla
![Page 1: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/1.jpg)
Diego bezares
videojuegos adaptables a cualquier pantalla
1 Desarrollos multipantalla
![Page 2: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/2.jpg)
2 Desarrollos multipantalla
![Page 3: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/3.jpg)
Fragmentación “infinita”
3 Desarrollos multipantalla
![Page 4: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/4.jpg)
muchos problemas distintos
4 Desarrollos multipantalla
RESOLUCIÓN
ASPECT RATIO
REESCALADO IMÁGENES, TAMAÑO MEMORIA, FACILIDAD MAQUETACIÓN
TAMAÑO ( FÍSICO )
![Page 5: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/5.jpg)
Afrontar el problema
5 Desarrollos multipantalla
- “ya lo portaré”
![Page 6: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/6.jpg)
RESOLUCIÓN
6 Desarrollos multipantalla
![Page 7: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/7.jpg)
RESOLUCIÓN
7 Desarrollos multipantalla
Unidades virtuales
![Page 8: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/8.jpg)
RESOLUCIÓN
8 Desarrollos multipantalla
![Page 9: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/9.jpg)
RESOLUCIÓN : lógica de juego
9 Desarrollos multipantalla
![Page 10: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/10.jpg)
Aspect Ratio
10 Desarrollos multipantalla
![Page 11: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/11.jpg)
ASPECT RATIO
11 Desarrollos multipantalla
![Page 12: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/12.jpg)
ASPECT RATIO / marco de seguridad
12 Desarrollos multipantalla
![Page 13: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/13.jpg)
ASPECT RATIO
13 Desarrollos multipantalla
![Page 14: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/14.jpg)
Visualización != afecta al juego
14 Desarrollos multipantalla
![Page 15: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/15.jpg)
Tamaño físico
15 Desarrollos multipantalla
“PULGADAS” : 3', 4', 5', 7', 10', 26', 40'
![Page 16: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/16.jpg)
Problemas → Tamaño físico
16 Desarrollos multipantalla
![Page 17: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/17.jpg)
Tamaño físico
17 Desarrollos multipantalla
![Page 18: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/18.jpg)
Tamaño físico
18 Desarrollos multipantalla
- 1 / varias Maquetaciones ( móvil, tablet … )
- Zoom, cámaras con estrategias distintas ( HUD … )
- ¡¡ Complejidad desarrollo / testeo !!
![Page 19: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/19.jpg)
Visualización != afecta al juego
19 Desarrollos multipantalla
![Page 20: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/20.jpg)
Tamaño físico
20 Desarrollos multipantalla
- Probar continuamente en nuestro menor dispositivo.
- Plantillas
![Page 21: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/21.jpg)
maquetación sencilla
21 Desarrollos multipantalla
![Page 22: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/22.jpg)
escalado de pÍXELES
22 Desarrollos multipantalla
![Page 23: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/23.jpg)
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
![Page 24: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/24.jpg)
escalado de pÍXELES
24 Desarrollos multipantalla
![Page 25: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/25.jpg)
escalado de pÍXELES
25 Desarrollos multipantalla
![Page 26: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/26.jpg)
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.
![Page 27: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/27.jpg)
Muchos píxeles que pintar
27 Desarrollos multipantalla
![Page 28: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/28.jpg)
METALLICARS
28 Desarrollos multipantalla
Queremos llenar los píxeles de cualquier pantalla con
píxeles de calidad.
( y no de imágenes reescaladas )
![Page 29: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/29.jpg)
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
![Page 30: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/30.jpg)
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” ¿?
![Page 31: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/31.jpg)
Limitaciones técnicas
31 Desarrollos multipantalla
¿ Seguro ?
“Menos mal que ya no hace falta optimizar tanto” ¿?
![Page 32: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/32.jpg)
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.
![Page 33: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/33.jpg)
A tener en cuenta → MipMapping
33 Desarrollos multipantalla
![Page 34: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/34.jpg)
A tener en cuenta → COMPRESIóN HARDWARE
34 Desarrollos multipantalla
![Page 35: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/35.jpg)
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 )
![Page 36: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/36.jpg)
Soluciones → “Borders”
36 Desarrollos multipantalla
![Page 37: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/37.jpg)
Soluciones → Otros trucos
37 Desarrollos multipantalla
- Degradado en fondo Candy Crush.- Mapa muy grande- Tilear, repetir...
![Page 38: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/38.jpg)
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
![Page 39: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/39.jpg)
Soluciones → WEB : responsive design
39 Desarrollos multipantalla
.
![Page 40: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/40.jpg)
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
![Page 41: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/41.jpg)
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
![Page 42: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/42.jpg)
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)
![Page 43: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/43.jpg)
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 ...
![Page 44: Desarrollo Multipantalla](https://reader034.vdocuments.pub/reader034/viewer/2022051013/548256cbb4af9f730d8b478a/html5/thumbnails/44.jpg)
Gracias ! .Diego Bezares
@diegobez
PREGUNTAS