-1

私は KineticJS (およびキャンバス) で開始し、学習用の小さなゲームを作成しています...現在、2 つのレイヤーしかありません。

  • 最初に、Kinetic.Image によって作成されたマップを使用します。
  • 引き分けで最後にゲームを行った 2 番目。

1秒あたりX回表示を更新したいのですが、20回または30回後、ゲームは本当に遅くなります..そして、イベントクリックをフラッディングするときも同じです(ドロー機能も起動します)...さらに、2番目のレイヤーで見ることができます: 古いテキストは決してクリーンではなく、新しいテキストが上に追加されます... :/

   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);

   };

すみません、私の英語は本当に下手です。

すべてに感謝します。

4

1 に答える 1

0

KineticJS を試している人を知っています。私自身は使用したことがないので、これ以上具体的なヘルプを提供できないことをお詫びします。

残念ながら、canvas で良好なパフォーマンスを得るのは非常に難しく、ブラウザーに大きく依存します。最後に確認したところ、Opera 12 と IE 9 は、2D レンダリングが 3D アクセラレーション (それぞれ OpenGL と Direct3D を使用) であるため、他のブラウザーよりも大幅に高速でした。

これが KineticJS に当てはまるかどうかはわかりませんが、canvas でパフォーマンスを向上させるために使用できる 1 つの手法は、複数の canvas 要素を使用し、単一のサーフェスでブリットするのではなく、それらの位置を変換することです。

NME のコマンドライン ツールに組み込まれている Jeash を使用して得た結果には、かなり満足しています。開発は Flash での作業に似ていますが、コードを使用して HTML5 Canvas アプリケーションを作成します。同じアプリケーションを、Windows、Mac、Linux、iOS、Android、webOS、および Flash に、ネイティブ C++ および OpenGL、または SWF バイトコードとして発行することもできます。これにより、各ユーザーに最高のエクスペリエンスを提供するための多くのオプションが提供されます。

http://www.haxenme.org

于 2012-02-08T06:00:26.053 に答える