tobisnotizblog.de

LWJGL Natives in Maven einbinden

31-May-2019 13:00

Seit kurzem verwende ich Maven für meine Projekte und so manches ist noch neu für mich. Eines dieser Projekte basiert auf LWJGL. Dabei handelt es sich um eine Library für Java mit diversen Bindings für alle gängigen Plattformen. Enthalten sind unter anderem Opengl, Vulcan, OpenAL usw.

Um LWJGL verwenden zu können bindet man je nach benötigter Funktionalität die entsprechenden Dependencies in die pom.xml ein. Zum Beispiel lwjgl-opengl.jar für OpenGL. Daneben wird auch immer die lwjgl.jar benötigt. Da LWJGL mehrere Plattformen unterstützt, muss für das jeweilige Betriebssystem noch eine Natives-JAR eingebunden werden. Diese heißen lwjgl-windows.jar, lwjgl-linux.jar oder lwjgl-macos.jar.

Mein erster Versuch sah wie folgt aus:

<dependencies>

  <!-- More dependencies -->

  <dependency>
    <groupId>org.lwjgl</groupId>
    <artifactId>lwjgl</artifactId>
    <version>3.1.0</version>
  </dependency>

  <!-- More dependencies -->

</dependencies>

Die lwjgl.jar wird wie erwartet eingebunden. Das Projekt konnte jedoch nicht ausgeführt werden, weil die Natives nicht eingebunden wurde. Die Natives liegen im selben Verzeichnis wie die lwjgl.jar. Um die entsprechende Nativ-JAR einzubinden, kann man in der Dependency einen classifier angeben, wie im folgenden Beispiel gezeigt.

<dependencies>

  <!-- More dependencies -->

  <dependency>
    <groupId>org.lwjgl</groupId>
    <artifactId>lwjgl</artifactId>
    <classifier>natives-windows</classifier>
    <version>3.1.0</version>
  </dependency>

  <!-- More dependencies -->

</dependencies>

Das Projekt war nun lauffähig. Jedoch nur auf Windows. Besser ist es, wenn je nach Plattform eine andere JAR eingebunden wird. Dafür lassen sich in der pom.xml Profile erstellen. In diesen können dann properties definiert werden. Deren Inhalt läst sich an verschiedenen Stellen im pom.xml einfügen.

Im folgendem Beispiel wird die Plattform mittels eines Profils gesetzt.

<profiles>
  <profile>
    <activation>
      <os>
        <family>windows</family>
      </os>
    </activation>
    <properties>
      <plattform>windows</plattform>
    </properties>
  </profile>
</profiles>

<dependencies>

  <!-- More dependencies -->

  <dependency>
    <groupId>org.lwjgl</groupId>
    <artifactId>lwjgl</artifactId>
    <classifier>natives-${plattform}</classifier>
    <version>3.1.0</version>
  </dependency>

  <!-- More dependencies -->

</dependencies>

Das oben angelegte Profil wird aktiv,wenn das Betriebssystem zur Familie Windows gehört. Damit steht dann das property plattform bereit, dessen Inhalt dann in der dependency mit dem Platzhalter ${plattform} eingebunden wird. Was jetzt noch fehlt, sind Profile für die anderen Plattformen. Aber ich denke das Prinzip sollte klar sein und ich hoffe ich konnte dem einen oder anderen helfen.

Pixelart - Farbe, Licht und Schatten

01-May-2019 13:50

Im letzten Artikel über Pixelart habe ich euch kurz und knapp vorgestellt was Pixelart ist, wer das braucht und wie das schmeckt. Ausserdem hatte ich die fixe Idee eine Art Anleitung zu machen, wie man so ein Pixelart erstellen kann. Im letzten Teil wurde das Lineart fertiggestellt. Nun setze ich genau dort an und streußel mal ein bisschen Farbe hinein.

lineart3lineart9

Letzter Stand im vorigen Artikel war dieses Lineart mit einer Auflösung von 32x32 Pixeln.

lineart3

Schritt Nr. 1 - Grundfarben

Als erstes gebe ich dem Bild seine Grundfarben. Da es sich bei dem Motiv um einen Strauch handelt, fällt die Wahl auf Grün. Für jede Farbe lege ich einen eigenen Layer an, so kann ich sie päter bei Bedarf schneller austauschen.

Lineart mit Grundfarben

Schritt Nr. 2 - Schatten setzen

Als nächstes werden erste Beleuchtungseffekte gesetzt. Bevor man irgendwo Schatten oder Glanzlichter einzeichnet, sollte man die Position, Farben und Richtungen der Lichtquelle(n) im Bild als Skizze festhalten. Für die ersten Schatten habe ich mir die Grundfarbe genommen, diese ein wenig abgedunkelt und die Schatten eingezeichnet. Um dem Objekt noch mehr Tiefe zu geben habe ich das ganze mehrfach mit unterschiedlichen Schattierungen wiederholt. Die Lichtquelle habe ich mir in der linken Ecke vorgestellt.

lineart5lineart6

Schritt Nr. 3 - Glanzlichter

Nun folgt der selbe Spaß noch einmal in dem die Stellen heller hervorgehoben werden, welche der Lichtquelle am nähesten sind. Als Ausgangsfarbe habe ich wieder die Grundfarbe genommen und diese aufgehellt.

lineart7

Schritt Nr. 4 - Konturen nacharbeiten

So langsam wirds doch. :)
Nun werden die schwarzen Konturen überarbeitet. Auch hierfür habe ich wieder zusätzliche Layer verwendet um bei Bedarf auf die Originalkonturen zurückgreifen zu können. Bei den Konturen habe ich mich bei der Nacharbeitung an der Beleuchtung orientiert. Das Schwarz wurde zunächst durch ein dunkles Grün ersetzt und hier und da, je nach Lichteinfall, aufgehellt. Lediglich im Zentrum habe ich die Konturen nicht aufgehellt da diese sonst nicht mehr zu erkennen gewesen wären.

lineart8

Schritt Nr. 5 - Der letzte Schliff

Um das Motiv noch etwas in Szene zu setzen habe ich am unteren Ende der Pflanze und auf der rechten Seite einen Schatten eingefügt. Für diesen habe ich ein transparentes Schwarz genommen. Zusätzlich habe ich noch eine Wiese oder Grünfläche als Hintergrund eingefügt.

lineart9

Fertig! Für dieses Pixelart habe ich zum ersten Mal eine Skizze verwendet. Alle anderen Versuche aus dem Nichts heraus etwas zu Pixeln sahen eher nicht so gut aus. Dafür fehlt mir dann doch noch etwas Übung. Für dieses Motiv habe ich etwas mehr als eine Stunde benötigt.

Bis bald. :)

Pixelart - Ein Lineart erstellen

25-Apr-2019 22:28

Als Pixelart bezeichnet man Rastergrafiken, welche als Stilmittel bewusst kleine Auflösungen und eine reduzierte Farbpalette verwenden. Die Grafiken weisen so eine Optik auf wie sie in Computerspielen der 80'er und 90'er Jahre zu finden war.

Thats me ! Erste Versuche in Pixelart.

Grafiken in Pixelart...

...werden auf Pixelniveau bearbeitet. Das heißt der Grafiker oder Künstler setzt jedes Pixel bewusst einzeln von Hand. Erlaubt sind alle Grafikwerkzeuge, die keine automatischen Farbverläufe, Antialliasing- oder Blendingeffekte erzeugen, da diese dem manuellen Setzen der einzelnen Pixel und der Wahl der Farben durch den Künstler widersprechen.

Am Anfang eines Pixelarts steht für gewöhnlich eine Skizze welche eingescannt wird. Diese wird dann am Rechner mit Linien nachgezeichnet. Es entsteht das sogenannten Lineart, welches die groben Formen der Grafik festhält.

Die Grafik wird anschließend koloriert. Dafür legt sich der Künstler auf eine Farbpalette fest, welche nur sehr wenige Farben aufweist. Farbverläufe und Schattierungen werden mit einer Technik namens Dithering erzeugt. Dabei werden Pixel unterschiedlicher Farbe in gleichmäßigen Mustern platziert. Das Muster variiert dabei in Abhängigkeit des Blendings. Neben dem Dithering wird auch Antialliasing von Hand erstellt. Beides ist Teil des Charakters von Pixelart.

Wichtig ist diese Grafiken in einem verlustfreien Format zu speichern. Dafür bieten sich GIF und PNG an. JPEG ist Verlustbehaftet und bildet aufgrund der Kompression Artefakte. Diese können dem Eindruck des Pixelarts schaden.

Ein kleines Tutorial

Um das ganze nun auch noch etwas anschaulich zu machen habe ich mich mal hingesetzt und zeige euch nun Step by Step wie so ein Pixelart entsteht. Für die Umsetzung braucht ihr einen Stift, Papier und ein Grafikprogramm. In meinem Fall habe ich mit GIMP gearbeitet. Das Ergebnis hat eine Größe von 32 x 32 Pixel.

Schritt Nr. 1 - Vorbereitungen

Als erstes habe ich meine Skizze eingescannt und in GIMP geöffnet. Anschließend wurde das Bild entsättigt, um die Farben zu entfernen. Anschließend habe ich etwas mit dem Kontrast gespielt um die Linien stärker hervorzuheben.

TIP: Macht nicht den selben Fehler wie ich indem ihr die Skizze zu klein zeichnet. Lieber etwas größer. So könnt ihr etwas mehr Abstand mit der Kamera nehmen, das Bild verrauscht nicht so stark und die Linien sind schmaler, was später beim setzen der Konturen hilft.

Nun trefft ihr schon auf die erste knifflige Aufgabe. Wenn ihr eure Zeichnung eingescannt habt, so ist diese in der Regel wesentlich höher aufgelöst als euer Pixelart zum Schluss sein soll.
In meinem Fall hatte der Bildausschnitt eine Größe von 800 x 600 Pixel. Ziel ist jedoch 32x32 Pixel. Ich habe also mit der Auswahlbox mein Motiv vermessen. Die Größe lag bei ca 215x Pixeln. Also habe ich eine Ausschnittsgröße von 256 x 256 Pixeln gewählt, Motiv plus ein wenig Rand.

Da 256 das 8-fache von 32 ist hatte ich somit auch die Größe für meinen "großen Pixel". Statt mit 1 x 1 großen Pixeln zu zeichnen habe ich mir einen Block der Größe 8x8 Pixel angelegt und diesen als Stiftvorlage verwendet. So ergibt sich die grobe Pixeloptik und das Lineart kann später ohne Probleme auf 32x32 Pixel verkleinert werden.

Schritt Nr. 2 - Pixeln

Der Titel sagt schon fast alles, nun wird das Lineart gepixelt. Da ich meine Pixel dem Größenverhältnis der Skizze angepasst habe, musste ich darauf achten beim Pixeln das Raster einzuhalten, damit die großen Pixel nicht überlappen. Als Hilfe habe ich mir ein Raster eingeblendet, welches eine Rasterweite von genau 8 Pixeln hatte. Das Raster habe ich am ersten gesetzten Pixel ausgerichtet. Das Lineart selbst wurde auf einem neuen Layer gezeichnet. Generell habe ich für das gesamte Bild immer nur eine Farbe pro Layer verwendet. So kann ich einzelne Farben bei Bedarf schnell austauschen.

Schritt Nr. 3 - Zuschnitt

Um das Lineart fertigzustellen habe ich das Motiv auf die Größe von 256 x 256 zugeschnitten und anschließend skaliert. Wenn ihr das Skalieren - Werkzeug verwendet achtet darauf das ihr KEINE Interpolation einstellt. So bleiben eure Pixel im Ergebnis knackescharf. Außerdem solltet ihr bei der Größenangabe die Größen in Pixel angeben, in meinem Fall 32x32 Pixel. Prozentangaben sorgen für Ungenauigkeit können ebenfalls zu Weichen Kanten im Ergebnis führen.

Das Lineart hat nun seine finale Größe von 32 x 32 Pixeln. Links ist es deutlich vergrößert, rechts sieht man das Lineart in zweifacher Größe. Generell muss man bei Pixelart immer wieder mal schauen wie ein Pixel im Bild wirkt. Dafür empfiehlt es sich das Bild hin und wieder mal zu verkleinern. Im nächsten Artikel kommt dann Farbe ins Spiel.

Wer sich zu dem Thema mehr belesen möchte, dem empfehle ich die beiden sehr lesenswerten Links. Der erste zeigt die Erstellung eines Pixelarts an einem Beispiel. Der zweite geht näher auf die Techniken ein.

http://makegames.tumblr.com/post/42648699708/pixel-art-tutorial

http://pixeljoint.com/forum/forum_posts.asp?TID=11299

Krita - Das freie Malprogramm

24-Jun-2018 17:37

Seit meiner Kindheit male ich gerne. Früher viel mit Stift und Papier, nun mehr digital am Rechner, wenn es die Zeit zulässt. Bisher habe ich für das digitale Zeichnen GIMP in Kombination mit dem Grafiktablett Bamboo Pen & Touch verwendet. Das Einrichten eines Grafiktabletts ist unproblematisch und auch Druckintensität wird unterstützt. Für einfache Skizze und kleinere Arbeiten also ausreichend.
Jedoch ist es manchmal erforderlich, die Zeichnung häufig und schnell drehen und spiegeln zu können, um Bögen und Kurven besser aus dem Handgelenk malen zu können. Dies ist in GIMP nur möglich indem man das Rotationswerkzeug verwendet, welches dann ein extra Fenster öffnet, in welchem man die Rotation einstellen und bestätigen muss. Das stört leider den Arbeitsfluss. Man muss aber auch sagen, GIMP ist ein Grafikprogramm und nicht speziell fürs Malen ausgelegt.

Ein beliebtes Programm fürs digitale Zeichnen ist Procreate, welches freies Rotieren, Skalieren und Spiegeln unterstützt. Dieses gibt es als App für das iPad, jedoch nicht für Windows. Eine Alternative ist hier Krita. Bei meinem Tablett habe ich die Gestenerkennung beim Zeichnen deaktiviert. Für das Rotieren, Skalieren und Spiegeln habe ich mir jeweils eine Taste als Shortcut belegt. So brauche ich nur die Taste zum Rotieren drücken und kann das Bild dann mit dem Stift zügig in die gewünschte Lage bringen.
Die Software erschienen 2005 und wird von KDE bis heute weiterentwickelt. Krita ist frei verfügbar und nach ein paar Stunden damit kann ich sagen, dass es im Groben und Ganzen alles mitbringt was man zum Zeichnen braucht und sogar noch mehr. Für alle die gerne Zeichnen definitv ein Blick wert.

Uni - Spielprojekt

25-Dec-2017 16:09

Halbzeit der Weihnachtsfesttage. Ich hoffe ihr habt den ersten Tag gut überstanden und noch etwas Platz für die kommenden Mahlzeiten, vom Reserveloch im Gürtel ganz zu schweigen. ;)

Ich habe gerade etwas Zeit und möchte euch ein kleines Uni-Projekt vorstellen.
Ich studiere Medieninformatik und habe in diesem Semester einen Kurs mit dem Schwerpunkt Spieleentwicklung belegt.In dem Kurs werden zum einen technische Konzepte besprochen und zum anderen der Umgang mit Unity vertieft.

Als einen Bestandteil des Kurses sollen alle Studis ein Projekt anfertigen. Der Rahmen ist dabei relativ weit gefasst. Wichtig ist, dass es mit Spielen und Simulationen zu tun hat. Mein Projekt ist ein bereits bestehender Spieleprototyp. In dem Projekt will ich eine Komponente für Audioausgabe schaffen, welche auch für weitere Projekte genutz werden kann. Das ist eine Anforderung an das Projekt. Ansonsten geht es hauptsächlich darum den bestehenden Prototypen spielerisch weiter auszubauen. Viele technische Grundlagen sind dafür bereits geschaffen.

Das Projekt setzt auf Java auf und nutzt LWJGL. Damit lassen sich OpenGL und OpenAL für Grafik und Audio ansprechen. Der Rest stammt aus eigener Feder. Teile davon wurden aus einem alten C# Stand nach Java portiert.

Ich weiß noch nicht genau wohin sich das Spiel entwickelt. Die Ausgangsidee war mal eine Art 2D Jump & Run oder Plattformer zu entwickeln. Aber sowas ist bei mir nie fix.Je nachdem was mich gerade so inspiriert ändert sich das auch gerne. Die Deadline für dieses Projekt ist am 30. Januar. Spätestens dann gibt es ein Update was aus dem Projekt geworden ist. Evtl auch schon mal zwischendurch.

Bis dahin, frohe Restweihnachten.
Tobias

Mein neuer Blog

23-Dec-2017 23:00

Nachdem es in der letzten Zeit sehr ruhig auf meinem Blog geworden ist, mich das Thema Web und Blogging aber nie ganz los gelassen hat, habe ich mich für einen Neustart dieser Website entschieden.

Mal schauen ob es diesmal lebhafter wird.

Beste Grüße, Tobias