mirror of
https://github.com/godotengine/godot-website.git
synced 2025-12-31 09:48:43 +03:00
468 lines
14 KiB
HTML
468 lines
14 KiB
HTML
---
|
|
permalink: /
|
|
title:
|
|
de: "Godot Engine - Kostenlose und Open Source 2D und 3D Game Engine"
|
|
en: "Godot Engine - Free and open source 2D and 3D game engine"
|
|
es: "Godot Engine - Motor de videojuegos 2D y 3D gratuito y de código abierto"
|
|
fr: "Godot Engine - Moteur de jeu vidéo 2D et 3D gratuit et open source"
|
|
ja: "Godot Engine - 無料でオープンソースの2D・3Dゲームエンジン"
|
|
ko: "Godot 엔진 - 자유 및 오픈 소스 2D 및 3D 게임 엔진"
|
|
pl: "Godot Engine - Darmowy i otwarty silnik gier 2D oraz 3D"
|
|
pt-br: "Godot Engine - Engine de jogos 2D e 3D gratuito e de código aberto"
|
|
zh-cn: "Godot Engine - 免费开源的 2D 与 3D 游戏引擎"
|
|
zh-tw: "Godot Engine - 免費開源的 2D 與 3D 遊戲引擎"
|
|
notitlesuffix: true
|
|
description: "Godot provides a huge set of common tools, so you can just focus on making your game without reinventing
|
|
the wheel."
|
|
layout: default
|
|
localize: ["de", "en", "es", "fr", "ja", "ko", "pl", "pt-br", "zh-cn", "zh-tw"]
|
|
---
|
|
|
|
{% include header.html %}
|
|
|
|
<link rel="stylesheet" href="/assets/css/transparent-nav.css?2">
|
|
<style>
|
|
.main-download {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 48px;
|
|
margin-top: 48px;
|
|
}
|
|
|
|
.main-download-links {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
|
|
.main-download-links-buttons {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 12px;
|
|
}
|
|
|
|
.main-download-links .btn-download {
|
|
width: 100%;
|
|
}
|
|
|
|
.main-download-links .btn-whats-new {
|
|
width: min-content;
|
|
text-wrap: nowrap;
|
|
background-color: #818181a8;
|
|
color: var(--primary-color-text-title);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.main-download-links .download-3 {
|
|
text-align: left;
|
|
color: #ffffffd6;
|
|
text-shadow: 0 0 10px black;
|
|
font-weight: 300;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.main-download-links .download-3 a {
|
|
color: inherit;
|
|
text-decoration-color: inherit;
|
|
text-decoration-thickness: 1px;
|
|
}
|
|
.main-download-links .download-3 a:hover {
|
|
color: white;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.main-download {
|
|
align-items: center;
|
|
flex-direction: column;
|
|
gap: 36px;
|
|
}
|
|
.main-download-links-buttons {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.main-download-links .download-3 {
|
|
text-align: center;
|
|
}
|
|
.main-download-links .btn-download,
|
|
.main-download-links .btn-whats-new {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
#donations {
|
|
background-color: var(--dark-color);
|
|
color: var(--dark-color-text);
|
|
overflow: auto;
|
|
text-align: center;
|
|
}
|
|
|
|
#donations h1,
|
|
#donations h2,
|
|
#donations h3 {
|
|
color: var(--dark-color-text-title);
|
|
}
|
|
|
|
.feature-link {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 20px;
|
|
}
|
|
|
|
.feature:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.features-row> :first-child,
|
|
.split-row> :first-child {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.features-row> :last-child,
|
|
.split-row> :last-child {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.feature img {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
position: relative;
|
|
background-color: #607080;
|
|
aspect-ratio: 3/2;
|
|
object-fit: cover;
|
|
object-position: top center;
|
|
}
|
|
|
|
.feature {
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: transform 200ms ease-in-out;
|
|
height: 100%;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.feature.dark {
|
|
background-color: var(--transparent-cover-darker);
|
|
}
|
|
|
|
.feature h4 {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.feature p {
|
|
margin: 0;
|
|
}
|
|
|
|
.feature .body {
|
|
padding: 24px;
|
|
}
|
|
|
|
.feature .dark h4 {
|
|
color: var(--dark-color-text-title);
|
|
}
|
|
|
|
.features-learn-more {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.img-auto-size {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.btn.btn-flat.btn-hero-learn-more {
|
|
margin: 0;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.features-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
#highlight .highlight-cover {
|
|
border-radius: 4px 4px 0 0;
|
|
}
|
|
|
|
#highlight .highlight-details {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
.news-list .button-container {
|
|
text-align: right;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.news-list .button-container {
|
|
text-align: left;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<section class="hero">
|
|
<div class="background-image" style="background-image: url()"></div>
|
|
<div class="wrapper">
|
|
<div class="copy container">
|
|
<h1>{% t home.h1 %}</h1>
|
|
<p>{% t home.subtitle %}</p>
|
|
|
|
<div class="main-download">
|
|
{% assign stable_version_3 = site.data.versions | find: "featured", "3" %}
|
|
{% assign stable_version_4 = site.data.versions | find: "featured", "4" %}
|
|
|
|
<div class="main-download-links">
|
|
<div class="main-download-links-buttons">
|
|
<a href="/download/windows/" class="btn btn-download set-os-download-url" data-version="4"
|
|
title="Download the latest version of Godot 4">
|
|
<div class="download-title">{% t home.download_latest %}</div>
|
|
<div class="download-hint">{{ stable_version_4.name }}</div>
|
|
</a>
|
|
<a href="/releases/" class="btn btn-whats-new"
|
|
title="See what's new in Godot">
|
|
<div class="download-title">{% t home.whats_new %}</div>
|
|
</a>
|
|
</div>
|
|
|
|
<span class="download-3">{% t home.looking_for %}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="credits">
|
|
<a href=""><span class="game"></span> <span class="by" style="opacity: 0.6;"></span></a>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="container padded">
|
|
<h2>{% t home.latest_news %}</h2>
|
|
<div class="flex eqsize responsive" style="gap: 30px;">
|
|
|
|
{% assign latest_posts = site.article | sort:"date" | reverse %}
|
|
{% for post in latest_posts limit:1 %}
|
|
<a href="{{ post.url }}" style="text-decoration: none">
|
|
<article class="article-card">
|
|
<div class="thumbnail" style="background-image: url('{{ post.image }}');"></div>
|
|
<div class="content">
|
|
<h3>{{ post.title }}</h3>
|
|
<p class="excerpt">{{ post.excerpt }}</p>
|
|
<span class="date" data-post-date="{{ post.date }}">{{ post.date | date: "%e %B %Y" }}</span>
|
|
</div>
|
|
</article>
|
|
</a>
|
|
{% endfor %}
|
|
|
|
<div class="news-list">
|
|
<div style="display: grid; gap: 18px;">
|
|
{% for post in latest_posts limit:3 offset:1 %}
|
|
{% if post != posts[0] %}
|
|
<a href="{{ post.url }}" style="text-decoration: none;">
|
|
<article class="article-card row">
|
|
<div class="thumbnail" style="background-image: url('{{ post.image }}');" href="{{ post.url }}"></div>
|
|
<div>
|
|
<h3>{{ post.title }}</h3>
|
|
<p class="excerpt">{{ post.excerpt | truncate: 103 }}</p>
|
|
<span class="date" data-post-date="{{ post.date }}">{{ post.date | date: "%e %B %Y" }}</span>
|
|
</div>
|
|
</article>
|
|
</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
<div class="button-container">
|
|
<a href="/blog/" class="btn no-margin">{% t home.more_news %}</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section id="features" class="container padded">
|
|
<h2>{% t home.cards.h2 %}</h2>
|
|
|
|
<div class="features-grid">
|
|
<a class="feature-link" href="/features#design" data-barba-prevent>
|
|
<div class="feature dark">
|
|
<img src="/assets/home/features/innovative.webp" alt="" width="1" height="1"
|
|
style="background: linear-gradient(90deg, #333747 11%, #2d3342 50%, #2d3342 68%, #272d3c 87%)" loading="lazy">
|
|
<div class="body">
|
|
<h4>{%t home.cards.design.title %}</h4>
|
|
<p>{%t home.cards.design.text %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="feature-link" href="/features#script" data-barba-prevent>
|
|
<div class="feature dark">
|
|
<img src="/assets/home/features/language.webp" alt="" width="1" height="1"
|
|
style="background: linear-gradient(90deg, #252a35 46%, #252a35 53%, #202630 76%, #202630 89%)" loading="lazy">
|
|
<div class="body">
|
|
<h4>{%t home.cards.script.title %}</h4>
|
|
<p>{%t home.cards.script.text %}<div style="margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.6; opacity: 0.8">{%t home.cards.script.extra %}</div></p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a class="feature-link" href="/features#features_2d" data-barba-prevent>
|
|
<div class="feature dark">
|
|
<img src="/assets/home/features/2d.webp" alt="" width="1" height="1"
|
|
style="background: linear-gradient(90deg, #196f36 7%, #28674e 29%, #2a4b46 65%, #3b6f4e 97%)" loading="lazy">
|
|
<div class="body">
|
|
<h4>{%t home.cards.2d.title %}</h4>
|
|
<p>{%t home.cards.2d.text %}</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="feature-link" href="/features#features_3d" data-barba-prevent>
|
|
<div class="feature dark">
|
|
<img src="/assets/home/features/3d.webp" alt="" width="1" height="1" title="Screenshot from the game 'Human Diaspora'"
|
|
style="background: linear-gradient(90deg, #196f36 7%, #28674e 29%, #2a4b46 65%, #3b6f4e 97%)" loading="lazy">
|
|
<div class="body">
|
|
<h4>{%t home.cards.3d.title %}</h4>
|
|
<p>{%t home.cards.3d.text %}</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="feature-link" href="/features#deploy" data-barba-prevent>
|
|
<div class="feature dark">
|
|
<img src="/assets/home/features/cross-platform.svg" alt="" width="1" height="1"
|
|
style="background-color: #333667" loading="lazy">
|
|
<div class="body">
|
|
<h4>{%t home.cards.deploy.title %}</h4>
|
|
<p>{%t home.cards.deploy.text %}</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<a class="feature-link" href="#get_involved" data-barba-prevent>
|
|
<div class="feature dark">
|
|
<img src="/assets/home/features/oss.svg" alt="" width="1" height="1" style="background-color: #333667"
|
|
loading="lazy">
|
|
<div class="body">
|
|
<h4>{%t home.cards.open.title %}</h4>
|
|
<p>{%t home.cards.open.text %}</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="features-learn-more">
|
|
<a href="/features/" class="btn btn-flat btn-flat-white btn-flat-frosted">{%t home.cards.cta %}</a>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="get_involved" class="container padded">
|
|
<h2>{%t home.get_involved.title %}</h2>
|
|
<p>{%t home.get_involved.text %}
|
|
</p>
|
|
|
|
<div class="flex eqsize responsive">
|
|
|
|
<div class="text-center base-padding">
|
|
<img src="/assets/home/code.svg" alt="" width="250" height="250" loading="lazy">
|
|
<h4>{%t home.get_involved.cards.code.title %}</h4>
|
|
<p>{%t home.get_involved.cards.code.text %}</p>
|
|
<a href="https://contributing.godotengine.org/en/latest/organization/how_to_contribute.html#technical-contributions"
|
|
class="btn btn-flat btn-flat-frosted" target="_blank" rel="noopener">{%t home.get_involved.cards.cta %}</a>
|
|
</div>
|
|
|
|
<div class="text-center base-padding">
|
|
<img src="/assets/home/document.svg" alt="" width="250" height="250" loading="lazy">
|
|
<h4>{%t home.get_involved.cards.document.title %}</h4>
|
|
<p>{%t home.get_involved.cards.document.text %}</p>
|
|
<a href="https://contributing.godotengine.org/en/latest/organization/how_to_contribute.html#technical-contributions"
|
|
class="btn btn-flat btn-flat-frosted" target="_blank" rel="noopener">{%t home.get_involved.cards.cta %}</a>
|
|
</div>
|
|
|
|
<div class="text-center base-padding">
|
|
<img src="/assets/home/report.svg" alt="" width="250" height="250" loading="lazy">
|
|
<h4>{%t home.get_involved.cards.report.title %}</h4>
|
|
<p>{%t home.get_involved.cards.report.text %}</p>
|
|
<a href="https://contributing.godotengine.org/en/latest/organization/how_to_contribute.html#technical-contributions"
|
|
class="btn btn-flat btn-flat-frosted" target="_blank" rel="noopener">{%t home.get_involved.cards.cta %}</a>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
<section id="donations" class="padded">
|
|
<div class="container sm-full">
|
|
<a href="https://godot.foundation" target="_blank" style="display: inline-block;">
|
|
<img id="foundation_graphic" src="/assets/home/foundation/godot-foundation-logo-dark.svg" alt="Godot Foundation logo" width="1" height="1"
|
|
class="img-auto-size" loading="lazy">
|
|
</a>
|
|
<p class="small auto-margin">{%t home.foundation.text %}</p>
|
|
|
|
<a href="https://fund.godotengine.org/" class="btn btn-flat btn-flat-white btn-flat-frosted">{%t home.foundation.donate %}</a>
|
|
</div>
|
|
</section>
|
|
|
|
{% include sponsors.html %}
|
|
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const authors = [
|
|
{% for project in site.showcase %}
|
|
{% if project.featured_in_home %}
|
|
{
|
|
game: '{{ project.title }}',
|
|
by: '{{ project.author }}',
|
|
url: '{{ project.url }}',
|
|
image: '{{ project.gallery[0] }}',
|
|
},
|
|
{% endif %}
|
|
{% endfor %}
|
|
{
|
|
game: 'Outskirts',
|
|
by: 'Jan Fidler',
|
|
url: 'https://jedenjenda23.itch.io/outskirts-godot-environment-demo',
|
|
image: '/assets/showcase/outskirts-godot-environment-demo.webp',
|
|
}
|
|
];
|
|
|
|
let author = authors[Math.floor(Math.random() * authors.length)];
|
|
document.querySelector('.hero .background-image').style.backgroundImage = `url(${author.image})`;
|
|
document.querySelector('.hero .credits a').href = author.url;
|
|
document.querySelector('.hero .credits a span.game').innerText = author.game;
|
|
document.querySelector('.hero .credits a span.by').innerText = ' - ' + author.by;
|
|
|
|
// Parallax effect: On page scroll move background-position up.
|
|
// This effect is disabled if user opted to have reduced motion in browser/OS settings.
|
|
const reducedMotionCheck = window.matchMedia('(prefers-reduced-motion)');
|
|
if (!reducedMotionCheck.matches) {
|
|
|
|
// Parallax effect lags on mobile, so we disable it based on the window resolution.
|
|
const parallaxImage = document.querySelector('section.hero .background-image');
|
|
const parallaxMinWidth = 768;
|
|
const parallaxSpeed = 0.4;
|
|
|
|
const parallaxTick = () => {
|
|
if (window.innerWidth > parallaxMinWidth) {
|
|
parallaxImage.style.transform = `translateY(${window.pageYOffset * parallaxSpeed}px)`;
|
|
} else {
|
|
parallaxImage.style.transform = 'none';
|
|
}
|
|
}
|
|
|
|
window.addEventListener("scroll", () => {
|
|
window.requestAnimationFrame(parallaxTick)
|
|
});
|
|
|
|
window.addEventListener("resize", () => {
|
|
window.requestAnimationFrame(parallaxTick)
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
|
|
{% include footer.html %}
|