Lieber Besucher, herzlich willkommen bei: RPG Studio - Make your World real. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

  • Playm

    RPG Studio Webmaster

    Sie müssen sich registrieren, um eine Verbindung mit diesem Benutzer herzustellen.

323

Wie die Bildchen in die Projektauswertungen kommen

Bewertung:

Von Playm, Samstag, 20. Januar 2018, 06:00


Ich sollte mal wieder irgendwas bloggen. :hmm: Ah ja, ich weiß:

Wer im Unterforum zum RPG Maker VX Ace in den letzten Tagen gestöbert hat, hat sicher den Thread von Dragonfly gesehen. Aktuell geht es darum, ein RPG Maker Projekt statistisch auszuwerten und möglichst viele Details über verwendete Switches und Variables rauszuziehen, die gleichzeitig vom Entwickler genutzt werden können, um den Überblick zu behalten. Letzteres ist auch unser Stichwort: Den Überblick behalten. So ein Spieleprojekt steckt voller :chart-up: Daten. In diesem Blogpost schauen wir uns mal an, wie ich mit einem Detail der Problemstellung umgegangen bin, diese Daten alle darzustellen; wie ich Charsetgrafiken aus dem Projekt portabel in die Auswertungsdatei eingebettet habe. Der Blogpost ist recht technisch und setzt Vorwissen in HTML und CSS voraus.

Übersicht
Der Rahmen ist schnell abgesteckt. Wir stellen die Auswertung als HTML-Datei dar. HTML ist ein mega gutes Format, wenn man Informationen für Menschen anschaulich und interaktiv darstellen möchte. Beweisstück A: Du liest gerade diesen Blogeintrag auf RPG Studio, der auch nur eine generierte HTML-Datei ist.
Wir generieren diese Auswertung mit einem :ruby: Rubyscript, dass wir in den Scripteditor des Projektes einfügen und einmal ein Testspiel starten. Dies bedeutet, wir haben RGSS3 und Ruby1.9 zur Verfügung, um unsere Auswertung zu erstellen.
Die fertig ausgewertete Datei soll möglichst eigenständig sein, also nicht von anderen Dateien abhängen und schon garnicht wollen wir, dass Framework-Dateien benötigt werden. Kurzum: Eine Auswertung-HTML-Datei, ohne weitere Dateien dazu, die ich auch problemlos irgendwo anders ablegen kann. (Zum Beispiel soll es möglich sein, die Statistik einem Freund zu schicken, oder auf meinem Spielentwicklerblog zu veröffentlichen - wenn ich letzteres denn möchte.)

Wir wollen die Verwendung von Switches und Variables protokollieren. Dafür schauen wir uns jede Map, jedes Event, jedes CommonEvent und jedes einzelne EventCommand an. Dann schreiben wir uns auf, wo die Switches oder Variables auf einen Wert gesetzt werden oder der Wert dieser für irgendwas abgefragt wird. Das bisherige Konzept sieht eine Tabelle vor, wo wir all dies auflisten.

In dieser Tabelle ist also jetzt ein Eintrag: Auf der Map #096 mit dem Namen "Heilige Quellen" wird im Event #003 der Switch #0014 neu gesetzt. Das ist recht übersichtlich - die wichtigsten Infos sind da. Aber können wir nicht noch mehr Informationen bereitstellen? Wie soll unsere Spieleentwicklering denn auf die Schnelle das Event mit der ID #003 finden? Praktisch wäre es doch, könnte man jetzt nachfragen, wo auf der Map das Event steht (seine X|Y-Koordinate), wie es heißt und welches Charset es hat. Das könnte man so darstellen, dass wenn man in der Tabelle auf die EventID klickt, ein kleine :balloon-smiley: Infoblase erscheint mit genau diesen Informationen.

Hm, ja klingt gut. Also wie machen wir das möglich?

Umsetzung
Wir nehmen an, wir können Eventname, Eventposition und das gewählte Charset und das Frame ermitteln. Dies ist in der Tat ein Beiprodukt, das entsteht, wenn wir alle Events durchsuchen, um zu gucken wo Switches und Variables auftauchen.

Der Fokus dieses Blogeintrags liegt aber auf folgendem Problem:
Wir haben den Namen der Charsetdatei und wir wissen welchen Bildausschnitt wir daraus anzeigen möchten. Aber wie wollen wir die Grafik in unsere HTML-Seite einbetten?

Option 1: Tatsächliche Bilder verlinken
Möglich wäre es. Zum Beispiel so:

HTML Quellcode

1
<img src="/Graphics/Characters/People2.png" style="clip-path: inset(0px 160px 224px 128px);"/>

Aber wir hätten Nachteile. Der erste Nachteil: Der Bildpfad stimmt schonmal nicht, denn es ist eine RTP-Grafik. Diese befindet sich nicht im Projektordner sondern im RTP-Ordner. Wir müssten also diese URLs alle anpassen. Dies würde auch bedeuten, dass wir absolute Pfade angeben müssten, was bedeutet, dass wenn man seine Auswertungsdatei mit anderen teilt, sich für andere Möglicherweise Rückschlüsse auf den eigenen Computer ziehen lassen. Sowas wollen wir garnicht erst. Das zweite Problem ist, dass unsere Auswertungsdatei jetzt von vielen anderen Dateien abhängig ist. Möchten wir unsere Auswertung jetzt zum Beispiel auf unseren Blog hochladen, so müssten wir vorher noch unseren Graphics/Character/ Ordner hochladen. Uff. Viel zu viel Aufwand. Ein weiteres Problem ist die Datenmenge: Wir brauchen vielleicht niemals die anderen Frames aus dem Charset, aber laden immer das ganze Charset. Das ist alles andere als sparsam. Unter'm Strich also: Nicht unsere Lösung. Wir greifen auf eine andere Option zurück.

Option 2: Neue Bilder erstellen/neues Spritesheet erstellen
Wenn wir, wann immer wir eine Grafik aus dem Projekt brauchen das speziell benötigte Frame uns kopieren und in einer neuen Datei abspeichern umgehen wir sowohl das RTP-Pfad-Problem, als auch das Problem nicht benötigte Frames aus Charsets mitzuspeichern. Weiterhin sind wir aber von externen Dateien abhängig und zwar einem Haufen davon. Wer sich mal durch seinen Charsetordner klickt: Die meisten Charsets haben ihre ganz eigene Framegröße. Manche sind breit, manche sind hoch, manche sind quadratisch, aber das alles auf ein einheitliches Raster zu bringen würde viel ungenutzten Platz bedeuten und damit unnötig große Dateien. Es würde sich also wahrscheinlich nicht lohnen, alle benötigten Frames in ein großes Spritesheet zu packen, sondern unsere Auswertungsdatei wäre abhängig von vielen einzelnen kleinen Bildchen.
Ich hätte aber gerne eine Lösung, wo wir nicht auf externe Dateien angewiesen sind.

Option 3: Bilddaten als Text codiert in die Auswertungsdatei einbetten
Das Titelbild dieses Blogposts hat es ja eigentlich schon gespoilert, dass dies die finale Lösung ist. ;)
HTML bietet die möglichkeit, Bildinformationen als kodierten Text abzulegen. Der sogenannte base64-Code. Die Idee ist, das Bilder aus Bits und Bytes bestehen. Diese Bits schnappt man sich und ordnet immer sechs von ihnen ein druckbares Zeichen zu, zum Beispiel ist die Null (Bitfolge in den Bilddaten: 0000002) durch ein großes A dargestellt, die Eins (Bitfolge in den Bilddaten: 0000012) durch ein großes B, die Sechsundzwanzig (Bitfolge: 0110102) ist ein kleines a und die 61 (Bitfolge: 1111012) ist durch eine 9 dargestellt. Drei Bytes (24 Bits) entsprechen also vier Zeichen. Nach dieser Vorschrift erstellt man aus der Bitfolge einer Bilddatei also einen Zeichencode, den man dann in die HTML-Datei schreiben kann.

Da so ein codierter base64-Text sehr sehr lang ist, lass ich ihn an dieser Stelle mal aus dem Beispiel raus und schreibe an dessen Stelle "AAAAAAA" in das Codebeispiel.

HTML Quellcode

1
<img src="data:image/png;base64,AAAAAAA" style="clip-path: inset(0px 160px 224px 128px);"/>


Die Umwandlung der Bilddaten in base64 nimmt uns Ruby netterweise ab. Mit Array#pack wandeln wir den Dateiinhalt eines Bildes in einen codierten Text um. Hier mal ein knapper Rubycode:

Ruby Quellcode

1
2
3
4
5
def make_data_url( path_to_png_file )
  file = File.read( path_to_png_file )
  base64 = [file].pack('m0')
  return 'data:image/png;base64,' + base64
end

Wir haben jetzt eine Lösung, womit unsere Datei immernoch eigenständig wäre. Aber drei Verfeinerungen will ich noch vornehmen.

Verfeinerung
  • Aktuell würde ich das ganze Charset-Bild speichern und dann bei der Darstellung alles bis auf den relevanten Bildausschnitt wegschneiden (clippen). Das kann man natürlich besser machen und an dieser Stelle direkt nur den relevanten Bildausschnitt base64 codieren.
  • Und zweitens würde ich, wenn ich das Charset mehrfach abbilde (weil das Event mehrfach in der Tabelle vorkommt) auch mehrfach die Bilddaten einbetten bei dieser Lösung. Das ist natürlich nicht so schön, also lagern wir das ganze in eine CSS-Regel aus:

    CSS Quellcode

    1
    2
    3
    4
    5
    6
    7
    8
    9
    
    .char {
    	display:inline-block;
    	background-repeat: no-repeat;
    }
    .char [data-charset-key='c1']{
    	background-image:url('data:image/png;base64, ... ');
    	width:32px;
    	height:32px;
    }
    Im HTML würde ich dann, um das Charset anzuzeigen, das Folgende schreiben:

    HTML Quellcode

    1
    
    <i class="char" data-charset-key="c1"></i>

  • Die dritte Verbesserung ist vielleicht etwas widersprüchlich zu dem anfangs gesagten aber eine Möglichkeit die ich einbauen möchte: Die als CSS-Regel eingebetteten Bilder können auf Wunsch als extra auswertung-charset.css-Datei erstellt werden, sodass man zwei Dateien bekommt. Einmal die Auswertung mit der Tabelle und allen Daten und eine Datei mit den Grafikcodes. Die Idee ist, dass die CSS-Regeln sehr lang und damit auf der Festplatte sehr groß werden können. Schließlich werden hier alle verwendeten Eventgrafiken gespeichert. Durch die Trennung kann ich Problemlos meine EventCommands verändern, neue Auswertungen erstellen und die Auswertung neu auf meinen Blog hochladen oder einem Freund schicken, aber sollange ich nicht die Charsets der Events ändere (was seltener vorkommt, als das sich mal die Position eines Events verschiebt oder ein neuer EventCommand hinzukommt) muss ich nicht die auswertung-charset.css erneut hochladen/dem Freund schicken. Ich spare also etwas Datenvolumen. Fand ich dann doch praktisch.

Ausblick
Ein kleines Detail ist jetzt ausgearbeitet. Aber man kann da sicher noch über viele Dinge nachdenken. Gebt gerne im Thread auch ein bisschen Input, was man an der Auswertung verbessern könnte und welche interessanten Daten euch interessieren würden.

Dieser Artikel wurde bereits 434 mal gelesen.


Kommentare (1)

  • 1

    Von Josey (Mittwoch, 31. Januar 2018, 18:55)

    Uff. Ich hoffe jemand, der alles versteht, ließt den Text mal XD
    Mir hat er nur die Spitze des Eisbergs sugeriert, ich versuche seit Tagen das Ding endlich zu verstehen. Damit du nicht denkst, ich hab den Blog nicht gesehen, wollte ich endlich eienn Kommi hinterlassen und mal fragen:
    Kann man das so auch auf den XP übertragen? Damit kann ich also Charsets ausgeben lassen? Oder hab ich das jetzt falsch verstanden?

Blog Navigation

Vorheriger Artikel

Dateiformate bei der Spielentwicklung

Von Playm (Sonntag, 5. November 2017, 21:29)