[M2MP Scripting] #2: SquirrelEdit - Die IDE

  • [M2MP Scripting] #2: SquirrelEdit - Die IDE

    Hallo, in diesem zweiten Tutorial, will ich euch die IDE "SquirrelEdit", aus dem vorigen Tutorial etwas näherbringen.


    IDE? Was ist das?
    Eine IDE ist im Prinzip nichts anderes als eine Entwicklungsumgebung, wo ihr eure Scripts, sagen wir mal, "entwickelt".

    Lerne ich in diesem Tutorial das Scripten?
    Nicht so voreilig, erst einmal musst du doch wissen wie die IDE Funktioniert, und welche Funktionen es gibt, dies werdet ihr in diesem Tutorial lernen.

    Okay, zeig mir die IDE!
    Na gut, nachdem wir nun das Programm heruntergeladen und Installiert haben, klicken wir auf diesen Button um es zu öffnen (befindet sich auf dem Desktop):
    <img src="http://i.imgur.com/o2bvH.png" alt="o2bvH.png" title="o2bvH.png" style="font-family: 'Trebuchet MS', Arial, sans-serif; " />


    Haben wir dies getan, ist es in den meisten Fällen so, dass uns dieses Fenster hier erscheint:
    <img src="http://i.imgur.com/IbhRD.png" alt="IbhRD.png" title="IbhRD.png" style="font-family: 'Trebuchet MS', Arial, sans-serif; " />


    Natürlich wollen wir Updaten, wir wollen doch immer auf dem neusten Stand bleiben! Ich empfehle euch immer die Updates zu installieren, da sie meistens Bugfixes, neue Funktionen o.Ä. beinhaltet, falls ihr selber Bugs findet, könnt ihr sie im entsprechenden Thema im M2:MP Forum melden. (Klick )
    Wir klicken also auf "Ja".

    Wenn dies getan ist, startet sich das Programm Automatisch neu.

    Fangen wir mal ganz oben an:
    <img src="http://i.imgur.com/OiNPK.png" alt="OiNPK.png" title="OiNPK.png" style="font-family: 'Trebuchet MS', Arial, sans-serif; " />

    Wir sehen das, was in fast jedem Programm vorhanden ist: "File Edit Higlighting ?"
    Fangen wir im unteren Bereich bei den Icons an, klickt ihr auf das leere Blatt-Icon hier:
    <img src="http://i.imgur.com/nyCUE.png" alt="nyCUE.png" title="nyCUE.png" style="font-family: 'Trebuchet MS', Arial, sans-serif; " />

    Wird ein neues Projekt erstellt. Klicken wir also einmal drauf.
    Es passiert natürlich nichts, die Datei ist und bleibt leer, wir haben ja noch nichts reingeschrieben, hätten wir etwas reingeschrieben und dann auf das leere Blättchen geklickt, wäre der Text den wir geschrieben haben gelöscht worden und wir hätten wieder eine Leere Datei.

    Gehen wir weiter zu dem Ordner-Icon hier:
    <img src="http://i.imgur.com/AXfn4.png" alt="AXfn4.png" title="AXfn4.png" style="font-family: 'Trebuchet MS', Arial, sans-serif; " />

    Das sollten viele kennen, genau die gleiche Geschichte wie bei Word, wir klicken drauf, dann erscheint ein Explorer indem wir die zu öffnende Datei raussuchen sollen.

    Weiter geht es, zu dem Speichern-Icon:
    <img src="http://i.imgur.com/5ejQ2.png" alt="5ejQ2.png" title="5ejQ2.png" style="font-family: 'Trebuchet MS', Arial, sans-serif; " />

    Sollte auch wieder jeder kennen, wieder die gleiche Geschichte wie bei Word, wir klicken drauf, und die Datei wird gespeichert, falls die Datei noch nicht vorhanden sein, öffnet sich wieder ein kleiner Explorer, wo wir aussuchen sollen, wo wir die Datei speichern wollen und wie sie heißen soll. Existiert die Datei schon, reicht ein klick auf das Icon und es wird unter gleichen Namen am gleichen Ort gespeichert.

    Dann kommt eine kleine Abtrennung, danach 2 Pfeil-Icons:
    <img src="http://i.imgur.com/2UBRE.png" alt="2UBRE.png" title="2UBRE.png" style="font-family: 'Trebuchet MS', Arial, sans-serif; " />

    Undo (Pfeil zurück) und Redo (Pfeil vorwärts), Undo macht das letzte was du geschrieben hast rückgängig, Redo macht das gegenteil, wenn du Undo gedrückt hast und es dir doch anders überlegt hast oder ein paar schritte zu weit gegangen bist, drückst du einfach auf Redo und das was von Undo gelöscht wurde wird wieder reingesetzt.

    Dann kommt wieder eine kleine Abtrennung, nach der Abtrennung sehen wir ein kleines Binär-Icon:
    <img src="http://i.imgur.com/M2oip.png" alt="M2oip.png" title="M2oip.png" style="font-family: 'Trebuchet MS', Arial, sans-serif; " />

    Wer sich mit Pawn auskennt, sollte dies kennen, der Compiler erscheint, der Fehler im Code anzeigt, einfache Sache, falls du ein Semikolon vergessen hast o.Ä., wird dir dies hier angezeigt.

    Danach kommt ein deaktiviertes Upload-Icon:
    <img src="http://munkeezy.mu.funpic.de/DjE.png" alt="DjE.png" title="DjE.png" style="font-family: 'Trebuchet MS', Arial, sans-serif; " />

    Dies brauchen wir später um unser Script direkt auf den Server hochladen können, vorher müssen wir das ganze jedoch Konfigurieren, nach der Konfiguration sollte es Aktiviert sein.

    Gehen wir jetzt in die obere Hälfte zurück:
    <img src="http://i.imgur.com/KMOxL.png" alt="KMOxL.png" title="KMOxL.png" style="font-family: 'Trebuchet MS', Arial, sans-serif; " />


    File sollte wieder jeder kennen, klicken wir mal drauf:
    <img src="http://i.imgur.com/EkJDL.png" alt="EkJDL.png" title="EkJDL.png" style="font-family: 'Trebuchet MS', Arial, sans-serif; " />


    New: Siehe Blatt-Icon
    New with template: Das gleiche wie New, nur wird hierbei eine Vorlage geladen, die das Scripten von den wichtigsten Callbacks überflüssig macht. (Für Beispiel, einfach draufklicken)
    Open: Siehe Ordner-Icon
    Save: Siehe Speichern-Icon
    Save As...: das gleiche wie bei Save, nur wird hierbei, selbst wenn die Datei schon vorhanden ist ein Fenster geöffnet wo man auswählen kann wo man die Datei speichern will. (Gut um zB den Platz des Scripts auf dem Computer zu wechseln, oder den Dateinamen).
    Print: Druckt das Script aus (eigentlich überflüssig).
    Preview Print: Zeigt eine Vorschau des Drucks.
    Exit: Schließt das Programm.

    Jetzt wissen wir was File so drauf hat, gehen wir weiter zu Edit:
    <img src="http://i.imgur.com/LHNHE.png" alt="LHNHE.png" title="LHNHE.png" style="font-family: 'Trebuchet MS', Arial, sans-serif; " />

    Undo & Redo: Siehe Pfeil-Icons
    Find: Öffnet ein kleines Fenster, wo du Begriffe im Script suchen kannst.
    Replace: Öffnet ein kleines Fenster, wo du Begriffe durch einen anderen Begriff ersetzten kannst.
    Check Syntax: Siehe Binär-Icon
    Settings: Öffnet das Einstellungsfenster für SquirrelEdit. (Näheres dazu später)

    So, Edit wurde nun auch abgehakt, kommen wir zum Highlighting:
    Für uns nicht Relevant, man kann lediglich das Syntax-Highlighting auf andere Sprachen umstellen.

    Weiter geht's, mit dem ? (Fragezeichen):
    <img src="http://i.imgur.com/j7tC5.png" alt="j7tC5.png" title="j7tC5.png" style="font-family: 'Trebuchet MS', Arial, sans-serif; " />

    Check for Updates: Sollte klar sein, sucht nach Updates für das Programm.
    Scripting help: Öffnet das M2:MP Wiki in einem neuen Fenster.
    Changelog: Öffnet den Changelog von SquirrelEdit in einem neuen Fenster.
    About: Informationen über SquirrelEdit (Autor, Version etc.)

    Gut, kommen wir nun nach unten Zu dem großen Textblock:
    In diesem Textblock werden wir später unseren Code editieren, ihr werdet seine Funktionen nach und nach in den folgenden Tutorials kennenlernen.
    Links an der Seite sehen wir eine Nummerierung der Zeilen, dies dient zur Übersicht und falls Fehler auftreten, kann auch gesagt werden in welcher Zeile sich der Fehler befindet und man muss nicht selber nachzählen.
    Ganz unten Links sehen wir Lines: [Zahl], dies Zeigt die im Script vorhandenen Zeilen.


    Im nächsten Tutorial werde ich euch endlich das Scripten beibringen!
    *EDIT: Screenshots korrigiert.
    *EDIT2: Screenshot korrektur die zweite...

    Mit freundlichen Grüßen
    munkee
    Userinfos:
    Aktuell am Lernen: HTML5, CSS3, JavaScript (jQuery), PHP

    Userbars:

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von munkee ()