ebSkola

6. tēma / 6.2

6.2 Animācijas un Tween

Stundas uzdevums: Pievienot animācijas UI un spēles objektiem ar AnimationPlayer un Tween.

SR 2.4.7. UI SR 2.4.15. Modulāras programmas

80 min plāns: Teorija un paraugs (~10 min) · 1. uzdevums (~20 min) - uztaisi pirmo Tween animāciju · 2. uzdevums (~25 min) - animē izvēlnes parādīšanos · 3. uzdevums (~20 min) - pievieno atsauksmes animāciju spēlē · Iesniegšana (~5 min).

Pirms sāc: atver savu izvēlni no 6.1 stundas. Animācija nav tikai skaistums - tā pasaka spēlētājam, ka viņa darbība tika pamanīta.

Teorija: Animācijas Godot

Godot piedāvā divas pieejas animācijām:

  • AnimationPlayer - vizuāli (timeline editor) izveidotas animācijas.
  • Tween - programmatiski izveidotas vienkāršas animācijas.
// Tween - fade in
private void ShowButton()
{
    Tween tween = CreateTween();
    button.Modulate = new Color(1, 1, 1, 0);  // sākotnēji caurspīdīgs
    tween.TweenProperty(button, "modulate", new Color(1, 1, 1, 1), 0.5);
}

// Tween - kustība ar bounce
private void ShakeButton()
{
    Tween tween = CreateTween();
    Vector2 original = button.Position;
    tween.TweenProperty(button, "position", original + new Vector2(10, 0), 0.05);
    tween.TweenProperty(button, "position", original - new Vector2(10, 0), 0.05);
    tween.TweenProperty(button, "position", original, 0.05);
}

Kā šo izmantot projektā

Atceries: ar redzamu efektu editorā nepietiek. Paskaidro, kura C# klase glabā stāvokli, kura metode to maina un kā Godot node struktūra izmanto šo kodu.

Pārbaudi: UI signāli, audio darbības, debug izvade un publicēšanas sagatave ir sasaistīta ar C# spēles stāvokli.

public class PolishCheckpoint
{
    public string Lesson = "6.2 Animācijas un Tween";
    public bool UsesCSharp = true;
    public bool ConnectsUiSignals = true;
    public bool RoutesAudioEvents = true;
    public bool VerifiesExportBuild = true;
}

Praktiskie uzdevumi

1. uzdevums -

Uztaisi pirmo Tween animāciju

Beigās objekts vienmērīgi pārvietosies no vienas vietas uz otru.

  1. Pārliecinies, ka faila sākumā ir using Godot;.
  2. Izveido kodā Tween tween = CreateTween();.
  3. Pievieno tween.TweenProperty(objekts, "position", new Vector2(600, 300), 1.0);.
  4. Būvē un palaid - objektam vienmērīgi jāaizslīd.
  5. Nomaini ilgumu uz 0.2 un palaid vēlreiz.
  6. Pievieno .SetTrans(Tween.TransitionType.Elastic);.
  7. Pieraksti, kā mainījās kustības raksturs.

Gatavs, kad: objekts pārvietojas vienmērīgi, un ar TransitionType.Elastic tas mērķī nedaudz atlec.

2. uzdevums -

Animē izvēlnes parādīšanos

Beigās izvēlne parādīsies mīksti, nevis uzreiz.

  1. Iestati izvēlnei sākumā Modulate = new Color(1, 1, 1, 0);.
  2. Izveido _Ready metodē Tween.
  3. Animē īpašību modulate:a no 0 uz 1 vienā sekundē.
  4. Palaid un vēro, kā izvēlne parādās.
  5. Pievieno arī nelielu nobīdi no augšas uz vietu.
  6. Savieno abas animācijas ar tween.SetParallel(true);.
  7. Pieraksti, ar ko paralēla animācija atšķiras no secīgas.

Gatavs, kad: izvēlne vienlaikus izgaismojas un noslīd vietā, nevis dara to pa vienam.

3. uzdevums -

Pievieno atsauksmes animāciju spēlē

Beigās spēlētājs redzēs, ka viņa darbība tika pamanīta.

  1. Izvēlies vienu notikumu savā spēlē, piemēram monētas savākšanu.
  2. Pievieno tam Tween, kas objektu uz brīdi palielina un tad atgriež.
  3. Pievieno arī krāsas mirgojumu, kad spēlētājs saņem triecienu.
  4. Pārliecinies, ka animācija netraucē spēles gaitu.
  5. Pārbaudi, kas notiek, ja notikums atkārtojas ļoti ātri.
  6. Apturi iepriekšējo Tween ar Kill(), ja tas vēl darbojas.
  7. Pieraksti, kāpēc animācija palīdz saprast spēli.

Gatavs, kad: savācot monētu, tā uz mirkli palielinās, un ātri atkārtojot notikumu, animācijas nesajūk.

Papildu uzdevums - Izmēģini AnimationPlayer

Ja pamatdarbs ir gatavs, salīdzini otru pieeju.

  1. Pievieno scēnai AnimationPlayer mezglu.
  2. Izveido tajā animāciju ar diviem atslēgkadriem.
  3. Palaid to no koda ar animationPlayer.Play("nosaukums");.
  4. Pieraksti, kura pieeja bija ātrāk izveidojama.
  5. Pieraksti, kurā gadījumā labāk lietot katru no tām.

Gatavs, kad: abas pieejas dod animāciju, un tu vari nosaukt, kad kura ir ērtāka.

Ko sagatavo

Stundas mērķis: Tavā spēlē darbojas Tween animācijas: izvēlne parādās mīksti, un vismaz viens spēles notikums dod spēlētājam vizuālu atsauksmi, kas nesajūk pie ātras atkārtošanas.

GitHub krātuvē jābūt:

  1. README.md ievietota video saite, kurā redzama izvēlnes parādīšanās un spēles notikuma animācija.
  2. C# fails ar CreateTween un TweenProperty izsaukumiem.
  3. README.md: ar ko paralēla animācija atšķiras no secīgas un kāpēc vajag Kill().

Kā iesniedz: Veic commit un push. Skolotāja norādītajā vietā ievieto tikai GitHub krātuves saiti; visiem prasītajiem failiem, README.md pierakstiem un pierādījumiem jābūt pašā krātuvē.

Biežākās kļūdas

  • Tween nedarbojas: CreateTween() izveido Tween objektu; ja vēlāk tas jāaptur, saglabā to laukā.
  • AnimationPlayer skip frames: Animation length pārāk īss vai Play() izsaukts vairākkārt.
  • Particles invisible: CollisionShape2D vai Sprite2D parent var ietekmēt visibility.

Godot ekrānuzņēmumi

Spēles aina ar 3 damage popups: '-15', '-25 CRIT!', '-10' dažādās krāsās un izmēros, peld augšup.
Spēles aina ar 3 damage popups: '-15', '-25 CRIT!', '-10' dažādās krāsās un izmēros, peld augšup.
Godot AnimationPlayer editor: timeline ar walk animāciju, 4 keyframes priekš Sprite2D Frame property.
Godot AnimationPlayer editor: timeline ar walk animāciju, 4 keyframes priekš Sprite2D Frame property.

Koda piemērs (paplašināts)

using Godot;

public partial class Player : CharacterBody2D
{
    public void OnTakeDamage(int amount)
    {
        // Damage number popup
        Label damageLabel = new Label();
        damageLabel.Text = "-" + amount;
        damageLabel.Position = Position + new Vector2(0, -30);
        damageLabel.AddThemeColorOverride("font_color", new Color(1, 0, 0));
        GetParent().AddChild(damageLabel);

        // Tween: peld augšup un izgaist
        Tween tween = damageLabel.CreateTween();
        tween.SetParallel(true);  // abas animācijas paralēli
        tween.TweenProperty(damageLabel, "position", damageLabel.Position + new Vector2(0, -50), 0.8);
        tween.TweenProperty(damageLabel, "modulate:a", 0.0, 0.8);
        tween.Chain().TweenCallback(Callable.From(damageLabel.QueueFree));

        // Player flash red
        Tween flash = CreateTween();
        Modulate = new Color(1, 0, 0);
        flash.TweenProperty(this, "modulate", new Color(1, 1, 1), 0.3);
    }
}
Bojājot ienaidnieku, parādās '-25' sarkanā tekstā, peld augšup un izgaist; player sarkans flash 0.3 sec.