Category Archives: Unity 3D Systems Tutorial

Live Demo NavMesh OverWorld Map System


Continue reading Live Demo NavMesh OverWorld Map System

NavMesh OverWorld Map System para Unity 3D

This page now has a cute English translation, Welcome anglosaxon friends! Here we don´t discriminate no one, but since I don´t know any other languages, consider yourself lucky I know yours besides Spanish, LOL!

Para hacer funcionar el NavMesh OverWorld Map System, se requieren 4 componentes principales: Un Main Camera (camera), un Overworld Map (map), los Overworld Goals (goals) y el NavMesh Path, y finalmente, el NavMesh Agent o Playable Character (character).

La Camera está acompañada por un “look at objective”, el cual servirá como el punto de atención para el Character. Es el punto al que siempre deberá ver, ubicado justo al centro entre el Map y la Camera.

Los Goals estarán conformados del listado de objetivos a los cuales el Character deberá poder acceder durante el recorrido por el Path. Estos Goals serán el punto de acceso a niveles desbloqueados, tesoros ocultos, enemigos escondidos o lo que el juego demande. Se pueden colocar cuantos Goals se requieran, siempre teniendo cuidado de hacerlos consecutivos y que toquen en todo momento el Path.

Además, el Path necesita estar conformado por un modelo realizado en algún programa externo. Como puede verse en la imagen, es una figura 3d, yo la creé usando Blender, pero bien puede realizarse en cualquier otro programa 3d (3DS Max, Maya, etc). Debe poseer un grosor justo para que el character pueda caber en cada recoveco y giro de esquina que posea. Se puede fácilmente sustituir el ejemplo que posee el Asset y colocar el propio camino personalizado.

Para realizar el Map, sólo se requierá una imagen 2d, nada complejo, aunque también es posible que el mismo Path sirva como Map, añadiéndole un diseño para su aplicación en entornos 3d. En mi Asset, se emplea una imagen plana como fondo y se oculta la visualización (Mesh Renderer desactivado) del path, simplemente para simplificar el sistema.

El Character se compone de los Sprites izquierdo y derecho que compondrán al personaje que se estará desplazando libremente por la pantalla, puede ser el diseño que se requiera. En mi caso, empleé un Sprite Renderer para usar una imagen 2d, pero así mismo puede usarse un modelo 3d, dependiendo de la complejidad que se maneje en el juego.

Cuando se cambie el modelo para el Path, es importante notar que se requerirá volver a generar el NavMesh, el cual se realiza por medio del Window Navigation.

Una vez abierto, se necesitará seleccionar el GameObject con el modelo que se usará para hacer el Path, en este caso mi NavMesh Path. Se deberá establecer los parámetros del NavMesh Agent, como su Radius, Height, Slope, Step Height, todos ellos útiles para permitir una adecuada navegación del Character por el Path. Cuando se termine, bastará con oprimir el botón Bake, e instantáneamente se creará un área azul en todo el modelo del Path, debe cuidarse que el área azul sea completa y pase por cada rincón, si en algún momento corta y se descontinúa, será necesario reducir el Agent Radius o aumentar el grosor del modelo, de lo contrario, no se podrá crear el NavMesh Agent y no se completará la creación del NavMesh System.

Por último, es necesario crear el NavMesh Agent, colocando en el GameObject seleccionado el componente debido. Se deben establecer los parámetros que se establecieron en el Path, o viceversa.

Este mismo objeto poseerá los Scripts que vienen con el Asset Nav Mesh Move To y Eyes On Player, colocando en el lugar debido los GameObject que pertenecen ahí, en las casillas para Goal x se pondrá el goal seleccionado y si se requieren más o menos, se tendrá que modificar el Script para ello. En las casillas para Sprite Right y Left se pondrán los GameObjects que compongan el modelo del Character mirando hacia la dirección deseada, pudiendo hacer los cambios pertinentes que se requieran, como añadir más Characters, que sea modelo 3d, etc.

Finalmente, se puede Oprimir Play y ver qué pasa…
Diversión!!

No olvides ver el live Demo y link para descargar el Asset…

Live Demo NavMesh OverWorld Map System

*****************************

Si necesitas un Asset personalizado con todo y tutorial, pídelo aquí…

Asset Requests

NavMesh OverWorld Map System for Unity 3D

For the NavMesh OverWorld Map System to work, you need 4 main components: a Main Camera (camera), an Overworld Map (map), the Overworld Goals (goals) and NavMesh Path, and finally, the NavMesh Agent or Playable Character (character).

The Camera it´s accompanied by a “look at objective”, which serves as the attention point for the Character. This is the point to where the character will always look at, centered between the Map and the Camera.

The Goals are made of the various objectives to where the character will access traversing the path. This Goals will be the Access point to unlocked levels, hidden treasures and enemies or whatever you like. You can put as many Goals as you need, keeping them consecutive and always on touch with the path mesh.

Moreover, the path needs to be made by a model realized in some other program, Blender, some Autodesk, etc. It has to possess an adequate width, enough so that the character can traverse every turn of the way. You can switch the one in the tutorial asset with whatever you like or make.

To make the Map,you only need a 2D image, nothing too complicated, but it is posible the same model for the path serves as the map, just add a cute design for its application as a 3d enviroment. In the example asset, I used a simple 2D image, deactivating the Mesh Renderer component of the path gameobject, just for simplicity sake.

The Character is made of the left and right Sprites, which will be the graphic being displayed as the carácter traverse the path, you can add whatever design you want. In my case, I used a Sprite Renderer because mine is a 2D image, but you can use a 3D model, it´s up to you.

When you switch the model I provide for the path for your own, you need to take care of the regeneration of the NavMesh, which will be made through the Window Navigation.

Una vez abierto, se necesitará seleccionar el GameObject con el modelo que se usará para hacer el Path, en este caso mi NavMesh Path. Se deberá establecer los parámetros del NavMesh Agent, como su Radius, Height, Slope, Step Height, todos ellos útiles para permitir una adecuada navegación del Character por el Path. Cuando se termine, bastará con oprimir el botón Bake, e instantáneamente se creará un área azul en todo el modelo del Path, debe cuidarse que el área azul sea completa y pase por cada rincón, si en algún momento corta y se descontinúa, será necesario reducir el Agent Radius o aumentar el grosor del modelo, de lo contrario, no se podrá crear el NavMesh Agent y no se completará la creación del NavMesh System.

Finally, you need to créate the NavMesh Agent, just add to the selected GameObject the correct component. You will need to set the parameter you used for the path or viceversa.

This same gameobject will have the provided Scripts “Asset Nav Mesh Move To” and “Eyes On Player”, , adding the correct GameObject in its correspondent place:
Goal x slot- The selected goal in that order, if you need more, just modify the script for that (instructions inside the script).
Sprite right/ left- Just add the gameobjects that will comprise the character model, if you are using a 3d model, you may need to modify its facing direction with some other method than that I used here (if you need an example, tell me and I can upload another tutorial, it can even touch on mecanim if you need it).
Target- you can put here the object that will keep the carácter facing the right direction.

And that´s all! Just click Play and enjoy the game!

Don´t forget to check out the Live Demo and the download Itch.Io page!…

Live Demo NavMesh OverWorld Map System

Clickable object system for Unity 3D

This is a tutorial series made by Mary D. Kidd, she will add whatever she likes, but you can always ask her about a personal request following the link

Go to Asset Requests page…

Asset Requests

You can read the instructions of use here and download the asset in the Itch.io portal of the author, also, there will be live Demos you can see in there.
This Gameplay System consists of a Game Object with the capability of identify wheter the player hovers the mouse pointer over it, it reacts to clicks and an action will be prompted.
The tutorial is special for those above no0b level in Unity 3D, those who know their way around the Unity interface, inspector and other basics aspects of it.
To begin with the tutorial, it is necessary prepare a GameObject made with a Mesh model imported into Unity 3D (an .fbx from Autodesk, Blender, Solid Works, Inventor, Zbrush, etc.).

Enlarge

1

Unity 3D

In this case, I called it Clickeable Object, I put it in front of a camera so it could be visible for the player. In this demo I used a 2D camera system, but the object keep being 3D, the same with its environment and you can even use it with a 3D rotational camera.

Enlarge

2

Unity 3D

Floating over the Clickeable Object I put another Game Object called “Título” (“title”), made out of a 3D Text object, which possess a Text Mesh Component and displays a floating text in a 3D space without having to use a GUI Canvas.

Enlarge

3

Unity 3D

This text will serve as the title that displays the name of the Clickeable Object, it can be switched for an instruction, advice, icono, graphic or whatever you like and/or need.
Next thing I put the content of the text that displays when you click over Clickeable Object. In this case I used a Unity 3D GUI Text, which requires for you to set an EventSystem and a Canvas on the scene.

Enlarge

4

Unity 3D

All the GUI objects that you may want to display In Game should be inside the Canvas, they can even be anchored by their limits to preserve the Aspect Ratio and the proportions even though the displaying screen change. It´s wonderful!
This interface consists of a gameobject with a Viewport Component, which is inside a gameobject with Scroll Rect Component (Clickable Object GUI), which allows the player to scroll across the content from one side to the other (it doesn´t serve any major purpose here, just for fun and education!). In its contents there is the “cerrar” (“close) button (any normal button in Unity 3D GUI), plus a GUI text object with the content to show and a title (the same with the 3D text). Many uses of this system consists of NPC dialogues and names, interaction advices and more.
A final component of this system is the object “Fondo” (“background”), which gives a better visualization of the content displayed with the mouse click, this with the intention of hiding the rest of the universo besides the text, controls, etc. Moreover, it prevents the player from accidentally clicking over other clickable objects in the scene.
However, the same Viewport component can be modified to supply this same function, even adding customized images. You can opt to anchor the background image to the camera, so it will travel accompanying the player wherever it goes.

Enlarge

5

Unity 3D

With all this objects ready in the scene, you can proceed to add the given C# script “Menu Click On Object” to the Game Object Clickable Object (you can consult how does it works inside of it, just open it with monodevelop).

Enlarge

6

Unity 3D

The things to add in the script are as follows:
Advice- “Título” object.
Info spaces- “Contenido” object.
Blockage- “Fondo” object.
And that´s all! Just click Play and enjoy the game!
Aditionally, you could add a GUI element that indicates a given scene object is a Clickable Object, in this tutorial I used a simple signaling arrow with text, but you can implement whatever you like with better graphics!

Enlarge

7

Unity 3D

Don´t forget to check out the Live Demo and the download Itch.Io page!…

Live demo Clickable object System

Chaozz, ¡Happy codification!

Author´s note: I have begun translating some content from this site so my English speaking friends can enjoy it too! If you have a request for something that is not translated yet, you can ask me here…

Translation requests page…

Translate Requests Page

For now, the only things that will get simultaneously translated will be the Unity tutorials, because there are quite the public for it (I don´t know, but maybe even more than my Hispanic public!)
Thanks for reading and I hope my translation is not too muddy, but If you spot something off, make me know in the comments, and if you can, help me translate other content, I will credit you and even advertise you if you want! ;D

Tutorial cómo usar mis tutoriales de Unity 3D

En esta ocasión les mostraré un tutorial para que sepan cómo usar los tutoriales que subo en esta página, en caso de que no sepan, si saben, ¡ignoren!

————————-Parte 1- Jugando el demo —————————–

Primero que nada, la mayoría de los tutoriales aquí tendrán demos que podrán ser probados en la misma página, pero a través del servicio de Itch.io, el primer tutorial tenía un demo de descarga por onedrive, para que cualquiera pudiera acceder a jugarlo aunque su proveedor de internet bloqueara Itch.io (en algunos lugares sucede, ¡qué miedo!).
Sin embargo, en caso de que el demo sea proporcionado como un archivo adjunto, los pasos para visualizarlo son los siguientes:

Descargado la carpeta del tutorial, se tendrán estos archivos…

Se abre la carpeta del demo…

Se selecciona el archivo de formato .HTML (¡documento de página web!)…

El demo viene en un conveniente formato de Unity 3D llamado WebGL, que permite ser jugado directamente desde un navegador web, sin plugins o cosas raras adicionales, “el futuro, ahora” (osea, el presente pero más asombroso, ¿ok?).

Actualmente ya se cuenta con un Live Demo!

¡Ir directo al super Live Demo que se referencia en este tutorial!…

Live demo Clickable object System

————————–Parte 2- Abriendo el asset ——————————

Para abrir el Asset en Unity 3d y actualmente usarlo, necesitarás el archivo con el formato .unitypackage, pero para abrirlo, ocupas tener instalado Unity 3D en tu computadora, si necesitas un tutorial para eso… ¡pídelo! Pero como es algo tan básico y tan noob no saberlo, cobraré por hacerlo, o puedes buscar en cualquier lugar de internet, sólo escribe “¿cómo usar mi computadora?” (XD).

Abre un nuevo proyecto de Unity, lo que quieras, o uno existente, da igual…

Ahora viene lo que quizá pueda ser más misterioso, abrir el paquetito en tu proyecto de Unity, pues bien, sólo sigue las instrucciones…

En la pantalla para importar el Asset, escoge el que viene del tutorial…

Escoge todos los componentes del Asset…

En los archivos del proyecto, abre la Test Scene incluida, que tiene toda la configuración necesaria para poder utilizar el Custom Asset…

Finalmente, se abrirá la Test Scene y podrás manipular los elementos que conforman el Asset, ¡YEY! Si quieres saber qué hace cada chinche, visita la sección de tutoriales y lo encontrarás…

ok, mentí, checa aqui…

¡Ir directo al super tutorial que se referencia en este tutorial!…

Clickable Object System para Unity 3D

Si necesitas un Asset personalizado con todo y tutorial, pídelo aquí…

Asset Requests

Live demo Clickable object System


Continue reading Live demo Clickable object System

Clickable Object System para Unity 3D

Esta es una serie de tutoriales que Mary D. Kidd va preparando conforme los visitantes le solicitan, los assets personalizables pueden descargarse desde el portal Itch.io de la autora.

Ir al Live Demo y la página de descarga Itch.Io…

Live demo Clickable object System

This page now has a cute English translation, Welcome anglosaxon friends! Here we don´t discriminate no one, but since I don´t know any other languages, consider yourself lucky I know yours besides Spanish, LOL!

Translated version…

Clickable object system for Unity 3D

——————————————————————

Este sistema de gameplay consiste en un Game Object con la capacidad de identificar cuando se posa el mouse sobre él, reaccionando al toque, y si se le da click, una acción se realizará inmediatamente.
El tutorial está pensado en que quien lo leerá está más allá del nivel no0b de aprendizaje en Unity 3D, por lo tanto, se asumirá que se conoce la terminología normal y el manejo de la interfaz del editor y cómo colocar objetos, componentes, etc.
Para comenzar, se requiere preparar un Game Object hecho con un modelo Mesh importado en Unity 3D, el formato .fbx, como lo puede exportar cualquier programa de Autodesk o con compatibilidad con este (Blender, Solid Works, Inventor, Zbrush, etc.)

Enlarge

1

Unity 3D

En este caso, se llamó Clickeable Object, se colocó frente a la cámara para que sea visible por el jugador. En este demo se manejó un sistema de cámara 2d, pero el objeto en sí es 3d al igual que su entorno.

Enlarge

2

Unity 3D

Encima del objeto se posicionó otro Game Object “Título”, compuesto por un 3d Text, el cual posee un Text Mesh Component y permite desplegar un texto flotante en un espacio 3d sin tener que emplear un Canvas GUI.

Enlarge

3

Unity 3D

Este texto funcionará como el título que se despliega del Clickeable Object, en cualquier caso, puede sustituirse por una instrucción que indica que se puede dar click al objeto, un ícono de interacción (diálogo, ayuda, información, acción) o cualquier otra cosa que el desarrollador crea conveniente y divertida (en contexto con el juego, obviamente, duh).
A continuación, se colocó el texto que se despliega “Contenido” cuando se da click al Clickeable Object. En este caso si se utilizó texto del GUI de Unity 3D, el cual requiere que se tenga en la escena un EventSystem y un Canvas.

Enlarge

4

Unity 3D

Todos los objetos GUI que se quieran desplegar deberán ir dentro del Canvas, inclusive pueden anclarse dentro del mismo para conservar el Aspect Ratio y las proporciones aunque la pantalla de despliegue del juego cambie.
Esta interfaz consiste de un objeto con Viewport Component, el cual está dentro de un objeto con Scroll Rect Component (Clickable Object GUI), que permite deslizar el contenido de un lado a otro (colocado ahí por diversión), y en su contenido (todo lo que se deslizará dentro del Scroll Rect), se encuentra el botón cerrar (cualquier botón normal del GUI), un objeto de texto GUI con el contenido a desplegar y un título (el mismo que el que se empleó en el 3D Text, esto puede emplearse para conversaciones con personajes, simplemente poniendo los nombres de NPC en el título, por ejemplo).
Como componente final para este sistema, se colocó un objeto “Fondo” que servirá de trasfondo al contenido desplegado con el click, esto con la intención de ocultar el resto del universo alrededor y que el texto del contenido sea totalmente visible, además de ocultar distractores y evitar que se de click a otro Clickable Object en la escena por accidente.
Sin embargo, el mismo componente Viewport se puede modificar para que cumpla esta función, inclusive poseyendo imágenes personalizadas por el desarrollador, dependiendo del uso que se le dará. Así mismo, se puede optar por anclar el objeto de trasfondo a la cámara, todo el tiempo estará oculto hasta que el jugador dé click a un Clickable Object, con lo cual no estorbará en el juego, pero le permitirá viajar con el jugador a donde vaya.

Enlarge

5

Unity 3D

Ya con todos estos objetos listos en la escena, se procederá a colocar el script C# “Menu Click On Object” proporcionado (cuyo funcionamiento se puede consultar dentro del mismo script), en el Game Object Clickable Object.

Enlarge

6

Unity 3D

En los espacios debidos se debe acomodar:
Advice- Objeto “Título”
Info spaces- Objeto “Contenido”
Blockage- Objeto “Fondo”
Y ya está, dale a Play y disfruta el juego.
Adicionalmente, se puede colocar un elemento GUI que evidencie que un objeto dado en la escena es un Clickable Object, en este ejemplo, se manejó una vil flecha con texto, pero se puede elaborar cualquier cosa que quede en contexto con el juego y la creatividad del desarrollador.

Enlarge

7

Unity 3D

Puedes descargar los archivos aqui…
https://1drv.ms/u/s!Ah0lXoEWsjyl4Egv1xxQeKh-T2Bk

No olvides visitar la página “Asset Requests” para pedir un asset personalizado a tus necesidades!

Visítanos en

para un contacto más personalizado.

Chaozz, ¡Feliz codificación!