JCanvas animation bleibt nicht konstant auf einer Geschwindigkeit

  • Hallo, ich arbeite zur Zeit an ein Spiel mit JCanvas und möchte dabei animationen verwenden.


    Allerdings bleibt die Animation nicht auf einer Geschwindigkeit und das Objekt bewegt sich zum Beispiel von Punkt A nach Punkt B langsamer als von Punkt B nach Punkt A. Ich habe absolut keine Ahnung wie das zustande kommen konnte. Damit ihr selbst sehen könnt was ich meine, habe ich das ganze mal hochgeladen:


    Wenn ihr im Spiel auf 'Start' klickt, sollten sich rote Ballons die Strasse entlang bewegen. Allerdings wechseln sie dabei ihre Geschwindigkeit. Der Code dazu ist folgender:


    Ich kann mir nicht erklären, wieso sowas passiert, da ich auch sehr neu in JCanvas bin und zuvor weder mit JCanvas oder mit JQuery gearbeitet habe.

  • Anscheinend hast Du vergessen, den Link einzufügen?

    Ohne das Spiel zu testen, vermute ich folgendes: Beim Starten der Animation gibst Du nicht die Geschwindigkeit sondern die Dauer an. Sind die Wege der Animationen unterschiedlich, ergibt sich dann eine unterschiedliche Geschwindigkeit. Ist aber leicht, aus dem Weg eine angepasste Dauer zu ermitteln.

  • Das ist recht einfach:

    zeit = weg / geschwindigkeit


    Berechnung des Weges:

    deltax = x2 - x1

    deltay = y2 - y1

    weg = sqrt(deltax^2 + deltay^2)

    oder kürzer

    weg = hypot(deltax, deltay)


    In Javascript:

    var v = 1;

    var t = hypot(x2 - x1, y2 - y1) / v;


    t bzw. Zeit ist dann die Dauer der Animation.

  • Ja, wenn Du dich einmal durchklickst, bist Du auf der Karte mit der Straße bist, kannst Du unten rechts auf 'Start' klicken. Allerdings bin ich mir da nicht mehr sicher ob das geht, da es reicht die Bildschirmgröße minimal zu verändern damit nichts mehr funktioniert. Solltest Du es schaffen auf Start zu klicken, kommen Rote Ballons von Oben und laufen die Strasse entlang.

  • t ist die Dauer der Animation. Du kannst eine Funktion schreiben, die diese berechnet:

    Code
    function getDuration(v, x1, y1, x2, y2) {
        var t = hypot(x2 - x1, y2 - y1) / v;
        return t;
    }

    und diese dann bei der Animation aufrufen:

  • Ich habe versucht es so umzusetzen, was allerdings nichts ändert. Ist der Code nicht eigentlich zu viel Aufwand für eine eigentlich so kleine Animation?


    Tatsächlich hatte ich diese Animation schon ohne JCanvas am laufen, nur gab es 2 grundlegende Probleme, nämlich hat die Animation stark geflakert und zum anderem hatte ich keine benannten Objekte. Das ist das größte Problem bei der Sache, jeder Bloon muss individuell ansprechbar sein und seine Position muss immer geortet werden können, um diesen auch später entfernen zu können. JCanvas bietet da mit den Layern genau da richtige, aber die Sache mit den Animationen scheint es mir nur komplizierter zu machen, oder nicht?


    Gibt es nicht eine allgemein einfachere Lösung?

  • Ja, auf den ersten Blick scheint es komplizierter zu sein, aber wenn man sich an die Denkweise von jCanvas gewöhnt hat, ist es einfacher als mit Timern oder animationFrame.

    Ich habe mal das Skript levels.js umgearbeitet und jetzt läuft der Bloon einwandfrei und geschmeidig. Auch wenn ich die Konfiguration auf zwei Bloons erweitere, funktioniert es:

    Ich bin der Meinung, dass es relativ kompakt ist, man muss sich nur an den rekursiven Callback gewöhnen, aber der wird häufig verwendet, auch bei Animationen mit jQuery,

  • Das ist in items.js, Du brauchst nur die Konfiguration zu erweitern:

    Es ist noch nicht ganz perfekt, weil es am Ende mit einem Laufzeitfehler abbricht. Das musst Du noch abfangen.

  • Achso, so meinst Du das. Dafür allerdings ist ja bloonCounter[] da! bloonCounter sagt wie viele Bloons erstellt werden sollen, in diesem Falle 14.


    Also 14 mal redBloon erstellen. Aber das dürfte ja nur wenige veränderungen in der levels.js erfordern oder nicht?


    Wenn wir schon beim Thema animateLayers sind... Ich möchte das System mit den Towers umstellen, zur Zeit muss man die Towers draggen und droppen, das ist ziemlich sche*ße. Also wollte ich das wie im Originalspiel umsetzen und entgegen meiner Erwartungen hat das mit animateLayers gut geklappt:


    Code
    $('canvas').mousemove(function(event) {
              $('canvas').animateLayer(type, {
                  x: event.clientX,
                  y: event.clientY
              }, 100, 'linear');
          });

    Einziges Problem nur: das ist total verzögert. Ich denke mal das ist wieder ein ähnliches Problem oder?


    EDIT: Habe da von 100 auf 1 gestellt. Dachte erst 100 würde bereits reichen.

  • Verstehe, ich hatte mich schon gefragt, wozu der Blooncounter da ist. Du kannst ja selber mal versuchen, es einzubauen.


    Bei den Towers verstehe ich nur Bahnhof :) wahrscheinlich weil ich das Originalspiel nicht kenne. Wenn ich mir deinen Code ansehe, fällt mir ein, dass man Layer in jCanvas auch draggable machen kann.


    Aber für heute ist es spät genug, ich mache jetzt erst Mal Schluss.

  • Zitat

    Das ist Gameplaytechnisch aber doch ziemlich doof.

    Warum denn das?


    BTW:

    Zitat

    da es reicht die Bildschirmgröße minimal zu verändern damit nichts mehr funktioniert.

    Das hat mir gestern Abend auch Kopfzerbrechen bereitet. Das Problem ist, dass Du mit CSS die Größe des Canvas verändert hast. Dass dabei die Auflösung leidet, ist in diesem Fall das kleinere Problem, aber der klick-sensitive Bereich ändert sich dabei nicht mit, so dass betr. Event nicht feuert.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!