Exportar

Sinopsis

Ahora que tienes un juego que funciona, probablemente quieras compartir tu éxito con otros. Sin embargo, no es práctico pedir a tus amigos que descarguen Godot sólo para que puedan abrir tu proyecto. En su lugar, puedes exportar el proyecto, convirtiéndolo en un "paquete" que cualquiera puede ser ejecutar.

La forma de exportar tu juego dependerá de la plataforma a la que te dirijas. En este tutorial, aprenderás a exportar el juego "Dodge the Creeps" a una gran variedad de plataformas. En primer lugar, sin embargo, tenemos que hacer algunos cambios en la forma en que funciona el juego.

Nota

Si aún no has terminado "Dodge the Creeps" por tu cuenta, por favor lee Tu primer juego antes de continuar con este tutorial.

Preparación del proyecto

En "Dodge the Creeps" usamos los controles del teclado para mover el personaje del jugador. Esto está bien si el juego se ejecuta en una plataforma de PC, pero en un teléfono o tableta, es necesario que sea compatible con la entrada de pantalla táctil. Dado que un evento de hacer clic se puede tratar como un evento táctil, convertiremos el juego a un estilo de entrada de movimiento y clic.

Por defecto Godot emula entrada de mouse a partir de entrada touch. Esto significa que si algo está programado para suceder ante un evento del mouse, los eventos touch se activaran también. También se puede emular entrada touch a partir de un clic del mouse, cosa que necesitaremos para seguir jugando nuestro juego desde la computadora una vez que hayamos cambiado a entrada touch.

En Proyecto > Ajustes de proyecto, debajo de Input Devices > Pointing, activar Emulate Touch From Mouse.

../../_images/export_touchsettings.png

También queremos asegurarnos de que el juego se escala de modo consistente en pantallas de diferentes tamaños, por lo que en la configuración del proyecto vaya a Display, luego haz clic en Window. En las opciones Stretch, establece Mode en "2d" y Aspect en "keep".

Ya que estamos en la configuración de ventanas, deberíamos establecer también en Portátil la Orientación a retrato.

../../_images/export_handheld_stretchsettings.png

A continuación, necesitamos modificar el script Player.gd para cambiar el método de entrada. Eliminaremos las entradas de teclado y haremos que el jugador se mueva hacia un "objetivo" establecido por un evento táctil (o de clic).

Aquí está el script completo para el jugador, con comentarios señalando lo que hemos cambiado:

extends Area2D

signal hit

export var speed = 400
var screen_size
# Add this variable to hold the clicked position.
var target = Vector2()

func _ready():
    hide()
    screen_size = get_viewport_rect().size

func start(pos):
    position = pos
    # Initial target is the start position.
    target = pos
    show()
    $CollisionShape2D.disabled = false

# Change the target whenever a touch event happens.
func _input(event):
    if event is InputEventScreenTouch and event.pressed:
        target = event.position

func _process(delta):
    var velocity = Vector2()
    # Move towards the target and stop when close.
    if position.distance_to(target) > 10:
        velocity = target - position

# Remove keyboard controls.
#    if Input.is_action_pressed("ui_right"):
#       velocity.x += 1
#    if Input.is_action_pressed("ui_left"):
#        velocity.x -= 1
#    if Input.is_action_pressed("ui_down"):
#        velocity.y += 1
#    if Input.is_action_pressed("ui_up"):
#        velocity.y -= 1

    if velocity.length() > 0:
        velocity = velocity.normalized() * speed
        $AnimatedSprite.play()
    else:
        $AnimatedSprite.stop()

    position += velocity * delta
    # We still need to clamp the player's position here because on devices that don't
    # match your game's aspect ratio, Godot will try to maintain it as much as possible
    # by creating black borders, if necessary.
    # Without clamp(), the player would be able to move under those borders.
    position.x = clamp(position.x, 0, screen_size.x)
    position.y = clamp(position.y, 0, screen_size.y)

    if velocity.x != 0:
        $AnimatedSprite.animation = "walk"
        $AnimatedSprite.flip_v = false
        $AnimatedSprite.flip_h = velocity.x < 0
    elif velocity.y != 0:
        $AnimatedSprite.animation = "up"
        $AnimatedSprite.flip_v = velocity.y > 0

func _on_Player_body_entered( body ):
    hide()
    emit_signal("hit")
    $CollisionShape2D.set_deferred("disabled", true)
using Godot;
using System;

public class Player : Area2D
{
    [Signal]
    public delegate void Hit();

    [Export]
    public int Speed = 400;

    private Vector2 _screenSize;
    // Add this variable to hold the clicked position.
    private Vector2 _target;

    public override void _Ready()
    {
        Hide();
        _screenSize = GetViewport().Size;
    }

    public void Start(Vector2 pos)
    {
        Position = pos;
        // Initial target us the start position.
        _target = pos;
        Show();
        GetNode<CollisionShape2D>("CollisionShape2D").Disabled = false;
    }

    // Change the target whenever a touch event happens.
    public override void _Input(InputEvent @event)
    {
        if (@event is InputEventScreenTouch eventMouseButton && eventMouseButton.Pressed)
        {
            _target = (@event as InputEventScreenTouch).Position;
        }
    }

    public override void _Process(float delta)
    {
        var velocity = new Vector2();
        // Move towards the target and stop when close.
        if (Position.DistanceTo(_target) > 10)
        {
            velocity = _target - Position;
        }

        // Remove keyboard controls.
        //if (Input.IsActionPressed("ui_right"))
        //{
        //    velocity.x += 1;
        //}

        //if (Input.IsActionPressed("ui_left"))
        //{
        //    velocity.x -= 1;
        //}

        //if (Input.IsActionPressed("ui_down"))
        //{
        //    velocity.y += 1;
        //}

        //if (Input.IsActionPressed("ui_up"))
        //{
        //    velocity.y -= 1;
        //}

        var animatedSprite = GetNode<AnimatedSprite>("AnimatedSprite");

        if (velocity.Length() > 0)
        {
            velocity = velocity.Normalized() * Speed;
            animatedSprite.Play();
        }
        else
        {
            animatedSprite.Stop();
        }

        Position += velocity * delta;
        // We still need to clamp the player's position here because on devices that don't
        // match your game's aspect ratio, Godot will try to maintain it as much as possible
        // by creating black borders, if necessary.
        // Without clamp(), the player would be able to move under those borders.
        Position = new Vector2(
            x: Mathf.Clamp(Position.x, 0, _screenSize.x),
            y: Mathf.Clamp(Position.y, 0, _screenSize.y)
        );

        if (velocity.x != 0)
        {
            animatedSprite.Animation = "walk";
            animatedSprite.FlipV = false;
            animatedSprite.FlipH = velocity.x < 0;
        }
        else if(velocity.y != 0)
        {
            animatedSprite.Animation = "up";
            animatedSprite.FlipV = velocity.y > 0;
        }
    }
    public void OnPlayerBodyEntered(PhysicsBody2D body)
    {
        Hide(); // Player disappears after being hit.
        EmitSignal("Hit");
        GetNode<CollisionShape2D>("CollisionShape2D").SetDeferred("disabled", true);
    }
}

Configurando la escena principal

La escena principal es en la que se iniciará el juego. Para este ejemplo Dodge the Creeps, ve a Proyecto -> Configuración del proyecto -> Aplicación -> Ejecución, establece Escena Principal a Main.tscn haciendo clic en el icono de la carpeta y seleccionándolo.

Plantillas de exportación

Para exportar el proyecto, es necesario descargar las plantillas de exportación de http://godotengine.org/download. Estas plantillas son versiones optimizadas del motor sin el editor pre-compilado para cada plataforma. También puedes descargarlos desde Godot haciendo clic en Editor -> Gestionar Plantillas de Exportación:

../../_images/export_template_menu.png

Nota

Si has descargado Godot de Steam, plantillas de exportación ya están incluidos. Por eso, no hace falta descargarlas con la ayuda de la ventana de comunicación Gestionar Plantillas de Exportación.

En la ventana que aparece, haz clic en "Descargar" para obtener la versión de la plantilla que coincida con tu versión de Godot.

../../_images/export_template_manager.png

Nota

Las plantillas de exportación están enlacidos a una versión especifica de Godot. Si actualizas Godot, tienes que descargar las plantillas correspondientes a la versión nueva.

Exportar Preajustes

A continuación, puedes configurar los ajustes de exportación haciendo clic en Proyecto -> Exportar.

Crea un nuevo preajuste de exportación haciendo clic en "Añadir..." y seleccionando una plataforma. Se pueden realizar tantos preajustes como se desee con diferentes ajustes.

../../_images/export_presets_window.png

En la parte inferior de la ventana hay dos botones. "Exportar PCK/ZIP" sólo crea una versión empaquetada de los datos de tu proyecto. Esto no incluye un ejecutable, por lo que el proyecto no puede ejecutarse por sí solo.

El segundo botón, "Exportar Proyecto", crea una versión ejecutable completa de tu juego, como un .apk para Android o un .exe para Windows.

En las pestañas "Recursos" y "Características", puedes personalizar cómo se exporta el juego para cada plataforma. Por ahora podemos dejar esos ajustes como están.

Exportando por plataforma

En esta sección, explicaremos el proceso para cada plataforma, incluyendo cualquier software o requisito adicional que necesites.

PC(Linux/macOS/Windows)

Exporting PC platforms works the same across the three supported operating systems. Open the export window and click Add... to create the preset(s) you want to make. Then click Export Project and choose a name and destination folder. Choose a location outside of your project folder.

Click Save and the engine will build the export files.

Nota

When exporting for macOS, if you export from a macOS computer, you'll end up with a .dmg file, while using Linux or Windows produces a .zip. In either case, the compressed file contains a macOS .app that you can double-click and run.

Nota

On Windows, if you want your exported executable to have a different icon than the default one, you need to change it manually. See Cambiar el icono de la aplicación en Windows.

Android

Truco

Los dispositivos móviles vienen con una amplia variedad de capacidades. En la mayoría de los casos, la configuración por defecto de Godot funcionará, pero el desarrollo móvil es a veces más arte que ciencia, y puede que necesites experimentar y buscar ayuda para que todo funcione.

Antes de poder exportar tu proyecto para Android, debes descargar el siguiente software:

When you run Android Studio for the first time, click on Configure -> SDK Manager and install Android SDK Platform Tools. This installs the adb command-line tool that Godot uses to communicate with your device.

A continuación, crea un almacén de claves de depuración ejecutando el siguiente comando en la línea de comandos de tu sistema:

keytool -keyalg RSA -genkeypair -alias androiddebugkey -keypass android -keystore debug.keystore -storepass android -dname "CN=Android Debug,O=Android,C=US" -validity 9999

Haz clic en Editor -> Ajustes del editor en Godot y abre la sección Export/Android. En este caso, debes establecer las rutas a las aplicaciones del Android SDK en tu sistema y la ubicación del almacén de claves que acabas de crear.

../../_images/export_editor_android_settings.png

Now you're ready to export. Click on Project -> Export and add a preset for Android (see above). Select the newly added Android preset. Under Options, go to Screen and set Orientation to Portrait. If your game is in landscape mode (i.e. the window width in pixels is greater than the window height), leave this on Landscape.

Click the Export Project button and Godot will build an APK you can download on your device. To do this on the command line, use the following:

adb install dodge.apk

Nota

Es posible que el dispositivo tenga que estar en modo desarrollador. Consulta la documentación de tu dispositivo para más detalles.

If your system supports it, connecting a compatible Android device will cause a One-click Deploy button to appear in Godot's playtest button area:

../../_images/export_android_oneclick.png

Al hacer clic en este botón se crea el APK y se copia en el dispositivo en un solo paso.

iOS

Nota

To build your game for iOS, you must have a computer running macOS with Xcode installed.

Before exporting, there are some settings that you must complete for the project to export successfully. First, the App Store Team Id, which you can find by logging in to your Apple developer account and looking in the Membership section.

También deberás proporcionar iconos e imágenes de pantalla de bienvenida como se muestra a continuación:

../../_images/export_ios_settings.png

Click Export Project and select a destination folder.

Una vez que se ha exportado con éxito el proyecto, encontrarás las siguientes carpetas y archivos creados en la ubicación seleccionada:

../../_images/export_xcode_project_folders.png

You can now open the project in Xcode and build the project for iOS. The Xcode build procedure is beyond the scope of this tutorial. See https://help.apple.com/xcode/mac/current/#/devc8c2a6be1 for more information.

HTML5 (web)

Click Export Project on the HTML5 preset. We don't need to change any of the default settings.

Cuando finalice la exportación, tendrás una carpeta que contiene los siguientes archivos:

../../_images/export_web_files.png

Viewing the .html file in your browser lets you play the game. However, you can't open the file directly. Instead, it needs to be served by a web server. If you don't have one set up on your computer, you can search online to find suggestions for your specific OS.

Point your browser at the URL where you've placed the HTML file. You may have to wait a few moments while the game loads before you see the start screen.

../../_images/export_web_example.png

The console window beneath the game tells you if anything goes wrong. You can disable it by disabling Export With Debug in the final file dialog that appears when you export the project.

../../_images/export_web_export_with_debug_disabled.png

Nota

While WebAssembly is supported in all major browsers, it is still an emerging technology and you may find some things that don't work. Make sure you have updated your browser to the most recent version, and report any bugs you find on the Godot GitHub repository.