Anuncios

Bienvenidos sean a este post, antes de continuar con nuestro juego vamos a hablar sobre una clase que nos permitira trabajar sobre el cuerpo de nuestra serpiente.

Anuncios
Anuncios

Hasta los proyectos anteriores hemos usado tanto a Canvas como Rect para poder mostrar nuestros elementos, tanto el bate como las pelotas o las balas para matar a Pepe pero tambien hemos usado a Bitmap ya sea para representar a Pepe como las manzanas y serpiente de nuestro actual proyecto pero que es un bitmap? Tal como su nombre lo indica es un mapa de bits el cual posee muchos formatos donde hay rangos y valores para representar colores y transparencias aunque estos en realidad equivalen a lo mismo porque son una grilla/mapa de valores y cada valor representa el color de un pixel simple, por lo tanto para rotar, cambiar el tamaño o invertir un bitmap se debe hacer a traves de un calculo matematico apropiado sobre cada pixel/bit de la imagen/grilla/mapa del bitmap, si bien los calculos no son altamente complejos tampoco son simples y si te gusta un poco las matematicas no vas a tener grandes inconvenientes pero desafortunadamente no solo alcanza con tener conocimientos en matematicas ya que debemos diseñar un codigo eficiente y tener un buen conocimiento de los bitmaps aunque afortunadamente tenemos una solucion disponible gracias a la clase Matrix.

Anuncios

Esta clase es llamada asi porque usa el concepto matematico y reglas para ejecutar calculos en una serie de valores conocidos como matrices, el plural de matriz (Matrix), quizas estes familiarizado con matrices pero no te preocupes si no lo estas porque la clase Matrix nos esconde toda esta complejidad, ademas no solamente nos permite ejecutar los calculos en una serie de valores sino a su vez tiene unos calculos pre-preparados que nos permite hacer tareas tales como rotar un punto alrededor de otro punto con solo especificar un numero de grados, y todo esto sin saber nada de trigonometria.

Anuncios

Para entender este concepto vamos a crear un nuevo proyecto con las siguientes caracteristicas:

  • Dispositivos: Phone and Tablet
  • Actividad: Empty Activity
  • Nombre: La Matrix
  • Nombre de paquete: org.example.lamatrix
  • API Minimo: API 14 (Android 4.0)
Anuncios

Una vez generado nuestro nuevo proyecto vamos a descargar el siguiente archivo:

Anuncios
Anuncios

Lo descargan en alguna carpeta de la pc, lo seleccionan y presionen Ctrl+C para copiarlo, luego van al Android Studio a la carpeta res -> drawable y presionan Ctrl+V, nos aparece un cuadro y seleccionaremos la opcion que dice unicamente drawable (no la de drawable-v24), presionen Ok y nos aparecera otro cuadro, en este caso no tocamos nada y volvemos a apretar Ok para terminar de copiarlo, una vez copiado nuestro nuevo recurso en drawable podemos proseguir con el proyecto, para ello crearemos una nueva clase y para esto deben hacer click con el boton derecho sobre el contenedor y seleccionen New -> Java class, en este caso aparece un nuevo cuadro y confeccionaremos lo siguiente:

  • Nombre: Dibujo
  • Tipo: Class
Anuncios

Una vez generada nuestra nueva clase vamos a modificar el codigo creado automaticamente con el siguiente:

Dibujo.java

package org.example.lamatrix;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.view.View;

public class Dibujo extends View {

    public Dibujo(Context contexto){
        super(contexto);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        Paint mPincel = new Paint();
        Bitmap mBitMap = BitmapFactory.decodeResource(
                this.getResources(), R.drawable.arrow);
        mBitMap = Bitmap.createBitmap(mBitMap,
                0,0,
                mBitMap.getWidth(),
                mBitMap.getHeight());
        canvas.drawBitmap(mBitMap,0,0,mPincel);
    }
}
Anuncios
Anuncios

En este caso extendemos a la clase View, lo primero que haremos es definir un constructor el cual recibira el contexto de la aplicacion y luego usamos a super para decirle que use el constructor predeterminado de la clase principal, lo siguiente sera el metodo onDraw, el cual se encargara de “dibujar” a nuestro bitmap, tendremos un argumento de tipo Canvas, luego definimos a nuestro pincel de tipo Paint, lo siguiente es un objeto de tipo Bitmap al cual por medio de BitmapFactory y decodeResource le estableceremos el recurso que copiamos antes al objeto mBitMap, el siguiente paso sera redefinir a mBitMap donde crearemos un Bitmap, primero le pasaremos el objeto que creamos antes, despues definimos el eje X y el eje Y, los siguientes dos valores estableceran el ancho (width) y alto (height) por medio de las funciones que mostramos, con esto tenemos definido el Bitmap, lo siguiente es usar el canvas y la funcion drawBitmap, donde primero pasaremos el valor de nuestro objeto, lo siguiente es la posicon de left, la otra es de top y por ultimo pasamos el pincel que lo “dibuja”, con esto ya tenemos nuestra clase encargada de mostrar una imagen en pantalla, nuestro siguiente paso sera modificar a MainActivity con el siguiente codigo:

MainActivity.java

package org.example.lamatrix;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(new Dibujo(this));
    }
}
Anuncios

En este caso si lo comparan con el codigo generado automaticamente la unica linea que se modifico fue la siguiente:

setContentView(R.layout.activity_main);
Anuncios

Por la siguiente linea:

setContentView(new Dibujo(this));
Anuncios
Anuncios

Como pueden observar, en lugar de usar el archivo activity_main.xml le diremos que genere un objeto de la clase Dibujo y el contexto que le informaremos es por medio de this, con esto ya tenemos nuestra app terminada, si lo compilamos y probamos obtendremos esta salida

Anuncios

Ya tenemos nuestra imagen generada en pantalla, nuestra siguiente modificacion sera en la clase Dibujo donde agregaremos a nuestra clase Matrix, para ello modificaremos a la funcion onDraw donde primero agregaremos el siguiente bloque al comienzo de la misma:

        Matrix matrix = new Matrix();
        matrix.preScale(-1, 1);
        matrix.preRotate(-90); 
Anuncios

En este bloque primero crearemos el objeto de tipo Matrix llamado matrix, lo siguiente sera usar el metodo preScale donde toma dos parametros uno para el cambio horizontal y otro para el cambio vertical, el siguiente metodo se encarga de tomar la imagen y rotar los grados que le informemos, si informamos un valor negativo lo hara en sentido contrario a la agujas del reloj y sin signo lo hace en sentido de las agujas, con esto ya configuramos nuestra matrix, nuestro siguiente paso sera modificar el creador de bitmaps, createBitmap, de la siguiente forma:

        mBitMap = Bitmap.createBitmap(mBitMap,
                0,0,
                mBitMap.getWidth(),
                mBitMap.getHeight(),
                matrix, true);
Anuncios

En este caso es muy similar al anterior pero despues de que establecimos la altura del bitmap, le pasamos el objeto matrix que definimos anteriormente y por ultimo un booleano para que ejecute la matriz que asignamos anteriormente, con esto ya tenemos la modificacion finalizada, antes de proceder a probarlo veamos como quedo el codigo final de esta clase:

Dibujo.java

package org.example.lamatrix;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.view.View;

public class Dibujo extends View {

    public Dibujo(Context contexto){
        super(contexto);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        Matrix matrix = new Matrix();
        matrix.preScale(-1, 1);
        matrix.preRotate(-90);
        Paint mPincel = new Paint();
        Bitmap mBitMap = BitmapFactory.decodeResource(
                this.getResources(), R.drawable.arrow);
        mBitMap = Bitmap.createBitmap(mBitMap,
                0,0,
                mBitMap.getWidth(),
                mBitMap.getHeight(),
                matrix, true);
        canvas.drawBitmap(mBitMap,0,0,mPincel);
    }
}
Anuncios
Anuncios

Con esto podemos proceder a probar nuestra aplicacion y obtendremos una salida como se ve a continuacion

Anuncios

Como pueden observar se modifico la posicion de nuestra imagen, en el proximo post veremos como utilizar en codigo por medio de la clase Snake.

Anuncios

En resumen, hoy hemos visto como es la clase Matrix, para que nos puede ayudar, como nos puede ser util, como se implementa y para que nos va a servir en un futuro, espero les haya sido util sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.

Anuncios

Tengo un Patreon donde podes acceder de manera exclusiva a material para este blog antes de ser publicado, sigue los pasos del link para saber como.

Tambien podes donar

Es para mantenimiento del sitio, gracias!

$1.00