FPS系统上的可用内存

Question

我开始KineticJS（并在画布上），我创造学习的一个小游戏... 现在，我刚才2层：

• 先用地图由Kinetic组成。图片
• 第二次与上次谁比赛谁抽签。

我想每秒，但经过20或30倍的游戏是很慢的刷新显示X时间。而当我一遇的洪水点击（谁也推出抽奖功能）... 而且它是相同的，我可以在第二层看到：老文从来都不干净，新的顶部加入...：/

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应用程序。同样的应用程序也可以发布到Windows，Mac，Linux，iOS，Android，webOS和Flash，作为本机C++和OpenGL，或者SWF字节码。这为您提供了很多选择，为每个用户提供最佳体验。

http://www.haxenme.org