Copy LinkCopied!Character Customization

Copy LinkCopied!Creating a widget to select sprites

# Scene with the necessary controls to select a texture for the customization
class_name UISpriteSelector
extends Control

# Emitted when the selected texture changes.
signal sprite_changed(texture)
# We store all available textures to cycle through in this array.
var _sprites := []
# The index of the currently selected texture from the `_sprites` array.
var _index := 0 setget _set_index

# We store a reference to the TextureRect node to update its texture.
onready var texture_rect: TextureRect = $TextureRect

# This function allows another node to pass an array of textures to store in `_sprites`
func setup(sprite_textures: Array) -> void:
	_sprites = sprite_textures
	# We reset the index to update the texture. See `_set_index()` below.
	_set_index(0)


# We use this function to update the _index value and the selected texture.
# We use a setter function because we always want to update the texture when the _index value changes.
func _set_index(value: int) -> void:
	# `wrapi()` cycles the value between the second and the third argument - 1.
	# Here, we use it to cycle between our textures.
	_index = wrapi(value, 0, _sprites.size())
	# The next two lines get and display the newly selected texture.
	var texture: StreamTexture = _sprites[_index]
	texture_rect.texture = texture
	emit_signal("sprite_changed", texture)


# The two callbacks below were generated by Godot.
func _on_PreviousButton_pressed() -> void:
	# When clicking the previous button, we lower the index by one.
	_set_index(_index - 1)


func _on_NextButton_pressed() -> void:
	# When clicking the next button, we increment the index by one.
	_set_index(_index + 1)

Copy LinkCopied!The character customization menu

# This script builds the character customizer GUI, with a `UISpriteSelector`
# for each customizable part.
extends Control

# We're going to have three customizable parts on our character:
# the hat, head, and glasses. We define three corresponding signals.
# Emitted when the user changes the hat texture.
signal hat_changed(texture)
# Same as above, but for the head texture.
signal head_changed(texture)
# Same as above, but for the glasses texture.
signal glasses_changed(texture)

# The `DATA` dictionary contains the possible textures of each part of the
# character. Each key represents a customizable part.
const DATA := {
	"hat" :
	[
		preload("Sprites/hat1.png"),
		preload("Sprites/hat2.png"),
		preload("Sprites/hat3.png")
		],
	"glasses" : [
		preload("Sprites/sun-glasses1.png"),
		preload("Sprites/sun-glasses2.png"),
		preload("Sprites/sun-glasses3.png")
		],
	"head": [
		preload("Sprites/head1.png"),
		preload("Sprites/head2.png"),
		preload("Sprites/head3.png") ]
	}

# We want to instance our UISpriteSelector scene from code so we preload it.
const SpriteSelectorScene: PackedScene = preload("UISpriteSelector.tscn")

onready var vbox_container: VBoxContainer = $Panel/VBoxContainer


# When the node enters the tree, we instantiate `SpriteSelectorScene` for each
# customizable part.
func _ready() -> void:
	for key in DATA:
        # Get the textures available for the current `key`
		var textures: Array = DATA[key]
		# Create an instance of the `SpriteSelectorScene`
		var sprite_selector: UISpriteSelector = SpriteSelectorScene.instance()
		vbox_container.add_child(sprite_selector)
		# We feed the UI widget's textures by calling its `setup()` method.
		sprite_selector.setup(textures)
		# We connect to the `UISpriteSelector`'s `sprite_changed` signal, binding the `key` as an
		# extra parameter, to know which texture changed and emit the corresponding signal.
		sprite_selector.connect("sprite_changed", self, "_on_SpriteSelector_sprite_changed", [key])


# When a texture changes, we emit the corresponding signal, to notify the
# character in the main scene.
func _on_SpriteSelector_sprite_changed(texture: StreamTexture, key: String) -> void:
	emit_signal(key + "_changed", texture)

Copy LinkCopied!Customizing the character

# Character script with some basic movement, and the functions needed to update
# the sprites of the customizable parts.
extends KinematicBody2D

export var speed := 300.0

onready var body := $Body
# We store references to each customizable sprite, for later use.
onready var hat := $Body/Hat
onready var glasses := $Body/Glasses
onready var head := $Body/Head


# Basic movement is handled here, just for demonstration purposes.
func _physics_process(_delta) -> void:
	var direction := Vector2(
		Input.get_action_strength("ui_right") - Input.get_action_strength("ui_left"),
		Input.get_action_strength("ui_down") - Input.get_action_strength("ui_up")
	).normalized()

	move_and_slide(direction * speed)

	if direction.x != 0:
		body.scale.x = sign(direction.x)


# This functions changes the glasses' texture. It needs to be connected to the
# `glasses_changed` signal of the `UICharacterCustomizer`
func _on_CharacterCustomizer_glasses_changed(texture) -> void:
	glasses.texture = texture


# Same as previous funciton, but for the `hat`.
func _on_CharacterCustomizer_hat_changed(texture) -> void:
	hat.texture = texture


# Same as previous function, but for the `head`.
func _on_CharacterCustomizer_head_changed(texture) -> void:
	head.texture = texture

Copy LinkCopied!Putting it all together in the main scene