Fecha y hora actual: Sábado 16 Dic 2017 06:17
Índice del Foro

Foros de programación informática, diseño gráfico y Web

En esta comunidad intentaremos dar soporte de programación a todos los niveles, desde principiantes a profesionales de la informática, desarrollo de programas, programación web y mucho más.

[TUTORIAL] Primeros pasos para usar Box2D con SFML (I de II)

Responder al Tema

Índice del Foro > Programación de juegos o videojuegos > [TUTORIAL] Primeros pasos para usar Box2D con SFML (I de II)

Autor Mensaje
unsigned char*
Usuario Activo


Registrado: 03 Abr 2012
Mensajes: 599
Ubicación: Aqui

Mensaje Publicado: Sábado 24 Ago 2013 03:35

Título del mensaje: [TUTORIAL] Primeros pasos para usar Box2D con SFML (I de II)

Responder citando

Buenas, en estos dos tutoriales intentare mostrar como usar Box2D con SFML para crear colisiones realistas y por ende juegos mas vistosos. Doy por entendido que si estas aqui es por que tienes un nivel medio en el uso de C++, ademas no me pienso parar mucho o nada en que hace cada objeto de SFML... me centrare en la parte de Box2D.

Este el primer capitulo (por llamarlo de alguna manera) en el que mostrare como preparar el IDE Code::Blocks para trabajar con SFML.




1. DESCARGAR SFML
a) Ir a la siguiente web y seleccionar la version pertinente (Seguramente sea 'GCC 4.7 TDM (SJLJ) - 32 bits'): http://www.sfml-dev.org/download/sfml/2.1/

2. CONFIGURAR CODE::BLOCK PARA USAR SFML
a) Creamos un proyecto nuevo FILE > NEW > PROJECT...

b) En la ventana New from template seleccionaremos Empty project

c) En la ventana Empty project pondremos un titulo al projecto, donde pone Project title: escribimos MiProyecto
Tambien es necesario indicar donde se guardará el proyecto, en mi caso lo pondre en 'c:\Programacion'
Pulsamos el boton Next >

En la siguiente pantalla, para nuestro ejemplo solo dejaremos checkeada la opcion Create "Release" configuration
Pulsamos el boton Finish

Código:
Ahora, abrimos la carpeta 'c:\Programacion\MiProyecto' y creamos la carpeta 'external', dentro de esta carpeta descomprimimos el archivo descargado de la web de SFML.


d) En Management marcamos 'MiProyecto' y sacamos el menu derecho, seleccionamos Build Options...

e) En la ventana Project build options dentro de la pestaña Compiler settings vas a la pestaña #defines y escribes SFML_STATIC

Ahora vamos a la pestaña Linker settings en donde pone Other linker options: ponemos lo siguiente (incluidos los guiones):
-lsfml-graphics-s
-lsfml-window-s
-lsfml-system-s


Ahora vamos a la pestaña Search directories, alli en la pestaña Compiler añadimos la carpeta include de SFML que en mi caso esta en C:\Programacion\MiProyecto\external\SFML-2.1
Pulsamos aceptar, saldra un cuadro preguntadonos si queremos incluir el path relativo, pulsamos en 'Si' y luego en la ventana Add directory pulsamos en Ok
Ahora vamos a la pestaña Linker y añadimos la carpeta lib de SFML que en mi caso esta en C:\Programacion\MiProyecto\external\SFML-2.1\
Volvemos a indicar que si queremos incluir el path relativo y aceptamos la ruta
Ya esta todo configurado para usar SFML, en la ventana Project build options pulsamos en Ok

3. EMPEZANDO LA FAENA: NUESTRO ENGINE SIMPLE DE EJEMPLO
a) Pinchamos en el icono con un folio y un mas (en la toolbar) y seleccionamos Empty File

b) En al ventana Add file to project pulsamos el boton Si

c) Se abrira una ventana para indicar donde guardaremos el archivo, creamos una carpeta nueva llamada src y guardamos alli dentro el archivo con el nombre main.cpp [C:\Programacion\MiProyecto\src\main.cpp]

d) Escribimos lo siguiente:

Código:
  1.  
  2. #include <SFML/Graphics.hpp>
  3.  
  4. int main()
  5. {
  6. // Crear ventana
  7. sf::RenderWindow window(sf::VideoMode(800, 600), "Prueba Box2D");
  8.  
  9. // Bucle del juego
  10. while (window.isOpen())
  11. {
  12. // Bucle de Eventos de ventana
  13. sf::Event event;
  14. while (window.pollEvent(event))
  15. {
  16. // Cerrar la ventana cuando se pulsa en el boton de cerrar ventana
  17. if (event.type == sf::Event::Closed)
  18. window.close();
  19. }
  20.  
  21. // Limpiar ventana con el color negro
  22. window.clear(sf::Color::Black);
  23.  
  24. // Dibujamos un rectangulo que actuara de suelo mas adelante
  25. sf::RectangleShape rectSuelo(sf::Vector2f(800, 100));
  26. rectSuelo.setPosition(sf::Vector2f(0, 500));
  27. rectSuelo.setFillColor(sf::Color::Red);
  28. window.draw(rectSuelo); //Dibujamos el elemento en el buffer
  29.  
  30. // Mostrar el buffer en pantalla
  31. window.display();
  32. }
  33.  
  34. return 0;
  35. }
  36.  


e) Pulsamos en el boton con un simbolo de 'play' en verde y un engranaje detras... comprobamos que se compila correctamente y nos sale algo como esto:



f) Ampliamos nuestro codigo para que dibuje un cuadrado donde el usuario haga click izquierdo:
Código:
  1.  
  2. #include <SFML/Graphics.hpp>
  3.  
  4.  
  5. //Estructura con los datos para representar una caja
  6. struct Caja
  7. {
  8. Caja()
  9. {
  10. m_Pos = sf::Vector2f(.0f, .0f);
  11. m_Size = sf::Vector2f(50.0f, 50.0f);
  12. }
  13. Caja(sf::Vector2f pos, sf::Vector2f size = sf::Vector2f(50.0f, 50.0f))
  14. {
  15. m_Pos = pos;
  16. m_Size = size;
  17. }
  18.  
  19. sf::Vector2f m_Pos;
  20. sf::Vector2f m_Size;
  21. };
  22.  
  23.  
  24. int main()
  25. {
  26. //Vector con las cajas a dibujar
  27. std::vector<Caja> m_vCajas;
  28.  
  29. // Crear ventana
  30. sf::RenderWindow window(sf::VideoMode(800, 600), "Prueba Box2D");
  31.  
  32. // Bucle del juego
  33. while (window.isOpen())
  34. {
  35. // Bucle de Eventos de ventana
  36. sf::Event event;
  37. while (window.pollEvent(event))
  38. {
  39. // Cerrar la ventana cuando se pulsa en el boton de cerrar ventana
  40. if (event.type == sf::Event::Closed)
  41. window.close();
  42.  
  43. // Crear una caja donde el usuario hace click izquierdo
  44. if (event.type == sf::Event::MouseButtonPressed)
  45. {
  46. if (event.mouseButton.button == sf::Mouse::Left)
  47. {
  48. int randSize = 50 + rand()%(100+1 - 50);
  49. sf::Vector2f posCaja = sf::Vector2f(event.mouseButton.x-randSize/2, event.mouseButton.y-randSize/2);
  50. Caja nuevaCaja = Caja(posCaja, sf::Vector2f(randSize, randSize));
  51. m_vCajas.push_back(nuevaCaja);
  52. }
  53. }
  54. }
  55.  
  56. // Limpiar ventana con el color negro
  57. window.clear(sf::Color::Black);
  58.  
  59. // Dibujamos las cajas creadas por el usuario
  60. for (std::vector<Caja>::iterator it = m_vCajas.begin(); it != m_vCajas.end(); ++it)
  61. {
  62. sf::RectangleShape rectCaja((*it).m_Size);
  63. rectCaja.setPosition((*it).m_Pos);
  64. rectCaja.setFillColor(sf::Color::Red);
  65. window.draw(rectCaja); //Dibujamos el elemento en el buffer
  66. }
  67.  
  68. // Dibujamos un rectangulo que actuara de suelo mas adelante
  69. sf::RectangleShape rectSuelo(sf::Vector2f(800, 100));
  70. rectSuelo.setPosition(sf::Vector2f(0, 500));
  71. rectSuelo.setFillColor(sf::Color::Red);
  72. window.draw(rectSuelo); //Dibujamos el elemento en el buffer
  73.  
  74. // Mostrar el buffer en pantalla
  75. window.display();
  76. }
  77.  
  78. return 0;
  79. }
  80.  


g) Compilamos y comprobamos que todo funciona correctamente




SIGUIENTE PASO: CONFIGURANDO CODE::BLOCKS PARA USAR BOX2D...


++++++++++[>++++++++>++++++++>++++>+++<<<<-]>+++++.>--.<--.>-----.--.+++++++.---------.-.>>++.<<-.+++++.-------.<-.>>++.
Volver arriba
Ver perfil del usuario Enviar mensaje privado
Manuel González
Usuario Activo


Registrado: 05 Jun 2011
Mensajes: 433
Ubicación: Venezuela-Miranda

Mensaje Publicado: Sábado 21 Sep 2013 23:31

Título del mensaje: Re: [TUTORIAL] Primeros pasos para usar Box2D con SFML (I de

Responder citando

Hey está genial unsigned ! Guiño Ok


“pero si estudias computación deberías saber usar todos los programas”
conclusion:Usuario no es gente.

mi blog Ordenador
Volver arriba
Ver perfil del usuario Enviar mensaje privado Enviar correo Visitar sitio web del autor
unsigned char*
Usuario Activo


Registrado: 03 Abr 2012
Mensajes: 599
Ubicación: Aqui

Mensaje Publicado: Martes 01 Oct 2013 10:33

Título del mensaje: Re: [TUTORIAL] Primeros pasos para usar Box2D con SFML (I de

Responder citando

Gracias Manuel González Guiño


++++++++++[>++++++++>++++++++>++++>+++<<<<-]>+++++.>--.<--.>-----.--.+++++++.---------.-.>>++.<<-.+++++.-------.<-.>>++.
Volver arriba
Ver perfil del usuario Enviar mensaje privado
Responder al Tema
Mostrar mensajes anteriores:   
Ir a:  
Todas las horas están en GMT + 1 Hora

Temas relacionados

Tema Autor Foros Respuestas Publicado
El foro no contiene ningún mensaje nuevo

Problema para extracción de datos utilizando py...

liz Python 1 Viernes 06 Oct 2017 10:05 Ver último mensaje
El foro no contiene ningún mensaje nuevo

Se requiere programador para Proyecto de Juego,...

Otilio Programación de juegos o videojuegos 5 Lunes 02 Oct 2017 23:04 Ver último mensaje
El foro no contiene ningún mensaje nuevo

Busco Programador C++ para Base de Datos y/o di...

RmBeer Bolsa de trabajo 0 Lunes 12 Jun 2017 23:24 Ver último mensaje
El foro no contiene ningún mensaje nuevo

Un código para traducir en varios idiomas [jav...

P3p3 JavaScript 2 Lunes 12 Jun 2017 21:59 Ver último mensaje
El foro no contiene ningún mensaje nuevo

Evento youtube javascript para galeria de video...

Adum JavaScript 7 Sábado 20 May 2017 04:36 Ver último mensaje
Panel de Control
No puede crear mensajes, No puede responder temas, No puede editar sus mensajes, No puede borrar sus mensajes, No puede votar en encuestas,