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:

viernes, 21 de mayo de 2010

Usando el ratón en javaFX

Bueno, ahora vamos a interaccionar con el programita con nuestro ratón "también podemos hacerlo con el teclado de similar forma" lo unico que tenemos que hacer es coger la función que deseemos de la paleta, en este caso onMouseDragged, aqui dejo el código comentado, pero no tiene mayor complicación, aun asi siempre podeis dejarme algun comentario si surge algunda duda:


/*
* Main.fx
*
* Created on 21-may-2010, 12:23:41
*/

package botones;

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;

/**
* @author Paco
*/

Stage {
title: "Aplicación de ratón"
scene: Scene {
width: 300
height: 300

var miCirculo = Circle {
//Variables que usaremos para el centro en los ejes X e Y de nuestro circulo
var x = 100
var y = 50

centerX: bind x, centerY: bind y //Posicion del circulo
radius: 20 //Tamaño del radio
fill: Color.BLACK //Color del circulo

//Esta funcion se ejecutará cuando tengamos el boton del raton pulsado y lo tengamos sobre el circulo
onMouseDragged: function (e: MouseEvent): Void {
//El centro del circulo lo situamos en la posicion x,y de nuestro ratón
x=e.x;
y=e.y;
}
}


content: [
//Ponemos el circulo en el content
miCirculo


]
}
}


Hasta otra, espero poder tener algo curiosito pronto.

martes, 18 de mayo de 2010

Añadiendo botones en javaFX

Bueno, sigo indagando poco a poco con javaFX y ahora interactuaremos con el programa, es muy simple pero asi ademas pongo en juego algún concepto nuevo como las variables y como funcionan o los metodos que tienen algunos objetos, el resultado será algo como esto:





Mas simple imposible, lo unico que hago es poner dos botones con los que podemos desplazar nuestro circulo hacia un lado o hacia otro, el código del mismo es este:


/*
* Main.fx
*
* Created on 18-may-2010, 10:44:54
*/

package botones;

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;

/**
* @author Paco
*/

Stage {
title: "Aplicación con botones"
scene: Scene {
width: 300
height: 80
//Vale vamos a declarar una variable, estas en un principio no tienen un tipo asignado
//el tipo de valor que tendrá dependerá del valor que le asignemos
//declararé un circulo como variable para poder cambiar sus valores mientras se usa el programa
var miCirculo = Circle {
centerX: 100, centerY:50 //Posicion del circulo
radius: 20 //Tamaño del radio
fill: Color.BLACK //Color del circulo
}


content: [
//Vale, pondremos dos botones para poder mover nuestro circulo a la izquierda
//y a la derecha, recuerdo que se puede hacer desde la paleta de netbeans
//algo que es muy comodo
SwingButton {
//Posicion y tamaño del boton
translateX: 0
translateY: 0
width:100
text: "<<" //Texto del boton
//Bien, ahora en action: function() podemos poner lo que queremos que suceda cuando
//pulsemos en el boton
action: function()
{
miCirculo.centerX=miCirculo.centerX-5; //en este caso desplazo el circulo a la izquierda
}
}

//Este botón funciona igual pero para desplazar el circulo en la otra direccion
SwingButton {
translateX: 110
translateY: 0
width:100
text: ">>"
action: function()
{
miCirculo.centerX=miCirculo.centerX+5;
}
}
//Inserto el circulo declarado en la ventana... esto lo hacemos porque si inserto aqui
//un circulo no podria cambiar sus valores pero al tenerlos todos en una variable eso cambia
miCirculo
]
}
}


Estas variables que tenemos que declarar antes del content pueden ser numeros enteros, flotantes, circulos, botones, cadenas de caracteres, etc. Depende de nuestra creativa mente el uso que les queramos dar, comento otra cosa, los objetos que tenemos en el content se dibujaran en ese orden, es decir, en este caso primero el botón <<, después el botón >> y por ultimo el circulo, ¿que quiere decir esto? que si ambos ocupan la misma posición en pantalla el circulo seria el que se veria delante de todos los elementos y el botón << se quedaria detras y por lo tanto invisible e inutilizado.

Para el proximo post intentaré insertar en web el programita que haga con javaFX, ahora mismo netbeans me genera una página html desde la que se accede al programa, asi que no creo que vaya a tener problema para pasar ese codigo al blog y hacer alguna demostración. Hasta otra.

lunes, 17 de mayo de 2010

Tutorial javaFX: Pintando formas simples

Debido a la escasez de material sobre javafx y aun siendo un poco nuevo con el,
voy a intentar hacer un tutorial de javafx, yo usaré NetBeans como IDE, también pensé en eclipse pero me daba muchos problemas a la hora de dejarlo todo listo para usar javafx podeis descargar netbeans para usarlo con javafx de aquí lo suyo para ahorrar en espacio es coger la que incluye solo javafx, pero eso ya al gusto de cada uno.

Bien, una vez tenemos instalado netbeans "Instalarlo es la tipica pantalla siguiente siguiente, sin mas" tendremos todo lo necesario para empezar, pulsamos sobre File/New Proyect y ya tendremos este codigo que nos genera por defecto:

/*
* Main.fx
*
* Created on 17-may-2010, 13:04:09
*/

package javafxapplication1;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;

/**
* @author Paco
*/

//Stage es el "main" de la aplicación
Stage {
//Esto es simple, es el titulo de la aplicación, es el texto que aparece
//en la parte superior de la ventanita
title: "Application title"
//La scene que incluimos dentro de la Stage es la ventana de nuestro programa
//y dentro es donde creamos todos los objetos y lo que queramos mostrar
scene: Scene {
//variables para definir el ancho y alto de nuestra ventana
width: 250
height: 80

//En el content es donde tenemos todos los elementos graficos que
//vamos a mostrar
content: [
//Con text insertamos un texto dentro de nuestro content
Text {
font : Font {
size : 16
}
x: 10
y: 30
content: "Application content"
}
]
}
}


Con este código se genera una ventana simple como esta:




Las lineas que tenemos aqui son realmente simples y las he dejado en ese mismo trozo de codigo comentadas, aunque ahora tocaremos un poquito el codigo.

Vamos a insertar en nuestra aplicación algunas formas, para eso nos vamos a la parte derecha a la paleta y pulsamos sobre basic shapes, vereis que tenemos varias formas como pueden ser lineas o circulos, podemos coger la que queramos y arrastrarla sobre el codigo, con lo que ya se genera un codigo genérico que podemos modificar para darle la forma que queramos, en mi caso he cogido el circulo y lo he arrastrado antes del text.

Ya con esto podemos poner varias formas sobre nuestra ventana y modificar tanto la ventana como las demas formas de tamaño y color


/*
* Main.fx
*
* Created on 17-may-2010, 13:04:09
*/

package javafxapplication1;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;

/**
* @author Paco
*/

//Stage es el "main" de la aplicación
Stage {
//Esto es simple, es el titulo de la aplicación, es el texto que aparece
//en la parte superior de la ventanita
title: "Application title"
//La scene que incluimos dentro de la Stage es la ventana de nuestro programa
//y dentro es donde creamos todos los objetos y lo que queramos mostrar
scene: Scene {
//variables para definir el ancho y alto de nuestra ventana
width: 250
height: 250

//En el content es donde tenemos todos los elementos graficos que
//vamos a mostrar
content: [

//Con circle pintamos nuestro circulo
Circle {
centerX: 100, centerY: 100 //Posición central en el eje X e Y de la ventana
radius: 40 //Tamaño del radio
fill: Color.RED //Color del relleno
}


//Con text insertamos un texto dentro de nuestro content
Text {
font : Font {
size : 16
}
x: 10
y: 30
content: "Application content"
}
]
}
}



viernes, 14 de mayo de 2010

Yoda nos advierte sobre el lado oscuro de los navegadores

Asi es, cuando ya creia que lo habia visto todo en cuanto a marketing nos encontramos con esta nueva y original idea de microsoft para potenciar el uso de internet explorer 8

Aqui tenemos a Yoda intentando guiarme por el camino de la luz


Cuando entre en la página con mi flamante mozilla firefox, Yoda me rechazó "igual que los jedis a anakin" haciendome saber lo terriblemente malvado que es mi navegador y que por su culpa sucumbiria al lado oscuro de la fuerza algo que solo podria solucionar formateando el ordenador entero y poniendo internet explorer 8, la página esta dividida en varias secciones accesibles clikando a los personajillos que aparecen en el mismo index, en otra de las secciones te cuenta lo maravilloso que es el navegador "lo tipico que te suelta cualquiera para dar a conocer su producto, todo ventajas y cero inconvenientes" bueno, la verdad es que te regalan unas pegatinas descargables muy tentadoras o algunas que solo puedes conseguir usando el maravilloso internet explorer 8

Este es el enlace a la web de la que hablo.

¿Y tu con que navegador te quedas?