RSS-Feed anzeigen

zocka

mQuery auf GitHub

Bewerten
Schon vor einer ganzen Weile haben die Leute, die dem mQuery Manialink per Bookmark folgen den Link zum Projekt auf GitHub in ihrem Feed erhalten. Da es wenige wirkliche Neuerungen gab, hat es die Sache aber noch nicht auf diese Seite geschafft, wie mir kürzlich bewusst wurde.

Nun also auch hier der Link zum Repository: https://github.com/PRGfx/mQuery

Zudem ist der Demo-Manialink momentan nicht erreichbar, das ist richtig, aber nicht das Ende des Projektes.

Auf GitHub habe ich zudem angefangen über die Wiki Funktion einiges zu dokumentieren:
https://github.com/PRGfx/mQuery/wiki. Darunter auch einiges, worüber ich jetzt hier schreiben werde.

Normaler Code
Einsatz von "normalem" ManiaScript Code war bisher nur über die php Funktionen möglich, lässt sich nun aber seit einer Weile auch ganz einfach und bequem direkt im mQuery Code einbinden:
Code:
$.main('This code goes into the main() function');
$.body('This code ends up before the main() function. Here you could actually declare functions of global variables etc.');
$.loop('This code ends in the default "while(True){ ... yield; }" loop');
(Tatsächlicher funktionaler Code steht natürlich nicht in Anführungszeichen)


Constraints

Mit Ausnahme vom Einbinden von Math- und TextLib habe ich diese bislang noch nie wirklich verwendet und deshalb fehlte die Unterstützung in mQuery bislang. Math- und TextLib waren standardmäßig vorhanden.
Nun lassen sich Constraints wie gehabt einfach so im mQuery Code setzen.

Es gibt eine Besonderheit bei #Include: Es können eigene Libraries eingebunden werden. Mehr zu den Voraussetzungen dazu steht auf der verlinkten Wiki-Seite. Letztlich ist der einzige Vorteil gegenüber der normalen Verwendung dieser Funktionen eine gewisse Übersichtlichkeit und Uniformität, die mit der Library Notation einhergeht. Trotzdem ganz hübsch

Zur Demonstration - und weil einiges daraus vielleicht ganz praktisch ist - kommt mit der letzten Aktualisierung die TextExt Funktionssammlung mit, deren Möglichkeiten ich auch bereits dokumentiert habe und hier nicht reinspammen will. Ein Blick darauf interessiert vielleicht einige Leute hier


Timeouts
Nach viel zu langer Zeit und kompetenter Unterstützung kommt mQuery nun auch mit der Möglichkeit im Rahmen der Einschränkungen von ManiaScript Timeouts zu setzen, was nun auch in einigen Funktionen eingesetzt wird, um gescheite Animationen anzubieten.

Neue Funktionen
Zum einen eine kleine Funktion zum rumsliden von Elementen:
  • Code:
    Void Slide(CMlControl e, Vec2 to, Integer steps, Boolean accel)
    e: das Element zum Verschieben
    to: <x, y> Zielkoordinaten
    steps: Anzahl der Schritte, in denen vom Ausgangspunkt zu <to> geschoben wird
    accel: Lineares Verschieben oder zur Mitte der Animation hin beschleunigen?
  • Code:
    Void Resize(CMlControl e, Vec2 to, Integer steps, Boolean accel)
    e: das Element zum Skalieren
    to: <b, h> Zielgröße
    steps: Anzahl der Schritte, in denen die Endgröße erreicht wird
    accel: Zur Mitte der Animation hin schneller skalieren?

Diese beiden Funktionen sind normale ManiaScript Funktionen, können also in freiem Kontext verwendet werden. Von ersterer gibt es auch eine Demo (ebenfalls den Bookmarkern verlinkt), wo der gesamte Bildschirmbereich verschoben wird. (Momentan leider offline.)

Auch für mQuery gibt es neues, wo diese Funktion genutzt wird:
  • mq_slideshow(options)
    Erwartet als option mindestens
    Code:
    data: [imgUrl1, imgUrl2, ...]
    Weitere Optionen sind (int) time, (int) speed, (bool) autoplay, (bool) accelerate
    Das erzeugt eine "slideshow", wo die angebenen Bilder nacheinander über den Bildschirm geschoben und dabei so skaliert werden, dass die Animation des Bilderwechsels die Originalfläche nicht verlässt. Bsp. Code:
    Code:
    <quad id="slideshow1" image="http://localhost/tm/extended/mQuery/img/header2.png" sizen="200 60" posn="-100 50 20" />
    <mquery>
    $("#slideshow1").slideshow({
            data: ["http://localhost/tm/extended/mQuery/img/header1.png","http://localhost/tm/extended/mQuery/img/header2.png","http://localhost/tm/extended/mQuery/img/header3.png"],
            speed: 70,
            accelerate: false,
            time: 6000,
            autoplay: true,
            onChange: function(index){
                   log("slideshow displaying image nr. " ^ index);
                }
        });
    </mquery>



Shapes
Eine weitere Neuerung ist die Möglichkeit, Formen darzustellen. Dies geht über das normale bgcolor hinaus und die Notwendigkeit für alles extra eine Grafik zu erstellen entfällt. Eine genauere Beschreibung davon findet sich hier.
Das ganze kann dann so aussehen:
Code:
<shape type="arc" sizen="50 50" angle="270" weight="50" rotation="45" bgcolor="09f" fill="false" posn="-70 10 10" />
In diesem Fall wäre das ein hellblauer 3/4-Kreis nach links oben offen.

Ich hoffe das war jetzt wieder mal ein bisschen was interessantes, aber da sich nicht wirklich so viel getan hat, werde ich es hierbei bewenden lassen und in nächster Zeit primär das Wiki auf GitHub, sowie die interaktiven Demos ausbauen.

Ich würde mich über Feedback und Vorschläge freuen, was ihr gerne als nächstes lesen wollt, oder ob ich auf irgendwelche Punkte noch näher eingehen soll.

Bis dahin

"mQuery auf GitHub" bei Facebook speichern "mQuery auf GitHub" bei Twitter speichern "mQuery auf GitHub" bei Mister Wong speichern "mQuery auf GitHub" bei Google speichern "mQuery auf GitHub" bei del.icio.us speichern "mQuery auf GitHub" bei Webnews speichern

Aktualisiert: 02.09.2013 um 19:38 von zocka

Stichworte: github, maniascript, mquery
Kategorien
Kategorielos

Kommentare

  1. Avatar von Askuri
    Finde das Projekt nach wie vor Super. Besonders das neue Shapes Feature gefällt mir sehr.
    Egal was kommt, gib das Projekt nicht auf!