[ANDROID] - Juego diferencia de imagenes

F3R7X0

Muy buenas, acabo de empezar a "programar" en Android, estoy usando eclipse y me he atascado completamente, quiero crear un minijuego en el cual te salga una imagen y a continuación la misma con algunas diferencias, por lo que el usuario tendrá que tocar donde se encuentren las diferencias y que se reconozca donde presiona y si efectivamente ahi se encuentra una diferencia que lo cuente mediante un contador o algo parecido.

La última parte es la que no tengo ni idea de como cogerla (lo de saber donde presiona y si existe una diferecia con la otra imagen) ... alguno que ya lo haya hecho o que mas o menos pilote de esto??

kassiusk1

#1 un rango de coordenadas X e Y, si presiona tal coordenada en la imagen A, tiene que presionar las coordenadas que se correspondan en la imagen B? Si no son las correspondientes "intentelo de nuevo".

edit: lo mismo es una chapuza, pero podria valer xD

1 respuesta
F3R7X0

#2 la idea la tengo, se que si clickas en una zona (que yo se que hay una diferencia con respecto a la otra imagen) tiene que contarte un punto, pero la cosa es como lo hago xDDD ... el planteamiento creo que mas o menos ya lo tengo.

Li3cht

Dices que acabas de empezar a programar. Estás al corriente de los touch listeners y todo eso?
Para este juego será fundamental para detectar posiciones en las que el usuario presiona.

Una vez tienes eso será jugar con los Bitmaps. Me voy a clase, luego vuelvo a echar un vistazo y si acaso rulo algo de código básico.

F3R7X0

Estoy al tanto de los touch, lo que pasa es que estoy de practicas y me han mandado hacer ese juego que os he dicho y me han dado un tutorial y alé a buscarme la vida, y si se algunas cosillas pero para hacer ese juego ando muy liado.

1 respuesta
Lecherito

#5 Pues cada imagen tiene sus puntos (coordenadas) donde están las diferencias. Donde toque el usuario, si la distancia entre los 2 puntos es <X, que lo pille como diferencia y poco más.

X es arbitrario, dependiendo de cuan estricto quieres que sea el juego.

eXtreM3
  • Sabes las coordenadas X,Y de la diferencia.
  • Súmale un rango de pixels (cuanto más grande sea, más fácil será acertar, yo lo pondría bajito)
  • Después capturas el evento onClick de la imagen B (la distinta), obtienes las coordenadas y comparas.
  • Si está dentro del rango (x1 - clic - x2 y y1 - clic - y2) ha acertado y sumas 1.
  • Si falla le restas puntos, o tiempo si lo haces con barrita de tiempo, para evitar que spamee la pantalla a dedazos xd
1 respuesta
F3R7X0

#7 a ello me pongo ahora mismo, veremos si me sale algo :P

JuAn4k4

Lo suyo sería hacerlo "circular", calculando la distancia de dónde a presionado a dónde está el punto.

http://stackoverflow.com/questions/13664590/distance-between-two-pixel-locations

F3R7X0

He estado avanzando un poco durante la mañana pero ahora estoy de una mala hostia que no veais, ya me ha pasado otra vez y no se por que es, cuando creo una imagen o un boton en el .xml en la R.java no me crea nada y no puedo avanzar.

Gracias por todas las respuestas, a ver si puedo avanzar algo mas mañana y os voy enseñando como va quedando.

F3R7X0

No se si sería mucho pedir pero alguien tendría por ahi parte del código de como hacerlo, estoy verde verde xDDD.

Lo que llevo hecho es una pantalla principal con "Jugar" "Instrucciones" "Salir", funcionan todos bien, en el de jugar aparece una imagen y una cuenta atras debajo, cuando llega a 0 la imagen cambia a la misma pero con 4 diferencias ... hasta ahi llego, como sigo gente?

1 respuesta
Buffoncete

#11 No sería mejor poner las 2 imágenes a la vez? una arriba y otra abajo y fijar la vista a portrait.

Si cuanod creas una imagen no se añade en R es que tenías un error ya en el código, mira la pestaña de Errores y corrígelos todos, se te creará automáticamente.

y código no te vamos a poner, sorry, es una práctica que tienes que aprender a hacer tú, aquí se te dan las ideas sólo.

Pero supongo que la idea la tienes clara, no?

  1. El usuario hace click en la pantalla
  2. se genera un evento
  3. recibes el evento y obtienes las coordenadas x,y del click
  4. calculas para todos los puntos donde sabes que tienes una diferencia la distancia al click
  5. te quedas con el que menor distancia tiene
  6. si el que tiene la menor distancia vale menos de X (definido como constante) es que ha acertado.

Ahora traduce esto a código :P

1 respuesta
F3R7X0

#12 Lo de la R ya lo he solucionado, y tambien he conseguido hacer lo que queria, yo tenia pensado hacerlo como tu dices, poner dos imagenes siendo una la original y la otra con diferencias, pero me han dicho que no, que tiene que salir primero una y luego otra con cambios (para ejercitar la memoria).

Lo que llevo ya hecho es que cuando le das a jugar sale la imagen original y una cuenta atras, cuando esa cuenta llega a 0 (10 segundos) la imagen se modifica con 4 diferencias y si clickas correctamente en las 4 se desbloquea un boton para pasar a la siguiente.

Lo de encontrar las diferencias lo he hecho asi :

spoiler

no se si será lo mas correcto pero me funciona perfecto. (el aux es tipo boolean para que no se me repitan los if y que si le das dos veces a ese rango no te lo vuelva a contar)

F3R7X0

Soy un pesao lo se, pero os comento ... en teoria ya he acabado la aplicación, hay dos imagenes que aparecen y luego las mismas con diferencias, al darle a jugar te sale una imagen random asi no empiezas siempre por la misma, el único problema que tengo es que si ejecuto la aplicación en otro emulador de diferente tamaño se jode todo, por eso mi pregunta, como puedo optimizar la aplicación para diferentes tipos de pantalla???

2 respuestas
Li3cht

#14 Tienes que trabajar relativamente al tamaño de cada pantalla. Para esto nosotros lo hacemos así, en el MainActivity:

protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		int w = 0;
		int h = 0;
		Point size = new Point();
		WindowManager wm = getWindowManager();
		if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
			wm.getDefaultDisplay().getSize(size);
			w = size.x;
			h = size.y;
		} else {
			Display d = wm.getDefaultDisplay();
			w = d.getWidth();
			h = d.getHeight();
		}
		pantalla p = new pantalla(this, w, h);
		setContentView(p);
}

Lo de HONEYCOMB es por temas de deprecación. Ve acostumbrándote en Android xD.
Como puedes ver le pasamos w y h a nuestra clase pantalla (donde pintamos todo, en tu caso el juego) y trabajamos a partir de esas medidas. Si quisieras por ejemplo poner alguna cosa debajo de la pantalla harías que la posición fuese H-10 por ejemplo.

1 respuesta
bLero

#14 pues tienes 2 opciones:

1ª: Utilizas imágenes de distintas resoluciones para los distintos tamaños de pantalla, y por lo tanto diferentes coordenadas de las coincidencias y situas los archivos en las carpetas correspondientes al tipo de pantalla en /res. Esta es la forma más sencilla y además al utilizar varias imagenes con distintas resoluciones no se pixelará la imagen.

2ª: Programas la aplicación para una resolución fija (preferiblemente alta), por ejemplo 800x480 que es la típica, y reescalas el bitmap dependiendo de la resolución real de la pantalla.

1 respuesta
F3R7X0

#15 uf menudo lio, voy a ponerme a probar eso.
#16 como puedo en mi aplicación decirle que se ejecute en una resolución fija y que no me adapte todo??

Muchas gracias por vuestras respuestas :)

1 respuesta
bLero

#17

Te dejo este pequeño código:


// Quitamos el título de la ventana y mostramos la aplicación en pantalla completa
requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

// Comprobamos si la activity está definida como portrait o landscape
boolean isLandscape = getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE;

// creamos un framebuffer con resolución 800x480 o viceversa que será nuestra resolución de referencia (no la real)
int frameBufferWidth = isLandscape ? 800 : 480;
int frameBufferHeight = isLandscape ? 480 : 800;
Bitmap frameBuffer = Bitmap.createBitmap(frameBufferWidth, frameBufferHeight, Config.RGB_565);
        
// Obtenemos los factores de escala en función de la resolución real de la pantalla float scaleX = (float) frameBufferWidth / getWindowManager().getDefaultDisplay().getWidth(); float scaleY = (float) frameBufferHeight / getWindowManager().getDefaultDisplay().getHeight();

Tendrías que generar las imágenes con resolución 800x480 y dibujarlas en el framebuffer, después el framebuffer pintarlo en el canvas de un SurfaceView (escala el framebuffer automáticamente). Eso lo puedes hacer así (En una clase que extienda de SurfaceView):

SurfaceHolder holder = getHolder();
Rect dstRect = new Rect();
Canvas canvas = holder.lockCanvas();
canvas.getClipBounds(dstRect);
canvas.drawBitmap(framebuffer, null, dstRect, null);                           
holder.unlockCanvasAndPost(canvas);

los factores de escala los necesitas para después aplicarlos a los touchEvents, así que si tu dispositivo tiene resolución de 1280x600, al pulsar en la pantalla en el punto (800, 400) se correspondería con el punto (800scaleX, 400scaleY) de tu imagen de 800x480.

Espero que te haya servido.

Usuarios habituales

  • bLero
  • F3R7X0
  • Li3cht
  • JuAn4k4
  • eXtreM3
  • Lecherito
  • kassiusk1