mirror of
https://github.com/godotengine/godot-website.git
synced 2026-01-04 06:09:55 +03:00
459 lines
13 KiB
HTML
459 lines
13 KiB
HTML
---
|
||
permalink: /
|
||
title: "Godot Engine - Free and open source 2D and 3D game engine"
|
||
description: "Godot provides a huge set of common tools, so you can just focus on making your game without reinventing
|
||
the wheel."
|
||
layout: default
|
||
---
|
||
|
||
{% include header.html %}
|
||
|
||
<link rel="stylesheet" href="/assets/css/transparent-nav.css">
|
||
<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 .btn-download {
|
||
width: 100%;
|
||
}
|
||
|
||
.main-download-links .download-3 {
|
||
text-align: center;
|
||
color: #ffffffd6;
|
||
text-shadow: 0 0 10px black;
|
||
font-weight: 100;
|
||
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;
|
||
}
|
||
}
|
||
|
||
#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>
|
||
Your free, open‑source<br>
|
||
game engine.
|
||
</h1>
|
||
<p>Develop your 2D & 3D games, cross-platform projects, or even XR ideas!</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">
|
||
<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">Download Latest</div>
|
||
<div class="download-hint">{{ stable_version_4.name }}</div>
|
||
</a>
|
||
|
||
<span class="download-3">Looking for <a href="/download/windows/" class="set-os-download-url" data-version="3" title="Download the long-term support version of Godot 3">Godot 3</a> or a <a href="/download/archive">previous version</a>?</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>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">More News</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section id="features" class="container padded">
|
||
<h2>A different way to make games</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>Innovative design</h4>
|
||
<p>
|
||
Godot's Node and Scene system gives you both power and flexibility
|
||
to create anything.
|
||
</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>Use the right language for the job</h4>
|
||
<p>
|
||
Keep your code modular with an object-oriented API using Godot's own
|
||
GDScript, C#, C++, or bring your own using GDExtension.
|
||
<div style="margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.6; opacity: 0.8">
|
||
C# support is currently only available for desktop and mobile platforms
|
||
as of Godot 4.2.<br>Use Godot 3 to run C# on the Web platform.
|
||
</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>Dedicated 2D engine</h4>
|
||
<p>
|
||
Make crisp and performant 2D games with Godot's dedicated 2D
|
||
rendering engine with real 2D pixel coordinates and 2D nodes.
|
||
</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"
|
||
style="background: linear-gradient(90deg, #196f36 7%, #28674e 29%, #2a4b46 65%, #3b6f4e 97%)" loading="lazy">
|
||
<div class="body">
|
||
<h4>Simple and powerful 3D</h4>
|
||
<p>
|
||
Godot's 3D nodes give you everything you need to build, animate,
|
||
and render your 3D worlds and characters.
|
||
</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>Release on all platforms</h4>
|
||
<p>
|
||
Deploy your game on desktop, mobile, and the web in seconds. Godot
|
||
even supports consoles through third party publishers.
|
||
</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>Open Source</h4>
|
||
<p>
|
||
Truly open development: anyone who contributes to Godot benefits
|
||
equally from others’ contributions.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="features-learn-more">
|
||
<a href="/features/" class="btn btn-flat btn-flat-white btn-flat-frosted">Learn more about using Godot</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="get_involved" class="container padded">
|
||
<h2>Get involved</h2>
|
||
<p>
|
||
Join the community and help create a game engine that belongs to everybody.
|
||
</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>Code</h4>
|
||
<p>
|
||
If you know how to code, you can help by fixing bugs and working with engine contributors towards the
|
||
implementation of new features.
|
||
</p>
|
||
<a href="https://docs.godotengine.org/en/stable/contributing/how_to_contribute.html#technical-contributions"
|
||
class="btn btn-flat btn-flat-frosted" target="_blank" rel="noopener">Learn more</a>
|
||
</div>
|
||
|
||
<div class="text-center base-padding">
|
||
<img src="/assets/home/document.svg" alt="" width="250" height="250" loading="lazy">
|
||
<h4>Document</h4>
|
||
<p>
|
||
Documentation quality is essential in a game engine; help make it better by updating the API reference, writing
|
||
new guides or submitting corrections.
|
||
</p>
|
||
<a href="https://docs.godotengine.org/en/stable/contributing/how_to_contribute.html#technical-contributions"
|
||
class="btn btn-flat btn-flat-frosted" target="_blank" rel="noopener">Learn more</a>
|
||
</div>
|
||
|
||
<div class="text-center base-padding">
|
||
<img src="/assets/home/report.svg" alt="" width="250" height="250" loading="lazy">
|
||
<h4>Report</h4>
|
||
<p>
|
||
Found a problem with the engine? Don't forget to report it so that developers can track it down.
|
||
</p>
|
||
<a href="https://docs.godotengine.org/en/stable/contributing/how_to_contribute.html#technical-contributions"
|
||
class="btn btn-flat btn-flat-frosted" target="_blank" rel="noopener">Learn more</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">
|
||
You don't need to be an engine developer to help Godot. Join the <a href="https://fund.godotengine.org/">development fund</a> and help us make the Godot Engine even more awesome!
|
||
</p>
|
||
|
||
<a href="https://fund.godotengine.org/" class="btn btn-flat btn-flat-white btn-flat-frosted">Donate</a>
|
||
</div>
|
||
</section>
|
||
|
||
{% include sponsors.html %}
|
||
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
// Updating the hero on the home page
|
||
// get the current html lang attribute
|
||
const htmlLang = document.documentElement.lang;
|
||
if (window.location.pathname === '/' || window.location.pathname === '/' + htmlLang || window.location.pathname === '/' + htmlLang + '/') {
|
||
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 %}
|
||
];
|
||
|
||
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 %}
|