Свободная память на системе FPS

Question

я начинаю на KineticJS (и на холсте), и я создаю небольшую игру для узнать ... Прямо сейчас, у меня есть только два слоя:

• Первые с картой состоит из 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. Я не использовал его сам, поэтому извиняюсь, что не могу предоставить более конкретную помощь.

К сожалению, очень сложно получить хорошую производительность с помощью холста, и это сильно зависит от браузера. Последнее, что я проверил, Opera 12 и IE 9 выполняются значительно быстрее, чем другие браузеры, поскольку их 2D-рендеринг 3D-ускорен (с использованием OpenGL и Direct3D, соответственно)

Я не уверен, применим ли это к KineticJS, использование для улучшения производительности с помощью холста состоит в том, чтобы использовать несколько элементов холста и преобразовывать их позиции, а не бить на одну поверхность.

Я был доволен результатами, которые я получил с помощью Jeash, который подключен к инструментам командной строки NME. Разработка похожа на работу с Flash, но она создаст приложение Canvas HTML5, используя ваш код. Это же приложение также сможет публиковать в Windows, Mac, Linux, iOS, Android, webOS и Flash, как на родном C++, так и на OpenGL или в качестве SWF-байт-кода. Это дает вам множество возможностей для обеспечения наилучшего опыта для каждого пользователя.

http://www.haxenme.org