feat: godot dungeon crawler resource

astro.config.mjs

@@ -71,10 +71,28 @@ export default defineConfig({
           label: "About",
           link: 'game-design/index'
         }, {
-          label: "Godot",
-          autogenerate: {
-            directory: 'game-design/godot'
-          },
+          label: "Godot", items: [{
+            label: "Godot Basics",
+            link: "game-design/godot/basics"
+          },{
+            label: "Universal Features",
+            link: "game-design/godot/universal"
+          },{
+            label: "Survivors-Like",
+            link: "game-design/godot/survivors"
+          },{
+            label: "Top-down Dungeon Crawler",
+            link: "game-design/godot/dungeoncrawler/0-scenesetup/"
+          },{
+            label: "3D Intro",
+            link: "game-design/godot/3d"
+          },{
+            label: "3D Game",
+            link: "game-design/godot/3dgame"
+          },{
+            label: "Setting up C# For Godot",
+            link: "game-design/godot/projectsetup"
+            }],
           collapsed: true
         }],
       },

src/components/starlight/Pagination.astro

@@ -1,13 +1,15 @@
 ---
 import Default from '@astrojs/starlight/components/Pagination.astro';
 import type { Props } from '@astrojs/starlight/props';
+import { isTutorialEntry } from '../../content/config';
 import { getTutorialPages } from '../../util/getTutorialPages';
-import { pages } from '../tutorial/TutorialNav.astro';
+import { allPages } from '../tutorial/TutorialNav.astro';
 
-const { entry, pagination } = Astro.props;
+const { entry, pagination, id } = Astro.props;
 const { type } = Astro.props.entry.data;
 let { prev, next } = pagination;
 
+const pages = allPages.filter((page) => isTutorialEntry(page, id));
 const tutorialPages = getTutorialPages(pages);
 
 if (type === 'tutorial') {

src/components/tutorial/ProgressStore.ts

@@ -207,8 +207,6 @@ export class ProgressStore {
 	}
 
 	private static slugFromPathname(pathname: string) {
-		// Remove the language segment from the path,
-		// and strip a trailing slash, if present.
-		return pathname.split('/').slice(2).join('/').replace(/\/$/, '');
+		return pathname.replace(/\/$/, '');
 	}
 }

src/components/tutorial/TutorialNav.astro

@@ -1,4 +1,5 @@
 ---
+import type { Props } from '@astrojs/starlight/props';
 import { getCollection } from "astro:content";
 import { isTutorialEntry } from '../../content/config';
 import { getTutorialPages, getTutorialUnits } from '../../util/getTutorialPages';
@@ -8,13 +9,11 @@ import TabPanel from '../tabs/TabPanel.astro';
 import Progress from './Progress.astro';
 import UnitProgressIcon from './UnitProgressIcon.astro';
 
-export interface Props {
-	id: string;
-}
-
 const currentUrl = Astro.url.pathname.replace(/\/$/, '');
+const { id } = Astro.props;
+
 export const allPages = await getCollection('docs');
-export const pages = allPages.filter(isTutorialEntry);
+const pages = allPages.filter((page) => isTutorialEntry(page, id));
 
 const tutorialPages = getTutorialPages(pages);
 const units = getTutorialUnits(tutorialPages);

src/content/config.ts

@@ -1,5 +1,6 @@
 import { docsSchema, i18nSchema } from "@astrojs/starlight/schema";
 import { type CollectionEntry, defineCollection, z } from "astro:content";
+import path from 'node:path';
 
 // find all tutorial pages
 const baseSchema = z.object({
@@ -24,11 +25,22 @@ export type DocsEntry<T extends DocsEntryType> = CollectionEntry<'docs'> & {
 type DocsEntryType = DocsEntryData['type'];
 
 function createIsDocsEntry<T extends DocsEntryType>(type: T) {
-	return (entry: CollectionEntry<'docs'>): entry is DocsEntry<T> => entry.data.type === type;
+	return (entry: CollectionEntry<'docs'>, id: string): entry is DocsEntry<T> => {
+		if (entry.data.type !== type) {
+			return false;
+		}
+		const currentPath = path.parse(id);
+		const currentDir = path.dirname(currentPath.dir);
+
+		const pagePath = path.parse(entry.id);
+		const pageDir = path.dirname(pagePath.dir);
+
+		return pageDir === currentDir;
+	};
 }
 
 export type TutorialEntry = DocsEntry<'tutorial'>;
-export const isTutorialEntry = createIsDocsEntry('tutorial');
+export const isTutorialEntry = createIsDocsEntry<'tutorial'>('tutorial');
 
 export const collections = {
   docs: defineCollection({ schema: docsSchema({ extend: docsCollectionSchema }) }),

src/content/docs/game-design/godot/dungeoncrawler/0-scenesetup/index.mdx

@@ -0,0 +1,75 @@
+---
+type: tutorial
+unitTitle: Making a 2D top-down dungeon crawler
+title: Setting up our scene
+description: This page works through 2D top-down dungeon crawler step-by-step
+sidebar:
+    order: 2
+---
+
+import Checklist from '/src/components/tutorial/Checklist.astro';
+import Box from '/src/components/tutorial/Box.astro';
+import { Steps } from '@astrojs/starlight/components';
+
+This is a guide to making a 2-dimensional dungeon crawling game in [Godot](https://godotengine.org/). If you are unfamiliar with Godot, check out the [Godot basics](/game-design/godot/basics) doc as this tutorial assumes basic knowledge of navigating and using the Godot Engine.
+
+:::note[Version]
+This guide is up-to-date with Godot 4.3 stable official release, and will likely work with any version of Godot newer than 4.3. Due to the use of **TileMapLayers** which were introduced in 4.3, this tutorial isn't compatible with any version pre 4.3
+:::
+
+## What you'll be making
+
+![Screenshot preview of the game](/src/assets/godot/dungeonCrawler/screenshot.png)
+
+In this tutorial, you'll work step by step through creating your very own Dungeon Crawler! In this game, the player will navigate through a multi-level dungeon of your design, full of enemies to fight, and treasure to collect!
+
+You'll learn to:
+- Create an animated player character
+- Create enemies that chase and attack the player
+- Create a User Interface that tracks health and points
+- Switch levels 
+- Design 2D Combat
+
+Let's jump right in!
+
+## Making the project
+
+:::note[Godot Documentation]
+Godot Documentation for nodes discussed in this section: 
+
+[Importing](https://docs.godotengine.org/en/stable/tutorials/assets_pipeline/import_process.html)
+:::
+
+
+We won't be creating our own assets as part of this project, we'll instead be using a free asset pack by Ox72 on Itch.IO which [can be found here](https://0x72.itch.io/dungeontileset-ii) Just click *Download now* followed by *No thanks, just take me to the download* and download the file called *0x72_DungeonTilesetII_v1.7.zip*
+
+Create a new 2D project, using the Forward+ Renderer. 
+
+Let's start by importing our assets!
+
+<Steps>
+
+1.  First let's create a new folder, and call it 'Assets'
+    Then, let's extract the assets from the folder we downloaded, and at them into our Assets folder. Mine looks like this, but it's fine if yours looks slightly different.
+
+    ![Assets](/src/assets/godot/dungeonCrawler/assets.png)
+
+2. Let's also create two new top level folders called 'Scripts' and 'Scenes'
+
+    ![Folders](/src/assets/godot/dungeonCrawler/folders.png)
+
+3. To ensure our pixel art assets look crisp and not blurred we'll want to make one quick change.
+    Using the buttons in the top left of the screen, select **Project -> Project settings** In this menu, select the **General** tab, and scroll until you see the **Rendering** header. Under this, select **Textures**
+    Change **Default Texture Filter** from **Linear** to **Nearest**
+
+    ![Folders](/src/assets/godot/dungeonCrawler/TextureFilter.png)
+</Steps>
+
+<Box>
+## Checklist
+<Checklist>
+- [ ] I have imported the assets
+- [ ] I have setup my folders and changed the settings
+- [ ] I'm ready to make a game!
+</Checklist>
+</Box>

src/content/docs/game-design/godot/dungeoncrawler/1-player/index.mdx

@@ -0,0 +1,149 @@
+---
+type: tutorial
+unitTitle: Creating our player
+title: Setting up our player.
+description: Creating our player scene and scripts
+---
+
+import Checklist from '/src/components/tutorial/Checklist.astro';
+import Box from '/src/components/tutorial/Box.astro';
+import { Steps } from '@astrojs/starlight/components';
+
+## Creating the Player
+
+:::note[Godot Documentation]
+Godot Documentation for nodes discussed in this section: 
+
+[Collision Shapes](https://docs.godotengine.org/en/stable/tutorials/physics/collision_shapes_2d.html) [CharacterBody2D](https://docs.godotengine.org/en/stable/classes/class_characterbody2d.html) [AnimatedSprite2D](https://docs.godotengine.org/en/stable/classes/class_animatedsprite2d.html) [Area2D](https://docs.godotengine.org/en/stable/classes/class_area2d.html)
+:::
+
+
+Great! Let's start by making a basic version of our player character that will let us move around. We'll worry about more complicated things like attacking later.
+
+
+<Steps>
+
+1. Start by creating a new 2D Scene, with a **CharacterBody2D** as the root node. Call it 'Player'
+
+2. Give it two children:
+    A **CollisionShape2D** and an **AnimatedSprite2D**
+
+</Steps>
+
+Here's how my scene looks with no other modifications:
+
+![Basic player scene](/src/assets/godot/dungeonCrawler/playerscenebasic.png)
+
+Let's hit **Ctrl + S** and save this scene in our **Scenes** folder, call it **Player.tscn**
+
+## Animations
+
+Let's give ourselves something to look at! 
+<Steps>
+1. Click on the **AnimatedSprite2D** and in the inspector, under **Animation** you'll see **\<Empty>** in the **Spriteframes** field.
+
+2. Click on **\<Empty>** and create a new **Spriteframes** Click on the **Spriteframes** you created. This will open a new window at the bottom of the screen.
+    This is where we'll create our player's animations. Rename the *General* animation to *Idle* and click the *Add frames from File* Button (The folder icon)
+
+3. Navigate to your *assets/frames* folder, and decide which character you want to be your player. I'll be using the Plague Doctor. Using Shift + Click select all the frames for your character labeled *Idle* (This should be four frames) then open them.
+
+    ![Idle Animation Frames](/src/assets/godot/dungeonCrawler/idleanim.png)
+
+    You'll see them added to the animation timeline. 
+
+4. We'll want to select two things in the timeline. The **Loop** Button (To ensure the animation loops) and the **Play on start button** (To ensure the animation plays automatically)
+    Let's also increase the FPS to 8 so that the animation plays a little faster. 
+
+    ![Idle Animation Frames](/src/assets/godot/dungeonCrawler/autoloop.png)
+
+    Hit play to test! You'll see the player now has an idle animation that loops!
+
+5. Let's add our character's walking animation. Add a new animation using the **Add animation** Button and call it "Walk"
+
+    ![Idle Animation Frames](/src/assets/godot/dungeonCrawler/addanim.png)
+
+    Do the same thing we did to grab the frames for the idle animation, but this time, grab all the frames labeled "Run" it should again be 4 frames. We want this animation to loop, but we **don't** want it to autoplay. Let's also give this a framerate of 8 FPS.
+
+    ![Walk Animation Frames](/src/assets/godot/dungeonCrawler/walkanim.png)
+
+    Finally, just select your idle animation again, to make sure this is what our player will start on.
+
+    Great! That's our animations all done!
+</Steps>
+
+## Collision
+
+Now that we have something to look at, let's give our player a hitbox. 
+<Steps>
+1. Open the inspector for the **CollisionShape2D** we added, and add a new shape in the **empty** shape field.
+    It's a good idea to use a **CapsuleShape** as it will make us less likely to get stuck on corners. Position and adjust the capsule so that it's *slightly* smaller than the sprite for our player.
+    Mine looks like this:
+
+    ![CollissionShape](/src/assets/godot/dungeonCrawler/collshapeimg.png)
+
+2. Great! Our player now has collision. We'll do one more thing while we're here, which is give our player a script to handle movement. Right click on the **CharacterBody2D** and Attach a script. Call it something like "player.gd" and make sure we're saving it in our Scripts folder.
+ We also need to make sure we **untick** the **template** box as we will not be using the template! This is because the template is designed for gravity based platformers.
+</Steps>
+
+With our script created and attached, let's get to programming our movement!
+
+## Movement
+
+<Steps>
+
+1. First, let's set up a variable to control our speed.
+
+    ```gdscript
+    extends CharacterBody2D
+
+    @export var speed = 200
+    ```
+
+    The **\@export** tag will allow us to easily edit our speed variable, without needing to open the script!
+
+2. Then, we'll want to use Godots built-in **_physics_process(delta):** function for our movement logic. Inside that we'll want to get the combined vector of all the inputs the player is pressing.
+
+    ```gdscript
+    func _physics_process(delta):
+        var direction = Input.get_vector("ui_left", "ui_right", "ui_up", "ui_down")
+    ```
+
+3. We'll then add some lines to multiply this vector by our speed, and then invoke Godots built-in **move_and_slide()** function, which actually does the moving!
+
+    ```gdscript
+     func _physics_process(delta):
+        var direction = Input.get_vector("ui_left", "ui_right", "ui_up", "ui_down")
+
+        velocity = direction * speed
+
+        move_and_slide()
+    ```
+
+4. giving us a final script that looks like this:
+
+    ```gdscript
+    extends CharacterBody2D
+
+    @export var speed = 200
+
+    func _physics_process(delta):
+        var direction = Input.get_vector("ui_left", "ui_right", "ui_up", "ui_down")
+        velocity = direction * speed
+
+        move_and_slide()
+    ```
+</Steps>    
+For now our movement is controlled using the arrow keys, but we'll go over how to map it to whatever we want later in the guide.
+
+Switch back to 2D view at the top of the screen.
+
+And that's our player ready to go for now!
+
+<Box>
+## Checklist
+<Checklist>
+- [ ] I've created the player scene
+- [ ] I've setup the animations
+- [ ] I've attached the script
+</Checklist>
+</Box>