Home › Kategorie 02

🎨 Zeichnen & Primitives

BEGINNER ⏱ ~25 Min

Das Koordinatensystem

Arcade verwendet ein kartesisches Koordinatensystem mit dem Ursprung (0,0) unten links. X wächst nach rechts, Y wächst nach oben – anders als in vielen anderen Frameworks!

▶ KOORDINATENSYSTEM VISUALISIERUNG

Gestrichelte Linien = x/y-Koordinaten der Punkte. Arcade: (0,0) = unten links!

⚠️ Wichtig: Pygame und viele Browser-APIs haben (0,0) oben links. Bei Arcade ist es unten links. Das ist eine häufige Fehlerquelle!

Grundformen zeichnen

Arcade bietet viele eingebaute Zeichenfunktionen. Alle werden innerhalb von on_draw() aufgerufen.

PYTHON – Grundformen 
def on_draw(self):
    self.clear()

    # Kreis (ausgefüllt)
    arcade.draw_circle_filled(
        center_x=200, center_y=300,
        radius=50,
        color=arcade.color.RED
    )

    # Kreis (nur Umriss)
    arcade.draw_circle_outline(
        center_x=350, center_y=300,
        radius=50, color=arcade.color.BLUE,
        border_width=3
    )

    # Rechteck (ausgefüllt)
    arcade.draw_lbwh_rectangle_filled(
        left=50, bottom=100,
        width=150, height=80,
        color=arcade.color.GREEN
    )

    # Linie
    arcade.draw_line(
        start_x=0, start_y=0,
        end_x=800, end_y=600,
        color=arcade.color.WHITE,
        line_width=2
    )

    # Dreieck
    arcade.draw_triangle_filled(
        x1=400, y1=200,
        x2=350, y2=100,
        x3=450, y3=100,
        color=arcade.color.YELLOW
    )

    # Ellipse
    arcade.draw_ellipse_filled(
        center_x=600, center_y=300,
        width=100, height=60,
        color=arcade.color.PURPLE
    )

    # Polygon
    arcade.draw_polygon_filled(
        point_list=[(100,500), (200,550), (150,450)],
        color=arcade.color.CYAN
    )
FunktionParameterBeschreibung
draw_circle_filled()cx, cy, radius, colorAusgefüllter Kreis
draw_circle_outline()cx, cy, radius, color, border_widthKreis-Umriss
draw_lbwh_rectangle_filled()left, bottom, width, height, colorRechteck (l/b/w/h)
draw_lrbt_rectangle_filled()left, right, bottom, top, colorRechteck (Kanten)
draw_line()x1, y1, x2, y2, color, widthLinie
draw_triangle_filled()x1,y1, x2,y2, x3,y3, colorDreieck
draw_ellipse_filled()cx, cy, width, height, colorEllipse
draw_polygon_filled()point_list, colorBeliebiges Polygon
draw_arc_filled()cx, cy, w, h, color, start_a, end_aBogen/Arc
draw_parabola_filled()sl, sc, el, depth, colorParabel
Arcade Drawing Simulator – Klicke zum Zeichnen
Größe: 35
Klicke ins Canvas – der Arcade-Code wird hier angezeigt...

Farben in Arcade

Arcade bietet mehrere Möglichkeiten, Farben anzugeben:

PYTHON – Farben 
# 1. Vordefinierte Farben (über 300 Farbnamen!)
arcade.color.RED          # (255, 0, 0)
arcade.color.AMAZON       # (59, 122, 87)
arcade.color.CYBER_GRAPE  # (88, 66, 124)

# 2. RGB-Tupel
color = (255, 128, 0)   # Orange

# 3. RGBA-Tupel (mit Transparenz)
color = (255, 0, 0, 128)  # Halbtransparentes Rot

# 4. Hex-String
color = "#FF8800"

# 5. arcade.types.Color
color = arcade.types.Color(255, 200, 0, 255)

# Hintergrundfarbe setzen
arcade.set_background_color(arcade.color.DARK_BLUE_GRAY)
self.background_color = arcade.color.BLACK

Primärfarben

RED, GREEN, BLUE, YELLOW, CYAN, MAGENTA, WHITE, BLACK

Naturfarben

AMAZON, FOREST_GREEN, SKY_BLUE, SAND, BROWN, EARTH

Cool Colors

CYBER_GRAPE, ELECTRIC_BLUE, NEON_GREEN, HOT_MAGENTA

Text zeichnen

Arcade bietet zwei Wege für Text: die einfache draw_text() Funktion und das leistungsstarke arcade.Text-Objekt.

PYTHON – Text 
# Einfaches Text zeichnen
arcade.draw_text(
    text="Score: 1337",
    start_x=10, start_y=580,
    color=arcade.color.WHITE,
    font_size=20,
    font_name="Arial",
    bold=True
)

# Leistungsstarkes Text-Objekt (empfohlen für sich oft ändernde Texte)
self.score_text = arcade.Text(
    text="Score: 0",
    start_x=10, start_y=580,
    color=arcade.color.WHITE,
    font_size=20
)

# In on_update() Text aktualisieren
self.score_text.text = f"Score: {self.score}"

# In on_draw() zeichnen
self.score_text.draw()

# Ausrichtung
arcade.draw_text(
    "Zentriert!", 400, 300,
    arcade.color.YELLOW, 30,
    anchor_x="center",   # "left" | "center" | "right"
    anchor_y="center"
)
💡 Das arcade.Text-Objekt ist performanter als wiederholte draw_text()-Aufrufe, da es den Text intern als Textur cached. Ideal für sich ändernde Anzeigen wie Score, Timer, usw.

ShapeElementLists – Batch Drawing

Wenn viele statische Formen gezeichnet werden müssen, sind ShapeElementLists deutlich schneller als einzelne draw-Aufrufe.

PYTHON – ShapeElementList 
def setup(self):
    # Batch-Liste erstellen
    self.shape_list = arcade.shape_list.ShapeElementList()

    # Formen zur Liste hinzufügen
    rect = arcade.shape_list.create_rectangle_filled(
        200, 200, 100, 50, arcade.color.BLUE
    )
    self.shape_list.append(rect)

    circle = arcade.shape_list.create_ellipse_filled(
        400, 300, 80, 60, arcade.color.RED
    )
    self.shape_list.append(circle)

    # Linie mit Farbe
    line = arcade.shape_list.create_line(
        0, 0, 800, 600, arcade.color.WHITE, 2
    )
    self.shape_list.append(line)

def on_draw(self):
    self.clear()
    # Alle Formen in einem GPU-Aufruf zeichnen!
    self.shape_list.draw()
⚡ Performance: Eine ShapeElementList mit 1000 Formen ist deutlich schneller als 1000 einzelne draw_*()-Aufrufe, da alle Formen in einem einzigen GPU Draw Call gerendert werden.
◀ ZURÜCK 🚀 Getting Started WEITER ▶ 👾 Sprites & SpriteLists