Skip to content

Updated main website and showcase #205

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
paweljarosz merged 3 commits into from
Mar 6, 2026
Merged

Updated main website and showcase #205

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
662c12c
Updated banner and main website, added games to the showcase and upda…
paweljarosz Mar 5, 2026
8e4bc9e
Fixed banner image issues for low resolutions.
paweljarosz Mar 6, 2026
f59bc0e
Added Mad Skills Motocross 2 to the showcase.
paweljarosz Mar 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
404 changes: 316 additions & 88 deletions _data/games.json
View file
Open in desktop

Large diffs are not rendered by default.

20 changes: 20 additions & 0 deletions _data/showcase_featured_full.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
[
"family_island",
"brdf",
"once-upon-a-galaxy",
"lights-shadows",
"monkeymart",
"tiny-city",
"superweird",
"madskillsmotocross2",
"skullhorde",
"warnament",
"boreblasters",
"craftomation-101",
"piece-of-cake",
"plaguelords",
"punch_legend_simulator",
"drills_merge_master",
"hotel-rush",
"game-of-fitna"
]
14 changes: 7 additions & 7 deletions _includes/donors_and_partners.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<h5 style="margin-bottom: 1rem; margin-top: 2rem;">Corporate Platinum Partners</h5>
<div class="grid-150">
{%- for partner in platinum -%}
<a href="{{ partner.link }}" target="_blank"><img src="{{ partner.logo }}" style="max-height: 55px" alt="{{ partner.name }} logo"></a>
<a href="{{ partner.link }}" target="_blank"><img src="{{ partner.logo }}" loading="lazy" style="max-height: 55px" alt="{{ partner.name }} logo"></a>
{%- endfor -%}
</div>
{%- if include.button -%}{% include secondary_button.html link="/donate" text="Become a partner" %}{%- endif -%}
Expand All @@ -35,7 +35,7 @@ <h5 style="margin-bottom: 1rem; margin-top: 2rem;">Corporate Platinum Partners</
<h5 style="margin-bottom: 1rem; margin-top: 2rem;">Corporate Gold Partners</h5>
<div class="grid-100">
{%- for partner in gold -%}
<a href="{{ partner.link }}" target="_blank"><img src="{{ partner.logo }}" style="max-height: 44px" alt="{{ partner.name }} logo"></a>
<a href="{{ partner.link }}" target="_blank"><img src="{{ partner.logo }}" loading="lazy" style="max-height: 44px" alt="{{ partner.name }} logo"></a>
{%- endfor -%}
</div>
{%- if include.button -%}{% include secondary_button.html link="/donate" text="Become a partner" %}{%- endif -%}
Expand All @@ -51,7 +51,7 @@ <h5 style="margin-bottom: 1rem; margin-top: 2rem;">Corporate Gold Partners</h5>
<h5 style="margin-bottom: 1rem; margin-top: 2rem;">Corporate Silver Partners</h5>
<div class="grid-100">
{%- for partner in silver -%}
<a href="{{ partner.link }}" target="_blank"><img src="{{ partner.logo }}" style="max-height: 44px" alt="{{ partner.name }} logo"></a>
<a href="{{ partner.link }}" target="_blank"><img src="{{ partner.logo }}" loading="lazy" style="max-height: 44px" alt="{{ partner.name }} logo"></a>
{%- endfor -%}
</div>
{%- if include.button -%}{% include secondary_button.html link="/donate" text="Become a partner" %}{%- endif -%}
Expand All @@ -67,7 +67,7 @@ <h5 style="margin-bottom: 1rem; margin-top: 2rem;">Corporate Silver Partners</h5
<h5 style="margin-bottom: 1rem; margin-top: 2rem;">Corporate Bronze Partners</h5>
<div class="grid-100">
{%- for partner in bronze -%}
<a href="{{ partner.link }}" target="_blank"><img src="{{ partner.logo }}" style="max-height: 33px" alt="{{ partner.name }} logo"></a>
<a href="{{ partner.link }}" target="_blank"><img src="{{ partner.logo }}" loading="lazy" style="max-height: 33px" alt="{{ partner.name }} logo"></a>
{%- endfor -%}
</div>
{%- if include.button -%}{% include secondary_button.html link="/donate" text="Become a partner" %}{%- endif -%}
Expand All @@ -83,7 +83,7 @@ <h5 style="margin-bottom: 1rem; margin-top: 2rem;">Corporate Bronze Partners</h5
<h5 style="margin-bottom: 1rem; margin-top: 2rem;">Special Partners</h5>
<div class="grid-100">
{%- for partner in special -%}
<a href="{{ partner.link }}" target="_blank"><img src="{{ partner.logo }}" style="max-height: 44px" alt="{{ partner.name }} logo"></a>
<a href="{{ partner.link }}" target="_blank"><img src="{{ partner.logo }}" loading="lazy" style="max-height: 44px" alt="{{ partner.name }} logo"></a>
{%- endfor -%}
</div>
{%- if include.button -%}{% include secondary_button.html link="/donate" text="Become a partner" %}{%- endif -%}
Expand All @@ -99,7 +99,7 @@ <h5 style="margin-bottom: 1rem; margin-top: 2rem;">Special Partners</h5>
<h5 style="margin-bottom: 1rem; margin-top: 2rem;">Friends of Defold</h5>
<div class="grid-100">
{%- for partner in friends -%}
<a href="{{ partner.link }}" target="_blank"><img src="{{ partner.logo }}" style="max-height: 33px" alt="{{ partner.name }} logo"></a>
<a href="{{ partner.link }}" target="_blank"><img src="{{ partner.logo }}" loading="lazy" style="max-height: 33px" alt="{{ partner.name }} logo"></a>
{%- endfor -%}
</div>
{%- if include.button -%}{% include secondary_button.html link="/donate" text="Become a partner" %}{%- endif -%}
Expand Down Expand Up @@ -136,7 +136,7 @@ <h5 style="margin-bottom: 1rem; margin-top: 2rem;">Top Community Donors</h5>
<h5 style="margin-bottom: 1rem; margin-top: 2rem;">Memberships</h5>
<div class="lightest-text grid-100">
{%- for membership in memberships -%}
<a href="{{ membership.link }}" target="_blank"><img src="{{ membership.logo }}" style="max-height: 55px" alt="{{ membership.name }} logo"></a>
<a href="{{ membership.link }}" target="_blank"><img src="{{ membership.logo }}" loading="lazy" style="max-height: 55px" alt="{{ membership.name }} logo"></a>
{%- endfor -%}
</div>
</div>
Expand Down
98 changes: 61 additions & 37 deletions _includes/features_section.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,43 @@
<div class="section dark">
<div class="section dark features-section">
<div class="container">
<div class="row">
<div class="row feature-row-spaced">
<div class="column one-half">
<h4 id="no-setup">No setup</h4>
<p>Defold comes fully featured out of the box. There's nothing to set up or configure, not even when building. Simply download the editor and get creative!</p>
<h2 id="no-setup" class="feature-heading">
<img class="feature-heading-icon" src="/images/icons/community-games-on-dark.svg" alt="" aria-hidden="true"/>
All you need is Defold
</h2>
<p>Defold is a modern, powerful and production ready all in one tool for truly cross-platform game development with an incredibly small engine size.</p>
<div class="twocolumnlist">
<ul class="checkmark">
<li>Visual Editor</li>
<li>Code Editor</li>
<li>Lua Scripting</li>
<li>Lua Debugger</li>
<li>Scene Editor</li>
<li>Particle Editor</li>
<li>Tilemap Editor</li>
<li>2D &amp; 3D</li>
<li>A turn-key solution with all the building blocks you need.</li>
<li>No setup, no registration, just download and start creating.</li>
<li>Write game logic using Lua, enhance it with native extensions.</li>
<li>Make 2D and 3D games with one codebase and ship to all platforms.</li>
<li>Free forever and source available under a developer-friendly license.</li>
<li>Small engine size, with Live Update support out of the box.</li>
<li>Hot Reload, fast builds, profiler and debugger for quick iterations.</li>
<li>Customize both engine and editor however you like.</li>
</ul>
</div>
</div>
<div class="column one-half">
<img src="/images/editor/nosetup-editor.png" style="display:block; margin: auto;" alt="Bring me Cakes by PotatoJam" class="slideinright" loading="lazy"/>
</div>
</div>
<div class="row">
<div class="row feature-row-spaced">
<div class="columns six">
{%- include platforms.html minmax=100 transition="fadein" -%}
</div>
<div class="columns six">
<h4 id="cross-platform">Truly cross-platform</h4>
<h2 id="cross-platform" class="feature-heading">
<img class="feature-heading-icon" src="/images/icons/ic-64-ship-blue.svg" alt="" aria-hidden="true"/>
Ship everywhere easily
</h2>
<p>Using just one code base, and without the need for external tools, Defold lets you publish your game to all of the major platforms:</p>
<div class="twocolumnlist">
<ul class="checkmark">
<li>PlayStation®5</li>
<li>PlayStation®4</li>
<li>PlayStation® 5</li>
<li>PlayStation® 4</li>
<li>Nintendo Switch</li>
<li>Android</li>
<li>iOS</li>
Expand All @@ -47,39 +53,55 @@ <h4 id="cross-platform">Truly cross-platform</h4>
</div>
</div>
</div>
<div class="row"><br/><br/><br/></div>
<div class="row">
<div class="row feature-row-spaced">
<div class="column one-half">
<h4 id="turn-key-solution">Turn-key solution</h4>
<ul class="checkmark">
<li>Use basic building blocks to create complex behaviour.</li>
<li>Everything you need to make a game in one tool</li>
<li>Write game logic using Lua.</li>
<li>Zero-config cloud build for native code</li>
</ul>
<h2 id="no-setup" class="feature-heading">
<img class="feature-heading-icon" src="/images/icons/ic-no-setup.svg" alt="" aria-hidden="true"/>
No setup
</h2>
<p>Defold comes fully featured out of the box. Nothing to set up or configure, not even when building, no registration. Just download the editor - it has everything you need, including:</p>
<div class="twocolumnlist">
<ul class="checkmark">
<li>Visual Editor</li>
<li>Code Editor</li>
<li>Lua Scripting</li>
<li>Lua Debugger</li>
<li>Scene Editor</li>
<li>Particle Editor</li>
<li>Tilemap Editor</li>
<li>2D &amp; 3D</li>
</ul>
</div>
</div>
<div class="column one-half">
<img src="/images/editor/editor-screenshot-hero-right-dragosha.png" style="display:block; margin: auto; width: 80%" alt="Isometric turn-based roguelike by Dragosha" class="slideinright" loading="lazy"/>
</div>
</div>
<div class="row">
<div class="row feature-row-spaced">
<div class="column one-half">
<img src="/images/editor/editor-screenshot-hero-left-dragosha-3d.png" style="display:block; margin: auto; width: 80%" alt="Star Jammer by Ben James" class="slideinleft" loading="lazy"/>
</div>
<div class="column one-half">
<h4 id="custom-configuration">Custom configuration</h4>
<h2 id="custom-configuration" class="feature-heading">
<img class="feature-heading-icon" src="/images/icons/ic-git-blue.svg" alt="" aria-hidden="true"/>
Customize it as you like
</h2>
<ul class="checkmark">
<li>Add new functionality from the <a href="/assets">Asset Portal</a>.</li>
<li>Setup your own local build environment.</li>
<li>Write your own native code to extend the engine.</li>
<li>Integrated with tools such as Atom, VS Code, Rive, Spine, TexturePacker and Tiled.</li>
<li>Setup your own local build environment.</li>
<li>Customize your workflow with Editor Scripts and UI.</li>
<li>Use the localized Editor (currently: EN, RU, ZH, PT).</li>
<li>Integrated with Atom, VS Code, Rive, Spine, TexturePacker or Tiled.</li>
</ul>
</div>
</div>
<div class="row"><br/><br/><br/></div>
<div class="row">
<div class="row feature-row-spaced">
<div class="column one-half">
<h4 id="free-forever">Free. Forever.</h4>
<h2 id="free-forever" class="feature-heading">
<img class="feature-heading-icon" src="/images/icons/ic-64-free.svg" alt="" aria-hidden="true"/>
Free. Forever.
</h2>
<ul class="checkmark">
<li>No up-front cost.</li>
<li>No licensing cost.</li>
Expand All @@ -92,12 +114,15 @@ <h4 id="free-forever">Free. Forever.</h4>
<img src="/images/editor/editor-screenshot-hero-right.png" style="display:block; margin: auto; width: 80%" alt="Particle effects editor with live preview" class="slideinright" loading="lazy"/>
</div>
</div>
<div class="row">
<div class="row feature-row-spaced">
<div class="column one-half">
<img src="/images/editor/editor-screenshot-duovikings.png" style="display:block; margin: auto; width: 80%" alt="Duo Vikings by Flazm" class="slideinleft" loading="lazy"/>
</div>
<div class="column one-half">
<h4 id="production-ready">Production ready</h4>
<h2 id="production-ready" class="feature-heading">
<img class="feature-heading-icon" src="/images/icons/ic-64-performance-blue.svg" alt="" aria-hidden="true"/>
Production ready
</h2>
<ul class="checkmark">
<li>Proven track record of <a href="/showcase">game releases</a> on mobile, web, desktop and consoles.</li>
<li>Integrations with analytics, app economy and game services available out of the box.</li>
Expand All @@ -106,10 +131,9 @@ <h4 id="production-ready">Production ready</h4>
</ul>
</div>
</div>
<div class="row"><br/><br/></div>
<div class="row center">
<div class="row center feature-cta-row">
<div class="columns twelve">
{% include primary_button.html link="/product" text="PRODUCT FEATURES" %}
{% include primary_button.html link="/product" text="SEE THE FULL OVERVIEW" %}
</div>
</div>
</div>
Expand Down
62 changes: 38 additions & 24 deletions _includes/game_full.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,27 @@
{%- assign game=include.game -%}
{%- assign url=include.url -%}{%- unless url -%}{%- assign url = game.url -%}{%- endunless -%}

<div class="section hero center dark-text hoverflash game">
<a href="{{ url }}" target="_blank">
<img src="/images/games/{{ game.images.full }}" class="hoverflash" width="100%" loading="lazy"/>
</a>
<div class="section dark-text game">
<div class="container">
<div class="row">
<div class="columns twelve">
<a href="{{ url }}" target="_blank" class="showcase-full-media hoverflash">
<img src="/images/games/{{ game.images.full }}" loading="lazy" alt="{{ game.name }}"/>
</a>
</div>
</div>
</div>
</div>

<div class="section dark left" style="padding-top: 3rem; padding-bottom: 0;">
<div class="section dark left showcase-game-details-section">
<div class="container">
<div class="row">
<div class="columns eight compact">
<h5>{{ game.name }}</h5>
<p>{{ game.description }}</p>
</div>
<div class="columns four">
<table>
<div class="columns eight compact showcase-game-copy">
<h4 class="showcase-game-title">{{ game.name }}</h4>
<p>{{ game.description }}</p>
</div>
<div class="columns four">
<table class="showcase-game-meta">
<tr>
<td>Developer</td>
<td class="lightest-text">{{ game.developer }}</td>
Expand All @@ -26,19 +32,27 @@ <h5>{{ game.name }}</h5>
<td class="lightest-text">{{ game.publisher }}</td>
</tr>
{%- endif -%}
{%- if game.releasedate and game.releasedate != "" -%}
<tr>
<td>Release date</td>
<td class="lightest-text">{{ game.releasedate }}</td>
</tr>
{%- endif -%}
<tr>
<td>Platforms</td>
<td class="lightest-text">{{ game.platforms }}</td>
</tr>
{%- if game.downloads and game.downloads != "" -%}
<tr>
<td>Downloads</td>
{%- if game.releasedate and game.releasedate != "" -%}
<tr>
<td>Release date</td>
<td class="lightest-text">{{ game.releasedate }}</td>
</tr>
{%- endif -%}
{%- if game.license and game.license != "" -%}
<tr>
<td>License</td>
<td class="lightest-text">{{ game.license }}</td>
</tr>
{%- endif -%}
{%- if game.platforms and game.platforms != "" -%}
<tr>
<td>Platforms</td>
<td class="lightest-text">{{ game.platforms }}</td>
</tr>
{%- endif -%}
{%- if game.downloads and game.downloads != "" -%}
<tr>
<td>Downloads</td>
<td class="lightest-text">{{ game.downloads }}</td>
</tr>
{%- endif -%}
Expand Down
46 changes: 27 additions & 19 deletions _includes/game_half.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@
<a href="{{ game.url }}" target="_blank">
<img src="/images/games/{{ game.images.half }}" class="hoverflash" width="100%" loading="lazy"/>
</a>
<br/><br/>
<span class="compact">
<h5>{{ game.name }}</h5>
<p>{{ game.description }}</p>
</span>
<table>
<br/><br/>
<div class="compact showcase-game-copy">
<h4 class="showcase-game-title">{{ game.name }}</h4>
<p>{{ game.description }}</p>
</div>
<table class="showcase-half-meta">
<tr>
<td>Developer</td>
<td class="lightest-text">{{ game.developer }}</td>
Expand All @@ -19,19 +19,27 @@ <h5>{{ game.name }}</h5>
<td class="lightest-text">{{ game.publisher }}</td>
</tr>
{%- endif -%}
{%- if game.releasedate and game.releasedate != "" -%}
<tr>
<td>Release date</td>
<td class="lightest-text">{{ game.releasedate }}</td>
</tr>
{%- endif -%}
<tr>
<td>Platforms</td>
<td class="lightest-text">{{ game.platforms }}</td>
</tr>
{%- if game.extrainfo and game.extrainfo != "" -%}
<tr>
<td colspan="2">{{ game.extrainfo }}</td>
{%- if game.releasedate and game.releasedate != "" -%}
<tr>
<td>Release date</td>
<td class="lightest-text">{{ game.releasedate }}</td>
</tr>
{%- endif -%}
{%- if game.license and game.license != "" -%}
<tr>
<td>License</td>
<td class="lightest-text">{{ game.license }}</td>
</tr>
{%- endif -%}
{%- if game.platforms and game.platforms != "" -%}
<tr>
<td>Platforms</td>
<td class="lightest-text">{{ game.platforms }}</td>
</tr>
{%- endif -%}
{%- if game.extrainfo and game.extrainfo != "" -%}
<tr>
<td colspan="2">{{ game.extrainfo }}</td>
</tr>
{%- endif -%}
</table>
Expand Down
Loading