Anuncios

Bienvenidos sean a este post, hoy veremos un par de temas como son el dibujar en pantalla nuestro disparo y dejar una pantalla de inicio para el juego.

Anuncios

Comencemos con el disparo en pantalla para ello debemos ir a la funcion dibujar y modificarlo de la siguiente manera:

    void dibujar()
    {
        bitmapBlanco = Bitmap.createBitmap(numHorPixels,
                numVerPixels, Bitmap.Config.ARGB_8888);
        canvas = new Canvas(bitmapBlanco);
        juegoVista = new ImageView(this);
        pincel = new Paint();
        setContentView(juegoVista);

        juegoVista.setImageBitmap(bitmapBlanco);
        canvas.drawColor(Color.argb(255,255,255,255));
        pincel.setColor(Color.argb(255,0,0,0));
        for(int i=0; i < altGrilla; i++) {
            canvas.drawLine(0, tamBloque * i,
                    numHorPixels - 1, tamBloque * i, pincel);
        }
        for(int i =0; i < ancGrilla; i++){
            canvas.drawLine(tamBloque * i,0,
                tamBloque * i, numVerPixels -1, pincel);
        }
        canvas.drawRect(horizTocado * tamBloque,
                vertTocado * tamBloque,
                (horizTocado * tamBloque) + tamBloque,
                (vertTocado * tamBloque) + tamBloque,
                pincel);

        pincel.setTextSize(tamBloque * 1.5f);
        pincel.setColor(Color.argb(255,0,0,255));
        canvas.drawText("Disparos realizados: " +
                disparos + " - Distancia del submarino: " +
                distDesdeSub, tamBloque, tamBloque * 1.75f, pincel);

        Log.d("Depurando","En el dibujar()");
        imprimirDebug();
    }
Anuncios

Este es exactamente la misma funcion pero solo agregamos este bloque:

        canvas.drawRect(horizTocado * tamBloque,
                vertTocado * tamBloque,
                (horizTocado * tamBloque) + tamBloque,
                (vertTocado * tamBloque) + tamBloque,
                pincel);
Anuncios

En este caso dibujaremos el bloque donde apretamos, para ello usaremos a drawRect y pasaremos primero la ubicacion a la izquierda, luego la de arriba, despues la de derecha y por ultimo la de abajo, todo esto con respecto a los bordes de la pantalla, y lo pintaremos con el pincel, si lo probamos se vera algo asi

Anuncios

Con esto ya cubrimos la totalidad del juego pero todavia nos faltan un par de detalles mas esteticos, uno es crear una pantalla de inicio y otra es guardar ciertas preferencias, para el primer caso vamos a aprovechar el activity_main.xml que genero por defecto y las preferencias las veremos en el proximo post.

Anuncios

Comenzando con la pantalla de inicio vamos a modificar el codigo de nuestro archivo XML de la siguiente manera:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:background="@android:color/white"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/texto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginBottom="20dp"
        android:textSize="25sp"
        android:textColor="@android:color/black"
        android:text="Cazador de Submarinos v. 1.0" />

    <Button
        android:id="@+id/inicio"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginLeft="70dp"
        android:layout_marginRight="70dp"
        android:layout_below="@id/texto"
        android:text="Iniciar Juego" />

    <Button
        android:id="@+id/preferencias"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginLeft="70dp"
        android:layout_marginRight="70dp"
        android:layout_below="@id/inicio"
        android:text="Preferencias" />

</RelativeLayout>
Anuncios

En este caso usaremos un layout de tipo RelativeLayout, porque al estar en formato horizontal no podremos acomodarlo correctamente en LinearLayout, en este caso lo que mas usaremos son:

  • android:background, lo usaremos ahora para setear el fondo de color blanco
  • android:gravity=”center”, el cual sera para ubicar a los elementos en el centro de la pantalla
  • android:id=”@+id/nombre”, el cual sera para indicarle un id al elemento ya veremos para que.
  • android:layout_margin, tanto left como right son para indicar los margenes para los botones si los quieren mas chicos agranden el valor
  • android:layout_below, es para indicar debajo de cual elemento estara en base al id.
Anuncios

Con esto modificaremos nuestra pantalla inicial, si lo ejecutan todavia no lo veran pero quedara de este estilo:

Anuncios

Como podemos ver ahora vamos a tener dos botones: uno para el inicio del juego y otro para las preferencias, para nuestra siguiente modificacion la haremos sobre el onCreate de MainActivity:

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button boton = (Button) findViewById(R.id.inicio);
        boton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                nuevo();
                dibujar();
            }
        });

        Log.d("Depurando","En el onCreate");
    }
Anuncios
Anuncios

En este caso agregamos a onCreate un objeto de tipo Button llamado boton, el cual lo haremos por medio de findViewById, despues tomaremos a este objeto y lo asociaremos a setOnClickListener, el cual monitorea cuando se pulse el boton y llamara a nuevo y luego a dibujar.

Para que funcione necesitamos informarle el id del boton a monitorear, por este motivo le asignamos el campo id, con este y el setOnClickListener nos permite esperar a que se pulse el boton para iniciar el juego, nuestra ultima modificacion sera para agregar un fondo a la pantalla de inicio, para ello descarguen la siguiente imagen

Una vez descargado vayan a la carpeta donde lo descargaron, lo copian con Ctrl+C, despues van al Android Studio y en la carpeta res -> drawable

Anuncios
Anuncios

Presionen Ctrl+V para pegar este archivo, aparecera un nuevo cartel y deberan seleccionar drawable

Presionen Ok para copiar el archivo en ese destino, aparecera un nuevo cartel en el cual dejan todo como aparece y presionan Ok, una vez terminado debera quedar de la siguiente forma

Anuncios

Con esto ingresamos un recurso nuevo a nuestro juego, nuestro siguiente paso sera modificar el archivo de layout para asignar este nuevo recurso al fondo del xml, para ello modificaremos esta linea de activity_main.xml:

android:background="@android:color/white"
Anuncios

De la siguiente forma:

android:background="@drawable/fondo"
Anuncios

Con esto estableceremos el fondo de nuestra pantalla con la imagen subida a los recursos, nuestra ultima modificacion sera en la siguiente linea en el elemento TextView:

android:textColor="@android:color/black"
Anuncios

De la siguiente forma:

android:textColor="@android:color/white"
Anuncios

Para que nuestro texto aparezca en blanco, con esta ultima modificacion veamos como quedo finalmente nuestros codigos:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:background="@drawable/fondo"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/texto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginBottom="20dp"
        android:textSize="25sp"
        android:textColor="@android:color/white"
        android:text="Cazador de Submarinos v. 1.0" />

    <Button
        android:id="@+id/inicio"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginLeft="70dp"
        android:layout_marginRight="70dp"
        android:layout_below="@id/texto"
        android:text="Iniciar Juego" />

    <Button
        android:id="@+id/preferencias"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_marginLeft="70dp"
        android:layout_marginRight="70dp"
        android:layout_below="@id/inicio"
        android:text="Preferencias" />

</RelativeLayout>
Anuncios

MainActivity

package org.example.cazadordesub;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Point;
import android.os.Bundle;
import android.util.Log;
import android.view.Display;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

import java.util.Random;

public class MainActivity extends Activity {
    int numHorPixels;
    int numVerPixels;
    int tamBloque;
    int ancGrilla;
    int altGrilla;
    int vertTocado;
    int horizTocado;
    int subHorPosicion;
    int subVerPosicion;
    boolean impacto;
    int disparos;
    boolean depuracion;
    int distDesdeSub;
    Display vista;
    Point tamano;

    ImageView juegoVista;
    Bitmap bitmapBlanco;
    Canvas canvas;
    Paint pincel;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button boton = (Button) findViewById(R.id.inicio);
        boton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                nuevo();
                dibujar();
            }
        });

        Log.d("Depurando","En el onCreate");
    }

    void dibujar()
    {
        bitmapBlanco = Bitmap.createBitmap(numHorPixels,
                numVerPixels, Bitmap.Config.ARGB_8888);
        canvas = new Canvas(bitmapBlanco);
        juegoVista = new ImageView(this);
        pincel = new Paint();
        setContentView(juegoVista);

        juegoVista.setImageBitmap(bitmapBlanco);
        canvas.drawColor(Color.argb(255,255,255,255));
        pincel.setColor(Color.argb(255,0,0,0));
        for(int i=0; i < altGrilla; i++) {
            canvas.drawLine(0, tamBloque * i,
                    numHorPixels - 1, tamBloque * i, pincel);
        }
        for(int i =0; i < ancGrilla; i++){
            canvas.drawLine(tamBloque * i,0,
                tamBloque * i, numVerPixels -1, pincel);
        }
        canvas.drawRect(horizTocado * tamBloque,
                vertTocado * tamBloque,
                (horizTocado * tamBloque) + tamBloque,
                (vertTocado * tamBloque) + tamBloque,
                pincel);

        pincel.setTextSize(tamBloque * 1.5f);
        pincel.setColor(Color.argb(255,0,0,255));
        canvas.drawText("Disparos realizados: " +
                disparos + " - Distancia del submarino: " +
                distDesdeSub, tamBloque, tamBloque * 1.75f, pincel);

        Log.d("Depurando","En el dibujar()");
        imprimirDebug();
    }

    void nuevo()
    {
        vista = getWindowManager().getDefaultDisplay();
        tamano = new Point();
        vista.getSize(tamano);
        numHorPixels = tamano.x;
        numVerPixels = tamano.y;
        ancGrilla = 40;
        tamBloque = numHorPixels / ancGrilla;
        altGrilla = numVerPixels / tamBloque;
        disparos = 0;
        distDesdeSub = 0;
        impacto = false;
        depuracion = true;
        Random alazar = new Random();
        subHorPosicion = alazar.nextInt(ancGrilla);
        subVerPosicion = alazar.nextInt(altGrilla);
        horizTocado = -100;
        vertTocado = -100;

        Log.d("Depurando","En el nuevo()");
    }

    void disparar(int x, int y) {
        disparos++;
        horizTocado = x / tamBloque;
        vertTocado = y / tamBloque;
        impacto = horizTocado == subHorPosicion
                && vertTocado == subVerPosicion;
        int horBrecha = horizTocado - subHorPosicion;
        int verBrecha = vertTocado - subVerPosicion;
        distDesdeSub = (int) Math.sqrt((horBrecha * horBrecha)
                + (verBrecha * verBrecha));
        if (impacto) {
            boom();
        }
        else {
            dibujar();
        }

        Log.d("Depurando","En el disparar()");
    }

    void boom()
    {
        juegoVista.setImageBitmap(bitmapBlanco);
        canvas.drawColor(Color.argb(255,255,0,0));
        pincel.setColor(Color.argb(255,255,255,255));
        pincel.setTextSize(tamBloque * 10);
        canvas.drawText("BOOM!", tamBloque * 4,
                tamBloque * 14, pincel);
        pincel.setTextSize(tamBloque * 2);
        canvas.drawText("Dispara para jugar de nuevo!",
                tamBloque * 8,
                tamBloque * 18, pincel);
        nuevo();

        Log.d("Depurando","Hizo Boom! Verdaderamente");
    }

    void imprimirDebug()
    {
        pincel.setTextSize(tamBloque);
        canvas.drawText("numHorPixels = " + numHorPixels,
                50, tamBloque * 3, pincel);
        canvas.drawText("numVerPixels = " + numVerPixels,
                50, tamBloque * 4, pincel);
        canvas.drawText("tamBloque = " + tamBloque,
                50, tamBloque * 5, pincel);
        canvas.drawText("ancGrilla = " + ancGrilla,
                50, tamBloque * 6, pincel);
        canvas.drawText("altGrilla = " + altGrilla,
                50, tamBloque * 7, pincel);
        canvas.drawText("subHorPosicion = " + subHorPosicion,
                50, tamBloque * 8, pincel);
        canvas.drawText("subVerPosicion = " + subVerPosicion,
                50, tamBloque * 9, pincel);
        canvas.drawText("horizTocado = " + horizTocado,
                50, tamBloque * 10, pincel);
        canvas.drawText("verTocado = " + vertTocado,
                50, tamBloque * 11, pincel);
        canvas.drawText("impacto = " + impacto,
                50, tamBloque * 12, pincel);
        canvas.drawText("depuracion = " + depuracion,
                50, tamBloque * 13, pincel);
    }

    @Override
    public boolean onTouchEvent(MotionEvent evento)
    {
        horizTocado = (int)evento.getX();
        vertTocado = (int)evento.getY();
        if ((evento.getAction() &
                MotionEvent.ACTION_MASK) == MotionEvent.ACTION_UP){
            disparar(horizTocado,vertTocado);
        }
        Log.d("Depurando","En el onTouchEvent");
        Log.d("Depurando","horizTocado: " + horizTocado);
        Log.d("Depurando","vertTocado: " + vertTocado);
        return true;
    }
}
Anuncios

Con todas estas modificaciones realizadas veamos como quedo nuestro juego casi en su totalidad mediante el siguiente video

Anuncios

En el video podemos ver como tenemos un juego funcional con una pantalla de inicio y despues se juega completamente, en este caso solamente nos falta la opcion de preferencias pero de esto hablaremos en el siguiente post porque necesita de una explicacion completamente dedicado a ella.

Anuncios

En resumen, hoy hemos casi completado nuestro juego, hemos visto como agregar el lugar del impacto, hemos visto como agregar una pantalla de inicio, hemos visto como modelar la misma, agregar un evento para esperar cuando es pulsado un boton y una imagen de fondo de pantalla, espero les haya gustado 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