Pixel Ecke

[McB_sser]

Ursprünglich wollte ich mir einen kleinen Helferlein bauen (ist etwas ausgeartet). Aber evtl. findet ihr ja auch eine Verwendung dafür, oder Pixelt ein Meisterwerk was man evtl. als Textur für ein 3D Model nehmen kann.

Ihr könnt ja eure Werke hier zeigen und zum verwenden anbieten, oder ihr habt eine schöne idee für ein Item und pixelt gleich was schönes.

Es ist ein einfaches HTML was im Browser ausgeführt werden kann. Texturen können via png oder eigenen "Pixel-Map" geladen werden, Pixelmap im Texteditor laden und den Inhalt im vorgesehenen Bereich einfügen (vorher Inhalt rauslöschen Strg+A und Entf), Linksklick: setzt Farbe oder löscht, Mittlere Maustaste füllt ein Bereich, Rechtsklick pickt eine Farbe... ich hoffe der rest ist relativ selbsterklärend.

Falls das ganze bei euch nicht gehen sollte ggf. ein anderen Browser verwenden, getestet mit FireFox und Chrome

 

[derSola]

Gibts dafür ein Tutorial in Form eines Videos?

 

[McB_sser]

	zunächst möchte ich euch die grundlegenden Funktionen zeigen. Ihr wählt zunächst eine Farbe aus, entweder eine der vordefinierten Farben oder eine von der Farbpalette. Daneben seht ihr das Transparent Feld, hier könnt ihr der Farbe Transparenz verleihen.
	Wählt zum Beispiel rot aus, und klickt mit der linken Maustaste auf die Karierte Fläche. Ein Pixel davon wird nun rot. Ein erneuter klick färbt den Pixel wieder transparent. Wenn ihr zum Beispiel ein Quadrat zeichnet und das ganze gefüllt haben wollt, reicht es aus den Rand zu Pixeln. Mit der Mittleren Maustaste könnt ihr den Rest füllen. Wenn ihr mehrere Farben verwendet, wollt Ihr unter Umständen eine Farbe erneut verwenden. Hier braucht ihr nur auf einen bestehenden Pixel rechtsklicken.
	Es ist Sinnvoll vorher mit einer großen Leinwand zu beginnen. Diese könnt ihr mit "Toggle Optionen" rechts unter "Bild-größe" einstellen. Hier am besten nur die Pfeiltasten verwenden, da die Leinwand live verändert wird und gepixeltes verschwindet, wenn man eine kleine Zahl eingibt.
	Die Pixelgröße ist eine Art Zoom, hier könnt ihr die Ansicht vergrößern oder verkleinern. Diese Größe wird dann auch für das Vorschau Bild genutzt. "Bild ausrichten" ist dafür gedacht, das Gemalte Bild auf der Leinwand zu Positionieren. Alles was gedanklich dann hinausragt, wird gegenüber der Leinwand wieder hinzugefügt.

rest kommt im nächsten post

 

[McB_sser]

	Habt ihr ein Bild fertig, in gewünschter Größe und ausgerichtet, könnt ihr es downloaden. Hierfür über "Toggle Optionen", im Bereich "Datei Downloaden", einen Namen eingeben und auf "Bild und Map herunterladen" klicken. Hierbei werden 3 Dateien gedownloadet. Eine Vorschau, in Größe der eingestellten Pixel. Eine Textur für ein Resource-Pack und eine Konfigurationsdatei für diesen Editor. Solltet Ihr eine Animation erstellt haben, ist es möglich mit Klick auf "Meta-Datei" diese ebenfalls zu downloaden. Diese Datei ist für das Resource-Pack notwendig, dazu aber später mehr.
	Es ist jetzt möglich mittels der Pixel-Map Datei, die Grafik wieder zu laden, mit allen Einstellungen, oder diese für andere Zwecke zu importieren, zum Beispiel weil ihr mehrere Bestandteile einer großen Grafik gepixelt habt, oder weil ihr aus dieser eine Animation erstellen wollt. Für das einlesen einer Grafik, beziehungsweise das Laden einer Grafik mit der Pixel-Map, geht ihr rechts bei Optionen, auf Bild laden, ersetzt den Inhalt des Textfeldes und klickt auf "Bild aus Pixel-Map laden".
	Ihr könnt diese auch gleich nochmal zum Test Importieren und geht dafür bei Optionen auf Import. Hier fügt Ihr den gleichen Inhalt hinzu. Ihr schaut im oberen Bereich auf "height" im Text, oder wenn ihr noch wisst wie groß die Leinwand war dann ist das nicht notwendig und erweitert die Leinwand um das doppelte, also bei "Bild Größe". Bei "Import" setzt ihr den Y Wert, ebenso auf die höhe des Bildes. So wird bündig das Bild unten hinzugefügt. Drückt nun auf "Import Pixel-Map".
	Um jetzt daraus eine Animation zu machen, müsst ihr bei "Animation" den Rhythmus einstellen. Bei "Frame-time" gebt ihr die Ticks ein die jedes Frame durchlaufen soll, also wie lang ein Frame verweilt eh das nächste angezeigt wird. Als nächstes müsst ihr die Frames aneinanderreihen, also eine Frame-Map erzeugen. Dabei ist wichtig, dass der erste Frame die 0 ist und die maximalste Frame Anzahl vorhanden ist. Wir haben jetzt mit dem Import 2 Frames, also muss Minimum die 1 eingetragen werden. Es wird die größte Zahl genommen und durch die höhe geteilt, so ergibt sich die angezeigte Höhe. ihr könnt die Reihenfolge und Wiederholungen beliebig bestimmen. zum Beispiel könnt ihr eine 1 gefolgt von 10 Nullen Komma getrennt in das Feld reinschreiben, so ist optisch eine längere Pause, bevor was passiert. Die Animationen werden geschleift und wiederholen sich permanent. Ihr könnt nun auf Start drücken, die Animation wird neben der Leinwand dargestellt und zeigt Live jede Veränderungen der Leinwand. Solltet Ihr Werte ändern drückt dann erneut den "Start / Refresh Botton", stoppen entsprechen geht mit dem "Stopp" Button.
	Wenn ihr neu anfangen wollt könnt ihr bei "Bild-Resett" das Bild resetten.
	Wollt Ihr von einer png ein Bild laden zum Beispiel einer bestehenden Textur, könnt ihr das bei "Bild laden" mit den durchsuchen Botton machen. Achtet darauf das Ihr keine zu großen Grafiken nehmt sonst dauert das laden sehr lange und hat keinen Mehrwert. Ihr könnt aber das große Bild skalieren in dem Ihr eine breite oder eine höhe eingebt, hier wird dann der andere Wert proportional zum Bild berechnet. Ihr könnt auch einen exakten Wert eingeben um zum Beispiel eine Grafik mit Absicht zu verzerren.

 

[Tigerli]

Danke, dass du uns das so ausführlich beschrieben hast. Vielleicht wird das irgendwann nützlich

 

[McB_sser]

hier noch ein Bsp. mit Animation, die geladen werden kann. (Das andere ist Wolle Textur von Minecraft, in Blockbench geladen)

 

[McB_sser]

Man sollte für animiationen für Resourcepack gleiche breiten und höhen verwenden z. B. 32x32, 64x64, sonst klappt das nicht so wie gewünscht. Da mir das gerde passiert ist musste ich meine Frames neu ausrichten und da viel mir auf es wäre gut negative Zahlen für x und y zu setzen, das war vorher nicht möglich, daher hier ein Update des Editors