Close
    Search Search

    Tutorial: Creación de un juego de plataformas 2D

    Página de tutoriales Este artículo es un tutorial intermedio.Todos los tutoriales · Tutoriales de secuencias de comandos

    En el último tutorial, cubrimos la creación de un paquete de salud en Roblox. En este tutorial cubriremos cómo obtener la entrada del jugador y personalizar los controles de los personajes. Para ello, haremos una cámara y un sistema de control sencillos para un juego de plataformas en 2D.

    Contenido

    • 1 Instancias necesarias
    • 2 tutorial
    • Cámara 3
      • Configuración de 3.1
      • 3.2 Mover la cámara
    • 4 Controles
      • 4.1 Controles de encuadernación
      • 4.2 Mover el personaje
    • Conclusión 5

    Instancias necesarias

    • Tutorial: Creación de un juego de plataformas 2DTutorial: Creación de un juego de plataformas 2D Espacio de trabajo
      • Tutorial: Creación de un juego de plataformas 2D de cámaras
      • Tutorial: Creación de un juego de plataformas 2DTutorial: Creación de un juego de plataformas 2D tu nombre
    • Tutorial: Creación de un juego de plataformas 2DTutorial: Creación de un juego de plataformas 2D JUGADORES
      • Tutorial: Creación de un juego de plataformas 2DTutorial: Creación de un juego de plataformas 2D tu nombre
    • Tutorial: Creación de un juego de plataformas 2DTutorial: Creación de un juego de plataformas 2D StarterPlayer
      • Tutorial: Creación de un juego de plataformas 2DTutorial: Creación de un juego de plataformas 2D StarterPlayerScripts
        • Tutorial: Creación de un juego de plataformas 2D CameraScript
        • Tutorial: Creación de un juego de plataformas 2D ControlScript
    • Tutorial: Creación de un juego de plataformas 2D ContextActionService
    • Tutorial: Creación de un juego de plataformas 2D RunService

    Tutorial

    Tutorial: Creación de un juego de plataformas 2D



    Antes de entrar en el código real del juego de plataformas, es importante comprender cómo están estructurados los juegos de Roblox. Cuando se inicia un juego de Roblox, un servidor de Roblox inicia una copia del juego. Esta copia del juego se llama Servidor. Este servidor es responsable de realizar un seguimiento de todas las partes y jugadores del juego. Cuando un jugador se une al juego, también ejecuta una copia en su máquina local; La versión del jugador del mundo del juego se llama Testimonios de .



    Siempre que se realiza algún cambio en el Servidor, como una parte en movimiento, esta información se envía a todos los Clientes automáticamente. los Scripts que hemos estado usando hasta ahora ejecutar exclusivamente en el servidor. Esto funciona cuando necesitamos ejecutar código que afecta al servidor, pero ¿qué pasa con la cámara y la entrada? Estas son cosas que afectan a los jugadores individuales pero no al servidor. Para escribir código para jugadores individuales, necesitamos usar un LocalScript. Este es un tipo especial de secuencia de comandos que se ejecuta en la máquina del Cliente, no en el servidor.

    de cámaras

    Hay varios estilos de cámaras para juegos 2D, pero el que usaremos es muy simple: si el jugador se mueve demasiado hacia la derecha de la cámara, entonces la cámara se moverá hacia la derecha. De lo contrario, la cámara permanece estacionaria.

    Preparar

    Lo primero que debe configurar será la propia cámara. Necesitamos sobrescribir el script de cámara predeterminado de Roblox para escribir el nuestro. Para hacer esto, inserte un LocalScript dentro StarterPlayerScripts y cámbiele el nombre CameraScript.

    Ahora necesitamos inicializar donde comienza la cámara.

    local cameraHeight = 12 local cameraZOffset = 20 local camera = game.Workspace.CurrentCamera local player = game.Players.LocalPlayer función local setupCamera () camera.CFrame = CFrame.new (Vector3.new (0, cameraHeight, cameraZOffset), Vector3. new (0, cameraHeight, 0)) end setupCamera () player.CharacterAdded: connect (setupCamera)

    Primero configuramos variables para la altura de la cámara, así como la distancia que queremos que tenga del avión por el que camina el jugador. Colocamos estas variables en la parte superior para que sean fáciles de encontrar, en caso de que necesitemos ajustarlas más tarde.


    Luego obtenemos variables para la cámara y el jugador. En un LocalScript, game.Workspace.CurrentCamera devuelve la cámara del jugador local y game.Players.LocalPlayer obtiene el jugador local.


    A continuación, hacemos una función para configurar la posición inicial de la cámara. Necesitaremos esto cuando el jugador ingrese por primera vez al juego, así como cada vez que su personaje reaparezca. En esta función simplemente configuramos el CFrame de la cámara.

    Un CFrame (abreviatura de CoordinateFrame), almacena tanto la posición de un objeto como su orientación. A menudo los ves usados ​​para manipular partes, pero la cámara de un jugador también tiene un CFrame. Si bien hay varias formas de hacer un CFrame, usaremos la función .new de CFrame que toma dos Vector3 como argumentos. El primer Vector3 determina la posición del CFrame. El segundo Vector3 establece hacia dónde apunta el CFrame.

    Invocamos a nuestra función inmediatamente después de declararla para que la cámara se coloque en la posición correcta tan pronto como el jugador se una. También vinculamos nuestra función al evento CharacterAdded del jugador para que se llame cada vez que el personaje del jugador reaparece.

    Moviendo la camara

    Ahora necesitamos mover la cámara mientras el personaje del jugador se mueve hacia la derecha. Cuando se trata de cámaras en movimiento, es importante comprender cómo funciona el renderizado en Roblox. La cámara define exactamente en qué lugar de la escena 3D queremos que vea el jugador, que luego determina qué se renderiza en la pantalla. El motor de Roblox actualiza esta representación cada 1/60 de segundo; Representar esto rápidamente significa que el espectador ve una transición suave entre los fotogramas. Para asegurarnos de que la cámara se mueva sin problemas, debemos asegurarnos de que la posición de la cámara se actualice cada vez que se produzca esta actualización de renderizado. Afortunadamente, esto es muy fácil con una función llamada BindToRenderStep.


    local cameraHeight = 12 local cameraZOffset = 20 local cameraXChase = 10 local cameraSpeed ​​= .25 local camera = game.Workspace.CurrentCamera local player = game.Players.LocalPlayer local RunService = juego: GetService ('RunService') función local setupCamera () cámara .CFrame = CFrame.new (Vector3.new (0, cameraHeight, cameraZOffset), Vector3.new (0, cameraHeight, 0)) end setupCamera () player.CharacterAdded: connect (setupCamera) función local onUpdate () if player.Character y player.Character: FindFirstChild ('Torso') luego local playerX = player.Character.Torso.Position.X local cameraX = camera.CFrame.pX if cameraX - cameraXChase <playerX luego camera.CFrame = camera.CFrame + Vector3.new (cameraSpeed, 0, 0) end end end RunService: BindToRenderStep ('Camera', Enum.RenderPriority.Camera.Value, onUpdate)

    Estamos haciendo un par de cosas aquí, así que veámoslas una a la vez. Primero declaramos algunas variables más. El primero, cameraXChase representa qué tan lejos puede estar el jugador de la cámara en la dimensión X antes de que la cámara comience a moverse. cameraSpeed ​​es lo lejos que se moverá la cámara en cada paso de renderizado para intentar alcanzar al jugador.


    La siguiente variable que declaramos es para RunService que solo necesitamos para su BindToRenderStep función. Saltando al final del script, observe que llamamos a BindToRenderStep con tres valores. El primero es un nombre para este enlace, el segundo es cuando se ejecuta durante el paso de renderizado y, por último, la función que queremos enlazar, en este caso nuestra función personalizada, onUpdate.

    onUpdate hace un par de cosas. Primero, verifica si el jugador tiene un modelo de personaje y si ese modelo tiene una parte llamada Torso. Si no tuviera estas cosas, es probable que el jugador esté desovando o abandonando el juego. En cualquiera de esos casos, realmente no necesitamos que la cámara haga nada. Pero si el jugador tiene un personaje, obtenemos la posición X del personaje y la posición X de la cámara. Luego comprobamos qué tan lejos está el personaje de la cámara. Si el personaje está demasiado cerca de la cámara, actualizamos el CFrame de la cámara a la derecha.

    Tutorial: Creación de un juego de plataformas 2D

    En este caso, la cámara no debería moverse.

    Tutorial: Creación de un juego de plataformas 2D

    En este caso, la cámara debería moverse.

    Controles

    Ahora que la cámara está bloqueada en la vista lateral, agreguemos controles personalizados para mover el personaje solo en el plano XY. Este código se ocupará de la entrada, por lo que tendrá que entrar en un LocalScript. Inserte otro LocalScript en StarterPlayerScripts y cámbiele el nombre a ControlScript. Al igual que la inserción de un LocalScript llamado CameraScript sobrescribe los controles de cámara predeterminados, ControlScript sobrescribirá los controles de caracteres predeterminados.

    Controles vinculantes

    En nuestro LocalScript necesitaremos crear varias funciones y vincularlas a la entrada del reproductor. Hay un par de formas de hacer esto, pero una de las más convenientes es usar ContextActionService. Este servicio le permite vincular múltiples fuentes de entrada a una sola función. Esto es muy útil si desea que su juego maneje los diversos dispositivos de entrada que admite Roblox (teclado, pantalla táctil, gamepad, etc.).

    Antes de escribir el código que realmente mueve al personaje del jugador, primero configuremos los enlaces de control. En nuestro nuevo LocalScript, agregue lo siguiente:

    local player = game.Players.LocalPlayer local RunService = juego: GetService ('RunService') local ContextActionService = juego: GetService ('ContextActionService') función local onLeft (actionName, inputState) final función local onRight (actionName, inputState) end función local onJump (actionName, inputState) finaliza la función local onUpdate () end RunService: BindToRenderStep ('Control', Enum.RenderPriority.Input.Value, onUpdate) ContextActionService: BindAction ('Left', onLeft, true, 'a', Enum.KeyCode .Left, Enum.KeyCode.DPadLeft) ContextActionService: BindAction ('Right', onRight, true, 'd', Enum.KeyCode.Right, Enum.KeyCode.DPadRight) ContextActionService: BindAction ('Jump', onJump, true, ' w ', Enum.KeyCode.Space, Enum.KeyCode.Up, Enum.KeyCode.DPadUp, Enum.KeyCode.ButtonA)

    Al igual que en nuestro CameraScript, estamos creando variables para el reproductor y para RunService. También necesitamos una variable para ContextActionService. Luego creamos una función para cada acción que el jugador puede realizar en nuestro juego: onLeft, onRight y onJump. Estas funciones toman dos argumentos: el nombre de la acción y el estado de la entrada que llamó a la función.


    ⚠️WarningAunque solo usaremos el parámetro inputState para las funciones de entrada, aún necesitamos incluir el nombre de la acción como el primer parámetro, ya que el evento que llama a estas funciones incluirá ambos. Por ejemplo, considere el siguiente código:

    función local test1 (a, b) imprimir (b) finalizar la función local test2 (b) imprimir (b) finalizar test1 ("perro", "gato") test2 ("perro", "gato") Si queremos la función que imprime cat en este caso, necesitaríamos usar test1 ya que cat se pasa como segundo parámetro.


    Como en CameraScript, también creamos una función de actualización que vinculamos a RenderStepped. Esta función en realidad hará el movimiento del carácter después de que manejemos la entrada. Asegúrese de que la prioridad del enlace esté configurada en Entrada (usamos Cámara antes).

    A continuación, vinculamos nuestras tres funciones de entrada usando BindAction. BindAction toma varios argumentos. El primero es el nombre de la acción. El segundo es la función que desea vincular. El tercer argumento es si desea crear automáticamente un botón para esta acción en dispositivos táctiles como teléfonos y tabletas. Por último, puede incluir una lista de las entradas que desea que activen la acción. Si la entrada es solo una tecla de letra en el teclado, puede incluirla como una cadena rodeada de comillas (""). De lo contrario, puede usar Enum.KeyCode para especificar teclas y botones especiales.

    Moviendo el personaje

    Ahora agreguemos el código para mover el personaje. Nuevamente, vamos a hacer el movimiento real en la función onUpdate. Todas las funciones de entrada establecerán variables que onUpdate usará para determinar cómo mover el carácter.

    local player = game.Players.LocalPlayer local RunService = juego: GetService ('RunService') local ContextActionService = juego: GetService ('ContextActionService') salto local = falso local leftValue, rightValue = 0, 0 función local onLeft (actionName, inputState) if inputState == Enum.UserInputState.Begin then leftValue = 1 elseif inputState == Enum.UserInputState.End then leftValue = 0 end end función local onRight (actionName, inputState) if inputState == Enum.UserInputState.Begin luego rightValue = 1 elseif inputState == Enum.UserInputState.End then rightValue = 0 end end local function onJump (actionName, inputState) if inputState == Enum.UserInputState.Begin then jumping = true elseif inputState == Enum.UserInputState.End then jumping = false end end función local onUpdate () si player.Character y player.Character: FindFirstChild ('Humanoid') entonces si salta entonces player.Character.Humanoid.Jump = true end local moveDirection = rightValue - leftValue player.Character.Humanoid: Move (Vector 3.new (moveDirection, 0,0), false) end end RunService: BindToRenderStep ('Control', Enum.RenderPriority.Input.Value, onUpdate) ContextActionService: BindAction ('Left', onLeft, true, 'a', Enum .KeyCode.Left, Enum.KeyCode.DPadLeft) ContextActionService: BindAction ('Right', onRight, true, 'd', Enum.KeyCode.Right, Enum.KeyCode.DPadRight) ContextActionService: BindAction ('Jump', onJump, true , 'w', Enum.KeyCode.Space, Enum.KeyCode.Up, Enum.KeyCode.DPadUp, Enum.KeyCode.ButtonA)

    Primero configuramos tres nuevas variables: jump, leftValue y rightValue. saltar es solo un valor booleano: el jugador va a saltar o no. Sin embargo, la izquierda y la derecha son un poco más complicadas. Cuando el jugador se mantiene a la izquierda, el personaje obviamente debe moverse a la izquierda, pero cuando el jugador presiona la derecha mientras se mantiene presionada la izquierda, el personaje debe detenerse. Si el jugador suelta ya sea hacia la izquierda o hacia la derecha, entonces el personaje debe moverse en la dirección de la tecla que aún se mantiene presionada. Hacer una variable para cada dirección será útil como verá en la función onUpdate.


    ⚠️WarningTal vez hayas notado que leftValue y rightValue se escribieron de una manera extraña. Hay varias formas de declarar variables en Lua, y este estilo es útil cuando desea utilizar menos líneas de código para establecer variables. Tenga en cuenta que la línea

    local leftValue, rightValue = 0, 0

    podría escribirse tan fácilmente como

    local leftValue = 0 local rightValue = 0


    En cada una de las funciones de entrada, verificamos inputState, que solo dice qué tipo de evento de entrada activó la función. En este caso, solo nos preocupamos cuando el jugador presiona una tecla (Enum.UserInputState.Begin) y cuando sueltan la tecla (Enum.UserInputState.End). En onLeft y onRight, si se presiona la tecla correspondiente, establecemos la variable correspondiente en 1. Si se suelta la tecla, el valor se establece en 0. En onJump, establecemos la variable de salto en verdadero cuando comienza la entrada de salto, y en falso cuando finaliza la entrada.

    En onUpdate, primero verificamos si el personaje del jugador existe y si es Humanoide está intacto. Si es así, verificamos si la variable de salto se estableció en verdadera. Si es así, establecemos el salto propiedad del humanoide del jugador a verdadero.


    ⚠️WarningNo es necesario establecer la propiedad Jump en falso en ningún momento. El motor de Roblox se encargará de eso automáticamente.


    onUpdate siguiente calcula en qué dirección mover el carácter restando leftValue de rightValue. Recuerde que estas variables se pueden configurar individualmente. Si ambos se mantienen presionados, el resultado será 0, lo que significa que el personaje no se moverá. Si se mantiene presionada una de las teclas, entonces uno de los valores será 1 y la diferencia será 1 o -1. Luego llamamos al Moverse función en el humanoide del personaje, pasando la diferencia que acabamos de calcular. Esta función obligará a un personaje a moverse en la dirección que le proporcionamos. Dado que solo establecemos un valor en la dimensión X, el personaje solo podrá moverse a lo largo de ese eje.

    Conclusión

    Con la combinación de scripts de cámara y control, ahora podemos configurar nuestro juego Roblox para que funcione como un juego de plataformas en 2D. Si desea agregar o expandir el sistema que configuramos aquí, tenga en cuenta cuándo usa Scripts y LocalScripts. Recuerde, si hay una mecánica de juego que afectará a todos los jugadores (como una trampa, plataformas móviles, etc.), entonces debe implementarse en un script. Si está agregando nuevos controles o comentarios específicos del jugador (como un movimiento de tablero, doble salto, efectos de atenuación de la cámara), esos deben ir en un LocalScript.

    Añade un comentario de Tutorial: Creación de un juego de plataformas 2D
    ¡Comentario enviado con éxito! Lo revisaremos en las próximas horas.