Mundo Maker
¡Bienvenid@ a Mundo Maker!

¿Quieres aprender todo sobre el RPG Maker?



Regístrate y forma parte de Mundo Maker.
Conectarse

Recuperar mi contraseña

Temas importantes
----------------------------------------
Páginas con recursos RPG Maker
----------------------------------------
----------------------------------------
----------------------------------------
----------------------------------------
----------------------------------------
----------------------------------------
----------------------------------------
----------------------------------------
----------------------------------------
Afiliados
Estadísticas
Tenemos 3821 miembros registrados.
El último usuario registrado es MikeWasauski.

Nuestros miembros han publicado un total de 86298 mensajes en 12302 argumentos.

Interfaces: diseño y programacion

Ver el tema anterior Ver el tema siguiente Ir abajo

Interfaces: diseño y programacion

Mensaje por xn1 el 2011-11-07, 21:20

Atención antes de leer la guía aclaro un par de cosas.
1.No explicare a fondo como programar barras de vida y otros elementos ya que considero que la mayoría sabe como hacerlo.
En caso que no saber favor leer estos tutoriales y regresar mas tarde
http://comunidad.rpgmaker.es/viewtopic.php?f=19&t=13526&p=88032&hilit=barra+de+vida#p88032
http://comunidad.rpgmaker.es/viewtopic.php?f=19&t=13594&p=88591&hilit=barra+de+vida#p88591

2.Esto no es un tutorial de pixel art acerca de como dibujar elementos de una interfaz aunque hablo sobre
el diseño de los mismos no indago acerca de como dibujarlas.

3.Solo lo publicare aquí y en comunidad RPG maker.
Aunque no tengo ningún problema en que la copies y la pongas
en algún otro sitio

3.En este tutorial me refiero a interfaces usuario maquina.
No de maquina a maquina aunque también existen.


Interfaces: diseño y programacion
Al iniciar con este tema debemos aclarar un concepto
¿Que es una interfaz de usuario?
Una interfaz de usuario es el medio mediante el cual un humano se comunica con una maquina
La informacion que pasa a traves de ella puede ir de dos formas:
-entrada
-salida

Una entrada es un control ya sea físico o virtual mediante el cual el usuario le da ordenes a la maquina.
Una salida es un medio por donde el cual se le comunica la información al usuario.
En el caso de las computadoras las entradas físicas suelen ser teclado, mouse, palanca, etc
las entradas virtuales son controles de formulario como botones, comandos escritos, barras de desplazamiento, etc
y las salidas suelen ser la pantalla, los parlantes, etc.
Una buena interfaz debe:
-ser fácil de entender
-ser agradable al trabajar con ella
-consumir pocos recursos
-no estar de mas
-no distraer al usuario


Ahora que hemos definido bien que es pasaremos a lo que mas interesa
aplicarlas a los videojuegos

En el caso de los videojuegos para su mejor análisis dividiré el tipo de interfaces que el
programador debe tomar en cuenta en:
-Esquema de controles
-GUI


Esquema de controles
Plantearse bien el esquema de controles es uno de los aspectos mas importantes del juego
un juego con controles confusos y que requieran movimientos extraños sera dificil para
el jugador si no me crees agarra un emulador de ness y pon las direcciones en un lugar
al que no estes acostumbrado.
Dependiendo del ritmo y estilo de tu juego por ejemplo en un juego de exploración no se necesita muchas funciones
del teclado en cambio en un ARPG como terranigma el jugador debe tener los dedos en las teclas
casi todo el tiempo entonces
Como diseñar un buen esquema de controles
pues hay que seguir una serie de recomendaciones:

1.Limita la cantidad de botones o comandos que el jugador debe atender:
Para mantener pocos botones usa combinaciones de teclas y regula las funciones basado en
parámetros como la posición del héroe, su estado, etc

2.Piensa que el jugador esta de antemano acostumbrado a cierto esquema:
La mayoría de nosotros ya venimos acostumbrados a algún esquema de controles típico
del genero como direccionales para mover, "A" para atacar y cosas así

3.Ignora el 2:
No del todo solo que es bueno experimentar con otros controles no temas
probar algo nuevo, si crees que cierta forma es mas cómoda que otra no dudes
en experimentar

4.Deja que el usuario opine:
A veces en juegos algo grandes es buena idea dejar que el jugador
pueda cambiar las teclas y definir que teclas quiere usar para cada cosa.

GUI
Aclaro que si tu juego es una aventura de texto desde ya puedes olvidarte de esto.
Para los no familiarizados con el termino las siglas GUI
se refieren a
Graphical
User
Interface

o en español interfaz gráfica de usuario son todos los controles
gráficos generalmente de salida. La GUI en un videojuego abarca
no solo barras de vida y menús es todo lo relativo a lo que transmite nformacion
en un juego por ejemplo un RPG
-El mapa te describe la esena
-los sprites te dan informacion acerca de la posición y estado de objetos
y así ese tipo de cosas también forma parte de la interfaz del juego
es por eso que cambia mucho dependiendo del genero.
Aunque es parte del tema no hablare mas de eso ya que es uno de los aspectos
mas complejos del diseño de juegos y ademas esta guía esta pensada para ser
usada con el maker por lo que probablemente no lo vayas a usar de todos modos.
En esta parte de la guía me concentrare en cosas como las barras de vida, los radares, los menus, etc.
En el diseño de interfaces se devén seguir ciertos principios
1) La Ley de Fitt:
Cuanto más grande y más cercano al puntero del ratón es un objeto, más sencillo es el hacer click sobre él.
Pero no solo eso si no que también nos dice que el área de mayor atención es el centro de la pantalla
debido a que poner cualquier cosa ahí en medio juego es estorboso también dice que El tamaño de un elemento de la interfaz puede parecer mayor si lo colocamos en el borde de la pantalla ya que con un solo movimiento del mouse se puede llegar ahí sin tan siquiera pensarlo y por ultimo dice que los controles as usados devén ser mas grandes y estar en los bordes
pero en este caso esto es aplicable para la visión del jugador. Utiliza este diagrama para posicionar cosas

-Lo verde es donde el jugador presta mas atención después de lo azul
-Lo azul es intocable es en donde el jugador se concentra
-Lo anaranjado es lo tercero a lo que mas atención se le presta
-Lo rojo es en donde menos atención se presta

las áreas rojas y anaranjadas tienen esos niveles de atención debido a la naturaleza de la vista humana la cual es rectangular
al poner algo en las áreas anaranjadas bloqueas mas la vista es por eso que en la mayoría de juegos comerciales se trabaja
solo con las esquinas y las áreas rojas ya que una interfaz debe estorbar la vista lo menos posible.

2) El realismo y las interfaces
Para empesar esta parte pondré un fragmento del libro Understanding comics de scott McCloud

para los que no hablan ingles dice que entre menos detalles tenga una ilustración mas se aleja de lo especifico y se acerca a lo conceptual esto es importante en el diseño de interfaces por que entre mas se acerque al concepto mejor te dará una idea de lo que hace. Por ejemplo los iconos de las posimas, los colores de las barras, los iconos de las armas en alguno menús, etc
es mas fácil tener una idea de lo que hacen entre mas se acerca a lo conceptual.

3) Minimizando los controles
Por mas bien ilustrada que este tu interfaz la gente juega tu juego no tu interfaz es por eso que hay que hacer
que estorbe lo menos posible. El ser humano es bueno viendo un control de 5 puede encontrarlo con un vistazo y verlo
igual de rápido pero si tienes un control de 15 vas a hacer que el usuario pierda tiempo de una forma innecesaria.
Entonces lo que se debe hacer es limitar la cantidad de de controles que tiene por ejemplo
Tenemos un juego tipo Final Fantasy en todo momento sin ir al menú uno tiene las barras de HP y MP
así como la cantidad de dinero, un cuadro para seleccionar armas, un cuadro para usar rápidamente una de tres pócimas, un radar y la caras de los personajes en pequeño para representar el orden de batalla.

Si un control no es del todo necesario entonces estorba claro que es útil tener algunos de esos ahí pero no es necesario todo eso se puede hacer mejor desde un menú y la función radar es innecesaria. Una interfaz no debe estar de mas
ademas no debe consumir mucha memoria.

4) Iconos vs palabra
en una interfaz es útil poder encontrar las cosas rápido y el texto aunque puede dar una mejor idea
en pleno juego es mejor no tenerlo lomas números para ciertos valores como el dinero y cosas así pero
te quita tiempo leer es por eso que usar iconos fácilmente reconocibles por el jugador hará mejor el trabajo
ahora la cosa cambia en un menú. A la mayoría de personas no les importa perder tiempo en un menú y las
palabras pueden hacer que la navegación sea mas fácil o no? NO
solo en ciertos casos hay juegos con muy buenos menús en los que no hay ni una letra como Secret of mana
y una ves te acostumbras es mucho mas fácil ahora hay lugares en donde el texto parece casi imprescindible
como a la hora de guardar o al ver los datos esto también es falso iconos bien pensados pueden hacer que navegar
entre los menús sea mas fácil y rápido lo único irreemplazable son los números pero en un menú se puede prescindir
casi totalmente de la palabra.

Entonces hemos definido cosas como la posición de los controles, el diseño y la importancia de los iconos en una interfaz y
la importancia de poner solo necesario pero no termina aquí en esta sección hablaremos mas acerca del diseño de los
propios controles.

Tipos de controles
Hasta este momento hemos definido un control e la GUI como un elemento que le proporciona información al jugador
pero no hemos indagado mas al respecto de ellos. Los controles los clasifico dependiendo de su interacción con el jugador
y del tipo de información que brindan. la clasificación queda así
-Contadores
-Contadores porcentuales
-Contadores numéricos
-Contadores numéricos-iconicos
-Botones
-Recuadros de inventario
-Controles espaciales
-Minimapa
-Radar
-Brújula


Contadores
los contadores sirven para desplegar un valor en pantalla
como ya hemos visto son de tres tipos
-Contadores porcentuales
Estos son utilizables cuando el valor que queremos representar tiene un máximo
y funcionan mostrando al jugador un porcentaje el cual es representado gráficamente
ya sea mediante barras, círculos, tonos, etc
Ejemplo: las barras de vida

-Contadores numéricos
Estos son usados por lo general cuando el valor a representar no tiene un máximo pero
pueden perfectamente ser usados con un valor que si tenga. Estos muestran el numero
escrito directamente por lo general acompañado con un icono de lo que están contando o
bien esta escrito al lado
Ejemplo: un contador de dinero
-Contadores Gráficos
Probablemente el titulo sea incorrecto pero no se me ocurría nada mejor.
Estos representan un valor mostrando un icono un numero de veces igual al valor
Ejemplo: la barra de corazones de Zelda

Botones
Los botones no hay mucho que decir de ellos que no sepas son usados para estructurar mejor los menús
y pueden estar representados por un icono o una palabra .

Recuadros de inventario
Estos han tenido una aparición mas o menos reciente no y suelen ser usados mas que todo en
los juegos de PC se trata de un pequeño cuadro de no mas de tres cuadros aveces solo uno
en el cual hay pócimas o cosas del inventario para hacerlas de rápido acceso también puede ser solo uno
en e que cambias de pócima, poder, arma o elemento con alguna tecla su principal utilidad es
evitar tener que ir al menú y hacer que el jugador pierda el ritmo.

Controles espaciales
Bueno suele ser mas usado en juegos de disparo 2D o
en juegos 3D en donde saber tu ubicación y la de los demás objetos es muy importante
. Estos son probablemente los controles mas exigentes de memoria ya que
deben ser actualizados a cada paso y los divido en 3 tipos
-Minimapa
Muestra tu ubicación relativa a otros lugares del mapa

-Radar
El Radar Muestra a la cantidad de enemigos cercanos a ti
y su posición en relación a la tuya.

-Brújula
La brújula suele ser usada para apuntar a objetos lejanos a ti de modo que puedas
encontrarlos rápido también solía ser usada en los primeros juegos 3D para indicarte en cual
de las 4 direcciones estabas viendo.

Ahora que hablamos de los controles en la siguiente sección nos dedicaremos al diseño de menús

Menús
Los menús son la única parte de la interfaz que puedes poner en el medio ademas de ver tu estado, guardar el juego, etc
el menú suele ser usado también para pausar el juego el diseño de este es muy importante en la interfaz
un buen menú debe de:
-Ser de fácil navegación
esto es importante en la estructura cuando tienes sub-menús dentro de sub-menús
la estructura se complica intenta hacer las cosas lo mas sencillo posible no pongas
muchos sub-menús.

-Integrar bien todas las funciones
Nunca te ha sucedido que a un menú le suelen faltar funciones o tiene cosas de mas
no verdad en los juegos comerciales se cuida mucho este aspecto solo hay que
integrar las funciones necesarias para el juego.

-Ser de fácil acceso
Bueno eso es lógico pero importante la tecla que te da acceso al menú
debe estar medio alejada de los controles principales pero debe de ser una tecla visible
que tengan todos los teclados.

-Cuidar las confirmaciones

Aveces es necesario a veces es molesto por ejemplo en el sub-menú de guardar
no es mala idea pedir confirmaciones para ciertas funciones como borrar
pero aveces es molesto como en los inventarios o en el caso de menús que
funcionan arrastrando elementos suele ser molesto que te pidan confirmaciones.

para este punto ya hemos visto casi todo lo relativo a la GUI excepto algo

Balance gráfico
El estilo de todos los elementos de tu interfaz incluyendo el menú deben tener en cuenta
el estilo gráfico y la ambientación del juego esto puede sonar lógico pero he visto algunas
interfaces en juegos hechos con el maker en las cuales la paleta que usaron para la interfaz
desentona completamente con la del juego esto es algo con lo que se debe de tener cuidado
en especial con los colores de las barras en los cuales algunos usan rojos muy claros teniendo una
ambientación oscura. Como he dicho antes una buena interfaz no debe distraer la atención
debe de mezclarse bien con el juego.

Bueno esta guía normalmente terminaría aquí pero el titulo dice diseño y programación
pero como dije antes no enseñare a hacer todas las cosas anteriormente mencionadas
solo daré consejos para optimizar la memoria ya que suelen causar lag.

Consejos a la hora de programar interfaces

1. Mantelo sencillo:
Como lo he repetido hasta la saciedad elimina los controles y funciones innecesarios.

2.Usa el marco:
Hay imágenes que desde el inicio del juego hasta el final del mismo no dejan su lugar
si las juntas todas y las pones como marco o frame desde la base de datos ahorraras memoria.

3.No uses procesos paralelos:
La mayoría no se necesita actualizar a cada paso así que puedes llamarla cuando la necesites
sera como si no estuviera ahí.

4.Usa medidas precisas:
Entre mas grande es una imagen mas memoria usa para moverse
aunque el 90% sea color transparente ademas no cuesta nada sacar la ubicación precisa en la
pantalla.

5.Centraliza procesos:
aunque esto no ahorre memoria pero en caso de que necesites hacer aluna operación muy
seguido en la interfaz puedes hacerla evento común y ahorrarte código esto hace programar mas sencillo.

buen esto es todo por ahora espero les haya sido útil y por cierto
¡No olvides comentar!


Última edición por xn1 el 2012-02-03, 20:42, editado 1 vez
avatar
xn1
Soñador
Soñador

0/3

Créditos 180

Gracias : 16

Volver arriba Ir abajo

Re: Interfaces: diseño y programacion

Mensaje por PROmaster el 2011-11-08, 00:14

Grandísimo post.

Soy de los que se tiran su tiempo para hacer los menús (y lo que son las interfaces en general, ya sea interfaz de batalla, del cuadro de mensaje, etc...), toqueteando detalles por aquí y por allá, scripteando, tirándole duro al Paint para el diseño y demás. Lo considero igual de importante que otros aspectos del proyecto, como pueden ser los escenarios, los gráficos, el sonido o el sistema de combate.

Felicitaciones de nuevo por el post, que está muy currado y me ha gustado mucho verlo por aquí.

Saludos ^^
avatar
PROmaster
Principiante
Principiante

0/3

Créditos 324

Gracias : 0

Volver arriba Ir abajo

Re: Interfaces: diseño y programacion

Mensaje por carlos55 el 2011-11-08, 02:39

Muy buen post
esta muy interesante,me aclaraste muchos aspectos
tengo una duda el GUI es el HUD y si no son lo mismo en que se diferencian?
Saludos
avatar
carlos55
Moderador
Moderador

0/3

Créditos 1131

Gracias : 10

Volver arriba Ir abajo

Re: Interfaces: diseño y programacion

Mensaje por xn1 el 2011-11-08, 03:26

PROmaster
Gracias por comentar el post.
Espero que haya sido de ayuda.

carlos55
Se me olvido explicar eso.
El HUD es parte de la GUI pero no
constituye completamente la misma
como explique la interfaz grafica es cualquier
medio grafico que se usa para darle informacion
al usuario en cambio el HUD es una parte de la
GUI que se muestra todo el tiempo en los bordes
de la pantalla.
Considera que en la seccion
"Tipos de controles"
todas las cosas que menciono
exepto los botones generalmente se usan para
el HUD

avatar
xn1
Soñador
Soñador

0/3

Créditos 180

Gracias : 16

Volver arriba Ir abajo

Re: Interfaces: diseño y programacion

Mensaje por Marina el 2011-11-08, 07:42

MUY bueno xn1. La verdad es que es un gran aporte y hasta yo me he sorprendido Aplauso

Marina
Principiante
Principiante

0/3

Créditos 326

Gracias : 36

Volver arriba Ir abajo

Re: Interfaces: diseño y programacion

Mensaje por IZzy el 2011-11-12, 04:31

Hola,,,

Muy buen post,me lo he leido y me ha gustado la manera clara de la explicacion,esto ayudara a reflexionar a la hora de programar las interfaces,muy bueno...

Salu2
avatar
IZzy
Novato
Novato

0/3

Créditos 72

Gracias : 9

Volver arriba Ir abajo

Re: Interfaces: diseño y programacion

Mensaje por Contenido patrocinado


Contenido patrocinado


Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba


Permisos de este foro:
No puedes responder a temas en este foro.