{% 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 %}
