Episode 1 - Board and Pieces

Disclaimer

My project uses autotiles and animated pieces, hence some code may seem a bit overkill for your use case.

You can support us through Patreon or get access to the final version of the code on GitHub

1. Drawing the board §

First you will need to setup a autotiler in order to draw the board and have those nice and crispy edges. I used BetterTerrain to have more control of the TileMap and the Tiny Swords asset pack.

Then start populating the TileMap with respective cells

var map_shape = Vector2i(8, 8)

# set background of map
for col in range(map_shape.x):
	for row in range(map_shape.y):
		var map_cell = Vector2i(col, row)
		BetterTerrain.set_cell(self, DrawLayers.TERRAIN, map_cell, AutotilerLayers.GROUND)
		BetterTerrain.update_terrain_cell(self, DrawLayers.TERRAIN, map_cell)

You can also center the TileMap by doing

# center map
var viewport_center = get_viewport().size / 2
viewport_center -= (map_shape * tile_set.tile_size) / 2
position = viewport_center - Vector2i(0, rendering_quadrant_size/2)

2. Defining chess pieces §

2.1. Defining Piece Constants §

What I did here is that I first created a Constrants.gd preload file that I used to store information about chess pieces and also general stuff that should not change in-game.

You can then store information inside of it such as the sprites that will be used for each individual piece such as

var UNITS = {
	"pawn": {
		"sprites": {
			"head": preload("res://assets/units/components/Head/HeadPawn.png")
		}
	},
	"rook": {
		"sprites": {
			"head": preload("res://assets/units/components/Head/HeadRook.png")
		}
	},
	...

2.2. Creating a Piece Template §

We can then create a Unit.tscn class that we’ll use as a template to create chess pieces. The structure should look something like this

Unit (Node2D) # root of the scene
|__ Sprites (Node2D) # in charge of applying changes on sprite components
	|__ LeftArm (Sprite2D) 
	|__ Body (Sprite2D)
	|__ Head (Sprite2D) 
	|__ RightArm (Sprite2D) 
|__ AnimationPlayer (AnimationPlayer)

Then we add some code to the Unit node

extends Node2D

@onready var sprites = $Sprites

var unit_type = "pawn"
var unit_side = "blue" # sides are blue (white) and red (black)

func init(unit_info):
	unit_type = unit_info["unit_type"]
	unit_side = unit_info["unit_side"]

func _ready():
	sprites.update_sprites(
		Constants.UNITS[unit_type]["sprites"],
		Constants.PALETTES[unit_side]
	)

2.3. Changing Colors using Shaders §

You may have seen that I’m calling the Sprites node with a extra variable called Constants.PALETTES. That’s because I swap the palettes of a sprite at run-time to make blue pieces and red pieces.

I’ve added the following shader to the Sprites node and told all it’s children to use the parent material

shader_type canvas_item;

uniform vec4 old_main_color : source_color;
uniform vec4 old_shadow_color: source_color;
uniform vec4 old_light_color: source_color;

uniform vec4 new_main_color : source_color;
uniform vec4 new_shadow_color: source_color;
uniform vec4 new_light_color: source_color;

void fragment() {
    vec4 current_pixel = texture(TEXTURE, UV);

    if (current_pixel == old_main_color) {
		COLOR = new_main_color;
	}
        
	if (current_pixel == old_shadow_color) {
		COLOR = new_shadow_color;
	}
        
	if (current_pixel == old_light_color) {
		COLOR = new_light_color;
	}
}

You can then change the colors programmatically inside the Sprites node by doing

func update_palettes():
	var default_palette = Constants.DEFAULT_PALETTE
	
	material.set_shader_parameter("old_main_color", default_palette["old_main_color"])
	material.set_shader_parameter("old_shadow_color", default_palette["old_shadow_color"])
	material.set_shader_parameter("old_light_color", default_palette["old_light_color"])
	
	material.set_shader_parameter("new_main_color", color_palette["new_main_color"])
	material.set_shader_parameter("new_shadow_color", color_palette["new_shadow_color"])
	material.set_shader_parameter("new_light_color", color_palette["new_light_color"])

3. FEN and board setup §

FEN (or Forsyth–Edwards Notation) is a way to encode the state of a chess board using letters for pieces (p or P for black and white Pawns, n or N for black and white Knights) and numbers for empty spaces.

Thus, you can encode for example the initial state of a chess board by writing

var start_FEN = "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR"

Then you just need to split by / and parse the substrings to setup the board. Easy!

func get_unit_info_from_symbol(symbol: String):
	var unit_type = null
	match symbol.to_lower():
		"p": unit_type = "pawn"
		"n": unit_type = "knight"
		"r": unit_type = "rook"
		"b": unit_type = "bishop"
		"q": unit_type = "queen"
		"k": unit_type = "king"
	var unit_side = "blue" if symbol.capitalize() == symbol else "red"
	var unit_info = {
		"unit_type": unit_type,
		"unit_side": unit_side
	}
	return unit_info

You can even use this notations to add a re-play system to your games.