# Dein erstes Skript

Schreib ein kurzes Lua-Skript, das eine Sonne zeichnet, führ es aus, mach es rückgängig und speichere es.

_Die Tastenkürzel sind für Windows und Linux notiert. Auf einem Mac nimmst du ⌘ Cmd statt Ctrl und ⌥ Option statt Alt._

Skripte sind kleine Lua-Programme, die deinen Sprite für dich zeichnen und bearbeiten: Alles, was du
mit den Werkzeugen kannst, kann ein Skript mit Code. Hier schreibst du Schritt für Schritt eines, das
eine Sonne auf eine neue Ebene zeichnet. Es dauert etwa fünf Minuten, und du musst vorher nicht
programmiert haben.

## Ein Skript erstellen

Öffne einen Sprite (ein neuer mit 32×32 reicht) und wähl Skripte > Neues Skript.... Nenn das Skript „Sun“
und drück **Erstellen**.

Das Bedienfeld **Skripte** öffnet sich mit ein paar Kommentarzeilen (Zeilen, die mit `--` beginnen und
die Lua ignoriert). Es hat einen Code-Editor, eine Werkzeugleiste am oberen Rand und einen
Ausgabebereich unten. Im Standard-Layout dockt es rechts neben der Leinwand an, sodass du beides
gleichzeitig siehst (du kannst es wie jedes Bedienfeld verschieben: siehe
[Der Arbeitsbereich](https://pxstud.io/de/docs/manual/guides/workspace.md)).

![Das Bedienfeld Skripte mit dem Code des Skripts „Sun“, mit den Schaltflächen Ausführen, Entwurf speichern und Veröffentlichen oben und der Zeile, die es ausgegeben hat, im Ausgabebereich darunter](https://pxstud.io/scripting/images/first-script-panel.light.webp)

_Das Bedienfeld Skripte mit dem Sonnen-Skript, nach dem Ausführen_

## Schreib es

Ersetze die Kommentare durch dies:

```lua
-- Draws a sun on a new layer.
local layer = app.addLayer("Sun")
local frame = app.getActiveFrameId()
local w, h = app.getCanvasWidth(), app.getCanvasHeight()
local cx, cy = w // 2, h // 2
local r = math.min(w, h) // 4

-- the rays: eight short lines around the middle
for i = 0, 7 do
  local a = i * math.pi / 4
  app.drawLine(layer, frame,
    cx + math.floor(math.cos(a) * (r + 2) + 0.5), cy + math.floor(math.sin(a) * (r + 2) + 0.5),
    cx + math.floor(math.cos(a) * (r + 5) + 0.5), cy + math.floor(math.sin(a) * (r + 5) + 0.5),
    { color = "#f4a52e" })
end

-- the disc
app.drawEllipse(layer, frame, cx - r, cy - r, cx + r, cy + r, { color = "#ffd34e", fill = "filled" })
print("Drew a sun " .. (r * 2 + 1) .. " pixels across.")
```

Was es tut:

- `app.addLayer` fügt eine Ebene namens „Sun“ hinzu und gibt ihre ID zurück; `app.getActiveFrameId`
  gibt den Frame, auf dem du bist. Jeder Zeichenbefehl nimmt eine Ebene und einen Frame, so wie ein
  Werkzeug auf der aktiven Ebene im aktuellen Frame malt.
- `app.getCanvasWidth` und `app.getCanvasHeight` lesen die Größe des Sprites, sodass die Sonne auf
  jede Leinwand passt. Koordinaten sind Pixel, mit (0, 0) in der linken oberen Ecke.
- `app.drawLine` und `app.drawEllipse` funktionieren genau wie die Werkzeuge Linie und
  Ellipse. Alles, was du nicht übergibst (hier der Pinsel), kommt aus den aktuellen
  Werkzeugeinstellungen.
- `print` schreibt eine Zeile in den Ausgabebereich.

Während du tippst, schlägt der Editor `app.`-Funktionen vor; zeig auf eine, um zu lesen, was sie tut.

## Führ es aus

Drück in der Werkzeugleiste des Bedienfelds **Ausführen** (die Play-Schaltfläche). Der Ausgabebereich
sagt „Drew a sun 17 pixels across.“, und die Zeitleiste hat eine neue Ebene „Sun“, mit der Sonne auf
der Leinwand neben dem Bedienfeld.

Stimmt etwas nicht, zeigt der Ausgabebereich den Fehler, und die Zeile, in der er passiert ist, wird
hervorgehoben. Behebe ihn und führ es erneut aus.

## Mach es rückgängig

Alles, was ein Durchlauf ändert, ist **ein Schritt zum Rückgängigmachen**: Drück `Ctrl+Z`, und die
Ebene und die Sonne sind zusammen weg. Ändere eine Farbe oder das `+ 5`, das die Länge der Strahlen
festlegt, und führ es erneut aus.

## Speichere es

Drück **Entwurf speichern** (die Disketten-Schaltfläche). Das Skript wird wie deine Sprites in diesem
Browser gespeichert, und ein `*` hinter seinem Namen im Bedienfeld zeigt ungespeicherte Änderungen.
Um es später wieder zu öffnen, wähl Skripte > Mein Skript öffnen...; die letzten fünf Skripte, die du geöffnet
hast, stehen außerdem direkt darunter im Menü Skripte.

**Veröffentlichen** teilt ein Skript in der Skriptbibliothek; dafür brauchst du ein Konto mit Sync
(siehe [die Skripting-Anleitung](https://pxstud.io/de/docs/scripting/guide.md#saving-and-publishing)).

## Nächste Schritte

- [Die Skripting-Anleitung](https://pxstud.io/de/docs/scripting/guide.md) behandelt Ausführen, Stoppen, Skriptfenster, Skriptbefehle und
  die offiziellen Generatoren.
- Die [Skripting-API](https://pxstud.io/de/docs/scripting.md) listet jede `app.`-Funktion auf, gruppiert nach dem, was sie
  tun: [Zeichnen](https://pxstud.io/de/docs/scripting/drawing.md), [Ebenen](https://pxstud.io/de/docs/scripting/layers.md),
  [Frames](https://pxstud.io/de/docs/scripting/frames.md), [Farbmathematik](https://pxstud.io/de/docs/scripting/color.md) und mehr.