Détection des limites

Je travaille sur un script simple qui permettra aux utilisateurs de créer des jeux. Je suis en train d'utiliser aussi simple que possible une approche pour les utilisateurs, donc j'ai ai installé un système à chemin d'image, avec une grande aide de @markE:Détection des limites

Canvas Black and White Image to Shape

Un utilisateur sélectionne un image en noir et blanc pour une scène. Cette image est dessinée sur le canevas et les informations de pixel sont stockées dans un tableau, puis cachées. Je peux ensuite référencer le tableau et voir si mon personnage se tient sur un pixel blanc ou un pixel noir. Cela permet aux utilisateurs de dessiner rapidement leurs propres chemins pour les scènes. Je rencontre cependant quelques problèmes avec ma détection de limite. Alors que le personnage marche, je vérifie les limites à chaque étape à l'aide de cette fonction (qui renvoie true ou false base sur un pixel blanc ou noir):

inBounds:function(REF){ 
    var obj=$(this), 
    CH=obj.outerHeight(true), 
    CW=obj.outerWidth(true), 
     L=obj.offset().left+(CW/2), 
     T=obj.offset().top+CH; 

return REF.pathData[(T * REF.sceneW + L)*4]>200; 
}

est mon REF Le principal objet utilisé pour REF tout au long le script et REF.sceneW est la largeur de la toile. Le point de référence est sur le bas/milieu du personnage.

J'ai même créé un petit point vert pour correspondre au point de référence afin que je puisse le regarder pendant que le personnage contourne la scène. Tout semble bien et une détection de limite est reconnue lorsque le point de référence atteint la ligne noire/blanche.

enter image description here

Le problème se produit lorsque le personnage est debout sur la ligne noire/blanche et tours (ci-dessus dans l'image) - ou avec des mouvements erratiques. Dès que le point de référence est dans les pixels noirs (hors limites) ... c'est fini.

Peut-être que quelqu'un peut signaler un problème avec ma fonction de vérification des limites ou recommander une technique de codage de jeu à utiliser pour garder le personnage dans les limites? Ai-je raté quelque chose ?!

Merci! Je crois que j'ai suivi le problème jusqu'à la fonction de rappel d'étape dans l'animation de caractères. J'utilise jQuery pour faire quelques choses différentes sur le personnage pendant le mouvement et la détection des limites est appelée dans le rappel de l'étape ... cependant, cela s'appelle APRÈS chaque étape de l'animation qui pousse le personnage dans les pixels noirs - puis appel de la détection des limites. Je crois que c'est le problème. Y a-t-il des solutions de contournement?

Source

2014-05-01 Aaron

Précisions s'il vous plaît :) Est-ce que vous voulez faire en sorte que l'utilisateur ne peut pas déplacer le point vert en dehors de la zone blanche? L'utilisateur déplace-t-il le point vert avec le clavier ou la souris? – markE

Correct :) L'utilisateur clique n'importe où sur l'écran qui commence l'animation. – Aaron

Vous pouvez enregistrer la dernière "valide" (en zone blanche) x/y pour le point vert. Si le point se déplace plus tard vers une zone non valide, vous pouvez remettre le point à la dernière position valide.

Exemple de code et une démonstration: http://jsfiddle.net/m1erickson/pq7QZ/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 
<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 
    var $canvas=$("#canvas"); 
    var canvasOffset=$canvas.offset(); 
    var offsetX=canvasOffset.left; 
    var offsetY=canvasOffset.top; 

    var PI2=Math.PI*2; 
    var greenX,greenY,lastValidGreenX,lastValidGreenY; 

    var data; 

    var img=new Image(); 
    img.onload=start; 
    img.crossOrigin="anonymous"; 
    img.src="https://dl.dropboxusercontent.com/u/139992952/multple/temp00.png"; 

    function start(){ 
     canvas.width=img.width; 
     canvas.height=img.height; 
     ctx.fillStyle="green"; 
     ctx.drawImage(img,0,0); 
     data=ctx.getImageData(0,0,canvas.width,canvas.height).data; 
     $("#canvas").mousemove(function(e){handleMouseMove(e);}); 
    } 

    function handleMouseMove(e){ 
     e.preventDefault(); 
     e.stopPropagation(); 
     greenX=parseInt(e.clientX-offsetX); 
     greenY=parseInt(e.clientY-offsetY); 

     var isWhite=(data[(greenY*canvas.width+greenX)*4]>200); 
     if(isWhite){ 
      lastValidGreenX=greenX; 
      lastValidGreenY=greenY; 
     }else{ 
      greenX=lastValidGreenX; 
      greenY=lastValidGreenY; 
     } 
     ctx.clearRect(0,0,canvas.width,canvas.height); 
     ctx.drawImage(img,0,0); 
     ctx.beginPath(); 
     ctx.arc(greenX,greenY,3,0,PI2); 
     ctx.closePath(); 
     ctx.fill() 


    } 

}); // end $(function(){}); 
</script> 
</head> 
<body> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

Source

2014-05-01 19:35:01 markE

Vous êtes génial! Je dois travailler un peu pour le modifier pour un clic, mais la logique était exactement ce qui me manquait. Merci un million! :RÉ – Aaron

Détection des limites

Répondre

Questions connexes