Question

I'm working on a simple script that will allow users to create games. I'm trying to use as simple an approach as possible for users, so I've have setup an image-to-path system, with some great help from @markE:

Canvas Black and White Image to Shape

A user selects a black and white image for a scene. That image is drawn to the canvas and the pixel information is stored to an array - then hidden. I can then reference the array and see if my character is standing on a white pixel or a black pixel. This allows users to quickly draw their owns paths for scenes.

I'm running into some trouble with my boundary detection though. While the character is walking, I'm checking boundaries at each step using this function (which returns true or false based on a white or black pixel):

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;
}

The REF is my main object being used for REF throughout the script and REF.sceneW is the width of the canvas. The reference point is on the bottom/middle of the Character.

I even created a little green dot to match the reference point so I can watch it while the character walks around the scene. Everything looks good and a boundary detection is recognized when the reference point hits the black/white line.

enter image description here

The problem happens when the character is standing on the black/white line and turns (shown above in the picture) - or with erratic movements. As soon as the reference point is in the black pixels (out of bounds)... it's game over.

Perhaps someone can point out an issue with my boundary checking function or recommend a game coding technique to use to keep the character in bounds? Am I missing something?!

Thanks!

UPDATE: I believe I have tracked the problem down to the step callback function inside the character animation. I'm using jQuery to do a few different things on the character during movement and the boundary detection is being called within the step callback... however this is called AFTER each step of the animation which is pushing the character into the black pixels - then calling the boundary detection. I believe this is the issue. Are there any workarounds?

Was it helpful?

Solution

You could save the last "valid" (in white area) x/y for the green dot. If the dot later moves to an invalid area, you could position the dot back to the last valid position.

Example code and a Demo: 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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top