Beiträge von Sempervivum

Da scheint es noch andere Bibliotheken für Spieleentwicklung zu geben:

https://phaser.io

Wenn es die Entwicklung von Spielen geht, ist meine Erfahrung allerdings sehr begrenzt, vor allem wenn es um die Performance bei hunderten von Objekten geht.

Wenn Du mich unter dieser Einschränkung fragst, wie ich es machen würde, dann genau so, wie Du es jetzt machst, mit einer Bibliothek wie jCanvas.

Zitat

Die Objekte können verschwinden wenn man sie zerstört, müssen also schon als Objekt selbst ansprechbar sein.

Das ist bei jCanvas der Fall, Du kannst ein Objekt über seinen Namen ansprechen oder über seinen Index.

Zitat

Wenn ein Objekt von Typ 2 zerstört wurde soll genau dort ein Objekt von typ 1 erstellt werden.

Das ist relativ einfach, denn Du kannst die Position nach x und y für das alte Objekt vor dem Zerstören abfragen und dann das neue genau dort platzieren.

Auch mit Flash habe ich überhaupt keine Erfahrung und kann deshalb auch keine Vergleiche ziehen.

Zitat

Ich glaube da kann man auch ganz anders ansetzen als wir es bisher getan haben oder?

Ein ganz anderer Ansatz wäre, auf jegliche Bibliotheken zu verzichten und die Animationen mit requestAnimationFrame "zu Fuß" zu programmieren. Ich kann allerdings nicht voraussagen, ob man da wesentlich an Performane gewinnt.

Ich habe Caleb, den Entwickler von jCanvas, mal danach gefragt und er hat geantwortet, dass jCanvas für die Animationen jQuery benutzt und dass dieses seit Version 3 requestAnimationFrame einsetzt. Ich bin mir auch nicht sicher, ob diese Funktion die Probleme mit dem Tabwechsel löst.

Meinst Du requestAnimationFrame? Wenn ich richtig informiert bin, benutzen jQuery und jCanvas das.

Auf diesen Screenshots erkennt man es allerdings.

Bisher hatte ich im Opera getestet und auch dort kommt es zu gravierenden Problemen, wenn ich, während die Animation läuft, auf einen anderen Tab wechsele.

Anscheinend benutzt Du Firefox, aber auch damit kann ich das Problem nicht reproduzieren, auch nicht auf deiner bplaced-Seite.

Auch dort kann ich das Problem mit den Abständen nicht erkennen.

Das erste mit dem Abstand kann ich nicht reproduzieren. Am besten wäre es, wenn Du deins irgendwo hochladen könntest, damit man es sich in Aktion ansehen kann.

Das Timeout braucht man, damit die Bloons in zeitlichem Abstand starten. Versuche es: Wenn man das Timeout heraus nimmt, liegen sie alle übereinander und es hat den Anschein, dass nur einer da ist.

Ich glaube, so annähernd verstehe ich jetzt, wie das funktioniert.

Zitat

da nicht 14 Bloons erstellt werden, sondern nur einer.

Dann versuche mal dieses:

function levels() {

    level++;
    allLevels();

    var speed = 0.1;
    var nrBloons = 14, intv = 500;
    function getDuration(v, x1, y1, x2, y2) {
        var t = Math.hypot(x2 - x1, y2 - y1) / v;
        return t;
    }
    for (let h = 0; h < nrBloons; h++) {
        setTimeout(function () {
            $('canvas').addLayer({
                type: 'image',
                name: 'bloon' + h,
                data: {
                    bloonType: 0
                },
                groups: ['bloons', 'redBloons'],
                source: 'img/redBloon.png',
                x: mapValues[0].x,
                y: mapValues[0].y
            });
            let idxAni = 1;
            while (mapValues[idxAni]) {
                $('canvas').animateLayer('bloon' + h, {
                    x: mapValues[idxAni].x,
                    y: mapValues[idxAni].y
                }, getDuration(speed,
                    mapValues[idxAni - 1].x, mapValues[idxAni - 1].y,
                    mapValues[idxAni].x, mapValues[idxAni].y), 'linear');
                idxAni++;
            }
        }, intv * h);
    }
}

Zitat

konnte den Code zu meinem erstaunen deutlich kürzer halten

Mich erstaunt vor allem, dass dieser Code funktioniert. Er tut es, aber ich bin weit davon entfernt, zu verstehen, wie und warum.

Was mich betrifft, kann ich daher auch das zweite Problem nicht lösen.

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.

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.

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

function allLevels() {

    switch (level) {

        case 1:
            counter = 1;
            whichBloons = ['redBloon', 'redBloon2'];
            bloonCounter = [14, 20];
            timeLapse = [0, 2];
            console.log('heeeyooo');
            break;

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

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:

function levels() {

    level++;
    allLevels();
    console.log($('canvas').getLayers());


    console.log('klappt');

    (function () {

        var intv = 500;
        var h = 1;
        var speed = 0.1;
        function getDuration(v, x1, y1, x2, y2) {
            var t = Math.hypot(x2 - x1, y2 - y1) / v;
            return t;
        }
        for (let idx1 = 0; idx1 < whichBloons.length; idx1++) {
            function animateIt(layer) {
                console.log("ani")
                idxAni++;
                $('canvas').animateLayer(layer, {
                    x: mapValues[idxAni].x,
                    y: mapValues[idxAni].y
                }, getDuration(speed,
                    mapValues[idxAni - 1].x, mapValues[idxAni - 1].y,
                    mapValues[idxAni].x, mapValues[idxAni].y),
                    'linear',
                    function (layer) {

                        animateIt(layer)
                    }
                );
            }


            let idx2 = 0, idxAni = 0;

            setTimeout(function () {

                var bloonName = whichBloons[idx1] + h;

                $('canvas').addLayer({
                    type: 'image',
                    name: bloonName,
                    data: {
                        bloonType: 0
                    },
                    groups: ['bloons', 'redBloons'],
                    source: 'redBloon.png',
                    x: mapValues[0].x,
                    y: mapValues[0].y
                });
                animateIt($('canvas').getLayer(bloonName));

                console.log("create bloon " + whichBloons[idx1] + " " + bloonName);

                h++;

                idx2++;

            }, timeLapse[idx1] * 1000);
        }

    })();


    function startButton() {

    }

    return;
}

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,

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

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

und diese dann bei der Animation aufrufen:

                $('canvas').addLayer({
                    type: 'image',
                    name: bloonName,
                    data: {
                        bloonType: 0
                    },
                    groups: ['bloons', 'redBloons'],
                    source: 'redBloon.png',
                    x: mapValues[0].x,
                    y: mapValues[0].y
                }).animateLayer(bloonName, {
                    x: mapValues[1].x,
                    y: mapValues[1].y
                }, getDuration(1, mapValues[0].x, mapValues[0].y, mapValues[1].x,mapValues[1].y),
                    function (layer) {
                        for (var i = 2; i < mapValues.length; i++) {
                            $(this).animateLayer(layer, {
                                x: mapValues[i].x,
                                y: mapValues[i].y
                            }, 2000, 'linear');
                        }
                    });

Du hast doch ganz oben geschrieben, dass sich die Objekte bewegen?

Das ganze if?

Habe das Github geladen aber da ist ein Fehler in Zeile 73 von items.js (das leere if).

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.

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.

Hier sind zwei Möglichkeiten, wie es funktioniert:

    <p id="irgendwas" onclick="alert(this.id)">inline</p>
    <p id="nochetwas" onclick="zeigId(this)">outline</p>
    <script>
        function zeigId(ele) { alert(ele.id) }
    </script>