Construyendo un juego básico

Para empezar, esta guía te lleva paso a paso para crear un juego de recolección de manzanas.

Colección de manzanas

Este juego de ejemplo pasa por alto detalles que se tratan en profundidad en otras guías. Si necesitas ayuda, consulta la barra lateral izquierda o usa la función de búsqueda en la parte superior para obtener información adicional.

Construyendo el mapa

Empezaremos creando un mundo básico con una isla para caminar y una manzana para recoger más tarde.

Busca una Manzana y una Isla en el Catálogo de recursos y arrástralas a la vista de escena de tu juego.

Apple and island assets placed in the scene

¡Esa isla es bastante pequeña! En el Inspector configura el Escala a 10x10 para hacerla más grande

Ahora la isla tiene un tamaño adecuado, ¡pero la manzana está detrás de la isla! Establece la Capa a -10 para ponerla detrás de todo lo demás.

Island rendering layer set in the Inspector

Añadiendo scripts

En el directorio de tu proyecto de juego, scripts crea un nuevo archivo llamado pickup_apple.csl y ábrelo en un editor de texto o usa un IDE basado en IA.

Pega el siguiente script de ejemplo y guarda el archivo:

// Esto crea el componente que hace que la manzana sea interactiva,
// lo añadiremos a la Manzana en el siguiente paso del tutorial.
Pickup_Apple :: class : Interactable {
    is_picked_up: bool;

    ao_start :: method() {
        this.set_listener(this);
        this.set_text("Recoger");
    }

    can_use :: method(player: Player) -> bool {
        if is_picked_up return false;
        return true;
    }

    on_interact :: method(player: Player) {
        if is_picked_up return;
        is_picked_up = true;

        // Inicia el efecto pop
        effect := new(Apple_Pop_Effect);
        entity.set_active_effect(effect);
    }
}

// Una animación genial para cuando te la comes :D
Apple_Pop_Effect :: class : Effect_Base {
    sprite: Sprite_Renderer;
    start_scale: v2;
    start_pos: v2;

    effect_start :: method() {
        sprite = entity.get_component(Sprite_Renderer);
        start_scale = entity.local_scale;
        start_pos = entity.local_position;
        set_duration(0.4);
    }

    effect_update :: method(dt: float) {
        t := get_elapsed_time() / 0.4;

        // Escala hacia arriba y luego encoge rápidamente hasta desaparecer
        scale_curve: float;
        if t < 0.3 {
            // Aparición rápida (escala a 1.3x)
            scale_curve = lerp(1.0, 1.3, Ease.out_back(t / 0.3));
        } else {
            // Encoger hasta desaparecer
            scale_curve = lerp(1.3, 0.0, Ease.in_back((t - 0.3) / 0.7));
        }

        entity.set_local_scale(start_scale * scale_curve);

        // Flota ligeramente hacia arriba
        rise := Ease.out_quad(t) * 0.5;
        entity.set_local_position({start_pos.x, start_pos.y + rise});

        // Desvanece al final
        if sprite != null {
            alpha := 1.0 - Ease.in_quad(max(0.0, (t - 0.5) / 0.5));
            sprite.color.w = alpha;
        }
    }

    effect_end :: method(interrupt: bool) {
        entity.destroy();
    }
}

Al guardar un archivo CSL, se detecta y compila automáticamente. En una prueba en ejecución, pulsa Alt+F9 para cargar manualmente los scripts compilados en caliente. Detén y reinicia para los cambios de escena. Ctrl+R recarga todo el proyecto del editor y no es necesario para la compilación normal de scripts.

Añadiendo el componente de la manzana

Ahora que has creado tu script de manzana, tendremos que aplicarlo a la manzana de la escena. Para hacerlo, añadiremos el nuevo Pickup_Apple componente del script usando el Inspector.

Selecciona tu Manzana en la escena.
Haz clic en el botón "Add Component" del Inspector.
Busca el componente "Pickup_Apple" y haz clic en él para añadirlo a la manzana.

Adding the Pickup Apple component in the Inspector

Ahora verás que el componente se ha añadido a la manzana. Puedes ajustar algunos campos de la Manzana cambiando los valores en el inspector:

Pickup Apple component fields in the Inspector

Jugando a tu juego

Cuando estés listo, pulsa el divertido triángulo verde y prueba tu juego.

Próximos pasos

En las próximas secciones, aprenderás a probar tu juego con varios jugadores, crear tus propios scripts y construir el mundo de tus sueños.

Aquí tienes algunos desafíos para probar:

Haz muchas manzanas para que el jugador las coma
Reproduce efectos de sonido al ser comidas
Avanzado: intenta escribir un script para hacer reaparecer más manzanas después de que se las coman

NOTA: Si tu isla tiene una baja resolución o se ve pixelada, haz clic en el activo png de la isla en la sección "Assets" y establece el Multiplicador de remuestreo en 1 y haz clic en Aplicar

AnteriorIniciando el editor SiguienteProbar tu juego

Última actualización hace 19 días

// Esto crea el componente que hace que la manzana sea interactiva,
// lo añadiremos a la Manzana en el siguiente paso del tutorial.
Pickup_Apple :: class : Interactable {
    is_picked_up: bool;

    ao_start :: method() {
        this.set_listener(this);
        this.set_text("Recoger");
    }

    can_use :: method(player: Player) -> bool {
        if is_picked_up return false;
        return true;
    }

    on_interact :: method(player: Player) {
        if is_picked_up return;
        is_picked_up = true;

        // Inicia el efecto pop
        effect := new(Apple_Pop_Effect);
        entity.set_active_effect(effect);
    }
}

// Una animación genial para cuando te la comes :D
Apple_Pop_Effect :: class : Effect_Base {
    sprite: Sprite_Renderer;
    start_scale: v2;
    start_pos: v2;

    effect_start :: method() {
        sprite = entity.get_component(Sprite_Renderer);
        start_scale = entity.local_scale;
        start_pos = entity.local_position;
        set_duration(0.4);
    }

    effect_update :: method(dt: float) {
        t := get_elapsed_time() / 0.4;

        // Escala hacia arriba y luego encoge rápidamente hasta desaparecer
        scale_curve: float;
        if t < 0.3 {
            // Aparición rápida (escala a 1.3x)
            scale_curve = lerp(1.0, 1.3, Ease.out_back(t / 0.3));
        } else {
            // Encoger hasta desaparecer
            scale_curve = lerp(1.3, 0.0, Ease.in_back((t - 0.3) / 0.7));
        }

        entity.set_local_scale(start_scale * scale_curve);

        // Flota ligeramente hacia arriba
        rise := Ease.out_quad(t) * 0.5;
        entity.set_local_position({start_pos.x, start_pos.y + rise});

        // Desvanece al final
        if sprite != null {
            alpha := 1.0 - Ease.in_quad(max(0.0, (t - 0.5) / 0.5));
            sprite.color.w = alpha;
        }
    }

    effect_end :: method(interrupt: bool) {
        entity.destroy();
    }
}