From ec2aa74d36670d74c153aa0022ab22e79502a061 Mon Sep 17 00:00:00 2001 From: David Luevano Alvarado Date: Tue, 2 May 2023 01:33:25 -0600 Subject: update to new version of pyssg --- live/blog/g/flappybird_godot_devlog_1.html | 81 +++++++++++++++--------------- 1 file changed, 40 insertions(+), 41 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 558e16b..6f37a66 100644 --- a/live/blog/g/flappybird_godot_devlog_1.html +++ b/live/blog/g/flappybird_godot_devlog_1.html @@ -3,27 +3,26 @@ " prefix="og: https://ogp.me/ns#"> - - + Creating a FlappyBird clone in Godot 3.5 devlog 1 -- Luevano's Blog - - - + + + - - + + - + - + @@ -89,17 +88,17 @@

The source code can be found in my GitHub here, it also contains the exported versions for HTML5, Windows and Linux (be aware that the sound might be too high and I’m too lazy to make it configurable, it was the last thing I added), or you could also go to the itch.io page I setup where it’s playable in the browser:

-

Initial project setup

-

Directory structure

+

Initial project setup

+

Directory structure

I’m basically going with what I wrote on Godot project structure recently, and probably with minor changes depending on the situation.

-

Config

-

Default import settings

+

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

+
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 @@ -115,21 +114,21 @@ Project settings - General - Initial window size
Project settings - General - Initial window size
-

Keybindings

+
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

+
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
-

Assets

+

Assets

For the assets I found out about a pack that contains just what I need: flappy-bird-assets by MegaCrash; I just did some minor modifications on the naming of the files. For the font I used Silver, and for the sound the resources from FlappyBird-N64 (which seems to be taken from 101soundboards.com which the orignal copyright holder is .Gears anyways).

-

Importing

+

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 @@ -140,9 +139,9 @@ FileSystem - SFX imports
FileSystem - SFX imports
-

Scenes

+

Scenes

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

+

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) @@ -185,13 +184,13 @@
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

+
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

+

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 @@ -214,7 +213,7 @@
Scene - Player - SpriteFrames window with sprite sheet configured

Finally, make sure the “Sprite” node has the AnimatedSprite/Animation is set to “bird_1” and that the “Collision” node is configured correctly for its size and position (I just have it as a radius of 7). As well as dropping the SFX files into the corresponding AudioStreamPlayer (into the AudioStreamPlayer/Stream property).

-

Other

+

Other

These are really simple scenes that don’t require much setup:

-

Game

+

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 @@ -237,8 +236,8 @@ Scene - Game - Viewport
Scene - Game - Viewport
-

UI

-

Fonts

+

UI

+
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:

@@ -250,7 +249,7 @@ Resource - Dynamicfont - Directory structure
Resource - Dynamicfont - Directory structure
-

Scene setup

+
Scene setup

This has a bunch of nested nodes, so I’ll try to be concise here. The root node is a CanvasLayer named “UI” with its own script attached, and for the children: