mirror of
https://github.com/godotengine/godot-website.git
synced 2025-12-31 09:48:43 +03:00
30958212b9
* Update features.html A few minor tweaks to wording, added some links, and removed the "New in 4.0" texts as 4.0 isn't particularly new now, so it made the page seem a little dated. * Improved flow of a sentence * You "specialize in" something, not "specialize on" * Apply suggestions from code review Co-authored-by: Hugo Locurcio <hugo.locurcio@hugo.pro> * Apply suggestions from code review Co-authored-by: Hugo Locurcio <hugo.locurcio@hugo.pro> --------- Co-authored-by: Hugo Locurcio <hugo.locurcio@hugo.pro>
645 lines
18 KiB
HTML
645 lines
18 KiB
HTML
---
|
|
permalink: /features/index.html
|
|
title: "Features"
|
|
description: "Discover what Godot has to offer for 2D and 3D game development."
|
|
layout: default
|
|
---
|
|
|
|
{% include header.html %}
|
|
|
|
<link rel="stylesheet" href="/assets/css/transparent-nav.css?2">
|
|
<style>
|
|
.features-why {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: radial-gradient(ellipse closest-side at 50% 45%, #6469ac, #364b7c, #12122b);
|
|
padding-top: 60px;
|
|
margin-bottom: 24px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.features-why {
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
}
|
|
}
|
|
|
|
.features-why h2 {
|
|
color: var(--dark-color-text-title);
|
|
font-size: 40px;
|
|
margin: 36px 54px 8px 54px;
|
|
}
|
|
|
|
.btn-see-showcase {
|
|
line-height: 26px;
|
|
text-align: center;
|
|
}
|
|
|
|
.feature-container {
|
|
display: grid;
|
|
justify-content: center;
|
|
column-gap: 28px;
|
|
row-gap: 24px;
|
|
grid-template-columns: 1fr;
|
|
margin: auto;
|
|
margin-bottom: 42px;
|
|
width: 1200px;
|
|
max-width: 1200px;
|
|
}
|
|
@media (max-width: 1250px) {
|
|
.feature-container {
|
|
width: auto;
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
}
|
|
}
|
|
@media (max-width: 900px) {
|
|
.feature-container {
|
|
width: auto;
|
|
overflow: auto;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.feature-container h3 {
|
|
font-size: 22px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.feature-container.feature-container-2x {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
.feature-container.feature-container-2x h3 {
|
|
grid-column: span 2;
|
|
}
|
|
@media (max-width: 1020px) {
|
|
.feature-container.feature-container-2x {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.feature-container.feature-container-2x h3 {
|
|
grid-column: span 1;
|
|
}
|
|
}
|
|
|
|
.feature-container.feature-container-3x {
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
}
|
|
.feature-container.feature-container-3x h3 {
|
|
grid-column: span 3;
|
|
}
|
|
@media (max-width: 1020px) {
|
|
.feature-container.feature-container-3x {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
.feature-container.feature-container-3x h3 {
|
|
grid-column: span 2;
|
|
}
|
|
}
|
|
@media (max-width: 800px) {
|
|
.feature-container.feature-container-3x {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.feature-container.feature-container-3x h3 {
|
|
grid-column: span 1;
|
|
}
|
|
}
|
|
|
|
.feature-card {
|
|
background-color: var(--card-background-color);
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
transition: 0.1s filter;
|
|
}
|
|
.feature-card:hover {
|
|
filter: brightness(112.5%);
|
|
}
|
|
|
|
.feature-card h4 {
|
|
color: var(--feature-heading-color);
|
|
font-family: var(--default-font-family);
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
margin: 0;
|
|
}
|
|
|
|
.feature-card p {
|
|
font-size: 95%;
|
|
margin-top: 24px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.feature-card strong {
|
|
color: var(--feature-note-color);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.feature-card code {
|
|
background-color: #0f172e36;
|
|
border-radius: 3px;
|
|
padding: 1px 4px;
|
|
}
|
|
|
|
.features-showreel {
|
|
background-color: var(--dark-color);
|
|
color: var(--dark-color-text-hl);
|
|
padding: 24px 32px 8px 32px;
|
|
margin-bottom: 36px;
|
|
width: auto;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.features-showreel p {
|
|
margin-top: 0;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.features-complete-list {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.features-priorities-list {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 0;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.features-complete-list .btn.btn-flat.btn-flat-white,
|
|
.features-priorities-list .btn.btn-flat.btn-flat-white {
|
|
color: var(--base-color-text-title);
|
|
}
|
|
|
|
.features-showcase {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--dark-color-text-hl);
|
|
width: 100%;
|
|
}
|
|
|
|
.showcase-carousel {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 720px;
|
|
aspect-ratio: 16/9;
|
|
margin: 100px 0 60px 0;
|
|
}
|
|
@media (max-width: 540px) {
|
|
.showcase-carousel {
|
|
margin-top: 60px;
|
|
}
|
|
}
|
|
|
|
.showcase-frame {
|
|
position: absolute;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
aspect-ratio: 16/8;
|
|
transform: scale(1.7) translate(1.46%, 3.1%);
|
|
filter: brightness(0.85) saturate(0.75);
|
|
}
|
|
|
|
.showcase-flip-left,
|
|
.showcase-flip-right {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 12px;
|
|
width: 20px;
|
|
height: 36px;
|
|
transform: translateY(-50%);
|
|
background-image: url('/assets/icons/arrow-flip.svg');
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
cursor: pointer;
|
|
filter: drop-shadow(var(--more-shadow));
|
|
z-index: 5;
|
|
}
|
|
.showcase-flip-left {
|
|
transform: translateY(-50%) scaleX(-1.0);
|
|
}
|
|
.showcase-flip-right {
|
|
left: auto;
|
|
right: 12px;
|
|
}
|
|
|
|
.showcase-items {
|
|
position: relative;
|
|
overflow: hidden;
|
|
aspect-ratio: 16/9;
|
|
}
|
|
|
|
.showcase-item {
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: var(--dark-color);
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.showcase-item-transition {
|
|
transition: transform 0.4s ease-in-out, z-index 0.1s linear 0.4s;
|
|
}
|
|
|
|
.showcase-item img {
|
|
width: 100%;
|
|
}
|
|
|
|
.showcase-credits {
|
|
position: absolute;
|
|
bottom: 12px;
|
|
right: 16px;
|
|
background: var(--hero-text-background-color);
|
|
border-radius: 8px;
|
|
padding: 2px 10px;
|
|
}
|
|
|
|
.showcase-title {
|
|
color: white;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.showcase-author {
|
|
color: #b3c1df;
|
|
font-size: 95%;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.showcase-credits a {
|
|
text-decoration: none;
|
|
}
|
|
</style>
|
|
|
|
<div class="features-why">
|
|
<h2>
|
|
Why Godot is right for you
|
|
</h2>
|
|
|
|
<div class="features-showcase" id="showcase">
|
|
<p>
|
|
A picture is worth a thousand words, and these developers have chosen Godot for their projects:
|
|
</p>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// We assume that it can't be wrapped more than once.
|
|
const wrapIndex = (index) => {
|
|
if (index < 0) {
|
|
return showcaseItems.length + index;
|
|
}
|
|
if (index >= showcaseItems.length) {
|
|
return showcaseItems.length - index;
|
|
}
|
|
return index;
|
|
};
|
|
|
|
const showcaseItems = document.querySelectorAll('.showcase-item');
|
|
let currentIndex = Math.floor(Math.random() * showcaseItems.length);
|
|
|
|
const setItemByIndex = (itemIndex, firstTime = false) => {
|
|
const prevIndex = wrapIndex(currentIndex - 1);
|
|
const nextIndex = wrapIndex(currentIndex + 1);
|
|
|
|
showcaseItems.forEach((item, index) => {
|
|
if (index === itemIndex) {
|
|
if (!firstTime) {
|
|
item.classList.add('showcase-item-transition');
|
|
}
|
|
item.style.zIndex = '2';
|
|
item.style.transform = 'translateX(0)';
|
|
}
|
|
else if (index === prevIndex) {
|
|
if (!firstTime) {
|
|
item.classList.add('showcase-item-transition');
|
|
}
|
|
item.style.zIndex = '3';
|
|
item.style.transform = 'translateX(-100%)';
|
|
}
|
|
else if (index === nextIndex) {
|
|
if (!firstTime) {
|
|
item.classList.add('showcase-item-transition');
|
|
}
|
|
item.style.zIndex = '3';
|
|
item.style.transform = 'translateX(100%)';
|
|
}
|
|
else {
|
|
item.classList.remove('showcase-item-transition');
|
|
item.style.zIndex = '1';
|
|
item.style.transform = 'translateX(0)';
|
|
}
|
|
});
|
|
}
|
|
setItemByIndex(currentIndex, true);
|
|
|
|
const prevItemButton = document.querySelector('.showcase-flip-left');
|
|
prevItemButton.addEventListener('click', () => {
|
|
currentIndex = wrapIndex(currentIndex - 1);
|
|
setItemByIndex(currentIndex);
|
|
});
|
|
const nextItemButton = document.querySelector('.showcase-flip-right');
|
|
nextItemButton.addEventListener('click', () => {
|
|
currentIndex = wrapIndex(currentIndex + 1);
|
|
setItemByIndex(currentIndex);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<div class="showcase-carousel">
|
|
<img src="/assets/features/editor-frame.webp?2" class="showcase-frame" />
|
|
|
|
<div class="showcase-items">
|
|
{% for project in site.showcase %}
|
|
{% if project.featured_in_home %}
|
|
<div class="showcase-item">
|
|
<img src="{{ project.gallery[0] }}" load="lazy" alt="{{ project.title }} - {{ project.author }}" />
|
|
<div class="showcase-credits">
|
|
<a href="{{ project.url }}">
|
|
<span class="showcase-title">{{ project.title }}</span> <span class="showcase-author">- {{ project.author }}</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="showcase-flip-left"></div>
|
|
<div class="showcase-flip-right"></div>
|
|
</div>
|
|
|
|
<a href="/showcase/" class="btn btn-flat btn-flat-white btn-flat-frosted btn-see-showcase">
|
|
See more projects made with Godot
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="features-wrapper">
|
|
|
|
<div class="container" id="features">
|
|
<h2>Main features</h2>
|
|
</div>
|
|
|
|
<div class="feature-container feature-container-3x" id="design">
|
|
<h3>Intuitive scene-driven design</h3>
|
|
|
|
<div class="card feature-card">
|
|
<h4>Build your game from simple blocks</h4>
|
|
<p>
|
|
Use building blocks called nodes to create more complex and reusable
|
|
scenes. Add scripts to your scenes and customize built-in behavior to
|
|
implement your unique game mechanics. Rely on composition and node hierarchy
|
|
to make game logic clear at a glance.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card feature-card">
|
|
<h4>Extend beyond features provided by the engine</h4>
|
|
<p>
|
|
Make your scenes into full-featured components, with tools for your
|
|
designers to tweak and adjust the look and function. Share your components
|
|
with the community of like-minded developers as addons and templates.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card feature-card">
|
|
<h4>Create data-driven elements with custom resources</h4>
|
|
<p>
|
|
Define scriptable objects called resources
|
|
to describe characters, entities, and data structures in your game. Use
|
|
your custom objects directly in the editor by assigning them to nodes.
|
|
Resources come with a high-level API to store and read them, and they support
|
|
every Godot type, including other resources.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feature-container feature-container-2x" id="script">
|
|
<h3>Coding tools that fit your needs</h3>
|
|
|
|
<div class="card feature-card">
|
|
<h4>Write code without hurdles with a high-level scripting language</h4>
|
|
<p>
|
|
Get things done quickly with Godot's built-in scripting language GDScript.
|
|
Inspired by Python and other languages, it is easy to pick up even if you
|
|
are a beginner. Tight engine integration allows it to express game logic
|
|
in a clear and natural form.
|
|
<br><br>
|
|
GDScript offers optional static typing support,
|
|
boosting your coding efficiency and runtime performance. Powerful language
|
|
features and first-class functions allow for expressive yet concise code.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card feature-card">
|
|
<h4>Leverage your C# experience to feel right at home</h4>
|
|
<p>
|
|
If you're an experienced C# user, Godot offers you first-class support
|
|
for the .NET platform. Power your games with familiar libraries and give
|
|
them a performance boost, while still benefiting from close engine integration.
|
|
<br><br>
|
|
<strong>Note:</strong> .NET support is provided as a dedicated engine executable.
|
|
<a href="https://docs.godotengine.org/en/latest/tutorials/scripting/c_sharp/index.html#c-platform-support">C# support is available for desktop and mobile platforms as of Godot 4.2.</a>
|
|
Web support should be added in the future, but until then,
|
|
<a href="/download/3.x/">Godot 3</a> remains a supported option.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card feature-card">
|
|
<h4>Pick from a variety of community-supported languages</h4>
|
|
<p>
|
|
Godot is built to be extended, and that means you can choose
|
|
a programming language not provided by the Godot team itself.
|
|
Thanks to our community there are many language bindings for
|
|
popular tools like Rust, Nim, Python, and JavaScript.
|
|
<br><br>
|
|
C⁠+⁠+ support comes officially in the form of
|
|
the GDExtension API, which gives you a way to script and program your game
|
|
components for maximum performance without having to recompile the engine.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card feature-card">
|
|
<h4>Modify the engine itself and integrate with third-party libraries</h4>
|
|
<p>
|
|
Thanks to the modular structure and straightforward build process of Godot
|
|
you can create your own engine modules. Gain every last drop of performance
|
|
or integrate with many third-party libraries with low-level C⁠+⁠+ code.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feature-container feature-container-3x" id="features_3d">
|
|
<h3>Simple yet powerful 3D engine</h3>
|
|
|
|
<div class="card feature-card">
|
|
<h4>Support both high and low-end devices</h4>
|
|
<p>
|
|
Make beautiful 3D games for a range of devices,
|
|
from powerful desktop computers to mid-range Android
|
|
phones. Powered by OpenGL, Godot allows your projects
|
|
to run on most modern GPUs, including integrated graphics.
|
|
<br><br>
|
|
With the Vulkan, Direct3D 12, and Metal renderers,
|
|
and a set of modern graphical features, bring your worlds
|
|
to life and harvest the power of gaming GPUs for your
|
|
benefit.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card feature-card">
|
|
<h4>Seamlessly integrate with your asset pipeline</h4>
|
|
<p>
|
|
Bring your 3D models into your game world with a robust
|
|
importing pipeline. Take entire scenes — with animated models,
|
|
lighting, cameras, and physics objects — and customize how
|
|
the engine views them. Modify your assets and see changes
|
|
in the engine immediately.
|
|
<br><br>
|
|
Import Blender files directly
|
|
for fast iterations or use familiar glTF and FBX formats.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card feature-card">
|
|
<h4>Create animated videos and prerendered cutscenes in engine</h4>
|
|
<p>
|
|
With the Movie Maker mode, you
|
|
can record gameplay and scripted scenes from your project at
|
|
a stable framerate and guaranteed simulation speed. Together
|
|
with Godot's animation capabilities, make the most out of the
|
|
engine's visuals.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feature-container feature-container-3x" id="features_2d">
|
|
<h3>Specialized 2D workflow for games and apps</h3>
|
|
|
|
<div class="card feature-card">
|
|
<h4>Work with a real 2D and pixel-based unit system</h4>
|
|
<p>
|
|
Thanks to a dedicated 2D pipeline, you can forget about the Z-axis,
|
|
and simplify your game logic. Think in pixels and screen coordinates,
|
|
while the engine does the rest.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card feature-card">
|
|
<h4>Save time creating 2D worlds with a tile map editor</h4>
|
|
<p>
|
|
Whether you want procedural generation or a meticulously hand-crafted
|
|
level, with Godot's built-in tile map editor you can achieve every goal.
|
|
Import a sprite and convert it into a database of building blocks for
|
|
your 2D worlds.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card feature-card">
|
|
<h4>Master usability with a flexible GUI system</h4>
|
|
<p>
|
|
Build scalable and adaptive user interfaces with Godot's unique
|
|
GUI system. Created specifically to power layouts common to games,
|
|
it is also capable of handling complex UI applications and tools.
|
|
<br><br>
|
|
<em>For an example of what Godot's UI system is capable of, see the Godot editor itself!</em>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="features-showreel">
|
|
<div class="feature-container">
|
|
<h3>Choice of many developers</h3>
|
|
|
|
<p>
|
|
Watch our annual showreel videos to see more examples of projects using Godot!
|
|
</p>
|
|
|
|
{% include showreel-shelf.html %}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feature-container feature-container-3x" id="deploy">
|
|
<h3>Cross-platform support with one project</h3>
|
|
|
|
<div class="card feature-card">
|
|
<h4>Deliver your game to desktop, mobile, and web</h4>
|
|
<p>
|
|
Develop and publish your project on any modern desktop platform.
|
|
Let everyone play your game by deploying to web and mobile.
|
|
Make your game handle various forms of inputs and share the same
|
|
project between every platform.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card feature-card">
|
|
<h4>Test directly on your target device</h4>
|
|
<p>
|
|
Iterate on real hardware, or with
|
|
an emulator, by deploying your game directly to the target device
|
|
over SSH. Run any project on a mobile device, on another desktop,
|
|
or on your favorite Linux-based handheld with full debug and inspect
|
|
capabilities.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card feature-card">
|
|
<h4>Partner with a publisher to target consoles</h4>
|
|
<p>
|
|
If you want to release to a console, you can find several
|
|
third-party publishers which specialize in that. Godot games
|
|
can run on any modern hardware, so all you need to worry about
|
|
is your performance and controls.
|
|
<br><br>
|
|
Read more about <a href="/consoles/">console support in Godot</a>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="feature-container feature-container-2x" id="open_source">
|
|
<h3>Completely open and free</h3>
|
|
|
|
<div class="card feature-card">
|
|
<h4>Download and create with no contracts or hidden fees</h4>
|
|
<p>
|
|
Godot is free under the <a href="https://docs.godotengine.org/en/stable/about/complying_with_licenses.html">MIT license</a>. This means you don't owe
|
|
us anything (other than a friendly mention), and can do with your
|
|
project or even the engine itself whatever you want. Build your game
|
|
or build your own engine on top of it — it's all in your hands.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card feature-card">
|
|
<h4>Find the logic behind any system in an open-source codebase</h4>
|
|
<p>
|
|
No need to wait for a support team to respond when you can read
|
|
the source code. Godot is an open book, and you can figure out everything
|
|
that is not yet documented after a single <code>git checkout</code>.
|
|
If you find and fix an issue, we will appreciate a PR upstream too.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="features-complete-list">
|
|
<a href="https://docs.godotengine.org/en/stable/about/list_of_features.html" class="btn btn-flat btn-flat-white btn-flat-frosted">
|
|
View a complete list of features
|
|
</a>
|
|
</div>
|
|
|
|
<div class="features-priorities-list">
|
|
<a href="/priorities/" class="btn btn-flat btn-flat-white btn-flat-frosted">
|
|
View a list of priorities for upcoming features
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{% include /download/download-section.html %}
|
|
|
|
{% include footer.html %}
|