mirror of
https://github.com/godotengine/godot-website.git
synced 2026-01-05 10:10:00 +03:00
5c406d2903
- Make downloads data-driven, create a database of versions; - Add a custom plugin to generate download URLs; - Use the new plugin for the regular downloads page as well.
268 lines
8.1 KiB
HTML
268 lines
8.1 KiB
HTML
---
|
|
permalink: /showcase/index.html
|
|
title: "Showcase - Godot Engine"
|
|
description: "Games made with the Godot Engine."
|
|
layout: default
|
|
---
|
|
|
|
{% include header.html %}
|
|
|
|
<div class="head">
|
|
<div class="container flex eqsize">
|
|
<div class="main">
|
|
<h1 class="intro-title">Showcase</h1>
|
|
</div>
|
|
<div class="tabs">
|
|
<a href="/features" class="title-font ">Features</a>
|
|
<a href="/showcase" class="title-font active ">Showcase</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<h2 class="title">Showreel videos</h2>
|
|
|
|
<p>
|
|
Every year, we make a series of videos highlighting the best games made with Godot. Here are the latest ones:
|
|
</p>
|
|
|
|
{% include showreel-shelf.html %}
|
|
|
|
<style>
|
|
.showcase-card h3 {
|
|
font-size: 33px;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.showcase-card p {
|
|
font-size: 14px;
|
|
margin: 0;
|
|
color: var(--secondary-color-text);
|
|
}
|
|
|
|
.showcase-card img.thumbnail {
|
|
max-width: 100%;
|
|
border-radius: 7px;
|
|
background-color: var(--card-background-color);
|
|
box-shadow: 0 5px 10px -3px #00000078;
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.showcase-card-caption {
|
|
display: flex;
|
|
column-gap: 12px;
|
|
justify-content: space-between;
|
|
margin: 0 14px;
|
|
}
|
|
|
|
.showcase-card-authors {
|
|
display: grid;
|
|
align-content: center;
|
|
}
|
|
|
|
.showcase-card-icons {
|
|
filter: none;
|
|
padding: 7px 0px 0px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.showcase-card-icons {
|
|
filter: invert();
|
|
}
|
|
}
|
|
|
|
.showcase-card .no-capsule {
|
|
aspect-ratio: 92 / 43;
|
|
background-size: cover;
|
|
background-position: center;
|
|
border-radius: 6px;
|
|
box-shadow: 0 5px 10px -3px #00000078;
|
|
margin-bottom: 7px;
|
|
text-align: center;
|
|
display: grid;
|
|
align-content: center;
|
|
}
|
|
|
|
.showcase-card .no-capsule h3 {
|
|
text-shadow: 0 4px 5px black;
|
|
}
|
|
</style>
|
|
|
|
<!-- Filter will go here -->
|
|
|
|
<h2 class="title">Made with Godot</h2>
|
|
|
|
<section class="flex grid showcase-cards" style="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))">
|
|
{% assign projects = site.showcase | sort: 'date' | reverse %}
|
|
{% for project in projects %}
|
|
{% if project.release_date != 'TBD' and project.tool != true %}
|
|
<a href="{{ project.url }}" style="text-decoration: none;">
|
|
<article class="showcase-card">
|
|
{% if project.image %}
|
|
<img class="thumbnail" src="{{ project.image }}" alt="{{ project.title }}" loading="lazy">
|
|
{% else %}
|
|
<div class="no-capsule" style="background-image: url({{ project.gallery[0] }})">
|
|
<h3>{{ project.title }}</h3>
|
|
</div>
|
|
{% endif %}
|
|
<div class="showcase-card-caption">
|
|
<div class="showcase-card-icons">
|
|
{% if project.windows %}
|
|
<img src="/assets/images/platforms/windows.svg" alt="Windows" title="Windows" style="margin: 0 0.125rem" width="24"
|
|
height="24">
|
|
{% endif %}
|
|
|
|
{% if project.macos %}
|
|
<img src="/assets/images/platforms/macos.svg" alt="Mac" title="Mac" style="margin: 0 0.125rem" width="24" height="24">
|
|
{% endif %}
|
|
|
|
{% if project.linux %}
|
|
<img src="/assets/images/platforms/linux.svg" alt="Linux" title="Linux" style="margin: 0 0.125rem" width="24"
|
|
height="24">
|
|
{% endif %}
|
|
|
|
{% if project.switch %}
|
|
<img src="/assets/images/platforms/switch.svg" alt="Nintendo Switch" title="Switch" style="margin: 0 0.125rem"
|
|
width="24" height="24">
|
|
{% endif %}
|
|
|
|
{% if project.html5 %}
|
|
<img src="/assets/images/platforms/web.svg" alt="HTML5" title="HTML5" style="margin: 0 0.125rem" width="24"
|
|
height="24">
|
|
{% endif %}
|
|
|
|
{% if project.android %}
|
|
<img src="/assets/images/platforms/android.svg" alt="Android" title="Android" style="margin: 0 0.125rem" width="24"
|
|
height="24">
|
|
{% endif %}
|
|
|
|
{% if project.ios %}
|
|
<img src="/assets/images/platforms/ios.svg" alt="iOS" title="iOS" style="margin: 0 0.125rem" width="24" height="24">
|
|
{% endif %}
|
|
|
|
{% if project.playstation %}
|
|
<img src="/assets/images/platforms/playstation.svg" alt="PlayStation" title="PlayStation" style="margin: 0 0.125rem"
|
|
width="24" height="24">
|
|
{% endif %}
|
|
|
|
{% if project.xbox %}
|
|
<img src="/assets/images/platforms/xbox.svg" alt="Xbox" title="Xbox" style="margin: 0 0.125rem" width="24" height="24">
|
|
{% endif %}
|
|
</div>
|
|
<div class="showcase-card-authors">
|
|
<p>{{ project.author }}</p>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</section>
|
|
|
|
<h2 class="title">Apps & Tools</h2>
|
|
|
|
<section class="flex grid showcase-cards" style="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))">
|
|
{% assign projects = site.showcase | sort: 'date' | reverse %}
|
|
{% for project in projects %}
|
|
{% if project.tool %}
|
|
<a href="{{ project.url }}" style="text-decoration: none;">
|
|
<article class="showcase-card">
|
|
{% if project.image %}
|
|
<img class="thumbnail" src="{{ project.image }}" alt="{{ project.title }}" loading="lazy">
|
|
{% else %}
|
|
<div class="no-capsule" style="background-image: url({{ project.gallery[0] }})">
|
|
<h3>{{ project.title }}</h3>
|
|
</div>
|
|
{% endif %}
|
|
<div class="showcase-card-caption">
|
|
<div class="showcase-card-icons">
|
|
{% if project.windows %}
|
|
<img src="/assets/images/platforms/windows.svg" alt="Windows" title="Windows" style="margin: 0 0.125rem" width="24"
|
|
height="24">
|
|
{% endif %}
|
|
|
|
{% if project.macos %}
|
|
<img src="/assets/images/platforms/macos.svg" alt="Mac" title="Mac" style="margin: 0 0.125rem" width="24" height="24">
|
|
{% endif %}
|
|
|
|
{% if project.linux %}
|
|
<img src="/assets/images/platforms/linux.svg" alt="Linux" title="Linux" style="margin: 0 0.125rem" width="24"
|
|
height="24">
|
|
{% endif %}
|
|
|
|
{% if project.switch %}
|
|
<img src="/assets/images/platforms/switch.svg" alt="Nintendo Switch" title="Switch" style="margin: 0 0.125rem"
|
|
width="24" height="24">
|
|
{% endif %}
|
|
|
|
{% if project.html5 %}
|
|
<img src="/assets/images/platforms/web.svg" alt="HTML5" title="HTML5" style="margin: 0 0.125rem" width="24"
|
|
height="24">
|
|
{% endif %}
|
|
|
|
{% if project.android %}
|
|
<img src="/assets/images/platforms/android.svg" alt="Android" title="Android" style="margin: 0 0.125rem" width="24"
|
|
height="24">
|
|
{% endif %}
|
|
|
|
{% if project.ios %}
|
|
<img src="/assets/images/platforms/ios.svg" alt="iOS" title="iOS" style="margin: 0 0.125rem" width="24" height="24">
|
|
{% endif %}
|
|
|
|
{% if project.playstation %}
|
|
<img src="/assets/images/platforms/playstation.svg" alt="PlayStation" title="PlayStation" style="margin: 0 0.125rem"
|
|
width="24" height="24">
|
|
{% endif %}
|
|
|
|
{% if project.xbox %}
|
|
<img src="/assets/images/platforms/xbox.svg" alt="Xbox" title="Xbox" style="margin: 0 0.125rem" width="24" height="24">
|
|
{% endif %}
|
|
</div>
|
|
<div class="showcase-card-authors">
|
|
<p>{{ project.author }}</p>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</section>
|
|
|
|
<h2 class="title">Coming soon</h2>
|
|
<section class="flex grid showcase-cards" style="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))">
|
|
{% assign projects = site.showcase | sort: 'date' | reverse %}
|
|
{% for project in projects %}
|
|
{% if project.release_date == 'TBD' %}
|
|
<a href="{{ project.url }}" style="text-decoration: none;">
|
|
<article class="showcase-card">
|
|
{% if project.image %}
|
|
<img class="thumbnail" src="{{ project.image }}" alt="{{ project.title }}" loading="lazy">
|
|
{% else %}
|
|
<div class="no-capsule" style="background-image: url({{ project.gallery[0] }})">
|
|
<h3>{{ project.title }}</h3>
|
|
</div>
|
|
{% endif %}
|
|
<div class="showcase-card-caption">
|
|
<div></div>
|
|
<div class="showcase-card-authors">
|
|
<p>{{ project.author }}</p>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</section>
|
|
|
|
<p style="margin-top: 3rem" id="submit-project">
|
|
<strong>Interested in showcasing your published game on this page?</strong>
|
|
Use <a
|
|
href="https://docs.google.com/forms/d/e/1FAIpQLSdhNEywWfk7tm4ABSxmPfnJrKwGPAoYbzRfZlHmu9iZ5CJ5Pw/viewform?usp=sf_link">this
|
|
form</a>.
|
|
</p>
|
|
</div>
|
|
|
|
{% include footer.html %}
|