diff --git a/projects/add-interactable-objects-to-your-godot-game/add-interactable-objects-to-your-godot-game.mdx b/projects/add-interactable-objects-to-your-godot-game/add-interactable-objects-to-your-godot-game.mdx index 9aa809e2..2ac04593 100644 --- a/projects/add-interactable-objects-to-your-godot-game/add-interactable-objects-to-your-godot-game.mdx +++ b/projects/add-interactable-objects-to-your-godot-game/add-interactable-objects-to-your-godot-game.mdx @@ -63,7 +63,7 @@ Your project is now ready! Click "2D" at the top center of the editor, because w -Now right-click on the resources folder in the bottom left and then click on "Create New" → "Folder...": +Now right-click on the Resources folder in the bottom left and then click on "Create New" → "Folder...": @@ -77,7 +77,7 @@ Now add a node component and name it whatever you like (you can do this by doubl -Create a new folder inside the resources folder and name it **scenes**. +Create a new folder inside the Resources folder and name it **scenes**. Now press ctrl + s on your keyboard to bring up the Save menu and click on the **scenes** folder, then "Save" to save your new scene to the **scenes** folder. @@ -86,22 +86,26 @@ Now press ctrl + s on your keyboard to bring up the Save m Now we have all the groundwork set up, your file manager in the bottom left should look something like: -Now drag and drop the **Background.png** file into the editor screen: +Now we'll setup the game's environment, drag and drop the **Background.png** file into the editor screen: -We can do the same thing with the rest of the assets, you can even drag in the same asset multiple times, and it’ll be numbered accordingly. Here’s mine; try to get yours somewhat similar, as it will make it easier to follow along: +We can do the same thing with the rest of the assets and build a simple room like I've shown in the video below. + +{/* mapBuilding.mp4 */} + +If you encounter an issue where you can't see the item you placed, make sure that it is either below or attached to the background image. Below is the room I made, but as long as you have some items in your room like in the video above, you should be good! -Make sure to also drag in the asset called “E”, next to each of the objects you have placed. Make sure to drag the Es under the object you are placing them next to in the left panel, Here’s how I have it setup: +Make sure to also drag in the asset called “E”, next to each of the objects you have placed. Make sure each E is a child of the object it belongs to in the Scene panel, Here’s how I have it setup: -Now, we also need to add labels for the text that will appear when we interact with an object. Click on an object in the left panel, then press ctrl + a, search for “label” and add it. Now click on your new label node, and in its right panel you should see a box to type text. Add whatever text you want to see when you interact with that object, and move the text on top of the black bar. +Now, we also need to add labels for the text that will appear when we interact with an object. Click on an object in the left panel, then press Ctrl + A (Add Child Node), search for “label” and add it. Now click on your new label node, and in its right panel you should see a box to type text. Add whatever text you want to see when you interact with that object, and move the text on top of the black bar. It should look something like this: @@ -115,6 +119,36 @@ Make sure to add a label for the other objects, so you can have different text f +## Character creation + +Before I move on to collision shapes, I will quickly go over making a simple character in Godot. + +First make a new scene by clicking the plus icon near the tabs at the top. + +{/* addingNewScene.png */} + +Now press Ctrl + A and search for CharacterBody2D and select it. + +{/* addCharacterBody2D.png */} + +Now click on the CharacterBody2D you added in the left panel, and add a CollisionShape2D and a Sprite2D to it. They will appear as child nodes to the character body as shown below. + +{/* charHierarchy.png */} + +With that done, follow the video below to setup the collision shape and sprite for your character. The image I'm using for the character sprite is **boyGhostSingle.png**. + +{/* characterMaking.mp4 */} + +Now the last thing we need to do is add a movement script to the character. Click the button shown below. + +{/* scriptAttach */} + +Then make sure that the basic movement script is selected, then press create. + +{/* moveScript */} + +Now save it to the scenes folder, and name it "blobGhostPlayer" as it will be easy to follow along when we get to the code section. + With that set up, you can watch [this video](https://www.youtube.com/watch?v=3M3olvGE-EI) to set up a simple character in Godot, you can use the **boyGhostSingle.png** file for the texture. Make sure to save your character into the scenes folder. Drag your character in like you have been doing for everything else, and bam, we’re done setting up the project. Now let’s move on to adding our interactive feature! @@ -254,8 +288,8 @@ func _process(delta: float) -> void: //_process() runs every frame ``` Now we are checking for two new conditions: -- If the player is inside an `Area2D` using the player_inside variable that we have been turning on and off -- The "interact" keyboard input +- Whether the player is inside the Area2D (tracked using the player_inside variable) +- Whether the player presses the interact action Now, when I walk into an object's `Area2D` and press E, I see a description about that object in the game! @@ -282,4 +316,6 @@ Thanks for following along, and I can’t wait to see the interactions you creat ### More Resources -- +- If you want to learn more about the cool stuff Area2D can do check out [this link](https://docs.godotengine.org/en/stable/classes/class_area2d.html) +- Here's a [short video](https://www.youtube.com/watch?v=3M3olvGE-EI) on character creation if you have trouble with any part of it +- The Github for Before I fade, the game this tutorial is based on is [here](https://github.com/vishyyyyyyyyy/before-i-fade), feel free to use the assets and try out your own mods and changes to practice your new skills \ No newline at end of file diff --git a/projects/add-interactable-objects-to-your-godot-game/assets/addCharacterBody2D.png b/projects/add-interactable-objects-to-your-godot-game/assets/addCharacterBody2D.png new file mode 100644 index 00000000..1f80979b Binary files /dev/null and b/projects/add-interactable-objects-to-your-godot-game/assets/addCharacterBody2D.png differ diff --git a/projects/add-interactable-objects-to-your-godot-game/assets/addingNewScene.png b/projects/add-interactable-objects-to-your-godot-game/assets/addingNewScene.png new file mode 100644 index 00000000..04f07c5c Binary files /dev/null and b/projects/add-interactable-objects-to-your-godot-game/assets/addingNewScene.png differ diff --git a/projects/add-interactable-objects-to-your-godot-game/assets/charHierarchy.png b/projects/add-interactable-objects-to-your-godot-game/assets/charHierarchy.png new file mode 100644 index 00000000..7bd98877 Binary files /dev/null and b/projects/add-interactable-objects-to-your-godot-game/assets/charHierarchy.png differ diff --git a/projects/add-interactable-objects-to-your-godot-game/assets/characterMaking.mp4 b/projects/add-interactable-objects-to-your-godot-game/assets/characterMaking.mp4 new file mode 100644 index 00000000..30938c73 Binary files /dev/null and b/projects/add-interactable-objects-to-your-godot-game/assets/characterMaking.mp4 differ diff --git a/projects/add-interactable-objects-to-your-godot-game/assets/mapBuilding.mp4 b/projects/add-interactable-objects-to-your-godot-game/assets/mapBuilding.mp4 new file mode 100644 index 00000000..fbc3095e Binary files /dev/null and b/projects/add-interactable-objects-to-your-godot-game/assets/mapBuilding.mp4 differ diff --git a/projects/add-interactable-objects-to-your-godot-game/assets/moveScript.png b/projects/add-interactable-objects-to-your-godot-game/assets/moveScript.png new file mode 100644 index 00000000..b17349b0 Binary files /dev/null and b/projects/add-interactable-objects-to-your-godot-game/assets/moveScript.png differ diff --git a/projects/add-interactable-objects-to-your-godot-game/assets/scriptAttach.png b/projects/add-interactable-objects-to-your-godot-game/assets/scriptAttach.png new file mode 100644 index 00000000..379ad9c1 Binary files /dev/null and b/projects/add-interactable-objects-to-your-godot-game/assets/scriptAttach.png differ