miércoles, 26 de mayo de 2010

Imagenes en javaFX y juego simple

Bueno, ahora vamos a aprender a introducir una imagen en nuestro programa en javaFX, es muy facil y podemos hacerlo con este trozo de codigo:


ImageView {
image: Image {
url: "{__DIR__}imagen/campo.jpg"
}
}


Por supuesto sobre las imagenes podemos usar las funciones de ratón, teclado y todas las que hemos visto antes, si quereis poner la imagen en un sitio concreto solo tendreis que darle un valor a la x y la y del ImageView.

Bien, una vez visto esto decidí hacer un jueguito rapido, saldrá un plato en la pantalla al cual tendremos que disparar haciendole click con el ratón, una vez hecho esto aparecerá otro plato y asi iremos acumulando puntos, es algo cutre pero bueno, asi juntamos lo poquito que hemos ido viendo, aqui os dejo el codigo y también os dejo el proyecto para descargar "con las imagenes y todo incluido"


/*
* Main.fx
*
* Created on 26-may-2010, 10:35:52
*/

package jueguito;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.ext.swing.SwingButton;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
import javafx.scene.input.MouseEvent;
import javafx.scene.input.KeyEvent;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.ext.swing.SwingLabel;

//Incluimos la libreria Math para poder usar numeros aleatorios
import java.lang.Math;

/**
* @author Paco
*/

Stage {
title: "Jueguito de prueba"
scene: Scene {
width: 550
height: 369
//Variables que usaremos para el centro en los ejes X e Y de nuestra mira
var x = 100
var y = 50

//variables para posicion del plato
var xplato = 50
var yplato = 50

//Puntos acumulados
var puntos = 0

//Imagen de nuestra mirilla
var miMira = ImageView {
x: bind x, y: bind y
image: Image {
url: "{__DIR__}imagen/mira.jpg"
}
}

//Variable string que pinta la puntuacion en pantalla
var puntuacion = SwingLabel {
text: "0000000"
}

//Variable que se encarga de dibujar el plato en pantalla
var plato = ImageView {
x: bind xplato, y: bind yplato
image: Image {
url: "{__DIR__}imagen/plato.jpg"
}

//Cuando le hacemos click se lanzará esta funcion
onMouseClicked: function (e: MouseEvent): Void {
puntos= puntos + 10; //suma de puntos
puntuacion.text = puntos.toString(); //refresco del marcador en pantalla
//Colocamos el plato en una nueva posición
xplato = (Math.random() * 500).intValue();
yplato = (Math.random() * 360).intValue()
}

}

//Insertamos todo en nuestro content
content: [

//Dibujamos un fondo
ImageView {
image: Image {
url: "{__DIR__}imagen/campo.jpg"
}

//Funcion para que el raton siempre este en el centro de la mira
onMouseMoved: function (e: MouseEvent): Void {

//Resto estas cantidades porque la mira mide unos 40
x=e.x-21;
y=e.y-20;
}
}

//Coloco las imagenes en el orden que quiero
plato,miMira, puntuacion

]
}
}





Si copypasteais el codigo directamente no funcionará porque no teneis las imagenes que uso en los directorios, asi que como he dicho antes, aqui os dejo la descarga del proyecto:

2 comentarios:

Oscar Ivan Alvarado dijo...

Hola que tal, primero dejame felicitarte por tu post esta muy bien explicado, ahora bien me gustaria me ayudaras con un codigo que estoy asiendo se trata de un simulador (sencillo ya que soy novato) pero tengo problemas al usar el timeline puesto que necesito variar los tiempos acorde a una variable que sera modificada por el usuario, espero me puedas ayudar ya he buscado en internet pero nada respecto a mi problema y me gustaria (si sabes) me indicaras un sitio en donde se encuentre informacion respecto a esto, sin mas me despido y te deseo suerte

Francisco García Díaz dijo...

No tengo por aqui el netbeans pero te voy a contestar lo que creo que quieres saber:

var timeline = Timeline {
repeatCount: Timeline.INDEFINITE
keyFrames : [
KeyFrame {
time : 1s
action: function() {
actionOnTick();
}
}
]
}
timeline.play();


Usando esto tendras tu timeline preparado, si modificas el valor de time irá mas rapido o mas despacio.

El ejemplo lo he cogido de por ahi y no lo he podido comprobar pero vaya, ha de funcionarte :)