La versión original del juego Asteroides se ejecutaba sobre ordenadores con escasa potencia gráfica. Tal y como puedes ver a continuación, nuestra nave se representaba con un simple triángulo y los asteroides, como polígonos irregulares.

Dado que cuando hemos diseñado la clase Grafico, la representación del mismo la hemos delegado en un objeto Drawable, va a resultar muy fácil cambiar los gráficos de la aplicación para que tengan una apariencia más retro. Simplemente utilizando la subclase de Drawable, ShapeDrawable, en lugar de BitmapDrawable para cambiar la forma de dibujar los gráficos

Ejercicio paso a paso: Representación vectorial de los Asteroides

1.     Abre la clase VistaJuego.

2.     En el constructor reemplaza la línea:

drawableAsteroide = 
        contextCompat.getDrawable(context, R.drawable.asteroide1);

por el siguiente código:        

SharedPreferences pref = PreferenceManager. 
                            getDefaultSharedPreferences(getContext());
if (pref.getString("graficos", "1").equals("0")) {
       Path pathAsteroide = new Path();
       pathAsteroide.moveTo((float) 0.3, (float) 0.0);
       pathAsteroide.lineTo((float) 0.6, (float) 0.0);
       pathAsteroide.lineTo((float) 0.6, (float) 0.3);
       pathAsteroide.lineTo((float) 0.8, (float) 0.2);
       pathAsteroide.lineTo((float) 1.0, (float) 0.4);
       pathAsteroide.lineTo((float) 0.8, (float) 0.6);
       pathAsteroide.lineTo((float) 0.9, (float) 0.9);
       pathAsteroide.lineTo((float) 0.8, (float) 1.0);
       pathAsteroide.lineTo((float) 0.4, (float) 1.0);
       pathAsteroide.lineTo((float) 0.0, (float) 0.6);
       pathAsteroide.lineTo((float) 0.0, (float) 0.2);
       pathAsteroide.lineTo((float) 0.3, (float) 0.0);
       ShapeDrawable dAsteroide = new ShapeDrawable(
                             new PathShape(pathAsteroide, 1, 1));
       dAsteroide.getPaint().setColor(Color.WHITE);
       dAsteroide.getPaint().setStyle(Style.STROKE);
       dAsteroide.setIntrinsicWidth(50);
       dAsteroide.setIntrinsicHeight(50);
       drawableAsteroide = dAsteroide;
       setBackgroundColor(Color.BLACK);
} else {
       drawableAsteroide =
               ContextCompat.getDrawable(context, R.drawable.asteroide1);
}

Lo primero que hace este código es consultar en las preferencias para ver si el usuario ha escogido gráficos vectoriales. En caso negativo se realizará la misma inicialización de drawableAsteroide que teníamos antes. En caso afirmativo comenzamos creando la variable pathAsteroide de la clase Path. En este objeto se introducen todas las órdenes de dibujo necesarias para dibujar un asteroide. Luego se crea la variable dAsteroide de la clase ShapeDrawable para crea un drawable a partir del path. Los últimos dos parámetros (...,1,1) significan el valor de escala aplicado al eje x y al eje y. Luego se indica el color y el estilo del pincel e indicamos el alto y ancho por defecto del drawable. Finalmente asignamos el objeto creado a drawableAsteroide.

3.     Ejecuta la aplicación y selecciona el tipo de gráficos adecuado en las preferencias.

NOTA: En algunos dispositivos físicos, cuando se activa la aceleración gráfica por hardware, los asteroides pueden representarse de forma algo extraña:
Para evitar este problema puede resultar interesante desactivar la aceleración grafica cuando trabajemos con gráficos vectoriales y activarla en caso contrario. Par ello, añade dentro del if del código anterior



 

 setLayerType(View.LAYER_TYPE_SOFTWARE, null);

y dentro de else:

 setLayerType(View.LAYER_TYPE_HARDWARE, null);

Otra posible solución consiste en desactivar en AndroidManifest.xml la aceleración gráfica por hardware. Para ello en la etiqueta <activity> correspondiente a la actividad Juego añade el atributo:
 android:hardwareAccelerated="false"

 

Desafio: Representación de la nave con VectorDrawable

A partir de la versión 5 de Android, es posible definir un gráfico vectorial en un recurso XML. Esta forma de trabajar resulta mucho más interesante que la propuesta en el ejercicio “Representación vectorial de los asteroides”. Dado que permite separar del código aspectos relacionados con el diseño de la aplicación. Por ejemplo, el diseñador gráfico de nuestra empresa podrá modificar directamente la forma de un asteroide, sin tener que acceder al código.
1.    Añade a las preferencias un nuevo tipo de gráficos. Además de vectorial y bitmap, se ha de poder escoger la opción VectorDrawable.
2.    Crea tres recursos de tipo VectorDrawable que representen tres asteroides de tamaños distintos. Para esto puedes tienes varias opciones.

a)  Puedes copiar el XML de la estrella y modificar el path usando los puntos definidos en “Representación vectorial de los asteroides”.
b)  Puedes usar un editor vectorial como Adobe Photoshop o SVG-Edit (https://github.com/SVG-Edit/svgedit, pulsar en Try SVG-edit here.) y crear tus propios asteroides.
c)   Puedes buscar en Internet algún fichero SVG con forma de asteroide.

3.    Modifica el código para que al seleccionar como tipo de gráficos VectorDrawable, se utilicen estos recursos.

Práctica: Representación vectorial de la nave

A partir de la versión 5 de Android, es posible definir un gráfico vectorial en un recurso XML. Esta forma de trabajar resulta mucho más interesante que la propuesta en el ejercicio “Representación vectorial de los asteroides”. Dado que permite separar del código aspectos relacionados con el diseño de la aplicación. Por ejemplo, el diseñador gráfico de nuestra empresa podrá modificar directamente la forma de un asteroide, sin tener que acceder al código.

1.     Añade a las preferencias un nuevo tipo de gráficos. Además de vectorial y bitmap, se ha de poder escoger la opción VectorDrawable.

2.     Crea tres recursos de tipo VectorDrawable que representen tres asteroides de tamaños distintos. Para esto puedes tienes varias opciones.

a)     Puedes copiar el XML de la estrella y modificar el path usando los puntos definidos en “Representación vectorial de los asteroides”.

b)    Puedes usar un editor vectorial como Adobe Photoshop o SVG-Edit (https://github.com/SVG-Edit/svgedit, pulsar en Try SVG-edit here.) y crear tus propios asteroides.

c)     Puedes buscar en Internet algún fichero SVG con forma de asteroide.

3.     Modifica el código para que al seleccionar como tipo de gráficos VectorDrawable, se utilicen estos recursos.

Práctica: Representación vectorial de la nave

Como habrás comprobado en el ejercicio anterior la nave se representa siempre utilizando un fichero png. En esta práctica has de intentar que también pueda representarse vectorialmente.

1. Crea un nuevo objeto de la clase Path para representar la nave dentro de la sección if introducida en el ejercicio anterior. Como puedes ver en la ilustración siguiente ha de ser un simple triángulo. Como el ángulo de rotación inicial es cero, la nave ha de mirar a la derecha.

2. Crea un nuevo ShapeDrawable a partir de Path anterior. Unas dimensiones adecuadas para que la nave pueden ser 20 de ancho y 15 de alto.

3. Inicializa la variable drawableNave de forma adecuada.

Desafio: Representación de la nave con VectorDrawable
Realiza el mismo trabajo propuesto en el desafio “Representación de los asteroides con VectorDrawable”, pero ahora para representar la nave.