Files |  Tutorials |  Articles |  Links |  Home |  Team |  Forum |  Wiki |  Impressum

Aktuelle Zeit: Fr Mär 29, 2024 11:43

Foren-Übersicht » Sonstiges » Projekte
Unbeantwortete Themen | Aktive Themen



Ein neues Thema erstellen Auf das Thema antworten  [ 2 Beiträge ] 
Autor Nachricht
 Betreff des Beitrags: Koshigaya Core/UI
BeitragVerfasst: So Jun 29, 2008 16:46 
Offline
DGL Member
Benutzeravatar

Registriert: Di Dez 03, 2002 22:12
Beiträge: 2105
Wohnort: Vancouver, Canada
Programmiersprache: C++, Python
Hi,

ich arbeite zur zeit an der portierung meines Flipbooks nach C++, und damit ich das überhaupt machen kann - und für zukünftige andere projekte - schreibe ich mir grad eine UI via OpenGL. Zusätzlich dazu kommen noch eine menge UI unabhängige funktionen wie Texture loader, Font manager etc.

Eigentlich wollte ich noch ein wenig warten mit dem Projekt thread, aber da ich im moment entwas faul bin daran weiterzuarbeiten erhoffe ich mir hierdurch wieder mehr motivation ;)

Als erstes mal direkt ein Screenshot vom aktuellen stand:
http://koshigaya.de/misc/KoshigayaUI.png (1 MB)

Ich habe mich bei der entwicklung sehr stark an der VCL und Java orientiert. Bei VCL vorallem was das handeln von events angeht etc. So ist das SystemFenster von der gleichen basisklasse wie z.B. der Button abgeleitet und die MouseClick-Message wird einfach durchgereicht.

Von Java hab ich mir die flexibilität abgeschaut.
Möchte man z.B. eine neue Button Komponente erstellen leitet man sie von der BaseUI ab in welcher das zeichnen an sich und die standard events behandelt werden. Möchte man nun das der Button auch einen Border und einen Text hat, leitet man zusätzlich via Mehrfachvererbung noch von BorderedUI und FontUI ab. Schon hat man eine komponente geschaffen welche Rahmen und Text hat.. ;)

Bisher gibt es an komponenten nur was ihr oben auf dem Screenshot seht (Scrollbar ist grad in der mache, deswegen steht da bisher nur der text ;) ):

- SysWindow
Das SysWindow erstellt ein System Fenster und kümmert sich um das abfangen der events des fensters und leitet sie entsprechend weiter.

- Window
Das sind die Fenster die ihr oben seht.

- Label
Sehr ähnlich zu dem der VCL.. es kann einzeilig oder mehrzeilig verwendet werden, die größe kann automatisch bestimmt werden und es kann als text ausrichtung zwischen "left", "center", "right" und "block" ausgesucht werden.

- Button
- Checkbox
- Radiobutton
- Image

- PopupMenu / MenuItem
Das PopupMenü ist im moment noch nur innerhalb des Fensters möglich. Ich werde aber noch eine alternative einbauen in der es dann auch SysWindows benutzt.

Eine besonderheit am PopupMenü ist, dass es nicht nur MenuItems beinhalten kann, sondern auch jede andere komponente. So kann man einfach z.B. einen Button oder ein EditFeld ins Menü einbauen.

- Edit
Das EditFeld vereint das TEdit und TMemo, es ist als einzeiliges oder mehrzeiliges control benutzbar.
Es kann denke ich alles was man von einem normalen EditFeld erwartet, also text selektieren, editieren etc.. sogar ein blinkender cursor ist da ;)


Alles wird natürlich nur dann neu gezeichnet wenn es notwendig ist.


Zum laden von Fonts benutze ich FreeType. Da eines der ziele war Unicode zu unterstützen hatte ich anfangs überlegt wie ich es am sinnvollsten mache meine FontTextur zu erstellen.. denn für Ostasiatische schriftzeichen würde so eine textur durchaus groß werden.. ;)

Ich hab es dann so gelöst das ich mit 256x256er texturen arbeite welche erst dann gefüllt und erstellt werden wenn es notwendig ist. Wenn man ein leeres edit Feld hat ist die textur komplett leer, bzw existiert garnicht. Erst sobald man dann anfängt zu schreiben werden die buchstaben nach und nach in die textur eingetragen und ggf. neue texturen erstellt (wenn die 256er textur voll ist). Somit spare ich mir das erstellen der textur beim programm start und habe volle flexibilität. Von dem erstellen der textur spürt man überhaupt nichts wärend man schreibt.



Möchte man die Ui erstellen kann man es entweder VCL ähnlich via code machen oder einfach alles aus einer XML datei laden.
Wenn man es via XML macht kann man mit einer "findComponent" funktion die einzelnen elemente bekommen und sie mit onClick events und ähnlichem versehen.

Im falle des beispiel bildes oben sieht diese XML datei so aus:

Code:
  1. <syswindow caption="OpenGL UI Demo - Koshigaya Studios">
  2.     <image width="1080" height="675" filename="/Users/Aya/GLUI.bmp" autosize="false" left="0" border="false" top="0" anchor="left, top, bottom, right">
  3.         <popup name="popupMenu1">
  4.             <item caption="Item #1" />
  5.             <item caption="Item #2" />
  6.             <item caption="Item #3" />
  7.             <item caption="Item #4">
  8.                 <item caption="Subitem #1" />
  9.                 <item caption="Subitem #2" />
  10.                 <button name="toggle" caption="Toggle" left="20" top="20" width="100" />
  11.                 <item caption="Subitem #3">
  12.                     <item caption="Meooooow #2" />
  13.                     <item caption="Meooooow #3" />
  14.                     <item caption="SubiteMeooooow #4" />
  15.                 </item>
  16.                 <item caption="Subitem #4" />
  17.                 <edit name="editC" text="" left="20" top="70" />
  18.                 <item caption="Subitem #4.5">
  19.                     <item caption="Meooooow #2" />
  20.                     <item caption="Meooooow #3" />
  21.                     <item caption="SubiteMeooooow #4" />
  22.                 </item>
  23.                 <item caption="Subitem #5" />
  24.             </item>
  25.             <item caption="Item #5" />
  26.         </popup>
  27.         <form name="misc" caption="Bars &amp; co." left="630" top="150" width="300" height="200">
  28.             <label caption="Scrollbar:" left="10" top="10" autosize="true" />
  29.             <scrollbar orientation="horizontal" left="10" top="34" width="160" height="20" />
  30.         </form>
  31.         <form name="win1" caption="Other Window" left="300" top="100" width="300" height="260">
  32.             <button name="toggle" caption="Toggle" left="20" top="20" width="100" />
  33.             <edit name="edit" text="Meooooooow" left="20" top="50" />
  34.             <edit name="edit2" text="" left="20" top="70" />
  35.             <image popup="popupMenu1" width="155" height="225" filename="/Users/Aya/Miscellaneous/angel3.bmp" autosize="false" left="130" border="true" top="20" anchor="left, top, bottom, right" />
  36.        
  37.             <checkbox name="cb1" checked="false" caption="Checkbox :D" left="20" top="100" />
  38.             <checkbox name="cb2" checked="true" caption="Dub di du" left="20" top="116" />
  39.             <checkbox name="cb3" checked="false" caption="Gaga lala" left="20" top="132" />
  40.  
  41.             <radio name="r1" checked="true" group="1" caption="Value 1" left="20" top="150" />
  42.             <radio name="r2" checked="false" group="1" caption="Value 2" left="20" top="166" />
  43.             <radio name="r3" checked="false" group="1" caption="Value 3" left="20" top="182" />
  44.  
  45.             <radio name="r1a" checked="false" group="2" caption="Value B1" left="20" top="200" />
  46.             <radio name="r2a" checked="true" group="2" caption="Value B2" left="20" top="216" />
  47.             <radio name="r3a" checked="false" group="2" caption="Value B3" left="20" top="232" />
  48.         </form>
  49.         <form name="win2" caption="Lorem ipsum" left="100" top="120" width="120" height="120">
  50.             <label textAlign="block" name="label1" border="false" borderWidth="1" borderColor="0x00FF00" left="10" top="10" width="100" height="100" autosize="false" anchor="left, top, bottom, right" fontColor="FF00FF00">
  51.                 <caption>Lorem ipsum elit perfecto ex nam, possit tincidunt eam te, pri id prima falli noster. Nam ea aliquip adolescens, sed tantas nemore appellantur at. Ius ei utinam labitur iuvaret, vide omnium id vel. Errem scripta te eos. Aliquam definitiones eum ne.
  52.  
  53. At per vituperatoribus persius quas, no nihil percipit per. Ei sea illud affert. Adolescens liberavisse disputationi pri ut, ne sit stet tempor, cum aeque lucilius at. Principes definitionem quo ne, ex omnium alterum suscipit has, eos et quem dolore ridens. Eu elitr omnes eos, mei ad copiosae repudiandae conclusionemque. Brute tollit vulputate ei duo. Eos enim partiendo id, has tota libris sententiae id, eos ne tamquam concludaturque.
  54.  
  55. Eos at labitur suscipit necessitatibus, ea qui tale sententiae, elitr diceret propriae qui ad. Vel cu aeterno erroribus rationibus, ei alii facilis accumsan est. Per at salutandi consetetur. No cum utinam liberavisse, mel placerat suavitate an. Mea autem periculis ea, adhuc tibique inciderint mea te. Te vel vero inciderint conclusionemque.
  56.  
  57. Duis laudem graeci cu eos, vel omnium mnesarchum cu, vide facilisi interesset ne mea. Pro soleat pericula efficiendi at, ei assentior intellegat signiferumque his. Feugiat laboramus ei mea, quo partem similique ea. Perfecto dignissim vis ne. Ei quo vide omnis labores.
  58.  
  59. Ignota offendit suscipiantur cu mea. In has hinc deserunt. Pro ex nullam interpretaris. Eum ut accusam definiebas, sed ad dicit quodsi posidonium. At usu brute quaestio.
  60.  
  61. Usu lorem epicurei ex. Iudico nominati pri te, vel te erant nostrum dissentiunt, ut est docendi scriptorem. Iusto mundi laboramus ut pro, esse vocibus phaedrum pro cu. Ei per causae verear legendos. Vero nulla fuisset eum at.
  62.  
  63. Ea est putent meliore, ad sed mazim iudicabit. Possim commodo vix an, per decore verear iudicabit ea. An quo minim tritani suavitate, mei cu meis tractatos. Usu ex platonem adversarium consequuntur, cum in dictas insolens democritum.
  64.  
  65. Nullam saperet vel eu. Id amet officiis vel, eu mea enim perpetua facilisis. Malis affert impetus no eos, ea tollit expetendis per. Nostrud repudiare consequat pro ne, ius an erant nobis. Mei te ludus lobortis, cum magna maiestatis te.
  66.  
  67. An cum commune iracundia concludaturque. Duo eu brute debet delicata. Cu vis minimum intellegam reprehendunt. Salutatus persequeris est an. Ad his justo constituam, eos ne nisl choro tempor.
  68.  
  69. Agam minim ad vis, zzril deseruisse interpretaris ne eos. At eruditi definiebas qui, ei alienum similique quo, quo ne brute consulatu sententiae. Ut cum quidam philosophia, no pri elit semper intellegebat. Impetus bonorum debitis vix ei, ut amet utroque sea.</caption>
  70.             </label>
  71.         </form>
  72.     </image>
  73. </syswindow>


Bisher ist die komplette UI ohne texturen umgesetzt was ich für die BaseUI auch so beibehalten möchte. Allerdings wird es dann möglich sein via XML auch Skins für die einzelnen komponenten zu erstellen.

http://koshigaya.de/misc/KoshigayaUI2.png (600 kb)

Eine test version werde ich die tage mal hochladen, ich arbeite z.Z. immer nur am Mac und habe die Windows variante lange nichtmehr compiliert, werde ich aber mal wieder machen und dann hier zum testen hochladen.

Aya~


// Edit Lossy: Inline Bilder verlinkt.


Nach oben
 Profil  
Mit Zitat antworten  
 Betreff des Beitrags:
BeitragVerfasst: Mi Dez 17, 2008 18:00 
Offline
DGL Member
Benutzeravatar

Registriert: Di Dez 03, 2002 22:12
Beiträge: 2105
Wohnort: Vancouver, Canada
Programmiersprache: C++, Python
So nach langer Zeit mal ein kleines Update, nichts fertiges aber mal ein zwischenstand.

Das ganze hat sich mittlerweile sehr stark weiterentwickelt.. bei der UI sind die wichtigsten Komponenten alle fertig und komplett skinbar und auch vom restlichen "Core" hat sich einiges getan.

Ich hab die UI ja in erster Linie entwickelt um mein Flipbook nach C++/OSX zu portieren, und es klappt so wie vorgestellt:

Bild

Die UI ist komplett in OpenGL realisiert und ausschließlich in dem XML definiert, sprich wenn man das XML ändert kann man ein komplett anderes Skin erstellen ohne eine Zeile code anfassen zu müßen :)

Vom design der Ui habe ich mich wie gesagt sehr stark an die VCL angelehnt, aber zusätzlich noch ein paar dinge eingebaut wie z.B. bei den Anchors einen "center horizontal" und "center vertical" etc.


Auf der anderen Seite hab ich an dem eigentlichen Core auch weitergearbeitet.. wobei das hierbei garnichts mit dem Flipbook zu tun hat, sondern eher eine GameEngine wird. Ziel ist es hauptsächlich mir ein Framework zu basteln in dem ich ohne großen aufwand 3D Apps schreiben kann, egal auf welcher Platform.

Es ist alles so aufgebaut das eigentlich jeder baustein alleine funktioniert, aber natürlich auch alles kombiniert werden kann. So kann ich z.B. einen Webcam Stream einfach als Video oder bild speichern, oder automatisch als Textur benutzen (Webcam-Classe erstellt ein Bitmap-Object von welchem wiederum die Textur-klasse abgeleitet ist etc)

Aber da ich natürlich auch spaß daran habe Spiele zu basteln gibt es natürlich auch standard dinge wie VBOs, Lichter/Schatten, Collision Detection, Animationen, Materialien etc..

Alles per code sehr einfach erstellbar oder ebenfalls in einem XML Document (mit ebenfalls selbst geschriebenem XML Parser da mir libXML2 nicht sonderlich gefällt)..

Mein aktuelles TestScenario ist einfach eine Art Labyrinth in das ich nach und nach dinge reinstelle zum testen (siehe Screenshots).. mann kann also aktuell den Player bewegen und mit der umwelt "interagieren" (CollisionDetection mit den Wänden und dem boden, sodas es höhen unterschiede etc gibt). Es gibt Lichter (Spot, Point und Directional) mit optionalen Shatten (ShadowMaps), Keyframe Animationen, Bone-Animationen, Hirachien, NormalMapping, PostFilter etc. pp.

Basieren tut alles sowohl auf einem Forward-Renderer als auch auf einem Deferred-Renderer.. man kann einfach hin und herswitchen.
DieShader sind natürlich für beide varianten verschieden, wobei ich mir da ebenfalls ein eigens Shader Format ausgedacht habe, das etwa so aussieht:


Code:
  1. vertexShader "main" {
  2.     void main(void)
  3.     {
  4.         gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;
  5.         gl_FrontColor = gl_Color;
  6.         gl_TexCoord[0] = gl_MultiTexCoord0;
  7.     }
  8. }
  9.  
  10. pixelShader "main" {
  11.     uniform sampler2D tex;
  12.    
  13.     void main(void)
  14.     {
  15.         pass "withTexture" {
  16.             gl_FragColor = texture2D(tex, vec2(gl_TexCoord[0]));
  17.         } else {
  18.             gl_FragColor = gl_Color;
  19.         }
  20.     }
  21. }
  22.  
  23. geometryShader "main" {
  24.     setInputType "TRIANGLES";
  25.     setOutputType "LINES";
  26.     setMaxVertices "100";
  27.     #version 120
  28.     #extension GL_EXT_geometry_shader4 : enable
  29.  
  30.     void subdivideTriangle(vec4 a, vec4 b, vec4 c)
  31.     {
  32.         vec4 v = (a + b + c) / 3.0;
  33.         gl_Position = a; EmitVertex();
  34.         gl_Position = b; EmitVertex();
  35.         gl_Position = v; EmitVertex();
  36.         EndPrimitive();
  37.         gl_Position = b; EmitVertex();
  38.         gl_Position = c; EmitVertex();
  39.         gl_Position = v; EmitVertex();
  40.         EndPrimitive();
  41.         gl_Position = c; EmitVertex();
  42.         gl_Position = a; EmitVertex();
  43.         gl_Position = v; EmitVertex();
  44.         EndPrimitive();
  45.     }
  46.  
  47.     void main(void)
  48.     {
  49.         gl_FrontColor = vec4(1, 1, 0, 1);
  50.         subdivideTriangle(gl_PositionIn[0], gl_PositionIn[1], gl_PositionIn[2]);
  51.  
  52.         for(int i = 0; i < gl_VerticesIn; i++) {
  53.             gl_FrontColor = vec4(1, 0, 0, 1);
  54.             gl_Position = gl_PositionIn[i];
  55.             gl_TexCoord[0] = gl_TexCoordIn[i][0];
  56.  
  57.             int ik = i + 1;
  58.             if (ik >= gl_VerticesIn)
  59.             ik = 0;
  60.  
  61.             gl_Position = gl_PositionIn[ik];
  62.             gl_TexCoord[0] = gl_TexCoordIn[ik][0];
  63.             EmitVertex();
  64.         }
  65.         EndPrimitive();
  66.     }
  67. }
  68.  
  69. shader "main" {
  70.     vertexShader "main"
  71.     pixelShader "main"
  72.     geometryShader "main"
  73. }


Ich habe also mehr oder weniger sowas wie #define nachgebaut (ich weiß das gibt es intern, aber ich mag es so lieber) durch meine pass-blöcke, kann im GeometryShader direkt schon definieren was er ausgibt etc. Zum laden sage ich dann einfach entweder "Lade mir den shader 'main' aus datei sowieso mit den passes 'normalMapping' und 'Shadows'" was dann automatisch die entsprechenden definierten shader combiniert und compiliert, oder ich sage "Gib mir VertesShader 'bla' ausdatei sowieso mit passes 'X' und 'Y'" was mir nur den VertexShader gibt.

Dadurch spare ich mir alles tausendmal zu schreiben... ich bastel also einen Shader einfach aus vielen passes zusammen.


Zum abschluss nochmal ein paar Screenshots:

BildBildBildBildBild

Zum vergrößern anklicken.
Sieht zwar jetzt nochnicht so berauschend aus, aber das liegt am langweiligen design und den texturen... vom technischen funktioniert es jedenfalls alles :)


Aya~


Nach oben
 Profil  
Mit Zitat antworten  
Beiträge der letzten Zeit anzeigen:  Sortiere nach  
Ein neues Thema erstellen Auf das Thema antworten  [ 2 Beiträge ] 
Foren-Übersicht » Sonstiges » Projekte


Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 33 Gäste


Du darfst keine neuen Themen in diesem Forum erstellen.
Du darfst keine Antworten zu Themen in diesem Forum erstellen.
Du darfst deine Beiträge in diesem Forum nicht ändern.
Du darfst deine Beiträge in diesem Forum nicht löschen.
Du darfst keine Dateianhänge in diesem Forum erstellen.

Suche nach:
Gehe zu:  
cron
  Powered by phpBB® Forum Software © phpBB Group
Deutsche Übersetzung durch phpBB.de
[ Time : 0.089s | 17 Queries | GZIP : On ]