PixelRAM

1. Grundlagen

Übersetzen

In einem Ordner mit der PixelRAM-Vorlage übersetzt make die Datei main.c in die Webseite main.html, die du mit »Go Live« in der Vorschau öffnest. Beim ersten Mal lädt make die Bibliothek PixelRAM in den versteckten Ordner .pixelram.

make                   # main.c → main.html
make PROGRAM=spiel     # spiel.c → spiel.html
make PROGRAM=beispiele/feuer

• Findet make einen Fehler, nennt es Datei und Zeile, und die alte Webseite bleibt, wie sie war. Lies die erste Fehlermeldung zuerst.
• Was dein Programm mit printf ausgibt, steht in der Konsole der Seite: Fahre mit der Maus über das Bild und klicke unten rechts auf das Terminal-Symbol oder drücke `.
• Dort sind auch der CRT-Filter (F6), der Scanlines wie auf einem alten Röhrenbildschirm zeigt, und das Vollbild (F11).

Bildschirm und Schleife

#include "pixelram.h"

int main(void)
{
    if (!screen_open(320, 180, pixel_indexed8, "Mein Programm"))
        return 1;

    while (!should_close())
    {
        clear(0);
        // … Pixel setzen …
        present();          // das fertige Bild zeigen
    }

    screen_close();
    return 0;
}

Ein Programm ohne Schleife, das nur ein Bild malt, braucht im Browser kein present(): Die Seite zeigt das Bild dann von selbst.

2. Pixel und Farben

Pixel setzen und lesen

Der Pixel (0, 0) ist oben links, x wächst nach rechts, y nach unten. Im Modus pixel_indexed8 ist die Farbe eines Pixels eine Zahl von 0 bis 255, eine Nummer in der Palette.

Weil man Pixel auch lesen kann, ist das Bild selbst ein Speicher: Ein Spiel kann nachsehen, ob an einer Stelle schon etwas steht, und ein Feuer kann seine Farbe aus den Pixeln darunter ausrechnen.

for (int y = 0; y < screen_height(); y++)
    for (int x = 0; x < screen_width(); x++)
        set_pixel(x, y, (x ^ y) % 16);

Paletten

Die Palette sagt, welche Farbe zu jeder Nummer gehört. Ändert man eine Farbe der Palette, ändern sich sofort alle Pixel mit dieser Nummer, ohne dass ein einziger Pixel neu gesetzt wird.

PixelRAM kennt dieselben 88 Paletten wie Pixelflow Canvas, zum Beispiel vga, pico_8, sweetie_16, endesga_32, zughy_32 und aap_64. Alle stehen in der Dokumentation von PixelRAM.

Ein Farbverlauf in der Palette macht aus Nummern Helligkeiten, etwa für Feuer: Nummer 0 ist Schwarz, 63 ist Weiß, dazwischen Rot und Gelb.

for (int i = 0; i < 16; i++) {
    set_palette(i,      i * 8,       0,           0);
    set_palette(i + 16, i * 8 + 128, i * 8,       0);
    set_palette(i + 32, 255,         i * 8 + 128, i * 8);
    set_palette(i + 48, 255,         255,         i * 8 + 128);
}

Farben ohne Palette

In den anderen Modi steht in jedem Pixel gleich die Farbe:

Der Speicher hinter dem Bild

set_pixel schreibt in einen Speicher, den die Grafik am Ende zeigt. Mit framebuffer() kommt man direkt an ihn heran, so wie Spiele aus den Neunzigerjahren:

uint8_t *pixel = framebuffer();
pixel[y * screen_pitch() + x] = 12;   // dasselbe wie set_pixel(x, y, 12)

screen_pitch() ist die Länge einer Zeile in Bytes, framebuffer_size() die Größe des ganzen Speichers. Im Modus pixel_indexed8 ist jedes Byte ein Pixel. Direkt in den Speicher zu schreiben ist schneller, aber nichts passt mehr auf: Wer über den Rand schreibt, zerstört andere Daten.

3. Eingabe und Zeit

Tastatur

Die Tasten heißen pixel_key_a bis pixel_key_z, pixel_key_0 bis pixel_key_9, pixel_key_up, pixel_key_down, pixel_key_left, pixel_key_right, pixel_key_space, pixel_key_enter, pixel_key_escape, pixel_key_shift, pixel_key_ctrl und pixel_key_f1 bis pixel_key_f12. Buchstaben und Ziffern haben die Nummer ihres Zeichens: pixel_key_a ist 'a'.

Im Browser bekommt das Programm die Tasten erst, wenn du einmal ins Bild geklickt hast.

Maus

Zeit

Damit eine Bewegung auf jedem Computer gleich schnell ist, rechnet man mit der Zeit seit dem letzten Bild:

double vorher = seconds();
while (!should_close())
{
    double jetzt = seconds();
    double dt = jetzt - vorher;
    vorher = jetzt;
    x += 40 * dt;          // 40 Pixel pro Sekunde
    // …
    present();
}