First officialish post (needs modification!)
This commit is contained in:
@ -8,11 +8,11 @@
|
|||||||
"topics": ["Introduction", "Technology", "Personal"]
|
"topics": ["Introduction", "Technology", "Personal"]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"slug": "second-post-title",
|
"slug": "platformer-game-developement-in-godot",
|
||||||
"title": "Another Exciting Post",
|
"title": "Platformer game in Godot 4",
|
||||||
"content": "This is the content of the second post. Here, I share some thoughts on a variety of topics.",
|
"content": "The content of thi spost is generated, and its only purpose is to test the site.",
|
||||||
"date": "2025-01-13",
|
"date": "2025-01-13",
|
||||||
"image_location": "images/post2.jpg",
|
"image_location": "images/posts/godot_wide_logo.png",
|
||||||
"topics": ["Technology", "Science"]
|
"topics": ["Technology", "Science"]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
BIN
static/images/posts/export_game.png
Normal file
BIN
static/images/posts/export_game.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 5.5 KiB |
BIN
static/images/posts/game_mechanics.png
Normal file
BIN
static/images/posts/game_mechanics.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 8.0 KiB |
BIN
static/images/posts/godot_logo.png
Normal file
BIN
static/images/posts/godot_logo.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.5 KiB |
BIN
static/images/posts/godot_wide_logo.png
Normal file
BIN
static/images/posts/godot_wide_logo.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.9 KiB |
BIN
static/images/posts/player_character.png
Normal file
BIN
static/images/posts/player_character.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 17 KiB |
@ -31,7 +31,7 @@
|
|||||||
<img src="{{ url_for('static', filename=post['image_location']) }}" alt="Post Image">
|
<img src="{{ url_for('static', filename=post['image_location']) }}" alt="Post Image">
|
||||||
<h3>{{ post['title'] }}</h3>
|
<h3>{{ post['title'] }}</h3>
|
||||||
<div class="date">{{ post['date'] }}</div>
|
<div class="date">{{ post['date'] }}</div>
|
||||||
<p>{{ post['description'] }}</p>
|
<p>{{ post['content'] }}</p>
|
||||||
<p class="topics">
|
<p class="topics">
|
||||||
{% for topic in post['topics'] %}
|
{% for topic in post['topics'] %}
|
||||||
<span class="topic">{{ topic }}</span>
|
<span class="topic">{{ topic }}</span>
|
||||||
|
262
templates/posts/platformer-game-developement-in-godot.html
Normal file
262
templates/posts/platformer-game-developement-in-godot.html
Normal file
@ -0,0 +1,262 @@
|
|||||||
|
{% extends "main.html" %}
|
||||||
|
|
||||||
|
{% block content %}
|
||||||
|
<main class="main">
|
||||||
|
<style>
|
||||||
|
.main {
|
||||||
|
margin: 50px auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 90%;
|
||||||
|
max-width: 1200px;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 16px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3 {
|
||||||
|
color: #ffd700;
|
||||||
|
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p, li {
|
||||||
|
font-size: 1rem;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style-type: square;
|
||||||
|
padding-left: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #00ffcc;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #ff5733;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 40%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
float: right;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step {
|
||||||
|
margin-bottom: 2em;
|
||||||
|
padding: 20px;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step img {
|
||||||
|
max-width: 40%;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step-content {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step pre {
|
||||||
|
background: rgba(30, 30, 30, 1);
|
||||||
|
color: #cfcfcf;
|
||||||
|
font-family: 'Courier New', Courier, monospace;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
padding: 15px;
|
||||||
|
border: 1px solid #444;
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 10px 20px;
|
||||||
|
margin-top: 10px;
|
||||||
|
background: linear-gradient(to right, #ff5733, #ffcc33);
|
||||||
|
color: #000;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: none;
|
||||||
|
text-shadow: none;
|
||||||
|
transition: background 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
background: linear-gradient(to right, #ffcc33, #ff5733);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
img {
|
||||||
|
float: none;
|
||||||
|
max-width: 100%;
|
||||||
|
margin: 0 auto 20px auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.step {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
margin: 10px auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
pre{
|
||||||
|
width: fit-content;
|
||||||
|
align-content: left;
|
||||||
|
text-align: left;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<section class="intro">
|
||||||
|
<h1>Game Development from Scratch: A Comprehensive Guide</h1>
|
||||||
|
<p>
|
||||||
|
Welcome to the ultimate guide for game development! Whether you’re a beginner or an advanced developer, this page walks you through the entire process of creating a game from scratch using Godot 4. Explore every step, tool, and resource needed to bring your dream game to life.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Game development combines creativity, logic, and technical skills. With this guide, you’ll master the art of building games while enjoying the journey. Let’s get started!
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="features">
|
||||||
|
<h2>Why Choose Godot 4?</h2>
|
||||||
|
<div class="step">
|
||||||
|
<img src="{{ url_for('static', filename='images/posts/godot_logo.png') }}" alt="Godot Logo">
|
||||||
|
<div class="step-content">
|
||||||
|
<ul>
|
||||||
|
<li><strong>Open Source:</strong> Completely free to use with no royalties.</li>
|
||||||
|
<li><strong>Versatile:</strong> Supports 2D and 3D game development.</li>
|
||||||
|
<li><strong>Lightweight:</strong> Optimized for performance and fast workflows.</li>
|
||||||
|
<li><strong>Community-Driven:</strong> Backed by a passionate global community.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="steps">
|
||||||
|
<h2>Step-by-Step Game Development Process</h2>
|
||||||
|
|
||||||
|
<article class="step">
|
||||||
|
<img src="{{ url_for('static', filename='images/posts/plan_game.png') }}" alt="Game Planning">
|
||||||
|
<div class="step-content">
|
||||||
|
<h3>Step 1: Plan Your Game</h3>
|
||||||
|
<p>
|
||||||
|
Every successful game starts with a clear plan. Decide on the game type (e.g., platformer, puzzle, RPG), target audience, and key features. Sketch your ideas on paper or using a digital tool like <a href="https://www.figma.com/" target="_blank">Figma</a>.
|
||||||
|
</p>
|
||||||
|
<blockquote>Tip: Focus on simple mechanics and expand once the core gameplay is solid.</blockquote>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="step">
|
||||||
|
<img src="{{ url_for('static', filename='images/posts/godot_editor.png') }}" alt="Godot Editor Screenshot">
|
||||||
|
<div class="step-content">
|
||||||
|
<h3>Step 2: Install Godot 4</h3>
|
||||||
|
<p>
|
||||||
|
Download the latest version of Godot from the <a href="https://godotengine.org" target="_blank">official website</a>. Follow the installation instructions for your operating system. Once installed, familiarize yourself with the Godot interface using the <a href="https://docs.godotengine.org" target="_blank">official documentation</a>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="step">
|
||||||
|
<img src="{{ url_for('static', filename='images/posts/first_scene.png') }}" alt="Creating Your First Scene">
|
||||||
|
<div class="step-content">
|
||||||
|
<h3>Step 3: Create Your First Scene</h3>
|
||||||
|
<p>
|
||||||
|
A game in Godot consists of scenes. Start by creating a 2D or 3D scene for your game. Add a root node (e.g., <code>Node2D</code> for 2D games) and organize child nodes for your player, environment, and UI.
|
||||||
|
</p>
|
||||||
|
<pre><code class="language-gdscript">extends Node2D
|
||||||
|
|
||||||
|
func _ready():
|
||||||
|
print("Hello, Godot!")</code></pre>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="step">
|
||||||
|
<img src="{{ url_for('static', filename='images/posts/player_character.png') }}" alt="Player Character Design">
|
||||||
|
<div class="step-content">
|
||||||
|
<h3>Step 4: Design the Player Character</h3>
|
||||||
|
<p>
|
||||||
|
Use a <code>KinematicBody2D</code> node for the player. Attach sprites, collision shapes, and a script to handle movement and animations. For example:
|
||||||
|
</p>
|
||||||
|
<pre><code class="language-gdscript">extends KinematicBody2D
|
||||||
|
|
||||||
|
const SPEED = 200
|
||||||
|
|
||||||
|
func _physics_process(delta):
|
||||||
|
var velocity = Vector2.ZERO
|
||||||
|
if Input.is_action_pressed("ui_right"):
|
||||||
|
velocity.x += SPEED
|
||||||
|
if Input.is_action_pressed("ui_left"):
|
||||||
|
velocity.x -= SPEED
|
||||||
|
velocity = move_and_slide(velocity)</code></pre>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="step">
|
||||||
|
<img src="{{ url_for('static', filename='images/posts/environment_design.png') }}" alt="Game Environment">
|
||||||
|
<div class="step-content">
|
||||||
|
<h3>Step 5: Build the Game Environment</h3>
|
||||||
|
<p>
|
||||||
|
Create levels using the <code>TileMap</code> node. Import tile sets and arrange tiles to design platforms, obstacles, and backgrounds. Define collision shapes for each tile to ensure smooth gameplay.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="button">Learn More</a>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="step">
|
||||||
|
<img src="{{ url_for('static', filename='images/posts/game_mechanics.png') }}" alt="Game Mechanics">
|
||||||
|
<div class="step-content">
|
||||||
|
<h3>Step 6: Implement Gameplay Mechanics</h3>
|
||||||
|
<p>
|
||||||
|
Add features like jumping, collectibles, and enemies. Use <code>Area2D</code> nodes for detection and signals for interactions. Enhance gameplay by integrating physics and animations.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="step">
|
||||||
|
<img src="{{ url_for('static', filename='images/posts/polish_game.png') }}" alt="Polishing the Game">
|
||||||
|
<div class="step-content">
|
||||||
|
<h3>Step 7: Test and Polish</h3>
|
||||||
|
<p>
|
||||||
|
Playtest your game to identify bugs and improve user experience. Add sound effects, music, and particle effects to make your game immersive. Tools like <a href="https://www.audacityteam.org/" target="_blank">Audacity</a> can help with audio editing.
|
||||||
|
</p>
|
||||||
|
<blockquote>Pro Tip: Keep a checklist of feedback and iterate until your game feels polished.</blockquote>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article class="step">
|
||||||
|
<img src="{{ url_for('static', filename='images/posts/export_game.png') }}" alt="Exporting the Game">
|
||||||
|
<div class="step-content">
|
||||||
|
<h3>Step 8: Export and Share</h3>
|
||||||
|
<p>
|
||||||
|
Export your game for your target platform (Windows, macOS, Android, Web, etc.) using Godot’s export tools. Share it with friends, family, or the gaming community on platforms like <a href="https://itch.io/" target="_blank">Itch.io</a> or <a href="https://store.steampowered.com/" target="_blank">Steam</a>.
|
||||||
|
</p>
|
||||||
|
<blockquote>Tip: Create an engaging game page with screenshots, a trailer, and a detailed description to attract players.</blockquote>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>
|
||||||
|
Thank you for exploring this guide! We hope you enjoy creating your games with Godot 4. For more tutorials and resources, check out the <a href="https://godotengine.org/community" target="_blank">official community page</a>.
|
||||||
|
</p>
|
||||||
|
</footer>
|
||||||
|
</main>
|
||||||
|
{% endblock %}
|
Reference in New Issue
Block a user