Pixelgenaue Kollisionserkennung in HTML5-Canvas

Ich bin kein javascript-Programmierer, aber ich könnte mir vorstellen, dass die gleiche Optimierung tricks funktionieren genauso gut für Javascript wie für C++.

Drehen Sie einfach die Ecken der sprite anstatt jedes pixel. Effektiv würden Sie etwas tun, wie software-texture-mapping. Sie können die x -, y-position eines pixels unter Verwendung verschiedener Gradienten-Informationen. Look-up-textur-mapping-software für mehr info.

Wenn Sie quadtree zerlegt das sprite in "Treffer" und "nicht-Treffer" Bereiche, dann konnte man effektiv überprüfen, um festzustellen, ob ein quad-tree-ZERLEGUNG ist alle "nicht-Treffer", "alle Treffer" oder "möglichen Treffer" (dh enthält die Treffer und nicht-Treffer Pixel. Die ersten 2 sind trivial zu passieren. Im letzten Fall gehen Sie dann bis zur nächsten Aufspaltung Ebene und wiederholen Sie den test. Auf diese Weise Sie überprüfen nur die Pixel, die Sie zu brauchen und für große Bereiche der "nicht-Treffer" - und "Treffer", die Sie nicht zu tun haben, wie eine komplexe Reihe von Prüfungen.

Eh das ist nur ein paar Gedanken.

Gleiche problem, eine alternative Lösung. Zuerst benutze ich getImageData Daten zu finden, die ein polygon um das sprite. Hier aufpassen, da die Implementierung arbeitet mit Bildern mit transparentem hintergrund, die einen einzelnen festen Gegenstand. Wie ein Schiff. Der nächste Schritt ist Ramer Douglas-Peucker-Algorithmus zu reduzieren, die Anzahl der Ecken im polygon. Ich bekomme endlich ein polygon mit sehr wenigen vertices einfach und Billig zu drehen und zu prüfen, Kollisionen mit den anderen Polygonen für jedes sprite.

http://jsfiddle.net/rnrlabs/9dxSg/

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var img = document.getElementById("img");

context.drawImage(img, 0,0);
var dat = context.getImageData(0,0,img.width, img.height);
//see jsfiddle
var startPixel = findStartPixel(dat, 0);
var path = followPath(startPixel, dat, 0);
//4 is RDP epsilon
map1 = properRDP(path.map, 4, path.startpixel.x, path.startpixel.y);

//draw

context.beginPath();
context.moveTo(path.startpixel.x, path.startpixel.x);
for(var i = 0; i < map.length; i++) {
    var p = map[i];
    context.lineTo(p.x, p.y);
}
context.strokeStyle = 'red';
context.closePath();
context.stroke();