FPS 系统上的可用内存

Question

我从 KineticJS（和 Canvas）开始，我正在创建一个小游戏来学习...... 现在，我只有 2 层：

• 第一层是由 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，但您可以使用一种技术来提高性能使用画布就是使用多个画布元素，并变换它们的位置，而不是在单个表面上进行位图传输。

我对使用 Jeash 获得的结果非常满意，它已连接到 NME 的命令行工具中。该开发与使用 Flash 类似，但它将使用您的代码创建 HTML5 Canvas 应用程序。同一应用程序还能够以本机 C++ 和 OpenGL 或 SWF 字节码的形式发布到 Windows、Mac、Linux、iOS、Android、webOS 和 Flash。这为您提供了很多选项，可以为每个用户提供最佳体验。

http://www.haxenme.org