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.
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();
}Este es exactamente la misma funcion pero solo agregamos este bloque:
canvas.drawRect(horizTocado * tamBloque,
vertTocado * tamBloque,
(horizTocado * tamBloque) + tamBloque,
(vertTocado * tamBloque) + tamBloque,
pincel);
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
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.
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>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.
Con esto modificaremos nuestra pantalla inicial, si lo ejecutan todavia no lo veran pero quedara de este estilo:
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");
}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
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
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"
De la siguiente forma:
android:background="@drawable/fondo"
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"
De la siguiente forma:
android:textColor="@android:color/white"
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>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;
}
}Con todas estas modificaciones realizadas veamos como quedo nuestro juego casi en su totalidad mediante el siguiente video
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.
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.
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
El blog de Tinchicus 
