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