From 7dbd759ce1546acedafbad23f668267615f2ee59 Mon Sep 17 00:00:00 2001 From: David Luevano Alvarado Date: Sun, 20 Aug 2023 04:30:55 -0600 Subject: add yourls usage --- live/blog/g/flappybird_godot_devlog_1.html | 56 +++++++++++++++--------------- 1 file changed, 28 insertions(+), 28 deletions(-) (limited to 'live/blog/g/flappybird_godot_devlog_1.html') diff --git a/live/blog/g/flappybird_godot_devlog_1.html b/live/blog/g/flappybird_godot_devlog_1.html index bcfdf6e..616d75c 100644 --- a/live/blog/g/flappybird_godot_devlog_1.html +++ b/live/blog/g/flappybird_godot_devlog_1.html @@ -163,35 +163,35 @@

Config

Default import settings

Since this is just pixel art, the importing settings for textures needs to be adjusted so the sprites don’t look blurry. Go to Project -> Project settings… -> Import defaults and on the drop down select Texture, untick everything and make sure Compress/Mode is set to Lossless.

-
+
Project settings - Import defaults - Texture settings
Project settings - Import defaults - Texture settings

General settings

It’s also a good idea to setup some config variables project-wide. To do so, go to Project -> Project settings… -> General, select Application/config and add a new property (there is a text box at the top of the project settings window) for game scale: application/config/game_scale for the type use float and then click on add; configure the new property to 3.0; On the same window, also add application/config/version as a string, and make it 1.0.0 (or whatever number you want).

-
+
Project settings - General - Game scale and version properties
Project settings - General - Game scale and version properties

For my personal preferences, also disable some of the GDScript debug warnings that are annoying, this is done at Project -> Project settings… -> General, select Debug/GDScript and toggle off Unused arguments, Unused signal and Return value discarded, and any other that might come up too often and don’t want to see.

-
+
Project settings - General - GDScript debug warnings
Project settings - General - GDScript debug warnings

Finally, set the initial window size in Project -> Project settings… -> General, select Display/Window and set Size/Width and Size/Height to 600 and 800, respectively. As well as the Stretch/Mode to viewport , and Stretch/Aspect to keep:

-
+
Project settings - General - Initial window size
Project settings - General - Initial window size

Keybindings

I only used 3 actions (keybindings): jump, restart and toggle_debug (optional). To add custom keybindings (so that the Input.something() API can be used), go to Project -> Project settings… -> Input Map and on the text box write jump and click add, then it will be added to the list and it’s just a matter of clicking the + sign to add a Physical key, press any key you want to be used to jump and click ok. Do the same for the rest of the actions.

-
+
Project settings - Input Map - Adding necessary keybindings
Project settings - Input Map - Adding necessary keybindings

Layers

Finally, rename the physics layers so we don’t lose track of which layer is which. Go to Project -> Layer Names -> 2d Physics and change the first 5 layer names to (in order): player, ground, pipe, ceiling and score.

-
+
Project settings - Layer Names - 2D Physics
Project settings - Layer Names - 2D Physics
@@ -200,12 +200,12 @@

Importing

Create the necessary directories to hold the respective assets and it’s just a matter of dragging and dropping, I used directories: res://entities/actors/player/sprites/, res://fonts/, res://levels/world/background/sprites/, res://levels/world/ground/sprites/, res://levels/world/pipe/sprites/, res://sfx/. For the player sprites, the FileSystem window looks like this (entities/actor directories are really not necessary):

-
+
FileSystem - Player sprite imports
FileSystem - Player sprite imports

It should look similar for other directories, except maybe for the file extensions. For example, for the sfx:

-
+
FileSystem - SFX imports
FileSystem - SFX imports
@@ -213,72 +213,72 @@

Now it’s time to actually create the game, by creating the basic scenes that will make up the game. The hardest part and the most confusing is going to be the TileMaps, so that goes first.

TileMaps

I’m using a scene called WorldTiles with a Node2D node as root called the same. With 2 different TileMap nodes as children named GroundTileMap and PipeTileMap (these are their own scene); yes 2 different TileMaps because we need 2 different physics colliders (in Godot 4.0 you can have a single TileMap with different physics colliders in it). Each node has its own script. It should look something like this:

-
+
Scene - WorldTiles (TileMaps)
Scene - WorldTiles (TileMaps)

I used the following directory structure:

-
+
Scene - WorldTiles - Directory structure
Scene - WorldTiles - Directory structure

To configure the GroundTileMap, select the node and click on (empty) on the TileMap/Tile set property and then click on New TileSet, then click where the (empty) used to be, a new window should open on the bottom:

-
+
TileSet - Configuration window
TileSet - Configuration window

Click on the plus on the bottom left and you can now select the specific tile set to use. Now click on the yellow + New Single Tile, activate the grid and select any of the tiles. Should look like this:

-
+
TileSet - New single tile
TileSet - New single tile

We need to do this because for some reason we can’t change the snap options before selecting a tile. After selecting a random tile, set up the Snap Options/Step (in the Inspector) and set it to 16x16 (or if using a different tile set, to it’s tile size):

-
+
TileSet - Tile - Step snap options
TileSet - Tile - Step snap options

Now you can select the actual single tile. Once selected click on Collision, use the rectangle tool and draw the rectangle corresponding to that tile’s collision:

-
+
TileSet - Tile - Selection and collision
TileSet - Tile - Selection and collision

Do the same for the other 3 tiles. If you select the TileMap itself again, it should look like this on the right (on default layout it’s on the left of the Inspector):

-
+
TileSet - Available tiles
TileSet - Available tiles

The ordering is important only for the “underground tile”, which is the filler ground, it should be at the end (index 3); if this is not the case, repeat the process (it’s possible to rearrange them but it’s hard to explain as it’s pretty weird).

At this point the tilemap doesn’t have any physics and the cell size is wrong. Select the GroundTileMap, set the TileMap/Cell/Size to 16x16, the TileMap/Collision/Layer set to bit 2 only (ground layer) and disable any TileMap/Collision/Mask bits. Should look something like this:

-
+
TileMap - Cell size and collision configuration
TileMap - Cell size and collision configuration

Now it’s just a matter of repeating the same for the pipes (PipeTileMap), only difference is that when selecting the tiles you need to select 2 tiles, as the pipe is 2 tiles wide, or just set the Snap Options/Step to 32x16, for example, just keep the cell size to 16x16.

Default ground tiles

I added few default ground tiles to the scene, just for testing purposes but I left them there. These could be place programatically, but I was too lazy to change things. On the WorldTiles scene, while selecting the GroundTileMap, you can select the tiles you want to paint with, and left click in the grid to paint with the selected tile. Need to place tiles from (-8, 7) to (10, 7) as well as the tile below with the filler ground (the tile position/coordinates show at the bottom left, refer to the image below):

-
+
Scene - WorldTiles - Default ground tiles
Scene - WorldTiles - Default ground tiles

Player

On a new scene called Player with a KinematicBody2D node named Player as the root of the scene, then for the children: AnimatedSprite as Sprite, CollisionShape2D as Collision (with a circle shape) and 3 AudioStreamPlayers for JumpSound, DeadSound and HitSound. Not sure if it’s a good practice to have the audio here, since I did that at the end, pretty lazy. Then, attach a script to the Player node and then it should look like this:

-
+
Scene - Player - Node setup
Scene - Player - Node setup

Select the Player node and set the CollisionShape2D/Collision/Layer to 1 and the CollisionObject2D/Collision/Mask to 2 and 3 (ground and pipe).

For the Sprite node, when selecting it click on the (empty) for the AnimatedSprite/Frames property and click New SpriteFrames, click again where the (empty) used to be and ane window should open on the bottom:

-
+
Scene - Player - SpriteFrames window
Scene - Player - SpriteFrames window

Right off the bat, set the Speed to 10 FPS (bottom left) and rename default to bird_1. With the bird_1 selected, click on the Add frames from a Sprite Sheet, which is the second button under Animation Frames: which looks has an icon of a small grid (next to the folder icon), a new window will popup where you need to select the respective sprite sheet to use and configure it for importing. On the Select Frames window, change the Vertical to 1, and then select all 4 frames (Ctrl + Scroll wheel to zoom in):

-
+
Scene - Player - Sprite sheet importer
Scene - Player - Sprite sheet importer

After that, the SpriteFrames window should look like this:

-
+
Scene - Player - SpriteFrames window with sprite sheet configured
Scene - Player - SpriteFrames window with sprite sheet configured
@@ -297,12 +297,12 @@

Game

This is the actual Game scene that holds all the playable stuff, here we will drop in all the previous scenes; the root node is a Node2D and also has an attached script. Also need to add 2 additional AudioStreamPlayers for the “start” and “score” sounds, as well as a Sprite for the background (Sprite/Offset/Offset set to (0, 10)) and a Camera2D (Camera2D/Current set to true (checked)). It should look something like this:

-
+
Scene - Game - Node setup
Scene - Game - Node setup

The scene viewport should look something like the following:

-
+
Scene - Game - Viewport
Scene - Game - Viewport
@@ -310,12 +310,12 @@

Fonts

We need some font Resources to style the Label fonts. Under the FileSystem window, right click on the fonts directory (create one if needed) and click on New Resource... and select DynamicFontData, save it in the “fonts” directory as SilverDynamicFontData.tres (Silver as it is the font I’m using) then double click the just created resource and set the DynamicFontData/Font Path to the actual Silver.ttf font (or whatever you want).

Then create a new resource and this time select DynamicFont, name it SilverDynamicFont.tres, then double click to edit and add the SilverDynamicFontData.tres to the DynamicFont/Font/Font Data property (and I personally toggled off the DynamicFont/Font/Antialiased property), now just set the DynamicFont/Settings/(Size, Outline Size, Outline Color) to 32, 1 and black, respectively (or any other values you want). It should look something like this:

-
+
Resource - DynamicFont - Default font
Resource - DynamicFont - Default font

Do the same for another DynamicFont which will be used for the score label, named SilverScoreDynamicFont.tres. Only changes are Dynamic/Settings/(Size, Outline Size) which are set to 128 and 2, respectively. The final files for the fonts should look something like this:

-
+
Resource - Dynamicfont - Directory structure
Resource - Dynamicfont - Directory structure
@@ -344,7 +344,7 @@

The scene ends up looking like this:

-
+
Scene - UI - Node setup
Scene - UI - Node setup
@@ -478,7 +478,7 @@ func _remove_first_ground() -> void:

Where you might notice that the _initial_new_tile_x is 11, instead of 10, refer to Default ground tiles where we placed tiles from -8 to 10, so the next empty one is 11. These _place_new_ground and _remove_first_ground functions are called upon receiving the signal.

PipeTileMap

This is really similar to the GroundTileMap code, instead of defining an enum for the ground tiles, we define it for the pipe patterns (because each pipe is composed of multiple pipe tiles). If your pipe tile set looks like this (notice the index):

-
+
PipeTileMap - Tile set indexes
PipeTileMap - Tile set indexes
@@ -580,7 +580,7 @@ func get_high_score() -> int: save_data()

Now, this script in particular will need to be a Singleton (AutoLoad), which means that there will be only one instance and will be available across all scripts. To do so, go to Project -> Project settings… -> AutoLoad and select this script in the Path: and add a Node Name: (I used SavedData, if you use something else, be careful while following this devlog) which will be the name we’ll use to access the singleton. Toggle on Enable if needed, it should look like this:

-
+
Project settings - AutoLoad - SavedData singleton
Project settings - AutoLoad - SavedData singleton
-- cgit v1.2.3-70-g09d2