Statische Canvas-Objekte relativ machen

Werbeanzeige

Frischling

19.04.2016, 23:05

Bin mir nicht sicher wie vorzeigbar mein Code ist - wenn einem keiner über die Schulter schaut muß man schon sehr diszipliniert sein damit es leserlich bleibt.

Meine Objekte sind teilweise in sparse arrays untergebracht, und teilweise in QuadTrees.
In diesem Fall iteriere ich über die Elemente die eine Abfrage auf dem Quadtree ausgespuckt hat.
Meine lowerleft.x und lowerLeft.y Koordinaten sind im Koordinatensystem des Spiels, das sich nicht um die Darstellung im Browser kümmert (x und y haben Werte zwischen 4700 und 5300)
Das scroll objekt hat x/y in den Viewport-Koordinaten - also Pixeln auf dem Canvas. Scrolle ich 100px nach links, ist sich mein scroll.x = -100;
Der tilesize-Wert hat bei mir Werte wie 15/30/60. An dieser Stelle könntest du vermutlich einen Stufenlosen zoom einbauen, indem du z.B. Werte zwischen 0.1 und 3 zulässt (und die Variable anders benennst).

Quellcode

var displayPositionX = currentMap.tileSize * visibleStarMap[boxNo].lowerLeft.x;
var displayPositionY = currentMap.tileSize * visibleStarMap[boxNo].lowerLeft.y;
displayPositionX -= currentMap.scroll.x;
displayPositionY -= currentMap.scroll.y;

context.drawImage(visibleStarMap[boxNo].nebula.canvasCache,
                        displayPositionX, displayPositionY,
                        currentMap.tileSize, currentMap.tileSize);

Statt dem DrawImage machst du dein Rect-Aufruf, bei dem du die Seitenlänge auch mit currentMap.tileSize multiplizierst...

Empires in Space
MMO 4X, Rundenbasiert
HTML5/TypeScript/Javascript/CSS/C#/SQL

Zum Seitenanfang

Sacaldur

Community-Fossil

Beiträge: 2 301

Wohnort: Berlin

Beruf: FIAE

20.04.2016, 01:26

Grundsätzlich sieht der Codeausschnitt nicht sonderlicht verwerflich aus. Du könntest überlegen, die 3. und 4. Zeile einzusparen, indem sie mit in die beiden darüber eingebettet werden.

Weiterhin könntest du dir für die Koordinaten eine eigene Vektor-"Klasse" implementieren (bzw. einen Konstruktor mit entsprechendem Prototypen), wodurch an vielen Stellen die Anzahl an Zeilen halbiert wird und an anderen diese insgesamt einfacher werden könnten. Dies würde im Groben so aussehen:

Quellcode

function Vector2(x, y) {
    this.x = x;
    this.y = y;
}
Vector2.prototype.add = function(other) {
    return new Vector2(this.x + other.x, this.y + other.y);
};
Vector2.prototype.subtract = function(other) {
    return new Vector2(this.x - other.x, this.y - other.y);
};
Vector2.prototype.multiply = function(value) {
    return new Vector(this.x * value, this.y * value);
};
Object.defineProperty(Vector2.prototype, 'sqrMagnitude', {
    get: function() {
        return this.x * this.x + this.y * this.y;
    }
});
Object.defineProperty(Vector2.prototype, 'magnitude', {
    get: function() {
        return Math.sqrt(this.sqrMagnitude);
    }
});

Vector2.one = new Vector2(1, 1);

[...]

Zu beachten ist, dass darüber erzeugte Objekte immutable sind, ihr interner Zustand sich also nicht durch den Aufruf von Funktionen verändert. Genau genommen können die Werte durch direkte Manipulation noch verändert werden, nur wollte ich den Code oben einfach halten. Will man einen Schutz davor haben, würde man Object.defineProperty verwenden, um die Werte innerhalb des Konstruktors als Properties zu definieren, wodurch sie, bei den richtigen Argumenten, nicht verändert werden können. (Gleiches gilt für die Konstante Vector2.one, welche theoretisch noch überschrieben werden könnte.)
Das Verhalten kann unter Umständen nicht gewünscht sein, in den meisten Fällen beugt sowas aber unvorhergesehene Fehler vor.

Verwenden kann man dies bspw. so:

Quellcode

var playerPosition = new Vector2(5, 12);
var cameraPosition = new Vector2(0, 5);
var displayPosition = playerPosition.subtract(cameraPosition);
console.log(displayPosition.x, displayPosition.y);
[...]

Leider wird man so nicht mit den Zeichen für Addition, Subtraktion etc. arbeiten können, da JavaScript Operatorüberladung meines Wissens nicht unterstützt.

Spieleentwickler in Berlin? (Thema in diesem Forum)
---

Zitat von »Jonathan_Klein«

Es ist ja keine Schande etwas falsch zu machen, als Programmierer tu ich das täglich, [...].

Zum Seitenanfang

webconqueror

Treue Seele

Beiträge: 124

Wohnort: Bergisch Gladbach

Beruf: Student

21.04.2016, 13:32

Okay ich habe mich damit nun mal etwas beschäftigt und als Alternative ein Canvas-Framework gefunden.
Also kein CMS.
Was haltet ihr davon, vielleicht kennt das ja jemand?
http://canvasengine.net/

LG Tobi :thumbsup:

Zum Seitenanfang

Skratti

Frischling

Beiträge: 55

21.04.2016, 17:03

Falls du ohne Framework arbeitest verstehst du vermutlich besser wie die 2D Grafik Generierung funktioniert (habe dir übrigens dazu ne PM geschickt).

Ich selber setze Frameworks erst ein, wenn ich einige der Funktionen in solch einem Framework schon äquivalent selber geschrieben habe und daher weiss warum das Framework so tickt wie es tickt. Bei Frameworks habe ich immer das Gefühl das einfache Sachen durch das Framework noch einfacher gehen, schwierige Sachen aber - da wo das Framework an sein Limit stößt - dann durch das zusätzliche Framework komplexer werden.

Ich kann mir aber auch gut vorstellen das man mit einem Framework zuerst schneller produktiv ist, und daher einfach mehr Spaß am programmieren hat...

Zu Canvas Frameworks kann ich nicht viel sagen, bei webGL Frameworks würde ich mich für Three.JS entscheiden, weil ich die Seite mit den 200 Beispielen (inklusive dem jeweiligen sehr kurzem, verständlichem Sourcecode) sehr praktisch finde:
http://threejs.org/examples/

Empires in Space
MMO 4X, Rundenbasiert
HTML5/TypeScript/Javascript/CSS/C#/SQL

Zum Seitenanfang

Werbeanzeige

spieleprogrammierer.de - Forum und Wiki zur Spieleprogrammierung und Spieleentwicklung