mirror of
https://github.com/godotengine/godot-website.git
synced 2026-01-04 06:09:55 +03:00
2fa65521ee
This PR replaces the current CMS website with a static version of it built using Jekyll. - Everything should be working 1 to 1 with the same permalinks except for the `/news` page (not articles) which was renamed as `/blog` (old links will redirect to new ones). - The showcase entries on the home page now redirect to their showcase page in our site so that the user can choose which store front or page to visit next. - I also changed the first link from the nav bar to go to the showcase page since the features one is still pretty outdated. Co-authored-by: Yuri Sizov <yuris@humnom.net>
555 lines
15 KiB
HTML
555 lines
15 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 %}
|
||
|
||
<style>
|
||
.main-download {
|
||
margin-top: 48px;
|
||
}
|
||
|
||
#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);
|
||
}
|
||
|
||
#sponsors .flex {
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
#sponsors .sponsor {
|
||
background-color: var(--sponsor-background-color);
|
||
border: 14px solid var(--sponsor-background-color);
|
||
border-radius: 8px 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
height: 80px;
|
||
box-sizing: border-box;
|
||
margin-bottom: 8px;
|
||
margin-left: 8px;
|
||
overflow: auto;
|
||
opacity: 0.85;
|
||
transition: opacity 0.2s;
|
||
}
|
||
|
||
#sponsors .sponsor:hover {
|
||
filter: brightness(105%);
|
||
opacity: 1.0;
|
||
}
|
||
|
||
#sponsors img {
|
||
mix-blend-mode: multiply;
|
||
width: inherit;
|
||
height: 100%;
|
||
}
|
||
|
||
#sponsors .silver .sponsor {
|
||
background-color: var(--sponsor-silver-background-color);
|
||
border-color: var(--sponsor-silver-background-color);
|
||
height: 68px;
|
||
}
|
||
|
||
#sponsors .gold .sponsor {
|
||
background-color: var(--sponsor-gold-background-color);
|
||
border-color: var(--sponsor-gold-background-color);
|
||
}
|
||
|
||
#sponsors .platinum .sponsor {
|
||
background-color: var(--sponsor-platinum-background-color);
|
||
border-color: var(--sponsor-platinum-background-color);
|
||
height: 100px;
|
||
}
|
||
|
||
.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);
|
||
}
|
||
|
||
.img-auto-size {
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.btn.btn-flat.btn-hero-learn-more {
|
||
background-color: rgb(111 111 111 / 27%);
|
||
-webkit-backdrop-filter: blur(4px);
|
||
backdrop-filter: blur(4px);
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.main-download {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
header {
|
||
box-shadow: none;
|
||
margin-bottom: -70px;
|
||
background-color: rgb(134 144 154 / 15%);
|
||
-webkit-backdrop-filter: blur(4px);
|
||
backdrop-filter: blur(4px);
|
||
}
|
||
|
||
@media (max-width: 1200px) {
|
||
input#nav_toggle_cb:checked~header {
|
||
background-color: var(--navbar-background-color);
|
||
}
|
||
}
|
||
|
||
/* Overwriting nav style */
|
||
nav#nav a {
|
||
color: white;
|
||
}
|
||
|
||
nav#nav .fund a {
|
||
color: var(--fund-color);
|
||
background-color: var(--base-color);
|
||
}
|
||
|
||
.nav-logo {
|
||
display: none;
|
||
}
|
||
|
||
.nav-logo.dark-logo {
|
||
display: inline;
|
||
}
|
||
|
||
#nav_toggle_btn {
|
||
filter: invert(100%) saturate(0%) brightness(120%);
|
||
}
|
||
|
||
@media (max-width: 1200px) {
|
||
nav#nav .fund a {
|
||
background-color: transparent;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 1200px) and (prefers-color-scheme: light) {
|
||
nav#nav a {
|
||
color: var(--navbar-link-color);
|
||
}
|
||
|
||
input#nav_toggle_cb:checked~header #nav_head #nav_toggle_btn {
|
||
filter: none;
|
||
}
|
||
|
||
input#nav_toggle_cb:checked~header #nav_head .nav-logo {
|
||
display: inline;
|
||
}
|
||
|
||
input#nav_toggle_cb:checked~header #nav_head .nav-logo.dark-logo {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1200px) {
|
||
nav#nav .fund {
|
||
margin-right: 0px;
|
||
}
|
||
|
||
nav#nav .fund a {
|
||
color: var(--fund-color);
|
||
background-color: var(--base-color);
|
||
border-radius: 9px;
|
||
box-shadow: inset 0 0 0 2px var(--fund-color);
|
||
padding: 13px;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<section class="hero">
|
||
<div class="background-image" style="background-image: url()"></div>
|
||
<div class="wrapper">
|
||
<div class="copy container">
|
||
<h1>The game engine you've been waiting for.</h1>
|
||
<p>The Godot Engine is a free, all-in-one, cross-platform game engine that makes it easy for you to create 2D and
|
||
3D games.</p>
|
||
|
||
<div class="main-download">
|
||
<a href="/download/windows" class="btn btn-download set-os-download-url">
|
||
<div class="download-title">Download</div>
|
||
<div class="download-hint">{{ site.stable_version }}</div>
|
||
</a>
|
||
<a href="/features" class="btn btn-flat btn-flat-white btn-hero-learn-more">Learn more</a>
|
||
</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 }}');" href="{{ post.url }}"></div>
|
||
<div class="content">
|
||
<h3>{{ post.title }}</h3>
|
||
<p class="excerpt">{{ post.excerpt }}</p>
|
||
</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>
|
||
</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 GDNative.
|
||
</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>
|
||
</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/community/contributing/ways_to_contribute.html#contributing-code"
|
||
class="btn btn-flat" 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/community/contributing/ways_to_contribute.html#contributing-to-the-documentation"
|
||
class="btn btn-flat" 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/community/contributing/ways_to_contribute.html#testing-and-reporting-issues"
|
||
class="btn btn-flat" target="_blank" rel="noopener">Learn more</a>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<section id="donations" class="padded">
|
||
<div class="container sm-full">
|
||
<img id="sfc_graphic" src="/assets/home/sfc.svg" alt="Software Freedom Conservancy logo" width="1" height="1"
|
||
class="img-auto-size" loading="lazy">
|
||
<h3 class="text-center">Donate</h3>
|
||
<p class="small auto-margin">
|
||
You don't need to be an engine developer to help Godot. Consider donating to speed up development and make
|
||
Godot Engine even more awesome!
|
||
</p>
|
||
|
||
<a href="/donate" class="btn btn-flat btn-flat-white">Learn more</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="sponsors">
|
||
<div class="container sm-full padded">
|
||
<h2 class="text-center">Sponsored by</h2>
|
||
|
||
<div class="platinum flex">
|
||
<a class="sponsor card" href="https://www.gamblify.com/" target="_blank" rel="noopener">
|
||
<img src="/assets/home/sponsors/gamblify.png" width="312" height="66" alt="Gamblify" loading="lazy">
|
||
</a>
|
||
<a class="sponsor card" href="http://spiffcode.com/" target="_blank" rel="noopener">
|
||
<img src="/assets/home/sponsors/spiffcode.png" width="291" height="66" alt="Spiffcode" loading="lazy">
|
||
</a>
|
||
</div>
|
||
<div class="gold flex">
|
||
<a class="sponsor card" href="https://scp.games/pandemic/" target="_blank" rel="noopener">
|
||
<img src="/assets/home/sponsors/affray-interactive.png" width="220" height="66" alt="Affray Interactive"
|
||
loading="lazy">
|
||
</a>
|
||
<a class="sponsor card" href="https://playfulstudios.com/" target="_blank" rel="noopener">
|
||
<img src="/assets/home/sponsors/playful-studios.png" width="196" height="80" alt="Playful Studios"
|
||
loading="lazy">
|
||
</a>
|
||
<a class="sponsor card" href="http://robotgentleman.com/" target="_blank" rel="noopener">
|
||
<img src="/assets/home/sponsors/robot-gentleman.png" width="120" height="103" alt="Robot Gentleman"
|
||
loading="lazy">
|
||
</a>
|
||
</div>
|
||
<div class="silver flex">
|
||
<a class="sponsor card" href="https://developers.join-striked.com/home" target="_blank" rel="noopener">
|
||
<img src="/assets/home/sponsors/striked.png?v2" width="171" height="40" alt="Striked" loading="lazy">
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<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.image }}',
|
||
},
|
||
{% 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 %} |