Hola a todos!
Como algunos saben he estado desarrollando un juego durante estas últimas semanas. El juego es desarrollado en Construct 3, un motor gráfico fácil de usar donde generalmente se hacen juegos 2D. Factory Run es el nombre que le he puesto al juego, tiene un modo de juego simple, el jugador corre en un nivel infinito generado aleatoriamente donde debe saltar para evitar caer y terminar el juego.
As some of you know I have been developing a game for the last few weeks. The game is developed in Construct 3, an easy-to-use graphics engine where 2D games are usually made. Factory Run is the name that I have given to the game, it has a simple gameplay, the player runs in a randomly generated infinite level where he must jump to avoid falling and finish the game.
| Ver 1.0 | Ver 2.0 |
|---|---|
 |  |
En mi último post acerca del juego, actualicé a la version 2.0. Mejorando la interfaz de usuario del juego así como tambien corregí errores, y añadí más animaciones al personaje. Sin embargo, no quedé totalmente contento con la actualización de la interfaz asi que en esta publicación mostraré el primer avance para la nueva interfaz gráfica de usuario para el juego.
In my last post about the game, I updated to version 2.0. Improving the user interface of the game as well as bug fixes, and added more animations to the character. However, I wasn't totally happy with the interface update so in this post I'll show the first trailer for the new GUI for the game.
Cabe mencionar que por el momento el juego solo tiene un modo de juego que es la carrera infinita llamada RUN. Pero ya me encuentro en el desarrollo de los 3 niveles principales del modo Aventura. Luego lanzaré el modo Survival y por último el modo Multijugador donde se podrá crear salas para jugar con amigos.
It is worth mentioning that at the moment the game only has one game mode which is the infinite race called RUN. But I am already in the development of the 3 main levels of Adventure mode. Then I will launch the Survival mode and finally the Multiplayer mode where you can create rooms to play with friends.
Qué es una interfaz gráfica de usuario?
What is a graphical user interface?
Para lo que no saben que es un Interfaz Gráfica, son los elementos con que el usuario tiene interacción para comunicarse con el software (video juego, sitio web, sistema operativo o plataforma digital).
For those who do not know what a Graphic Interface is, they are the elements with which the user interacts to communicate with the software (video game, website, operating system or digital platform).
Por ejemplo, el menu superior de Hive.Blog, la sección de publicaciones, la sección de comunidades y la sección de etiquetas, corresponden a la interfaz gráfica principal para que tú como usuario puedas interactuar con la plataforma. Si Hive.Blog le hiciera falta el menu superior talvez la mayoría de las personas estuvieran perdidas y no encontraría como entrar a su perfil, buscar los witness o las dapps.
For example, the top menu of Hive.Blog, the publications section, the communities section and the tags section correspond to the main graphical interface so that you as a user can interact with the platform. If Hive.Blog did not have the top menu, perhaps most people would be lost and would not find a way to enter their profile, search for witnesses or dapps.
Entonces crear una interfaz gráfica de usuario amigable donde el usuario no se pierda y vaya a donde quiere ir es lo que debemos tomar en cuenta cuando diseñamos una interfaz gráfica.
So creating a friendly graphical user interface where the user does not get lost and goes where he wants to go is what we must take into account when designing a graphical interface.
Nueva GUI para Factory Run v3.0.
Proximamente disponible!
Proximamente disponible!
New GUI for Factory Run v3.0. Available soon!
Para Factory Run he hecho un bosquejo con jerarquias de botones para planear a donde el usuario puede entrar y como puede volver. Por ejemplo, si entra en el menu de configuraciones y luego entra en controles, debe hacer clic en volver para luego poder salir del menu de configuraciones, es decir no puede salir del menu de controles directamente al menu principal del juego. Otro ejemplo sería si entra a jugar en el modo Aventura, el usuario deberia volver al menu principal para poder jugar otro modo de juego.
For Factory Run I have made a sketch with hierarchies of buttons to plan where the user can enter and how they can return. For example, if you go into the settings menu and then go into controls, you have to click back in order to exit the settings menu, that is, you cannot exit the controls menu directly to the main game menu. Another example would be if you enter to play in Adventure mode, the user would have to return to the main menu to be able to play another game mode.
Para el diseño de la interfaz he usado la tipografia "Retro Gaming Regular", ya que el juego se basa en Pixel Art decidi que la interfaz tambien tuviera algo de ese tipo de diseño.
For the interface design I used the "Retro Gaming Regular" typography, since the game is based on Pixel Art I decided that the interface also had something of that type of design.
 |
|---|
Elegí el fondo azul porque quería combinarlo con el amarillo, ya que se ve bien y los usuarios se siente bien al mirar esta combinancion de colores. Tambien agregué ligeramente una cadena de hexagonos que forman una colmena en honor a Hive. Para la pantalla inicial de carga lo he hecho simple como todas las pantallas de este tipo. Una barra que carga a medida que la escena se va descargando.
I chose the blue background because I wanted to combine it with the yellow, as it looks good and users feel good looking at this color combination. I also slightly added a chain of hexagons that form a beehive in honor of Hive. For the initial loading screen I have made it simple like all screens of this type. A bar that loads as the scene unloads.
 |
|---|
Para la pantalla de Login, agregué el logo centrado y en la parte central un campo donde el usuario escribirá su nombre o lo que sea. Este nombre aparecerá en el menu principal y en los resultados de los juegos. Este nombre se puede cambiar más adelante.
For the Login screen, I added the centered logo and in the central part a field where the user will write their name or whatever. This name will appear in the main menu and in the results of the games. This name can be changed later.
 |
|---|
Debo admitirles, me ha gustado mucho como quedó el menú principal. Variedad de colores y botones para diferentes acciones. Preciso y simple. Al lado izquierdo tenemos lo que el usuario puede cambiar, Personajes y cambiar el nombre de perfil. Al lado derecho el modo Run, que actualmente es el principal y unico modo disponible en la version 2.0. Para la version 3.0 creo que este modo no será tan jugado. Tambien he agregado un boton para ingresar a HiveBlog, esto es publicidad para los usuarios que juegan en Itch.io.😉
I must admit, I really liked how the main menu turned out. Variety of colors and buttons for different actions. Precise and simple. On the left side we have what the user can change, Characters and change the profile name. On the right side is the Run mode, which is currently the main and only mode available in version 2.0. For version 3.0 I think this mode will not be played as much. I have also added a button to enter HiveBlog, this is advertising for users who play on Itch.io.
En la parte inferior los tres modos principales y en las esquinas inferiores los botones de información que contendrá informacion acerca del juego y del otro lado el boton de configuraciones.
In the lower part the three main modes and in the lower corners the information buttons that will contain information about the game and on the other side the settings button.
 |
|---|
Un menú de opciones básico, donde solo pueden apagar los sonidos o la música. Tambien pueden ver pero no cambiar los botones para jugar en computadora y movil.
A basic options menu, where they can only turn off sounds or music. They can also see but not change the buttons to play on computer and mobile.
 |
|---|
Este es el menú de información, que contiene información del desarrollador, redes sociales y cual es la versión actual del juego. Esta información puede ampliarse en un futuro pero por el momento creo que es todo.
This is the information menu, which contains information about the developer, social networks, and what the current version of the game is. This information may be expanded in the future but for now I think that's all.
 |
|---|
Aquí seleccionamos el personaje con que queremos jugar en cualquier modo. Es decir, si cuando entramos al juego y jugamos en cualquier modo, jugaremos con el personaje predeterminado "Punk". Si queremos jugar con otro personaje debemos cambiarlo en esta pantalla.
Here we select the character we want to play with in any mode. That is, if when we enter the game and play in any mode, we will play with the default character "Punk". If we want to play with another character we must change it on this screen.
 |
|---|
Y por ultimo este es la pantalla para cambiar el nombre de usuario que les habia mencionado anterioremente. Es simple, solo escribe el nombre que quiera usar y se actualizará.
And finally this is the screen to change the username that I had mentioned before. It's simple, just type the name you want to use and it will update.
 |
|---|
Todo los recursos para la interfaz gráfica ha sido diseñada por mi en Adobe Illustrator a excepción de los personajes que han sido descargados gratuitamente en el siguiente enlace.
All the resources for the graphic interface have been designed by me in Adobe Illustrator except for the characters that have been downloaded for free at the following link.
Aún faltan recursos por diseñar como el HUD del jugador, las pantallas de finalización, pantalla del modo survival, pantalla del modo multijugador, entre otros objetos.
There are still resources to design such as the player's HUD, the ending screens, the survival mode screen, the multiplayer mode screen, among other objects.
 |
|---|
Quisiera hacer una pausa aquí, y aclarar algo que quizas antes no lo haya definido. Probablemente no sepas que es el HUD del jugador pero si te gustan los juegos quizas lo has visto muchas veces. El HUD, basicamente son los elementos visibles en la pantalla mientras jugamos, en ello se muestra la barra de salud, puntuación, controles, botones de configuraciones, mapa, brújula, poderes, etc.
I would like to pause here, and clarify something that you may not have defined before. You probably don't know what the player HUD is but if you like gaming you may have seen it many times. The HUD, basically, are the elements visible on the screen while we play, it shows the health bar, score, controls, configuration buttons, map, compass, powers, etc.
Para diseñar el Hud debemos tener claro cuales serán las funciones del modo de juego por ejemplo, si el personaje recogerá monedas, si recogerá algun objeto especial, si tendrá una barrá de maná o si tendrá una barra de salud. Asi que para crear esto primero tengo que hacer un bosquejo de los modos de juego y enumerar los items o funciones necesarias para cada uno.
To design the Hud we must be clear about the functions of the game mode, for example, if the character will collect coins, if he will collect a special object, if he will have a mana bar or if he will have a health bar. So to create this I first have to make an outline of the game modes and list the items or functions needed for each one.
De esta manera finalizo el progreso de la version 3.0 de Factory Run que espero terminarla muy pronto. Seguiré mostrando los avances del juego y gameplay. Son bienvenidas todas sugerencias y opiniones para agregar al juego.
In this way I finish the progress of version 3.0 of Factory Run that I hope to finish very soon. I will continue to show the progress of the game and gameplay. All suggestions and opinions to add to the game are welcome.
Para disfrutar la version 2.0 del juego puedes ingresar al siguiente link:
To enjoy the version 2.0 of the game you can enter the following link:
Play Factory Run
Gracias por leer.
Oscar
