Änderung: Anpassung der Straßenkoordinaten und Optimierung der Kollisionserkennung im Taxi-Spiel
Änderungen: - Entfernung der `tileSize` aus der JSON-Datei, um die Handhabung der Koordinaten zu vereinheitlichen. - Anpassung der Methode `getDriveableRegions`, um relative Koordinaten (0-1) direkt zurückzugeben. - Aktualisierung der Kollisionserkennung im Taxi-Spiel zur Verwendung von absoluten Pixel-Koordinaten anstelle von relativen. - Verbesserung der Lesbarkeit und Wartbarkeit des Codes durch Bereinigung überflüssiger Konvertierungen. Diese Anpassungen erhöhen die Effizienz der Kollisionserkennung und verbessern die Handhabung der Straßenkoordinaten im Spiel.
This commit is contained in:
Torsten Schulz (local)
@@ -1,5 +1,4 @@
|
||||
{
|
||||
"tileSize": 640,
|
||||
"tiles": {
|
||||
"cornerBottomRight": {
|
||||
"regions": [
|
||||
|
||||
@@ -36,31 +36,28 @@ class StreetCoordinates {
|
||||
/**
|
||||
* Gibt die Straßenregionen für einen Tile-Typ zurück
|
||||
* @param {string} tileType - Typ des Tiles (z.B. 'cornerBottomRight')
|
||||
* @param {number} tileSize - Größe des Tiles in Pixeln
|
||||
* @returns {Array} Array von Polygonen mit absoluten Koordinaten
|
||||
* @returns {Array} Array von Polygonen mit relativen Koordinaten (0-1)
|
||||
*/
|
||||
getDriveableRegions(tileType, tileSize) {
|
||||
getDriveableRegions(tileType) {
|
||||
const tile = this.data.tiles[tileType];
|
||||
if (!tile) {
|
||||
console.warn(`Tile type '${tileType}' not found`);
|
||||
return [];
|
||||
}
|
||||
|
||||
return tile.regions.map(region =>
|
||||
region.map(point => this.toAbsolute(point.x, point.y, tileSize))
|
||||
);
|
||||
// Gib die relativen Koordinaten (0-1) direkt zurück
|
||||
return tile.regions;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prüft, ob ein Punkt innerhalb der fahrbaren Bereiche liegt
|
||||
* @param {number} x - X-Koordinate des Punktes
|
||||
* @param {number} y - Y-Koordinate des Punktes
|
||||
* @param {number} x - X-Koordinate des Punktes (relativ 0-1)
|
||||
* @param {number} y - Y-Koordinate des Punktes (relativ 0-1)
|
||||
* @param {string} tileType - Typ des Tiles
|
||||
* @param {number} tileSize - Größe des Tiles in Pixeln
|
||||
* @returns {boolean} True wenn der Punkt fahrbar ist
|
||||
*/
|
||||
isPointDriveable(x, y, tileType, tileSize) {
|
||||
const regions = this.getDriveableRegions(tileType, tileSize);
|
||||
isPointDriveable(x, y, tileType) {
|
||||
const regions = this.getDriveableRegions(tileType);
|
||||
|
||||
for (const region of regions) {
|
||||
if (this.isPointInPolygon(x, y, region)) {
|
||||
@@ -98,7 +95,7 @@ class StreetCoordinates {
|
||||
* @param {number} offsetY - Y-Offset für das Tile
|
||||
*/
|
||||
drawDriveableRegions(ctx, tileType, tileSize, offsetX = 0, offsetY = 0) {
|
||||
const regions = this.getDriveableRegions(tileType, tileSize);
|
||||
const regions = this.getDriveableRegions(tileType);
|
||||
|
||||
ctx.fillStyle = '#f0f0f0'; // Straßenfarbe
|
||||
ctx.strokeStyle = '#333';
|
||||
@@ -106,10 +103,15 @@ class StreetCoordinates {
|
||||
|
||||
for (const region of regions) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(region[0].x + offsetX, region[0].y + offsetY);
|
||||
// Konvertiere relative Koordinaten zu absoluten für das Zeichnen
|
||||
const startX = region[0].x * tileSize + offsetX;
|
||||
const startY = region[0].y * tileSize + offsetY;
|
||||
ctx.moveTo(startX, startY);
|
||||
|
||||
for (let i = 1; i < region.length; i++) {
|
||||
ctx.lineTo(region[i].x + offsetX, region[i].y + offsetY);
|
||||
const x = region[i].x * tileSize + offsetX;
|
||||
const y = region[i].y * tileSize + offsetY;
|
||||
ctx.lineTo(x, y);
|
||||
}
|
||||
|
||||
ctx.closePath();
|
||||
|
||||
@@ -1959,7 +1959,7 @@ export default {
|
||||
const originalTileSize = streetCoordinates.getOriginalTileSize(); // 640px
|
||||
const currentTileSize = 500; // Aktuelle Render-Größe
|
||||
|
||||
// Hole die relativen Koordinaten direkt aus der JSON (0-1)
|
||||
// Hole die relativen Koordinaten aus der JSON (0-1) und konvertiere zu absoluten Pixeln
|
||||
const tileData = streetCoordinates.data.tiles[streetTileType];
|
||||
const regions = tileData ? tileData.regions : [];
|
||||
|
||||
@@ -1968,17 +1968,17 @@ export default {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Erstelle Taxi-Rechteck in relativen Koordinaten (0-1)
|
||||
// Erstelle Taxi-Rechteck in absoluten Pixel-Koordinaten (500x500px)
|
||||
const taxiRect = {
|
||||
x: this.taxi.x / currentTileSize,
|
||||
y: this.taxi.y / currentTileSize,
|
||||
width: this.taxi.width / currentTileSize,
|
||||
height: this.taxi.height / currentTileSize
|
||||
x: this.taxi.x,
|
||||
y: this.taxi.y,
|
||||
width: this.taxi.width,
|
||||
height: this.taxi.height
|
||||
};
|
||||
|
||||
// Alle Tiles verwenden die gleiche Logik: Prüfe ob Taxi eine der Hindernis-Polylinien schneidet
|
||||
|
||||
// Erstelle rotiertes Rechteck
|
||||
// Erstelle rotiertes Rechteck in absoluten Pixel-Koordinaten (500x500px)
|
||||
const rotatedRect = {
|
||||
cx: taxiRect.x + taxiRect.width / 2, // Mittelpunkt X
|
||||
cy: taxiRect.y + taxiRect.height / 2, // Mittelpunkt Y
|
||||
@@ -1992,11 +1992,10 @@ export default {
|
||||
const region = regions[i];
|
||||
// Jede Region ist eine Polylinie mit mehreren Punkten
|
||||
if (region.length >= 2) {
|
||||
// Verwende die relativen Koordinaten direkt aus der JSON (0-1)
|
||||
// ohne die doppelte Konvertierung über getDriveableRegions
|
||||
// Konvertiere relative Koordinaten (0-1) zu absoluten Pixeln (500x500px)
|
||||
const regionPoints = region.map(point => ({
|
||||
x: point.x, // Bereits relativ (0-1) aus der JSON
|
||||
y: point.y // Bereits relativ (0-1) aus der JSON
|
||||
x: point.x * currentTileSize, // Konvertiere von 0-1 zu 0-500px
|
||||
y: point.y * currentTileSize // Konvertiere von 0-1 zu 0-500px
|
||||
}));
|
||||
|
||||
// Verwende die robuste Kollisionserkennung für diese Region
|
||||
@@ -2038,47 +2037,43 @@ export default {
|
||||
|
||||
// Prüft ob eine Linie ein rotiertes Rechteck schneidet
|
||||
isLineCrossingRect(rect, line) {
|
||||
// Konvertiere Linien-Koordinaten von absoluten Pixeln zu relativen (0-1)
|
||||
const originalTileSize = 640; // Aus der JSON-Datei
|
||||
const relativeLine = {
|
||||
x1: line.x1 / originalTileSize,
|
||||
y1: line.y1 / originalTileSize,
|
||||
x2: line.x2 / originalTileSize,
|
||||
y2: line.y2 / originalTileSize
|
||||
// Verwende absolute Pixel-Koordinaten (500x500px)
|
||||
const currentTileSize = 500; // Aktuelle Render-Größe
|
||||
|
||||
// Verwende Rechteck direkt in absoluten Koordinaten
|
||||
const absoluteRect = {
|
||||
x: rect.x,
|
||||
y: rect.y,
|
||||
width: rect.width,
|
||||
height: rect.height
|
||||
};
|
||||
|
||||
// Debug-Ausgabe bei jeder Kollisionsprüfung
|
||||
console.log('🔍 KOLLISIONS-DEBUG:');
|
||||
console.log('Taxi Rect (relativ):', rect);
|
||||
console.log('Taxi Position (absolut):', { x: this.taxi.x, y: this.taxi.y, width: this.taxi.width, height: this.taxi.height });
|
||||
console.log('Line (absolut aus JSON):', line);
|
||||
console.log('Line (relativ konvertiert):', relativeLine);
|
||||
console.log('Original Tile Size (JSON):', originalTileSize);
|
||||
console.log('Current Tile Size:', this.tiles.size);
|
||||
console.log('Taxi Angle:', this.taxi.angle);
|
||||
console.log('Taxi ImageAngle:', this.taxi.imageAngle);
|
||||
// Konvertiere Linien-Koordinaten von 640px zu absoluten Pixeln (500x500px)
|
||||
const absoluteLine = {
|
||||
x1: (line.x1 / 640) * currentTileSize,
|
||||
y1: (line.y1 / 640) * currentTileSize,
|
||||
x2: (line.x2 / 640) * currentTileSize,
|
||||
y2: (line.y2 / 640) * currentTileSize
|
||||
};
|
||||
|
||||
// Erstelle Polyline aus der Linie
|
||||
// Erstelle Polyline aus der absoluten Linie
|
||||
const polyline = [
|
||||
{ x: relativeLine.x1, y: relativeLine.y1 },
|
||||
{ x: relativeLine.x2, y: relativeLine.y2 }
|
||||
{ x: absoluteLine.x1, y: absoluteLine.y1 },
|
||||
{ x: absoluteLine.x2, y: absoluteLine.y2 }
|
||||
];
|
||||
|
||||
// Erstelle rotiertes Rechteck
|
||||
// Erstelle rotiertes Rechteck in absoluten Koordinaten (500x500px)
|
||||
const rotatedRect = {
|
||||
cx: rect.x + rect.width / 2, // Mittelpunkt X
|
||||
cy: rect.y + rect.height / 2, // Mittelpunkt Y
|
||||
cx: absoluteRect.x + absoluteRect.width / 2, // Mittelpunkt X
|
||||
cy: absoluteRect.y + absoluteRect.height / 2, // Mittelpunkt Y
|
||||
theta: this.taxi.imageAngle + this.taxi.angle, // Rotation
|
||||
hx: rect.width / 2, // halbe Breite
|
||||
hy: rect.height / 2 // halbe Höhe
|
||||
hx: absoluteRect.width / 2, // halbe Breite
|
||||
hy: absoluteRect.height / 2 // halbe Höhe
|
||||
};
|
||||
|
||||
// Verwende die robuste Kollisionserkennung
|
||||
const result = this.polylineIntersectsRotatedRect(polyline, rotatedRect);
|
||||
|
||||
// Debug-Ausgabe für Kollisionsergebnis (nur bei Fuel Horizontal Tiles)
|
||||
// Diese Funktion wird nicht direkt für Fuel Tiles verwendet, daher keine Debug-Ausgabe hier
|
||||
|
||||
return result.hit;
|
||||
},
|
||||
|
||||
@@ -3138,7 +3133,7 @@ export default {
|
||||
if (!wantH && !wantV) return;
|
||||
|
||||
const streetTileType = this.mapTileTypeToStreetCoordinates(tileType);
|
||||
const regions = streetCoordinates.getDriveableRegions(streetTileType, size);
|
||||
const regions = streetCoordinates.getDriveableRegions(streetTileType);
|
||||
if (!regions || regions.length === 0) return;
|
||||
|
||||
// Banddicke exakt 12px (bei Referenz 50px) skaliert auf aktuelle size
|
||||
|
||||
Reference in New Issue
Block a user