pictcode

define(["image_manager"], function(imageManager){

  var edOuterSize = {width:1000, height:800};//スプライト配置可能領域のサイズ、独自のスプライトの座標系

  var edInnerSize = {width:700, height:560};//画面表示領域のサイズ、独自のスプライトの座標系

  var dpInnerSize = {width:100, height:80};

  var edSpriteOriginalSize = 250;//エディタ上のスプライトのサイズ

  var edCenter = {x:0, y:0};//UIエディタの中心座標

  var edOuterLeftTop = {x:-edOuterSize.width/2, y:edOuterSize.height/2};

  var edInnerLeftTop = {x:-edInnerSize.width/2, y:edInnerSize.height/2};

  var edKnobSize = 50;

  var cvKnobRect = {x:0, y:0, width:-1, height:-1};

  //Canvasへの描画

  function drawSprites(canvas, canvasContext, sprites){

    var cvSize ={width:canvas.width, height:canvas.height};//canvasの座標系

    var cvCenter = {x:canvas.width/2, y:canvas.height/2};

    canvasContext.clearRect(0, 0, canvas.width, canvas.height);

    //CanvasとUIエディタの長さの単位の比

    var ceRatio;

    if (canvas.isUI) {

      ceRatio = cvSize.width/edOuterSize.width;

    }else{

      ceRatio = cvSize.width/edInnerSize.width;

    };

    //背景画像の描画

    if (canvas.isUI && canvas.canvasBackgroundImage) {

      canvasContext.drawImage(

        canvas.canvasBackgroundImage,

        (edOuterSize.width-edInnerSize.width)/2*ceRatio,

        (edOuterSize.height-edInnerSize.height)/2*ceRatio,

        canvas.width*edInnerSize.width/edOuterSize.width,

        canvas.height*edInnerSize.height/edOuterSize.height

        );

    }else{

      canvasContext.save();

      canvasContext.fillStyle = '#4682b4';

      canvasContext.fillRect(0, 0, canvas.width, canvas.height);

      canvasContext.restore();

    };

    //スプライト描画

    var targetSprite = null;

    _.each( sprites, function(sprite){

      if(sprite.type == "ghost"){

        return;

      };

      var edSpriteSize = getSpriteSize(sprite);

      var edSpriteLeftTop = {x:sprite.position.x-edSpriteSize.width/2, y:sprite.position.y+edSpriteSize.height/2};

      var cvSpriteLeftTop;

      if (canvas.isUI) {

        cvSpriteLeftTop = {x:(edSpriteLeftTop.x - edOuterLeftTop.x)*ceRatio, y:(edOuterLeftTop.y - edSpriteLeftTop.y)*ceRatio};

      }else{

        cvSpriteLeftTop = {x:(edSpriteLeftTop.x - edInnerLeftTop.x)*ceRatio, y:(edInnerLeftTop.y - edSpriteLeftTop.y)*ceRatio};

      };

      var cvSpriteSize = {width:edSpriteSize.width*ceRatio, height:edSpriteSize.height*ceRatio};

      var cvSpriteCenter = {x:cvSpriteLeftTop.x+cvSpriteSize.width/2, y:cvSpriteLeftTop.y+cvSpriteSize.height/2};

      sprite.drawnRect = {x:cvSpriteLeftTop.x, y:cvSpriteLeftTop.y, width:cvSpriteSize.width, height:cvSpriteSize.height};

      //スプライトの回転、描画

      canvasContext.save();

      canvasContext.translate(cvSpriteCenter.x, cvSpriteCenter.y);

      canvasContext.rotate(sprite.angle);

      if (sprite.mirrored) {

        canvasContext.transform(-1, 0, 0, 1, 0, 0);

      };

      canvasContext.translate(-cvSpriteCenter.x, -cvSpriteCenter.y);

      canvasContext.globalAlpha = sprite.opacity;

      if (sprite.images) {

        canvasContext.drawImage(sprite.images[sprite.animationCount], sprite.drawnRect.x, sprite.drawnRect.y, sprite.drawnRect.width, sprite.drawnRect.height);

      };

      canvasContext.restore();

      if (sprite.text || sprite.text == 0) {

        var textSize = Math.round(cvSpriteSize.width*0.25);

        canvasContext.save();

        canvasContext.font = "bold "+ textSize + "px " + "sans-serif";

        canvasContext.fillStyle = "black";

        canvasContext.textAlign = "center";

        canvasContext.textBaseline = "middle";

        canvasContext.fillText(sprite.text, cvSpriteCenter.x, cvSpriteCenter.y+cvSpriteSize.height*0.05);

        canvasContext.restore();

      };

      if (sprite.isTarget && canvas.isUI) {

        targetSprite = sprite;

        //十字線の描画

        canvasContext.save();

        canvasContext.lineWidth = 4;

        canvasContext.strokeStyle = "#ff0000";

        canvasContext.setLineDash([5, 5]);

        if (targetSprite.position.x > -edInnerSize.width/2 && targetSprite.position.x < edInnerSize.width/2) {

          canvasContext.beginPath();

          canvasContext.moveTo(cvSpriteCenter.x, (edOuterSize.height-edInnerSize.height)/2*ceRatio);

          canvasContext.lineTo(cvSpriteCenter.x, (edOuterSize.height+edInnerSize.height)/2*ceRatio);

          canvasContext.stroke();

        }

        if (targetSprite.position.y > -edInnerSize.height/2 && targetSprite.position.y < edInnerSize.height/2) {

          canvasContext.beginPath();

          canvasContext.moveTo((edOuterSize.width-edInnerSize.width)/2*ceRatio, cvSpriteCenter.y);

          canvasContext.lineTo((edOuterSize.width+edInnerSize.width)/2*ceRatio, cvSpriteCenter.y);

          canvasContext.stroke();

        }

        canvasContext.restore();

      };

    });

    //境界の描画

    canvasContext.save();

    canvasContext.lineWidth = 6;

    canvasContext.strokeStyle = "#8b4513";

    canvasContext.strokeRect(0, 0, canvas.width, canvas.height);

    if(canvas.isUI){

      canvasContext.strokeRect(

        (edOuterSize.width-edInnerSize.width)/2*ceRatio,

        (edOuterSize.height-edInnerSize.height)/2*ceRatio,

        canvas.width*edInnerSize.width/edOuterSize.width,

        canvas.height*edInnerSize.height/edOuterSize.height

        );

    }

    canvasContext.restore();

    if (targetSprite && canvas.isUI) {

      //四角い点線の描画

      canvasContext.save();

      canvasContext.lineWidth = 6;

      canvasContext.strokeStyle = "#ff0000";

      canvasContext.setLineDash([10, 10]);

      canvasContext.translate(targetSprite.drawnRect.x+targetSprite.drawnRect.width/2, targetSprite.drawnRect.y+targetSprite.drawnRect.height/2);

      canvasContext.rotate(targetSprite.angle);

      canvasContext.translate(-(targetSprite.drawnRect.x+targetSprite.drawnRect.width/2), -(targetSprite.drawnRect.y+targetSprite.drawnRect.height/2));

      canvasContext.strokeRect(targetSprite.drawnRect.x, targetSprite.drawnRect.y, targetSprite.drawnRect.width, targetSprite.drawnRect.height);

      canvasContext.restore();

      //ツマミの描画

      var cvKnobSize = edKnobSize * ceRatio;

      var rX = targetSprite.drawnRect.width/2;

      var rY = targetSprite.drawnRect.height/2;

      var cvKnobDistance = Math.sqrt(rX*rX + rY*rY);

      cvKnobRect = {

        x:targetSprite.drawnRect.x + targetSprite.drawnRect.width/2 + (Math.cos(targetSprite.angle)*rX-Math.sin(targetSprite.angle)*rY) - cvKnobSize/2,

        y:targetSprite.drawnRect.y + targetSprite.drawnRect.height/2 + (Math.cos(targetSprite.angle)*rY+Math.sin(targetSprite.angle)*rX) - cvKnobSize/2,

        width:cvKnobSize,

        height:cvKnobSize

      };

      canvasContext.drawImage(imageManager.images.ui_001, cvKnobRect.x, cvKnobRect.y, cvKnobRect.width, cvKnobRect.height);

      //座標の描画

      var textSize = Math.round(canvas.width*0.03);

      canvasContext.save();

      canvasContext.font = "bold "+ textSize + "px " + "sans-serif";

      canvasContext.fillStyle = "black";

      if (targetSprite.position.x > -edInnerSize.width/2 && targetSprite.position.x < edInnerSize.width/2) {

        var pX = Math.round((targetSprite.position.x + edInnerSize.width/2)*dpInnerSize.width/edInnerSize.width);

        canvasContext.fillText(pX, targetSprite.drawnRect.x+targetSprite.drawnRect.width/2-textSize*0.7, (edOuterSize.height+edInnerSize.height)/2*ceRatio+textSize);

      };

      if (targetSprite.position.y > -edInnerSize.height/2 && targetSprite.position.y < edInnerSize.height/2) {

        var pY = Math.round((targetSprite.position.y + edInnerSize.height/2)*dpInnerSize.height/edInnerSize.height);

        canvasContext.fillText(pY, (edOuterSize.width-edInnerSize.width)/2*ceRatio-textSize*1.6, targetSprite.drawnRect.y + targetSprite.drawnRect.height/2+textSize*0.4);

      };

      canvasContext.restore();    

    };

  }

  function getPositionInfo(sprites, x, y){

    var isOnSprite = false;

    var targetSprite;

    if (cvKnobRect.x<x && cvKnobRect.x+cvKnobRect.width>x && cvKnobRect.y<y && cvKnobRect.y+cvKnobRect.height>y) {

      return{target:"knob"};

    }

    for (var i=sprites.length-1; i>=0; i--){

      var sprite = sprites[i];

      if (sprite.type == "ghost") {continue;};

      if (sprite.drawnRect.x<x && sprite.drawnRect.x+sprite.drawnRect.width>x && sprite.drawnRect.y<y && sprite.drawnRect.y+sprite.drawnRect.height>y) {

        isOnSprite = true;

        targetSprite = sprite;

        break;

      }else{

      };

    };

    if (isOnSprite) {

      return{target:"sprite", sprite:targetSprite};

    }else{

      return{target:"canvas"};

    };

  }

  function getSpriteSize(sprite){

    var edSpriteSize;

    if (sprite.type == "background") {

      edSpriteSize = {width:edInnerSize.width*sprite.scale, height:edInnerSize.height*sprite.scale};

    } else{

      edSpriteSize = {

        width:edSpriteOriginalSize/(sprite.aspectRatio+1)*sprite.scale,

        height:edSpriteOriginalSize*sprite.aspectRatio/(sprite.aspectRatio+1)*sprite.scale

      };

    };

    return edSpriteSize;

  }

  return {

    drawSprites:drawSprites,

    getPositionInfo:getPositionInfo,

    editorOuterSize:edOuterSize,

    editorInnerSize:edInnerSize,

    dislayInnerSize:dpInnerSize,

    getSpriteSize:getSpriteSize,

  };

});