Inicio > Java2D, Tutoriales > Movimiento de Sprites en Java

Movimiento de Sprites en Java

Saludos amigos, les traigo un pequeño tutorial de Movimiento de Sprites en Java. Uno de los motivos que me llevó ha realizarlo era la poca información que hay en español acerca de estos temas.
Lo primero que debemos hacer es crear nuestro proyecto para generar nuestra ventana, adjunto el código para centrarnos directamente en el movimiento de sprites.

Como veremos a continuación esta es nuestra clase inicial del Proyecto a que hemos llamado “Mover_Sprites”.

import javax.swing.JFrame;

public class Mover_Sprites extends JFrame{

 private static final long serialVersionUID = 1L;

 public Mover_Sprites()
 {
 add(new Escenario());
 setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
 setSize(640, 480);
 setLocationRelativeTo(null);
 setTitle("Mover Sprites");
 setResizable(false);
 setVisible(true);
 }

 public static void main(String[] args)
 {
 new Mover_Sprites();
 }
}

Ahora tenemos otra clase que será nuestro escenario principal, que será donde montaremos el fondo y el sprite que usaremos para movernos en la pantalla.

import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Toolkit;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.KeyAdapter;
import java.awt.event.KeyEvent;
import javax.swing.ImageIcon;
import javax.swing.JPanel;
import javax.swing.Timer;

public class Escenario extends JPanel implements ActionListener {
 /**
 *
 */
 private static final long serialVersionUID = 1L;
 private Timer timer;
 private Nave nave;
 private String escenario = "Luna_Espacio_640_480.jpg";
 ImageIcon image_icon;

 public Escenario(){

 addKeyListener(new TAdapter());
 setFocusable(true);
 setBackground(Color.BLACK);
 setDoubleBuffered(true);

 image_icon = new ImageIcon(this.getClass().getResource(escenario));

 nave = new Nave();
 timer = new Timer(5, this);
 timer.start();        
 }

 public void paint(Graphics g) {
 super.paint(g);

 Graphics2D g2d = (Graphics2D)g;
 g2d.drawImage(image_icon.getImage(), 0, 0, this);        
 g2d.drawImage(nave.getImage(), nave.getX(), nave.getY(), this);

 Toolkit.getDefaultToolkit().sync();
 g.dispose();
 }

 public void actionPerformed(ActionEvent e){
 nave.move();
 repaint();
 }

 private class TAdapter extends KeyAdapter{

 public void keyReleased(KeyEvent e){
 nave.keyReleased(e);
 }
 public void keyPressed(KeyEvent e){
 nave.keyPressed(e);
 }
 }
}

El método paint, se encarga de dibujar a nuestra nave para este caso y al escenario. Donde le indicaremos la imagen que queremos pintar y las coordenadas del objeto.

g2d.drawImage(nave.getImage(), nave.getX(), nave.getY(), this);

El método actionPerformed es llamado cada 5ms, que se encarga de pintar los movimientos del Sprite y del Escenario.

public void actionPerformed(ActionEvent e){
 nave.move();
 repaint();
 }

Nuestra clase Nave, será la que contendrá todos los movientos de nuestra nave.

import java.awt.Image;
import java.awt.event.KeyEvent;
import javax.swing.ImageIcon;

public class Nave {
 private String nave = "nave_pequeña.png";
 private int dx;
 private int dy;
 private int x;
 private int y;
 private Image image;

 public Nave()
 {        
 ImageIcon image_icon = new ImageIcon(this.getClass().getResource(nave));
 image = image_icon.getImage();
 x = 40;
 y = 60;
 }

 public void move()
 {
 if (dx > 0 && x <= 640 - 38)
 x += dx;
 else
 if (dx < 0 && x >= 2)
 x += dx;

 if (dy > 0 && y <= 480 - 50)
 y += dy;
 else
 if (dy < 0 && y >= 2)
 y += dy;

 }
 public int getX()
 {
 return x;
 }
 public int getY()
 {
 return y;
 }
 public Image getImage()
 {
 return image;
 }
 public void keyPressed(KeyEvent e)
 {
 int key = e.getKeyCode();

 if (key == KeyEvent.VK_RIGHT)
 {
 dx = 5;
 }
 if (key == KeyEvent.VK_LEFT)
 {
 dx = -5;
 }
 if (key == KeyEvent.VK_UP)
 {
 dy = -5;
 }
 if (key == KeyEvent.VK_DOWN)
 {
 dy = 5;
 }        
 }

 public void keyReleased(KeyEvent e)
 {
 int key = e.getKeyCode();

 if (key == KeyEvent.VK_RIGHT)
 {
 dx = 0;
 }
 if (key == KeyEvent.VK_LEFT)
 {
 dx = 0;
 }
 if (key == KeyEvent.VK_UP)
 {
 dy = 0;
 }
 if (key == KeyEvent.VK_DOWN)
 {
 dy = 0;
 }      
 }

}

Los métodos keyPressed y keyReleased, son los encargados de controlar los movimientos de nuestra nave tanto al presionar com al soltar las teclas.

El método move, cambia las coordenadas del Sprite, Estas con “X” y “Y” y estos valores son usados por el método paint para dibujar el Sprite en pantalla.

Aquí les presento 2 métodos uno simple que consiste solo en controlar los movimientos y otro un poco mas avanzado para darle una limitante a nuestra nave y no se salga de pantalla.

Método simple:

public void move(){
 x += dx;
 y += dy;
}

Método no tan simple, partiendo de este método pueden darle la limitante de pantalla a su nave, para este tutotial simplemente queme los bordes de la pantalla y los reste por el tamaño de la nave.

public void move()
{
 if (dx > 0 && x <= 640 - 38)
 x += dx;
 else
 if (dx < 0 && x >= 2)
 x += dx;
 if (dy > 0 && y <= 480 - 50)
 y += dy;
 else
 if (dy < 0 && y >= 2)
 y += dy;
}

Cuando soltemos la tecla izquierda del cursor, la nave se dentendrá. Lo mismo y controlando cada dirección haremos para el resto.

if (key == KeyEvent.VK_LEFT){
 dx = 0;
}

Resultado final.

Ejemplo de Movimiento de Sprites en Java

Ejemplo de Movimiento de Sprites en Java

Espero les sirva este pequeño tutorial y disculpen un poco la presentación del código pero soy un poco nuevo todavía pero ya iré mejorando.

Les dejo las imágenes del Proyecto:

Nave pequeña

Nave pequeña

Escenario

Escenario

Categorías:Java2D, Tutoriales Etiquetas: ,
  1. Cesar Mujica
    octubre 22, 2009 a las 9:30 am

    Que buen material, la descripción es bastante clara y aunque yo aun no se programar en java, más o menos voy entendiendo cómo hacerlo. Sólo unas sugerencias, podrias incluir el codigo fuente como una descarga o algo así, para que los novatos como yo podamos clavarle el diente y segundo, podrias explicar como construir el applet final.
    Sigue con estos temas que de seguro la comunidad necesita de tu ayuda.

  2. octubre 22, 2009 a las 9:45 am

    Ya voy ha hablar de eso, porque el tema solo esta enfocado al Movimiento de Sprites por pantalla. Cuando estaba desarrollando este tema me di cuenta de aquello pero es algo un poco mas extenso como tratarlo en un tema así que solo me enfoque en eso.

  3. juangui
    febrero 20, 2010 a las 1:52 am

    Excelente ejemplo y bien explicado…lo estoy analizando para entenderlo y aprender….pero me gustari saber como lo ejecuto para analizarlo aun mejor ya compile los tres fragmentos….y compilo bien….pero al ejecutar por ejemplo con:
    java.”nombredelarchivo”….me sale esto:

    Exception in thread “main” java.lang.NullPointerException
    at javax.swing.ImageIcon.(Unknown Source)
    at Escenario.(Escenario.java:30)
    at Mover_Sprites.(Mover_Sprites.java:9)
    at Mover_Sprites.main(Mover_Sprites.java:20)

    …me ayudas para poder ejecutarlo…gracias y disculpa la conchudez …..

  4. febrero 20, 2010 a las 7:35 am

    Tranquilo no hay problema, Lo que pasa es que la momento de cargar el escenario no encuentra la imagen de fondo: at javax.swing.ImageIcon.(Unknown Source). Mira que la referencia hacia el fondo sea la correcta.
    Si tienes mas problemas me comunicas. Gracias por comentar

  5. milo
    abril 15, 2010 a las 4:43 pm

    primero que todo agradezco este post esta muy chevere y esta muy bien explicado,gracias

    tengo una duda yo programo java en eclipse y me sale la excepcion que juangui comenta ya mire todo pero no la logro corregir, la verdad no se si se debe de guardar en una carpeta en especial

  6. abril 15, 2010 a las 10:20 pm

    De momento no tengo el eclipse, pero si mal no recuerdo puedes crear una carpeta dentro del proyecto y ahy poner la imagen que deseas cargar.
    La carpeta debería quedar cargada dentro de la carpeta “src” en tu proyecto, si haces eso la referencia de la imagen debería ser: “/carpetaimagen/tuimagen.jpg”
    Y si no creas la carpeta y la pones dentro de la carpeta “src” en tu proyecto, la referencia seria así: “/tuimagen.jpg”

    Espero te sirve, cualquier duda me consultas y gracias por comentar.

  7. Luis Loranca
    junio 20, 2010 a las 11:04 pm

    Hola! buenisima tu explicación, felicidades te quedó muy bien, podrías hablar un poco sobre el tema de las colisiones? gracias y saludos!!

  8. junio 20, 2010 a las 11:33 pm

    Gracias por comentar, si seguro el siguiente post hablaré sobre colisiones.

  9. roberth
    agosto 22, 2010 a las 12:00 pm

    hola amigo estoy haciendo un juego de rol en java y bueno quiero hacer que el persoaje se mueva conforme hago click en una posicion lo vi en un juego en seourceForge pero no hay el codigo quisiera que me ayudes con elgun codigo o algo.

    gracias

  10. agosto 23, 2010 a las 11:05 am

    En este enlace subi un pequeño proyecto donde se captura las coordenadas del Mouse, no tuve mucho tiempo para explicarlo pero es super sencillo y es poco el código.
    Revisalo y me comunicas culaquier cosa…. Disculpa la demora tengo unos proyectos que me consumen demasiado tiempo.

    http://www.4shared.com/file/B6j-Z-GN/Captura_Mouse.html

  11. shimo
    abril 12, 2011 a las 7:31 pm

    susper super geniall!! ojala y puedas subir mas ejemplos como estos pero uno en particula r con musica!! saludos

  12. FANATTICO
    junio 10, 2011 a las 8:52 pm

    solo dime como isiste esa nave con que programa esque no puedo aser una figura parecida, me aparece un rectangulo completo y dentro la figura;

    • junio 10, 2011 a las 9:24 pm

      no le estas poniendo transparencia a la imagen… yo use el photoshop ahí ponle fondo transparente al png de la nave..

  13. FANATTICO
    junio 11, 2011 a las 11:32 am

    gracias! lo intentare

  14. pito
    octubre 2, 2011 a las 1:59 am

    me dio este error su programa
    run:
    java.lang.NullPointerException

    me corria bie pero ahora ya no se que paso

  15. Vannessa
    octubre 30, 2011 a las 3:46 am

    esta muy bien el tutorial ami me sirvio mucho y corre perfectamente bien echo , ojala me puedas ayudar hacer pero q la imagen se mueve aleatoriamente por toda la pantalla…seria genial🙂

  16. Vannessa
    octubre 30, 2011 a las 3:52 am

    hola de nuevo tu post esta super, seria genial si hablas de coliciones como q ese tema no lo comprendo bien, las coliciones de los sprites, lo q pasa q tengo un proyecto.. es un juego y esta algo complicado ..

  17. octubre 31, 2011 a las 12:44 pm

    primero que nada gracias por el post esta muy muy bueno y bueno no me pude resistir a tu ejemplo, cosas que veo que faltarían:
    armar un escenario propio (no poner una imagen de fondo si no poner obstáculos y elementos extra o armar uno estilo TiledLayer de java ME)
    que gire la nave una rotación estaría muy bien elementos extra como que dispare o algo.

    bueno yo se que es mucho pedir y estar chingando de mi parte. gracias por el post.

    este tambien quiero saber tu opinion ya que java estardar en si no te da tantos elementos para poder hacer estas cositas facilmente…. entonces la pregunta es que opinas de meter librerias de java ME en una aplicacion java de escritorio?😄
    no tengo idea de que tal salga, es mas no se siquiera si se puede pero yo creo que si, asi que lo intentare, luego pongo aqui que tal salio.

    y vannessa si quieres yo te ayudo manejo coliciones mas o menos bien y lo de aleatorio me sale bien XD…
    solo esperame al domingo y le doy contigo si quieres… mientras tanto espero tu respuesta

    • octubre 31, 2011 a las 2:27 pm

      Hola Sergio, te cuento que ya actualmente trabajo en Unity y IOS. En Java avance hasta este link que que te comparto.

      http://www.antocode.net/2010/10/19/prototipo-19-86-desarrollado-en-java-2d/

      Que tipo de proyecto estas trabajando???

      • octubre 31, 2011 a las 4:14 pm

        hola xD
        gracias por contestar

        estoy trabajando en un juego especificamente un laberinto espero que vuele por la red en un applet. la complicacion es que el laberinto se genera aleatoriamente y es un poco dificil hacer un laberinto “perfecto” y ademas parte del juego es pasar ciertos obstaculos por ahi y bueno a ver donde demonios los suelto de tal manera que le estorben para llegar a la meta.

        ya veo que metiste todo eso😄
        y bueno veo y quiero pensar que Unity es lo que te ayuda a manejar las imagenes como sprites que es a lo que quiero llegar con el java ME

        me interesa como estas generando que el fondo se repita y vuelva a entrar en el.

        ya meti la libreria correcta me costo un poco de busqueda, pero ya estoy con sprites y el laberinto armado con TiledLayer sobre un canvas, no lo he probado aun pero el codigo se ve bien xD

      • octubre 31, 2011 a las 4:52 pm

        Unity3d es un engine Para desarrollo de videojuegos.. Revisalo es increíble.
        Lo del fondo lo puse en unos while son tres imágenes que van pasando una vez llegada al final la vuelvo a pasar y ese efecto de profundidad se usa pasandolas a diferentes velocidades. Es una comedera de cabeza pero ya cuando le encuentras el tino se te hace mas sencillo. Aparte que trabajo con un diseñador gráfico y me ayuda bastante con ese tipo de detalles y a crear los gráficos.
        Sobre que estas haciendo un applet, pienso que es mas sencillo el Unity puedes hacer cosas súper rápido.
        Mira uno de mis demos en Unity.

        Trashbot.net

        Mira que te parece y ti dirás cual eligieras a estas alturas que en cuanto a motores hay algunos fáciles de usar y muy potentes.

      • octubre 31, 2011 a las 6:19 pm

        si me late ya que lo del midlet fallo XDD
        ya al momento de crear las cosas hace distincion de graphics de awt y de las de microedition y pues ni idea de como vonvertirlas.T_T perdi mas o menos mi tiempo voy a ver el motor y ojala dios me ayude que el miercoles dare una conferencia sobre el😄

        gracias por tu ayuda

  18. vannessa
    noviembre 1, 2011 a las 1:50 am

    gracias por contestar.. pero si eso es lo q me interesa colisiones ..tengo de proyecto hacer un juego are un juego parecido al de bomberman y mi problema son las coliciones🙂 ayuda por fa y de nuevo gracias por la atencion cool.

    • noviembre 3, 2011 a las 11:00 am

      Vannessa, disculpa la demora. Con este codigo manejo las colisiones de las balas de la nave con los enemigos que te enseñe.
      Todo es asociar a un rectangulo tu sprite y luego ver si se intersecta, estas colisiones son muy basicas pero sirven bastante.

      /*** METODO DE COLISIONES ***/
      public void Colisiones() {
      Rectangle rect_disparo = naves.getBounds_disparo();
      Rectangle rect_marciano = enemigos.getBounds_ene_001();

      //Validacion de Interseccion para enemigo 01
      if (rect_marciano.intersects(rect_disparo))
      {
      setColision_ene_01(true);

      audio.Setea_Explosion_ene_01();
      audio.getExplosion_ene_01().start();
      audio.getExplosion_ene_01().flush();
      //long valor = audio.getExplosion_ene_01().getMicrosecondLength();

      //Thread.sleep(1000);

      //audio.getExplosion_ene_01().close();

      }

  19. vannessa
    noviembre 6, 2011 a las 3:22 am

    gracias …si entiendo poco el concepto🙂 disculpa sabras algo de mapeo de imagenes…lo quiero hacer para el fondo bueno para el ecenario🙂 plis!!!!

    • noviembre 6, 2011 a las 7:42 am

      Mapeo de imágenes??? Yo hice el fondo colocando imágenes de diferentes tamaños y que se muevan a diferente velocidad. Con esto le das un efecto de profundidad. Si te refieres a la puesta de imágenes, use los mismos métodos que uso para cargar la nave. Al fin y al cabo son imágenes.. A eso te refieres????

  20. Vannessa
    noviembre 6, 2011 a las 7:41 pm

    lo q pasa q hay una manera de hacer el fondo con pequenias imagenes png y se hace una matriz de esas imagenes algo como asi matriz[][] = {
    (‘1′,’ ‘,’1′,’1′,’1′,’1′,’1′,’1′,’1′,’1′,’1′,’1′,’1′,’1′,’1′,’1′,’1′,’1′,’1′,’1′,’1′,’1′,’1’),
    }; donde los unos son las paredes y los espacios son por donde puede pasar el spritees pero no se bien como hacer hice eso y me marco error😦

  21. Vannessa
    noviembre 6, 2011 a las 7:45 pm

    tambien otra cosa como le puedo hacer para q el sprites se mire q cambia de posicion si va hacia arriba oa los lados?

  22. yop
    noviembre 25, 2012 a las 8:48 pm

    jumm que raro se parece mucho a un tutorial que publique en video hace tiempo

  23. Ralf
    enero 6, 2013 a las 9:03 am

    hola una consulta como hago para poder crear un escenario tipo starcraft,que visualice una pantalla principal(donde tengo mis unidades) y el resto de la pantalla no la veo pero al mover el cursor enfoco lo demas de pnatalla. me podrian ayudar gracias.

  24. Linhet
    marzo 7, 2013 a las 9:45 pm

    en donde guardo las imagenes en la carpeta Src??

  25. meer
    abril 23, 2013 a las 5:46 pm

    me aparece esto al compilar mas como se le hace referencia a la imagen del escenario
    Exception in thread “main” java.lang.NullPointerException
    at javax.swing.ImageIcon.(Unknown Source)
    at Escenario.(Escenario.java:31)
    at Mover_Sprites.(Mover_Sprites.java:9)
    at Mover_Sprites.main(Mover_Sprites.java:20)

    • dans
      febrero 16, 2014 a las 9:28 pm

      si guardala en la src ahi creas otra carpeta y dentro de ella le pones las imagenes ..
      a por cierto en la clase escenario buscas la variable escenario y le pones el pones asi…
      String escenario = “/nombre de la carpeta donde estan las imagenes/nombre de la imagen”
      y haces lo mismo en la clase nave…. saludos =) espero k te sirva yo tambien estaba en eso… el problema fue la ubicaciuon y el nombre de las imagenes…

  26. mayo 30, 2013 a las 11:17 pm

    Esta super, pero si quisiera agregar otra nave distinta “otro png” como seria

  27. junio 25, 2013 a las 1:35 pm

    Through seo services Singapore you will be able to add value to your website, increase your search engine
    rankings thus increasing traffic for your website. If you’re a neighborhood organization, We’ve beneficial news for you.
    Your market research must be for your real problem not for imaginary
    one.

  28. julio 5, 2013 a las 2:46 pm

    I was recommended this website by means of my cousin. I
    am no longer certain whether this put up is written by means of him as nobody else know such certain about my trouble.
    You are wonderful! Thanks!

  29. Allan August
    noviembre 10, 2013 a las 5:23 pm

    a mi me gustaria saber como programar para que se ejecute un mensaje animado como en los video juegos ; por ejemplo si un personaje agarra una moneda y sale un mensaje 5pts animado sabrias donde podria encontrar informacion acerca de esto. te lo voy a agradecer saludos

  30. jesus atenco
    diciembre 15, 2013 a las 12:53 am

    me sale error … dice que se encuentra la imagen… donde la coloco??
    … responde por fa…

  31. ernestp
    mayo 17, 2015 a las 4:38 pm

    una consulta me corrio el codigo pero la imagen de la nave no se mueve se queda statica, estoy haciendo un proyecyo lo unico que lo que se tiene que mover es el fondo

  32. Mauricio
    abril 25, 2016 a las 9:33 am

    Hola gracias por este tutorial, he logrado arreglar el problema de la ruta de las imagines pero aun no me funciona, sigue saliendo estos tres problemas
    Escenario.(Escenario.java:31)
    Mover_Sprites.(Mover_Sprites.java:9)
    Mover_Sprites.main(Mover_Sprites.java:20)

  33. mayo 3, 2016 a las 3:05 am

    Hola gracias por compartir tus conocimientos… solo que tengo una duda al momento de ejecutar el proyecto me aparece este error:

    Exception in thread “main” java.lang.NullPointerException
    at javax.swing.ImageIcon.(ImageIcon.java:217)
    at fondopantalla.Escenario.(Escenario.java:44)
    at fondopantalla.Movimiento.(Movimiento.java:25)
    at fondopantalla.FondoPantalla.main(FondoPantalla.java:21)
    C:\Users\One\AppData\Local\NetBeans\Cache\8.1\executor-snippets\run.xml:53: Java returned: 1

    pero en mi codigo no aparece ninguna advertencia en el ide el cual es netbeans espero puedas ayudarme en cuanto a este asunto gracias

  1. agosto 16, 2014 a las 3:09 am
  2. septiembre 5, 2014 a las 6:25 am
  3. octubre 12, 2014 a las 9:10 pm
  4. noviembre 11, 2014 a las 9:53 pm
  5. marzo 26, 2015 a las 1:28 am
  6. julio 12, 2015 a las 10:03 pm
  7. julio 20, 2015 a las 8:12 pm
  8. agosto 21, 2015 a las 3:48 am
  9. octubre 10, 2015 a las 11:48 pm
  10. julio 3, 2016 a las 1:41 pm

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: