Mi Primer Script



Mi Primer Script

En GB Engine, los scripts se escriben utilizando el lenguaje javascript, javascript es el lenguaje utilizado para desarrollar páginas web y es un lenguaje fácil de aprender, no se requieren conocimientos de programación para este tutorial. Pero te recomiendo que aprendas los conceptos básicos de la programación en javascript antes de pasar al siguiente tutorial.


El objeto script se usa para controlar objetos usando código javascript, y se comporta de la misma manera que cualquier otro objeto, tienen posición, escala y rotaciones, pueden tener hijos y usarse como contenedor.

Después de crear un objeto de secuencia de comandos, es posible abrir el editor de secuencias de comandos haciendo doble clic en el objeto de secuencia de comandos en el explorador de objetos (lado derecho). El editor de secuencias de comandos se abre en una nueva pestaña. Los nuevos scripts tienen una plantilla de código básica con espacios para escribir código.




Para permitir un acceso más fácil a los elementos del programa, los scripts también tienen acceso a los siguientes atributos;

self: se utiliza para acceder a los atributos del objeto del script (posición, rotación, escala, hijos, etc.).

program: se usa para acceder a la instancia del programa, se puede usar para cambiar la escena actual, acceder a recursos (getMaterialByName, getTextureByName, etc.).

scene: se utiliza para acceder a los atributos de la escena en ejecución.

keyboard: proporciona acceso a la entrada del teclado.

mouse: proporciona acceso a la entrada del mouse.


Script functions

Hay algunos nombres de funciones reservados, que son usados ​​por el tiempo de ejecución de GB Engine para ejecutar código de scripts. En este tutorial trabajaremos solo con los métodos de inicialización, actualización y eliminación.

initialize: el método initialize se llama cuando se carga la escena, normalmente se usa para crear nuevos objetos mediante programación, obtener objetos de la escena, inicializar variables, etc.

update: se llama a cada fotograma antes de dibujar la escena en la pantalla, se puede usar para controlar el objeto, obtener valores de entrada, cambiar los atributos del objeto, etc.

dispose: se llama cuando se cierra el programa, debe usarse para limpiar objetos, desconectarse de flujos de datos, etc.

onMouseOver(objects): se llama cuando el mouse está sobre un objeto que es secundario del objeto de secuencia de comandos y se puede combinar con las funciones del mouse para verificar si se hizo clic en un objeto. Recibió una matriz de objetos como parámetro.

onResize(x, y): se llama cada vez que se cambia el tamaño de la ventana del programa.

onAppData(data): se utiliza para recibir datos de la página del host, los datos se reciben como argumento.

Mover un objeto

Para mover un objeto, comenzamos adjuntando ese objeto como hijo del objeto script, podemos hacerlo arrastrando el objeto deseado al objeto script, en este tutorial usaremos el objeto cubo en la escena predeterminada. Comencemos probando el siguiente código.

function initialize()
{
self.position.x += 2;
}

Este código moverá el cubo 2 puntos en el eje x cuando se inicia el programa, pero, después de mover el objeto, permanece en su lugar.

Para animar un objeto, podemos mover nuestro código al método de actualización, en lugar de jugar con la posición del objeto, intentemos cambiar ahora su rotación probando el siguiente código.

function update()
{
self.rotation.y += 0.01;
}

Keyboard and Mouse input

Es posible usar el teclado y el mouse para mover objetos. Esto se puede hacer usando los objetos Teclado y Ratón dentro de los scripts. El siguiente código gira un objeto en el eje y usando el delta del mouse, y mueve el objeto alrededor usando las teclas de flecha del teclado.

function update()
{
self.rotation.y += Mouse.delta.x * 0.01;

if(Keyboard.keyPressed(Keyboard.LEFT))
{
	self.position.x -= 0.1;
}
if(Keyboard.keyPressed(Keyboard.RIGHT))
{
	self.position.x += 0.1;
}
}

Getting objects

Es posible acceder a otros objetos y recursos con scripts, en el siguiente ejemplo usamos el método scene.getObjectByName() para obtener un objeto por su nombre (en este caso un objeto llamado box), si se encuentran varios objetos con el mismo nombre se devuelve el primero.

Los recursos se almacenan en el programa, de manera similar, los métodos program.getMaterialByName(), program.getTextureByName(), etc. se pueden usar para obtenerlos (consulte la página de documentación de la API ResourceManager para obtener más información).

var object;

function initialize()
{
object = scene.getObjectByName("box");
}

function update()
{
object.rotation.y += 0.01;
}

Otra forma de acceder a los objetos es navegando por la estructura de árbol, cada objeto tiene un padre y sus hijos, el padre apunta al objeto de arriba y los hijos es una matriz de todos los objetos de abajo.

En el siguiente código, colocamos el primer objeto dentro de los scripts y lo hacemos rotar sin rotar el script en sí. Tenga cuidado al acceder a los objetos secundarios o padres directamente, ya que depende de la ubicación del objeto en el proyecto, un cambio puede romper el código.

var object;

function initialize()
{
object = self.children[0];
}

function update()
{
object.rotation.y += 0.01;
}

Switch scenes

Es posible crear múltiples escenas en el editor y cambiar entre ellas usando scripts. Se puede acceder a las escenas desde la variable de programa accesible para todos los scripts. El método setScene() descarta la escena actual y carga una nueva escena, recibe el nombre de la escena o el objeto de la escena (almacenado en la matriz program.scenes) como argumento.

El siguiente código se puede utilizar para cambiar a la "escena2" después de presionar la tecla W en el teclado. Para volver a la escena original, scene2 tiene que implementar una lógica similar, no hay un flujo de navegación de escena automático.

function update(delta)
{
if(Keyboard.keyPressed(Keyboard.W))
{
	program.setScene("scene2");
}
}

Object attributes

El puntero automático en el objeto de secuencia de comandos se puede utilizar para almacenar atributos adicionales a los que pueden acceder otras secuencias de comandos. Los atributos también se pueden almacenar en objetos, tenga cuidado de evitar colisiones con los ya existentes proporcionados por la API GB Engine.

En el siguiente ejemplo, creamos una variable de contador adjunta al objeto de secuencia de comandos y una función Incrementar Contador a la que se puede acceder y llamar por otros scripts.

self.counter = 0;

self.increaseCounter = function()
{
self.counter++;
}

DOM Elements

Es posible adjuntar elementos dom al programa creado. Para hacer esto, podemos usar la propiedad de división del programa que nos da acceso a un elemento de división DOM (padre del elemento canvas usado para dibujar contenido) donde podemos agregar elementos HTML.

El siguiente ejemplo muestra cómo crear una nueva división roja con un tamaño de 50 x 50, agregarla al programa y eliminarla cuando se cierre el programa.

var element = document.createElement("div");
element.style.width = "100px";
element.style.height = "100px";
element.style.position = "absolute";
element.style.top = "0px";
element.style.backgroundColor = "#FF0000";

function initialize()
{
	program.division.appendChild(element);
}

function dispose()
{
	program.division.removeChild(element);
}

Libraries

Para agregar bibliotecas externas a su script, primero debe importar el archivo js al proyecto, simplemente puede arrastrar el archivo fuente JS al explorador de activos o ir a Importar / Texto y seleccionar el archivo js.




Después de importar el archivo al proyecto, ahora puede incluirlo en su script usando el método include (nombre) preferiblemente en la parte superior de su código. Hay varios modos de inclusión disponibles de forma predeterminada, los objetos de script usan el modo de evaluación, la biblioteca se evalúa y ejecuta en el contexto de su script, el modo de anexar agrega el código de su biblioteca sobre el código de su script, esto hace que la compilación sea un poco más lenta pero definida localmente el código está disponible para su secuencia de comandos. El modo de secuencia de comandos se puede seleccionar en el panel de objetos de secuencia de comandos.

include("moment.min.js"); //https://momentjs.com/
// include("https://momentjs.com/downloads/moment.min.js");

var date, hour;

function initialize()
{
date = program.getObjectByName("date");
date.setText(moment().format("MMM Do YY"));

hour = program.getObjectByName("hour");
}

function update()
{
var text = moment().format('LTS');
if(text !== hour.text)
{
	hour.setText(text);
}
}

function dispose()
{
delete moment;
}











NUESTROS Partners
image
Official

MANTENTE CONECTADO

Twitch
image image
Facebook
image image
Twitter
image image
YouTube
image image
Instagram
image image
Vimeo
image image