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

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

0 голосов
/ 07 февраля 2012

Я начинаю на KineticJS (и на Canvas) и создаю небольшую игру для обучения ... Сейчас у меня всего 2 слоя:

  • Сначала карта, составленная Kinetic..Image
  • Второй с последним разом, кто играет в дрото же самое, когда я заливаю событие click (который тоже запускает функцию рисования) ... Более того, я вижу на втором слое: старый текст никогда не очищается, новый добавляется сверху ...: / 
       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);

   };

    Извините, мой английский очень плохой.

    Спасибо всем.

1 Ответ

0 голосов
/ 08 февраля 2012

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

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

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

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

http://www.haxenme.org

...