Juego de rol 2D 78: interfaz de usuario III

En este tercer episodio dedicado a la interfaz de usuario, terminaremos de preparar nuestro último componente del menú inferior: las ranuras para objetos.

Recordemos que actualmente estamos diseñando la interfaz de usuario simplemente para ver cómo quedaría estéticamente, pues todavía no funciona nada excepto la barra de resistencia.

Puesto que actualmente todavía no hemos implementado ninguna característica en nuestro personaje, tendremos que inventarnos todos o casi todos los datos que se van a mostrar en la interfaz de usuario hasta que tengamos unos reales con los que trabajar.

Así pues, la idea consiste en utilizar toda la parte derecha del menú de juego para colocar dentro 10 ranuras para objetos.

Normalmente, en cualquier juego de rol, estas ranuras de la interfaz de usuario son cuadradas y dentro se pueden colocar objetos, habilidades, equipamiento, etc. También es corriente que cerca de cada ranura se indique qué tecla permite utilizar lo que hay en la ranura. Algunos casos típicos son el uso de las teclas “QWERTYUIOP”, debido a que son 10 teclas que están en fila una detrás de otra. Otros casos corrientes son el uso de los números desde 1 al 0 o las teclas desde F1 hasta F12 (aunque puede variar, dependiendo de si hay atajos como guardado rápido o cargado rápido asignados a las teclas F).

En cualquier caso, para simular este tipo de inventario, debemos pasar por dos operaciones. La primera consiste en dibujar secuencialmente los 10 rectángulos en la parte derecha del menú. Esto parece sencillo, pero realmente hay que tener cuidado al hacerlo ya que hay que calcular el margen que tendrá el grupo de elementos respecto al menú y el margen que tendrá cada elemento respecto a los elementos próximos al mismo. Al final, esto pasa por decidir un margen fijo (en mi ejemplo son 4 píxeles) y aplicarlo a todo.

La segunda parte consiste en dibujar debajo de cada ranura la tecla que supuestamente la activaría (recordemos, todavía no funcionaría, sólo lo hacemos para ver cómo queda). Así pues, una vez sabiendo la localización de las ranuras, aprovechando el mismo bucle FOR, podemos ir escribiendo el propio valor del iterador i del bucle para escribir los números del 0 al 9. No es real, pero queda bien hasta que tengamos algo con lo que trabajar.

¿Te ha gustado? ¡Colabora en Patreon!

4 comentarios

  • Hola JavaDevOne.

    Queria comentarte que en el tutorial 5 de esta serie (FPS), en el “if” que escribistes (System.nanoTime() = referenciaContador > NS_POR_SEGUNDO), eclipse me lo marca como error. El error ponia:”El lado izquierdo de una asignación debe ser una variable”. En el video trabajabas en java 7, yo desarroyo en java 8. ¿Crees que le error es por la version de java?

    Un saludo.

    • Sé lo que dices, pero te has confundido, en parte por culpa de que ese episodio no tiene zoom, en parte porque tal vez no me escucharías bien. Es “if (System.nanoTime() – referenciaContador > NS_POR_SEGUNDO)”, ya que has confundido el “-” con un “=”. La versión de Java da igual, el código mal escrito está mal escrito. Además, nanoTime() es de la versión 5, así que debería ir con cualquier versión igual o superior a la 5.

      Por suerte, luego me dí cuenta de que la calidad del vídeo podía ser mejor y comencé a usar mucho zoom, para que nadie se equivoque con esas cosas.

  • Hola JavaDevOne, bueno me dirijo a ti con este nombre por que en realidad no se como te llamas.

    Lo primero felicitarte por tú trabajo, te vengo siguiendo desde que descubrí el canal en youtube, espero que sigas así.

    Una consulta que me gustaría hacerte. Yo me dedico también a mundo del desarrollo, y como tú curse DAM, bueno creo recordar que cursarte DAW. El caso es que me dedico a hacer bastantes aplicaciones de escritorio con Java y colaboraciones en Java 2EE, y actualmente me encuentro haciendo un master para el desarrollo de aplicaciones para IOS y Android, tanto la parte de front-end con Angular.js, como back-end con Node.js, etc etc.

    Bueno al grano, resulta que me han encargado realizar un juego de dominó con unas determinadas reglas, eso es lo de menos por que los algoritmos ya los tengo, pero la parte que no domino es justo la de crear un juego para web, bien en un applet, en html5, pero no domino la parte de WebGL y estaba viendo realizarlo en Libgdx, pero descubrí tú canal y la verdad es que me siento más cómodo trabajando con el lenguaje nativo, me da más seguridad y control de lo que hago a la vez de que sé lo que estoy haciendo.

    Bueno el tema era pedirte consejo o si me podías orientar un poco, sobre todo en la parte de la implementación gráfica de éste, (estoy siguiendo tú curso de Juego de rol 2D), es decir, como implementar los sprites de las fichas, como se situarían en el tablero según cada tirada, etc etc, es que en ese sentido si estoy bastante pez, no así en el tema de distribuir las fichas de cada jugador ni el poder conectarse a través de cliente-servidor para opción de multiplayer, donde no tengo soltura es justo en lo que estás desarrollando en el curso que te acabo de comentar que estoy siguiendo (por lo menos hasta lo que llevo visto), el poder asignar a cada ficha su valor correspondiente y que se dibuje en el tablero, el posicionamiento de las fichas en el tablero (es decir en la ventana o JFrame), y que el juego se vaya actualizando con cada movimiento de fichas o tirada de cada jugador participante, la parte de algoritmia no tengo problemas.

    Bueno espero haberme explicado medianamente, y sería de gran ayuda si me pudieras orientar, no obstante entiendo que no puedas o no tengas tiempo, todos andamos muy liados, igualmente te doy las gracias, y si no puedes a ver si con tus cursos puedo aclarar las ideas, aunque ya he realizado los diez primeros y veo como va el tema del canvas y tal.

    Bueno sin nada más, que no es poco, recibe un cordial saludo.
    Carlos

    • Hola Carlos.

      Es interesante y no debería llevarte mucho esfuerzo hacer tu juego de dominó (por supuesto, depende de las reglas). En primer lugar, creo que en vez de Java deberías usar Javascript con el Canvas de HTML5, ya que hacer un applet de Java es tal vez demasiado complejo para un juego así (además, Java tiene demasiadas restricciones de seguridad en su web applet y cada vez se usa menos para este propósito, aunque sigue siendo muy buen lenguaje para aplicaciones o juegos de escritorio).

      Lo que se ha hecho en la serie del juego de rol lo puedes aplicar perfectamente a JavaScript (lenguaje que imagino que dominarás bien si estás con Angular y Node). Evidentemente, la sintaxis y los nombres de los métodos/funciones no son los mismos, pero en general siempre hay técnicas equivalentes.

      Para los gráficos, es tan sencillo como crear un componente Canvas de HTML5 y trabajar con el usando JavaScript (puedes encontrar numerosos manuales en Internet sobre cómo trabajar con Canvas y el Context2d). Para los sprites de las fichas y de cualquier otro tipo, deberías crear objetos Image en JavaScript y cargar tus archivos al iniciar (consulta la documentación, es muy fácil: sólo tienes que usar un método que te carga la imagen de una ruta que tú proporciones). Una vez tengas las imágenes cargadas en la RAM, en términos generales trabajarías con los gráficos igual que en Java: tendrías tu objeto g (de contexto gráfico) y con el puedes dibujar las imágenes, rectángulos, líneas, cambiar el color, escribir Strings y muchas más cosas.

      Si tienes clara la parte técnica de cómo dibujar, el resto es fácil que es casi igual que la serie del juego de rol 2D, pues los conceptos y técnicas son los mismos.

      Además, usando JavaScript lograrías que tu juego sea más compatible y funcione también en smartphones y tablets, cosa que con Java seguramente no lograrías.

      Saludos.

Leave a Reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *