443 lines
15 KiB
Text
443 lines
15 KiB
Text
|
.. _doc_exporting_basics:
|
||
|
|
|
||
|
|
Exporting
|
||
|
|
=========
|
||
|
|
|
||
|
|
Overview
|
||
|
|
--------
|
||
|
|
|
||
|
|
Now that you have a working game, you probably want to share your success with
|
||
|
|
others. However, it's not practical to ask your friends to download Godot
|
||
|
|
just so they can open your project. Instead, you can *export* your project,
|
||
|
|
converting it into a "package" that can be run by anyone.
|
||
|
|
|
||
|
|
The way you export your game depends on what platform you are targeting. In
|
||
|
|
this tutorial, you'll learn how to export the *Dodge the Creeps* game for a
|
||
|
|
variety of platforms. First, however, we need to make some changes to the
|
||
|
|
way the game works.
|
||
|
|
|
||
|
|
.. note:: If you haven't made "Dodge the Creeps" yourself yet, please read
|
||
|
|
:ref:`doc_your_first_2d_game` before continuing with this tutorial.
|
||
|
|
|
||
|
|
Preparing the project
|
||
|
|
---------------------
|
||
|
|
|
||
|
|
In *Dodge the Creeps*, we used keyboard controls to move the player's character.
|
||
|
|
This is fine if your game is being played on a PC platform, but on a phone
|
||
|
|
or tablet, you need to support touchscreen input. Because a click event can
|
||
|
|
be treated the same as a touch event, we'll convert the game to a click-and-move
|
||
|
|
input style.
|
||
|
|
|
||
|
|
By default, Godot emulates mouse input from touch input. That means that if
|
||
|
|
anything is coded to happen on a mouse event, touch will trigger it as well.
|
||
|
|
Godot can also emulate touch input from mouse clicks, which we will need to be
|
||
|
|
able to keep playing our game on our computer after we switch to touch input.
|
||
|
|
|
||
|
|
In **Project > Project Settings**, under **Input Devices > Pointing**, enable
|
||
|
|
**Emulate Touch From Mouse**.
|
||
|
|
|
||
|
|
.. image:: img/export_touchsettings.png
|
||
|
|
|
||
|
|
We also want to ensure that the game scales consistently on different-sized screens,
|
||
|
|
so in the project settings go to **Display**, then click on **Window**. In the **Stretch**
|
||
|
|
options, set **Mode** to ``2d`` and **Aspect** to ``keep``.
|
||
|
|
|
||
|
|
Since we are already in the **Window** settings, we should also set under **Handheld**
|
||
|
|
the **Orientation** to ``portrait``.
|
||
|
|
|
||
|
|
.. image:: img/export_handheld_stretchsettings.png
|
||
|
|
|
||
|
|
Next, we need to modify the ``Player.gd`` script to change the input method.
|
||
|
|
We'll remove the key inputs and make the player move towards a "target" that's
|
||
|
|
set by the touch (or click) event.
|
||
|
|
|
||
|
|
Here is the full script for the player, with comments noting what we've
|
||
|
|
changed:
|
||
|
|
|
||
|
|
.. tabs::
|
||
|
|
.. code-tab:: gdscript GDScript
|
||
|
|
|
||
|
|
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)
|
||
|
|
|
||
|
|
.. code-tab:: csharp
|
||
|
|
|
||
|
|
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);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
Setting a main scene
|
||
|
|
--------------------
|
||
|
|
|
||
|
|
The main scene is the one that your game will start in. For this
|
||
|
|
*Dodge the Creeps* example, in
|
||
|
|
**Project -> Project Settings -> Application -> Run**, set **Main Scene**
|
||
|
|
to ``Main.tscn`` by clicking the folder icon and selecting it.
|
||
|
|
|
||
|
|
Export templates
|
||
|
|
----------------
|
||
|
|
|
||
|
|
To export the project, you need to download the *export templates* from the
|
||
|
|
http://godotengine.org/download. These templates are optimized versions of the engine
|
||
|
|
without the editor pre-compiled for each platform. You can also
|
||
|
|
download them in Godot by clicking on **Editor -> Manage Export Templates**:
|
||
|
|
|
||
|
|
.. image:: img/export_template_menu.png
|
||
|
|
|
||
|
|
.. note::
|
||
|
|
|
||
|
|
If you've downloaded Godot from
|
||
|
|
`Steam <https://store.steampowered.com/app/404790/Godot_Engine/>`__,
|
||
|
|
export templates are already included. Therefore, you don't need to download
|
||
|
|
them using the **Manage Export Templates** dialog.
|
||
|
|
|
||
|
|
In the window that appears, you can click **Download** to get the template
|
||
|
|
version that matches your version of Godot.
|
||
|
|
|
||
|
|
.. image:: img/export_template_manager.png
|
||
|
|
|
||
|
|
.. note::
|
||
|
|
|
||
|
|
Export templates are bound to a specific Godot version. If you upgrade
|
||
|
|
Godot, you must download templates that match the new version.
|
||
|
|
|
||
|
|
Export presets
|
||
|
|
--------------
|
||
|
|
|
||
|
|
Next, you can configure the export settings by clicking on **Project -> Export**.
|
||
|
|
|
||
|
|
Create a new export preset by clicking **Add...** and selecting a platform. You
|
||
|
|
can make as many presets as you like with different settings.
|
||
|
|
|
||
|
|
.. image:: img/export_presets_window.png
|
||
|
|
|
||
|
|
At the bottom of the window are two buttons. **Export PCK/ZIP** only creates
|
||
|
|
a packed version of your project's data. This doesn't include an executable
|
||
|
|
so the project can't be run on its own.
|
||
|
|
|
||
|
|
The second button, **Export Project**, creates a complete executable version
|
||
|
|
of your game, such as an ``.apk`` for Android or an ``.exe`` for Windows.
|
||
|
|
|
||
|
|
In the **Resources** and **Features** tabs, you can customize how the game is
|
||
|
|
exported for each platform. We can leave those settings alone for now.
|
||
|
|
|
||
|
|
Exporting by platform
|
||
|
|
---------------------
|
||
|
|
|
||
|
|
In this section, we'll walk through the process for each platform,
|
||
|
|
including any additional software or requirements you'll need.
|
||
|
|
|
||
|
|
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.
|
||
|
|
|
||
|
|
.. note::
|
||
|
|
|
||
|
|
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.
|
||
|
|
|
||
|
|
.. note::
|
||
|
|
|
||
|
|
On Windows, if you want your exported executable to have a different icon
|
||
|
|
than the default one, you need to change it manually. See
|
||
|
|
:ref:`doc_changing_application_icon_for_windows`.
|
||
|
|
|
||
|
|
Android
|
||
|
|
~~~~~~~
|
||
|
|
|
||
|
|
.. tip::
|
||
|
|
|
||
|
|
Mobile devices come with a wide variety of capabilities. In most cases,
|
||
|
|
Godot's default settings will work, but mobile development is sometimes more
|
||
|
|
art than science, and you may need to do some experimenting and searching
|
||
|
|
for help in order to get everything working.
|
||
|
|
|
||
|
|
Before you can export your project for Android, you must download the following
|
||
|
|
software:
|
||
|
|
|
||
|
|
* Android SDK: https://developer.android.com/studio/
|
||
|
|
* Open JDK (**version 11 is required**, more recent versions won't work): https://adoptopenjdk.net/index.html
|
||
|
|
|
||
|
|
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.
|
||
|
|
|
||
|
|
Next, create a debug keystore by running the following command on your
|
||
|
|
system's command line:
|
||
|
|
|
||
|
|
.. code-block:: shell
|
||
|
|
|
||
|
|
keytool -keyalg RSA -genkeypair -alias androiddebugkey -keypass android -keystore debug.keystore -storepass android -dname "CN=Android Debug,O=Android,C=US" -validity 9999
|
||
|
|
|
||
|
|
Click on *Editor -> Editor Settings* in Godot and select the *Export/Android*
|
||
|
|
section. Here, you need to set the paths to the Android SDK applications on
|
||
|
|
your system and the location of the keystore you just created.
|
||
|
|
|
||
|
|
.. image:: img/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:
|
||
|
|
|
||
|
|
.. code-block:: shell
|
||
|
|
|
||
|
|
adb install dodge.apk
|
||
|
|
|
||
|
|
.. note:: Your device may need to be in *developer mode*. Consult your
|
||
|
|
device's documentation for details.
|
||
|
|
|
||
|
|
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:
|
||
|
|
|
||
|
|
.. image:: img/export_android_oneclick.png
|
||
|
|
|
||
|
|
Clicking this button builds the APK and copies it onto your device in one step.
|
||
|
|
|
||
|
|
iOS
|
||
|
|
~~~
|
||
|
|
|
||
|
|
.. note::
|
||
|
|
|
||
|
|
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.
|
||
|
|
|
||
|
|
You must also provide icons and splash screen images as shown below:
|
||
|
|
|
||
|
|
.. image:: img/export_ios_settings.png
|
||
|
|
|
||
|
|
Click **Export Project** and select a destination folder.
|
||
|
|
|
||
|
|
Once you have successfully exported the project, you'll find the following
|
||
|
|
folders and files have been created in your selected location:
|
||
|
|
|
||
|
|
.. image:: img/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.
|
||
|
|
|
||
|
|
When the export is complete, you'll have a folder containing the following
|
||
|
|
files:
|
||
|
|
|
||
|
|
.. image:: img/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.
|
||
|
|
|
||
|
|
.. image:: img/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.
|
||
|
|
|
||
|
|
.. image:: img/export_web_export_with_debug_disabled.png
|
||
|
|
|
||
|
|
.. note::
|
||
|
|
|
||
|
|
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 <https://github.com/godotengine/godot/issues>`_.
|