Character Creator

Karakter customization systeem.

Scene Structuur

CharacterBuilder (Control)
├── Background
├── CharacterPreview (Node2D)
│   ├── BodySprite
│   ├── ClothesSprite
│   ├── FaceSprite
│   ├── EyesSprite
│   ├── PupilsSprite
│   └── HairSprite
├── CustomizationPanel (Panel)
│   └── MarginContainer
│       └── VBoxContainer
│           ├── SkinSection
│           │   └── SkinSlider
│           ├── EyesSection
│           │   └── EyesSlider
│           ├── FaceSection
│           │   └── FaceControls (Prev/Next)
│           ├── HairSection
│           │   └── HairControls (Prev/Next)
│           └── ClothesSection
│               └── ClothesControls (Prev/Next)
└── ButtonContainer
    ├── BackButton
    └── StartButton

Bestanden

• Scene: scenes/character_builder.tscn
• Script: scripts/character_builder.gd

Customization Opties

Skin Color (Slider)

Gradient van licht naar donker:

func _get_skin_color(value: float) -> Color:
    var colors = [
        Color(1.0, 0.88, 0.85),    # Licht roze
        Color(1.0, 0.80, 0.70),    # Warm peach
        Color(0.95, 0.72, 0.55),   # Oranje peach
        Color(0.88, 0.65, 0.48),   # Warm tan
        Color(0.75, 0.52, 0.38),   # Bruin
        Color(0.55, 0.38, 0.28),   # Donker bruin
    ]
    return _sample_gradient(colors, value)

Eye Color (Slider)

Regenboog/HSV rotatie:

func _get_eye_color(value: float) -> Color:
    # HSV hue rotation voor alle kleuren
    return Color.from_hsv(value, 0.5, 0.7)

Face (Prev/Next)

Gezichtsuitdrukkingen uit assets/character/faces/:

Asset	Naam
blij.png	Blij
verdrietig.png	Verdrietig
boos.png	Boos
verbaasd.png	Verbaasd

Hair (Prev/Next)

Kapsels uit assets/character/hair/:

Asset	Naam
blond-staart.png	Blond Staart
bruin-vol.png	Bruin Vol
paars-vlecht.png	Paars Vlecht
zwart-opgestoken.png	Zwart Opgestoken

Clothes (Prev/Next)

Kleding uit assets/character/clothes/:

Asset	Naam
jurk-groen-bloemen.png	Groene Jurk
jurk-grijs-bloemen.png	Grijze Jurk
tuinbroek.png	Tuinbroek
trui-kortebroek.png	Trui & Broek

Asset Loading

Automatisch Scannen

func _load_assets() -> void:
    face_assets = _get_png_files(FACE_FOLDER)
    eyes_assets = _get_png_files(EYES_FOLDER)
    hair_assets = _get_png_files(HAIR_FOLDER)
    clothes_assets = _get_png_files(CLOTHES_FOLDER)

func _get_png_files(path: String) -> Array[String]:
    var files: Array[String] = []
    var dir = DirAccess.open(path)
    if dir:
        dir.list_dir_begin()
        var file_name = dir.get_next()
        while file_name != "":
            if file_name.ends_with(".png"):
                files.append(path + file_name)
            file_name = dir.get_next()
        dir.list_dir_end()
    files.sort()
    return files

Navigatie

Prev/Next Controls

func _on_hair_prev() -> void:
    if hair_assets.size() > 0:
        current_hair = (current_hair - 1 + hair_assets.size()) % hair_assets.size()
        _update_display()

func _on_hair_next() -> void:
    if hair_assets.size() > 0:
        current_hair = (current_hair + 1) % hair_assets.size()
        _update_display()

Display Update

func _update_display() -> void:
    # Skin
    body_sprite.modulate = _get_skin_color(skin_slider.value)

    # Eyes
    pupils_sprite.modulate = _get_eye_color(eyes_slider.value)

    # Face
    if face_assets.size() > 0:
        face_sprite.texture = load(face_assets[current_face])
        face_name.text = _get_display_name(face_assets[current_face])

    # Hair
    if hair_assets.size() > 0:
        hair_sprite.texture = load(hair_assets[current_hair])
        hair_name.text = _get_display_name(hair_assets[current_hair])

    # Clothes
    if clothes_assets.size() > 0:
        clothes_sprite.texture = load(clothes_assets[current_clothes])
        clothes_name.text = _get_display_name(clothes_assets[current_clothes])

Character Data Opslaan

Bij Start Klikken

func _on_start_pressed() -> void:
    var character_data = {
        "skin_color": _get_skin_color(skin_slider.value),
        "eyes_color": _get_eye_color(eyes_slider.value),
        "eyes": eyes_assets[0] if eyes_assets.size() > 0 else "",
        "face": face_assets[current_face] if face_assets.size() > 0 else "",
        "hair": hair_assets[current_hair] if hair_assets.size() > 0 else "",
        "clothes": clothes_assets[current_clothes] if clothes_assets.size() > 0 else "",
    }

    GameState.save_character(character_data)
    get_tree().change_scene_to_file("res://scenes/game.tscn")

GameState Storage

# In game_state.gd
var _character_data: Dictionary = {}

func save_character(data: Dictionary) -> void:
    _character_data = data
    # Optioneel: ook naar bestand opslaan
    var file = FileAccess.open("user://character.json", FileAccess.WRITE)
    file.store_string(JSON.stringify(data))

func get_character() -> Dictionary:
    return _character_data

Sprite Layer Order

Van achter naar voren (z-index):

1. Body (achtergrond)
2. Clothes (over body)
3. Face (boven clothes)
4. Eyes (op face)
5. Pupils (in eyes)
6. Hair (voorgrond)

# Positie setup in scene
body_sprite.z_index = 0
clothes_sprite.z_index = 1
face_sprite.z_index = 2
eyes_sprite.z_index = 3
pupils_sprite.z_index = 4
hair_sprite.z_index = 5

Assets Folder Structuur

assets/character/
├── body/
│   └── body-girl3.png
├── eyes/
│   ├── ogen-blij.png
│   └── pupillen.png
├── faces/
│   ├── blij.png
│   └── verdrietig.png
├── hair/
│   ├── blond-staart.png
│   ├── bruin-vol.png
│   └── paars-vlecht.png
└── clothes/
    ├── jurk-groen-bloemen.png
    └── tuinbroek.png

Volgende

• Treehouse
• World Map