First officialish post (needs modification!)
This commit is contained in:
@ -8,11 +8,11 @@
|
||||
"topics": ["Introduction", "Technology", "Personal"]
|
||||
},
|
||||
{
|
||||
"slug": "second-post-title",
|
||||
"title": "Another Exciting Post",
|
||||
"content": "This is the content of the second post. Here, I share some thoughts on a variety of topics.",
|
||||
"slug": "platformer-game-developement-in-godot",
|
||||
"title": "Platformer game in Godot 4",
|
||||
"content": "The content of thi spost is generated, and its only purpose is to test the site.",
|
||||
"date": "2025-01-13",
|
||||
"image_location": "images/post2.jpg",
|
||||
"image_location": "images/posts/godot_wide_logo.png",
|
||||
"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">
|
||||
<h3>{{ post['title'] }}</h3>
|
||||
<div class="date">{{ post['date'] }}</div>
|
||||
<p>{{ post['description'] }}</p>
|
||||
<p>{{ post['content'] }}</p>
|
||||
<p class="topics">
|
||||
{% for topic in post['topics'] %}
|
||||
<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