Factor de escala en móviles

[Diego Ponce de León]

Buenas, llevo un buen rato pensando en cómo crear un factor de escala que me sirva para escalar elementos según los DPI de cada dispositivo, y que se vean a un tamaño similar/proporcional.

La mayoría de los algoritmos que hay por internet se basan en un aspect-ratio inicial que suele ser el stage.stageWidth x stage.stageHeight, pero esto no me sirve en móviles, ya que el aspect-ratio puede cambiar mucho según dispositivos y usando un algoritmo así los elementos pueden deformarse.

En Android he visto que si DPI = 160 (el mínimo), el factor de escala == 1. De ahí se puede sacar una ecuación fácil, por ejemplo si DPI == 320, el factor de escala sería 2. Pero creo que esto para iOS no sirve.

Lo que necesito es un algoritmo que me de una escala perfecta, teniendo en cuenta las particularidades tableta/móvil, ios/android.

¿Habéis hecho algo similar?

[Joseba Alonso]

Por que no usas una escala dependiendo del ancho en virtual pixels? Tipo lo que se hace en web…

--
--
-----------------------------------------------------------------------
ASNativos
www.asnativos.com
-----------------------------------------------------------------------

---
Has recibido este mensaje porque estás suscrito al grupo "ASNativos - Lista de Actionscript" de Grupos de Google.
Para anular la suscripción a este grupo y dejar de recibir sus mensajes, envía un correo electrónico a asnativos+...@googlegroups.com.
Para acceder a más opciones, visita https://groups.google.com/d/optout.

[Diego Ponce de León]

¿A qué te refieres con virtual pixels? ¿Algo como los dp de android?

Ese "ancho virtual" creo que sería esto:

_dpWide = _stage.fullScreenWidth * 160 / dpi;

Pero en IOS creo que esos 160 no sirven

[Joseba Alonso]

SI, a eso me refieria a los device independent pixels. Aquí viene mas info http://blog.fluidui.com/designing-for-mobile-101-pixels-points-and-resolutions/

 

Pero resumiendo:

[Diego Ponce de León]

Perfecto, ese artículo me ha hecho ver la luz. Así que he acabado haciendo esta clase:

package reborn.utils
{
   import flash.display.Stage;
   import flash.geom.Rectangle;
   import flash.system.Capabilities;

   /** Class with useful info to scale and place stuff on the screen **/
   public class Device
   {
      public static const Android:String = "Android";
      public static const iOS:String = "iOS";

      private var _stage:Stage;
      public function get stage():Stage { return _stage; }

      private var _dpi:Number;
      public function get dpi():Number { return _dpi; }

      private var _os:String;
      public function get os():String { return _os; }

      private var _isTablet:Boolean;
      public function get isTablet():Boolean { return _isTablet; }

      private var _devicePixelSize:Rectangle;
      public function get devicePixelSize():Rectangle { return _devicePixelSize; }

      private var _deviceDipSize:Rectangle;
      public function get deviceDipSize():Rectangle { return _deviceDipSize; }

      private var _contentPixelSize:Rectangle;
      public function get contentPixelSize():Rectangle { return _contentPixelSize; }

      private var _contentDipSize:Rectangle;
      public function get contentDipSize():Rectangle { return _contentDipSize; }

      private var _toolbarDipHeight:Number;
      public function get toolbarDipHeight():Number { return _toolbarDipHeight; }

      private var _toolbarPixelHeight:Number;
      public function get toolbarPixelHeight():Number { return _toolbarPixelHeight; }

      private var _baseDensity:int;
      public function get baseDensity():int { return _baseDensity; }

      public function Device(stage:Stage, toolbarDpHeight:int)
      {
         _stage = stage;

         // Capabilities.screenDPI may some times be wrong acording to the docs
         var serverString:String = unescape(Capabilities.serverString);
         _dpi = Number(serverString.split("&DP=", 2)[1]);

         var osLowerCase:String = Capabilities.os.toLowerCase();
         _os = osLowerCase.indexOf("iphone") >= 0 ? iOS : Android;

         _baseDensity = _os == iOS ? 163 : 160;

         var physicalWidth:Number = _stage.fullScreenWidth / _dpi;
         var pysicalHeight:Number = _stage.fullScreenHeight / _dpi;
         var diagonalInches:Number = Math.sqrt((physicalWidth * physicalWidth)
            + (pysicalHeight * pysicalHeight));

         _isTablet = _os == iOS
            ? osLowerCase.indexOf("ipad", 0) != -1
            : diagonalInches >= 6; // TODO is there any mobile device with 6 or more inches?

         // pixel measures

         _toolbarPixelHeight = DipToPixels(toolbarDpHeight);

         _devicePixelSize = new Rectangle(0, 0,
            Math.max(_stage.fullScreenWidth, _stage.fullScreenHeight),
            Math.min(_stage.fullScreenWidth, _stage.fullScreenHeight));

         _contentPixelSize = new Rectangle(0, _toolbarPixelHeight,
            _devicePixelSize.width,
            _devicePixelSize.height - _toolbarPixelHeight);

         // DIP (density independent pixels) measures

         _toolbarDipHeight = toolbarDpHeight;

         var screenDpWidth:Number = PixelsToDip(_stage.fullScreenWidth);
         var screenDpHeight:Number = PixelsToDip(_stage.fullScreenHeight);

         _deviceDipSize = new Rectangle(0, 0,
            Math.max(screenDpWidth, screenDpHeight),
            Math.min(screenDpWidth, screenDpHeight));

         _contentDipSize = new Rectangle(0, _toolbarDipHeight,
            _deviceDipSize.width,
            _deviceDipSize.height - _toolbarDipHeight);
      }

      public function DipToPixels(dip:Number):Number
      {
         return (dip * dpi) / _baseDensity;
      }

      public function PixelsToDip(pixels:Number):Number
      {
         return (pixels * _baseDensity) / dpi;
      }
   }
}

Ya solo me queda testearlo, pero yo creo que tiene todo lo que necesito.

Salud

[Joseba Alonso]

Hey, me alegro de que te haya sido útil :)

[Diego Ponce de León]

Si tio, muy útil. Al final estas son las tres cosas que voy a utilizar (sobre todo la última):

public function DipToPixels(dip:Number):Number
{
   return (dip * dpi) / _baseDensity;
}

public function PixelsToDip(pixels:Number):Number
{
   return (pixels * _baseDensity) / dpi;
}

public function ScaleToDip(view:DisplayObject, dip:Number):DisplayObject
{
   var pixelWidth:Number = view.width;
   view.width = DipToPixels(dip);
   view.scaleY = view.scaleX;

   return view;
}

[Diego Ponce de León]

Por cierto, hablando de Actionscript me siento como si volviera al colegio. Ahí empezó todo :)

[Joseba Alonso]

Jajajaj :) que gustazo tiene que ser…

¡Error! Nombre de archivo no especificado.

 

 

 

 

[Diego Ponce de León]

El problema que tengo ahora es que en tableta todo sale minúsculo. 

Precisamente porque el DPI de las tabletas es mucho menor.

¿Qué se hace en estos casos? ¿Se multiplica por algún número concreto?

[Diego Ponce de León]

in Ipad me funciona bien multiplicando por 2, en Android ni idea cómo hacerlo

[Joseba Alonso]

Joder ahí me pillas :(

[Fede Rivas]

Diego, entiendo q no estas tirando de Starling verdad ?

[Diego Ponce de León]

No. Es todo DisplayList

[Fede Rivas]

En el fondo lo sabia pero tenia q preguntar jeje. Nunca curre con el DisplayList, pero creo que tal como lo has planteado es lo muy razonable desde luego. 

Con Starling es q se curra de forma diferente, supongo que lo habras ojeado pero te lo dejo por si acaso no, por si se te ocurre alguna idea mas que puedas adoptar

http://wiki.starling-framework.org/manual/multi-resolution_development

[Octavio Molano Anta]

¿Pero es realmente posible hacer un juego para iPad sólo con DisplayList? O__o. Pocas animaciones tendrá, ¿no?

Saludos.

[Diego Ponce de León]

Para mi sorpresa, el DisplayList va decente en iPad 2. Incluso animaciones. No es para tirar cohetes, pero es aceptable según que app estés haciendo

El mié., 17 ago. 2016 a las 0:31, Octavio Molano Anta (<octavio...@gmail.com>) escribió:

¿Pero es realmente posible hacer un juego para iPad sólo con DisplayList? O__o. Pocas animaciones tendrá, ¿no?

Saludos.

--

[Diego Ponce de León]

Yo sabía que Starling trabajaba con resoluciones menores y un factor de escala. Lo mismo puedo pillar alguna idea de ahí.

El problema del ipad es que tiene una densidad (DPI) menor. En concreto 132 DPI. Eso hace que la ecuación para escalar las cosas te deje todo más pequeño. Creo que multiplicar por 2 es suficiente en ipad2. Tengo que ver si hay que multiplicar por 3 en ipad retina. Y con las tabletas android ya me pierdo un poco. Estoy investigando...