Question

我从KineticJS（以及Canvas）开始，我正在创建一个用于学习的小游戏...... 现在，我只有两层：

首先使用由Kinetic.Image
第二次与最后一次比赛为平局。

我希望刷新显示X每秒的时间，但是在20或30次游戏之后真的很慢..而且当我点击事件点击（也启动绘图功能）时它也是一样的... 此外，我可以在第二层看到：旧文本从不干净，新的添加在顶部......：/

   var stage;
   var layers = {};

   var CANEVAS_WIDTH = 800;
   var CANEVAS_HEIGHT = 600;

   var MAP_WIDTH    = 10;
   var MAP_HEIGHT   = 10;

   var MAPPING_WIDTH = 150;
   var MAPPING_HEIGHT = 88;

   var LEFT_X   = 0;
   var LEFT_Y  = MAP_WIDTH*MAPPING_HEIGHT/2;
   var TOP_X   = MAP_WIDTH/2*MAPPING_WIDTH;
   var TOP_Y   = 0;

   var VIEW_X   = 0;
   var VIEW_Y  = 0;

   var CURSOR_X = 6;
   var CURSOR_Y = 0;

   var images = {};

   function loadImages(sources, callback)
   {
       var loadedImages = 0;
       var numImages = 0;

       // get num of sources
       for (var src in sources) 
           numImages++;

       for (var src in sources) 
       {
           images[src] = new Image();
           images[src].onload = function(){
               if (++loadedImages >= numImages) 
                   callback();
           };
           images[src].src = sources[src];
       }
    }

    function getMouseInfo(mousePos)
    {
        var info = {screen_x   : mousePos.x, 
                    screen_y   : mousePos.y,
                    mouse_x      : mousePos.x+VIEW_X,
                    mouse_y      : mousePos.y+VIEW_Y-LEFT_Y,
                    onMap      : 0,
                    map_x      : -1,
                    map_y      : -1};

       map_x = -(info.mouse_y - ((LEFT_Y * info.mouse_x) / TOP_X)) / MAPPING_HEIGHT;
       map_y = -(-info.mouse_y - ((LEFT_Y * info.mouse_x) / TOP_X)) / MAPPING_HEIGHT;

       if(map_x >= 0 && map_x < MAP_WIDTH && map_y >= 0 && map_y < MAP_HEIGHT)
       {
           info.map_y = parseInt(map_y);
           info.map_x = parseInt(map_x);
           info.onMap = 1;
       }
       return info;
    }

    function draw()
    {
        drawMap();
        drawFPS();

        stage.add(layers.mapLayer);
        stage.add(layers.fpsLayer);
   }

   function drawFPS()
   {         
       layers.fpsLayer.clear();
       var fps = new Kinetic.Shape(function(){
           var date = new Date();
           var time = date.getTime();

           var context = this.getContext();
           context.beginPath();
           context.font = "12pt Calibri";
           context.fillStyle = "red";
           context.fillText("FPS : "+time, 10, 20);
       });

      layers.fpsLayer.add(fps);
   }

   function drawMap()
   {
       var x=0,y=0;

       layers.mapLayer.clear();

       var s = new Kinetic.Shape(function(){
            var context = this.getContext();
            context.beginPath();
            context.rect(0, 0, CANEVAS_WIDTH, CANEVAS_HEIGHT);
            context.fillStyle = "#000";
            context.fill();
            context.closePath();
       });
       layers.mapLayer.add(s);


       for(x=0; x<MAP_WIDTH; x++)
          for(y=0;y<MAP_HEIGHT; y++)
          {
              var img = new Kinetic.Image({
                    image: ((x==CURSOR_X && y==CURSOR_Y)?images.testMapCursor:images.testMap)
              });
              img.x = x*MAPPING_WIDTH/2 + y*MAPPING_WIDTH/2 - VIEW_X;
              img.y = (MAP_WIDTH-1)*MAPPING_HEIGHT/2 - x*MAPPING_HEIGHT/2 + y*MAPPING_HEIGHT/2 - VIEW_Y;

              layers.mapLayer.add(img);
           }

    }

    function changeCursorPosition(cursor_x, cursor_y)
    {
        CURSOR_X = cursor_x;
        CURSOR_Y = cursor_y;

        draw();

    }

    function initStage()
    {   
        layers.mapLayer = new Kinetic.Layer();
        layers.fpsLayer = new Kinetic.Layer();

        draw();
    }

      /*
       * INIT
       */   

    window.onload = function(){   

       stage = new Kinetic.Stage("container", <?=CANEVAS_WIDTH;?>, <?=CANEVAS_HEIGHT;?>);

       stage.on("mousemove", function(){
           var mouseInfo = getMouseInfo(stage.getMousePosition()); 

           if(mouseInfo.onMap)
               document.body.style.cursor = "pointer";
           else
               document.body.style.cursor = "default";
       });

       stage.on("mousedown", function(){
           var mouseInfo = getMouseInfo(stage.getMousePosition()); 

           if(mouseInfo.onMap)
               changeCursorPosition(mouseInfo.map_x, mouseInfo.map_y);
      });

      var sources = {
          testMap         : "testMap.png",
          testMapCursor   : "testMapCursor.png"
      };

      loadImages(sources, initStage);

   };

抱歉，我的英语真的很糟糕。

谢谢大家。

Answer 1

我知道有人在尝试KineticJS。我自己没有用过它，所以我很抱歉我无法提供更具体的帮助。

不幸的是，使用canvas获得良好的性能非常困难，并且它在很大程度上取决于浏览器。最后我检查过，Opera 12和IE 9的表现明显快于其他浏览器，因为他们的2D渲染是3D加速的（分别使用OpenGL和Direct3D）

我不确定这是否适用于KineticJS，但是您可以使用一种技术来提高画布的性能是使用多个画布元素，并转换它们的位置而不是在单个表面上进行blitting。

我对使用Jeash的结果感到非常满意，后者连接到NME的命令行工具。该开发类似于使用Flash，但它将使用您的代码创建HTML5 Canvas应用程序。同样的应用程序也可以作为本机C ++和OpenGL或SWF字节码发布到Windows，Mac，Linux，iOS，Android，webOS和Flash。这为您提供了很多选择，可以为每个用户提供最佳体验。

http://www.haxenme.org

FPS系统上的可用内存

1 个答案: