Tutorial: Construir un Conjunto de Pintura
There are different ways to create games and experiences in Overte. In this tutorial, we'll cover how to make a pixel-like painting set to allow users to "paint" pictures on a canvas made out of "pixels" that are box entities.
En Esta Página:
Prerrequisitos
Considera familiarizarte con los siguientes conceptos antes de comenzar este tutorial:
Crear un Conjunto de Pintura
Nuestro set de pintura consta de tres elementos:
Toda la lógica de nuestro juego de pintura está contenida en el cabezal del pincel. El resto del contenido se crea emparentando entidades entre sí para crear nuestro pincel, paleta y lienzo.
Crear un Pincel de Pintura
Empezaremos creando el pincel de pintura. El pincel se compone de dos partes, el mango y el cabezal del pincel. El mango del pincel es el padre del cabezal del pincel, por lo que podemos controlar el movimiento y el color del cabezal del pincel usando solo el mango.
Para crear el mango del pincel:
En la interfaz, trae tu HUD o tableta y ve a Crear.
Crea una entidad para ser utilizado como mango. Puede ser una entidad de caja o esfera.
Ve a la pestaña de "Properties" y selecciona el menú desplegable "Shape" (Forma). Cambia la forma de la entidad a un "cylinder" (Cilindro).
Nombra tu entidad "Paint-Paintbrush-Tube" seleccionando el cuadro de texto en la parte superior de la pestaña "Properties".
Selecciona el color del mango que quieras en el selector "Color".
Desplázate hacia abajo hasta la sección "Spatial" (Espacial). Cambia las dimensiones locales a: {x: 0.025, y: 0.5, z: 0.025}.
Para crear el cabezal del pincel:
En la interfaz, trae tu HUD o tableta y ve a Crear.
Haz click en el ícono de "SPHERE" para crear una entidad de esfera que se utilizará como cabezal del pincel.
Ve a la pestaña de "Properties" y selecciona el color del cabezal del pincel que quieras en el selector "Color".
Nombra a tu entidad como "Paint-Paintbrush-Head" seleccionando el cuadro de texto en la parte superior de la pestaña "Properties".
Desplázate hacia abajo hasta la sección "Spatial". Cambia las dimensiones locales a: {x: 0.05, y: 0.1, z: 0.05}.
Una vez que hayas creado el cabezal del pincel, puedes vincularlo con el mango del pincel:
En la aplicación Herramientas de Crear, selecciona el mango de tu pincel y ve a la pestaña "Properties".
Copia el "entityID".
Desde la ventana "Entity List" (Lista de entidades), selecciona el cabezal del pincel y ve a la pestaña "Properties".
En el cuadro de texto "Parent" (Padre), pega el entityID de la entidad del controlador del pincel (Paintbrush-Tube).
Desplázate hacia abajo hasta la sección "Spatial". Cambia la posición local a: {x: 0, y: 0.2, z: 0}.
Hemos detallado cómo puedes agregar un script para usar el pincel para transferir color a otros objetos en Agregar un script de pincel de pintura.
Crear una Paleta de Pintura
La segunda parte de nuestro set de pinturas es la paleta. Aquí es donde puedes ser creativo y agregar tantos (o tan pocos) colores de pintura como desees. Una vez que hayas creado la base de la paleta, puedes repetir el proceso de agregar pinturas hasta que estés satisfecho con el resultado final.
Para crear la base de la paleta:
En la interfaz, trae tu HUD o tableta y ve a Crear.
Crear una entidad para ser utilizada como base de la paleta. Puede ser una entidad de caja o esfera.
Ve a la pestaña "Properties" y selecciona el menú desplegable "Shape". Cambia la selección "Shape" a "Octagon".
Nombra a tu entidad como "'Paint-Palette-Base" seleccionando el campo de texto en la parte superior de la pestaña "Properties".
Selecciona el color de la paleta que deseas en el selector "Color".
Desplázate hacia abajo hasta la sección "Spatial". Cambia las dimensiones locales a {x: 0.55, y: 0.5, z: 0.55}.
Desplázate hacia abajo hasta la seccón "Behavior". Marca el campo "Grabbable".
Para crear los colores de pintura:
En la interfaz, trae tu HUD o tableta y ve a Crear.
Crear una entidad de esfera para ser utilizada como tu primer color de pintura.
Ve a la pestaña "Properties" y nombra a tu entidad como "Paint-Color" seleccionando el campo de texto en la parte superior de la pestaña.
Selecciona el color de pintura que deseas en el selector "Color".
Desplázate hasta la sección "Spatial". Cambia las dimensiones locales a {x: 0.1, y: 0.05, z: 0.1}
En la aplicación de Herramientas de Crear, selecciona la base de tu paleta y ve a la pestaña "Properties".
Copia el "entityID".
Selecciona tu color de pintura y ve a la pestaña "Properties".
En el campo de texto "Parent", pega el "entityID" de la base de tu paleta.
Utiliza las asas de agarre (grab handless) para ajustar la posición y el tamaño de la pintura en la paleta.
Desplázate hacia abajo hasta la sección "Behavior" y des-selecciona el campo "Grabbable".
Repite los pasos anteriores para crear colores de pintura adicionales para tu paleta.
Crear un lienzo de "Pixeles" (Pixel Canvas)
El último componente que compone nuestro conjunto de pintura es el lienzo que usaremos para nuestra pintura de estilo "píxel". Te proporcionamos un archivo JSON para que importes un lienzo, por lo que no necesitas realizar cada paso individualmente, pero puedes importar la cuadrícula varias veces para crear un espacio de pintura más grande, si así lo deseas.
En la interfaz, ve a Menu > Edit y selecciona "Import Entities from URL".
Paste this URL into the dialog window and select 'OK'.
El lienzo está formado por entidades de caja vinculadas a una sola placa posterior, pero puedes usar cualquier entidad para crear una escena que pueda pintarse de esta manera.
Agregar un Script de Pincel de Pintura
Para comenzar a pintar en el lienzo, debes escribir un guión de pincel que sirva como nuestra lógica de "pintura". Este script:
Comprueba si el cabezal del pincel ha chocado con otra entidad.
Comprueba si esta entidad es un color de pintura y cambia el color del cabezal del pincel.
Comprueba si la entidad es una entidad diferente. Si no es un color de pintura, el script "transferirá" su color a la otra entidad.
Para agregar el script del pincel:
En la interfaz, trae tu HUD o tableta y ve a Crear.
Selecciona la entidad Paint-Brush-Head.
Ve a a la pestaña "Properties" y desplázate hacia abajo hasta "Behavior".
Next to 'Script', paste the script URL. In this case, it is 'brushScript.js'.
Después de cerrar la apliación Crear, ¡Pruébalo pintando en el lienzo de tu dominio!
Ver también