1

大家见鬼！感谢您提供任何类型的帮助！所以，我正在尝试制作某种精灵游戏，但我在加载更多精灵时遇到了问题。精灵被加载到一个单独的 js 文件中。问题是它不会加载所有图像，当我移动它时它会出现裂缝，我并不是说它失败了，而是它没有加载所有图像并且角色有时会消失。

          engine.player = {};


          engine.player.sprite = [];

          engine.player.spriteIndex = 27;//the initial sprite the one that faces south



          engine.player.store = function(index, imgSrc) //function that store all  the img
          {
         var sprite = [new Image(), false];

        sprite[0].src    = imgSrc;
        sprite[0].onload = function()
   {
      sprite[1] = true;
   }

   engine.player.sprite[index] = sprite;
};



engine.player.retrieve = function(index)
{
   return engine.player.sprite[index][0];
};




engine.player.allLoaded = function() 
{
   var i;

   for(i=0; i<42; i++)//total number of img
   {
      if(engine.player.sprite[i][1] === false)
      {
         return false;
      }
   }

   return true;
};




engine.player.calcLoc = function()//starting calculating the possition on the screen
{
   var character = {
      width:  Math.ceil(engine.player.sprite[0][0].width),
      height: Math.ceil(engine.player.sprite[0][0].height)
   };

   var screen = {
      width:  engine.screen.width,
      height: engine.screen.height
   };


   var x = (screen.width  / 2) - (character.width / 2);
   var y = (screen.height / 2) - (character.height) + 8;


   return {left: x, top: y};
};




engine.player.draw = function()
{
   var loc = engine.player.calcLoc();

   engine.handle.drawImage(engine.player.sprite[engine.player.spriteIndex][0], loc.left, loc.top);//calculating the position acordanly to the top left corner 
};




engine.player.move = function(direction)
{
   var index, x, y;

   index = x = y = 0;

   engine.keyboard.canInput = false;

   switch(direction)//using the arrows to move the player
   {
      case 'up':    index = 0;  y =  1;     break; 
      case 'right': index = 24; x = -1;     break; 
      case 'left':  index = 39; x =  1;     break; 
      case 'down':  index = 27; y = -1;     break; 
   }

   var toX = engine.viewport.x + (engine.screen.tilesX / 2 - 0.5) - x;
   var toY = engine.viewport.y + (engine.screen.tilesY / 2 - 0.5) - y;

   if(engine.currentMap[toY] &&
      engine.currentMap[toY][toX] &&
      engine.currentMap[toY][toX].item)
   {
      engine.keyboard.canInput = true;
   }else{
      engine.viewport.playerOffsetX = x * 5;
      engine.viewport.playerOffsetY = y * 5;

      setTimeout(engine.player.animate, 200); 
      setTimeout(engine.player.reset, 100); 
   }

   engine.player.spriteIndex = index;
   engine.draw();
};





engine.player.animate = function()
{
   var x, y

   x = y = 0;

   switch(engine.player.spriteIndex)/cases that face the north, south, east, west 
   {
      case 0:   y =  11;    break;
      case 24:  x = -11;    break;
      case 27:  y = -11;    break;
      case 39:  x =  11;    break;
   }

   engine.player.spriteIndex++; //here is one of the two possible mistakes 


   engine.viewport.playerOffsetX = x;
   engine.viewport.playerOffsetY = y;

   engine.draw();
};







engine.player.reset = function()
{
   var index, x, y;

   x     = engine.viewport.x;
   y     = engine.viewport.y;
   index = 0;
   //and here is the big problem !!! here i most certainly made a mistake at these switch 
   switch(engine.player.spriteIndex)
   {
      case 1:
      case 2:
      case 3:
      case 4:
      case 5:
      case 6:
      case 7:
      case 8:
      case 9:
      case 10:
      case 11:
      case 12:
      case 13:
      case 14:
      case 15:
      case 16:
      case 17:
      case 18:
      case 19:
      case 20:
      case 21:
      case 22:
      case 23:  y--;    index = 0;  break;

      case 25:
      case 26:  x++;    index = 24; break;


      case 28:
      case 29:
      case 30:
      case 31:
      case 32:
      case 33:
      case 34:
      case 35:
      case 36:
      case 37:
      case 38:  y++; 
      index = 27;   break;

      case 40:
      case 41:  x--;    index = 39; break;




   }

   engine.viewport.x = x;
   engine.viewport.y = y;

   engine.keyboard.canInput = true;

   engine.viewport.playerOffsetX = 0;
   engine.viewport.playerOffsetY = 0;

   engine.player.spriteIndex = index;

   engine.draw();
}

精灵是通过这些函数加载的：

engine.start = function(mapData, x, y)
{
   engine.output('starting...');

   engine.viewport.x = x;
   engine.viewport.y = y;

   engine.tile.store(0, 'images/tile_black.png');
   engine.tile.store(1, 'images/tile_grass.png');
   engine.tile.store(2, 'images/tile_rock.png');

   engine.player.store(0, 'images/scientist_n0.png');
   engine.player.store(1, 'images/scientist_n1.png');
   engine.player.store(2, 'images/scientist_n2.png');
   engine.player.store(3, 'images/scientist_n3.png');
   engine.player.store(4, 'images/scientist_n4.png');
   engine.player.store(5, 'images/scientist_n5.png');
   engine.player.store(6, 'images/scientist_n6.png');
   engine.player.store(7, 'images/scientist_n7.png');
   engine.player.store(8, 'images/scientist_n8.png');
   engine.player.store(9, 'images/scientist_n9.png');
   engine.player.store(10, 'images/scientist_n10.png');
   engine.player.store(11, 'images/scientist_n11.png');
   engine.player.store(12, 'images/scientist_n12.png');
   engine.player.store(13, 'images/scientist_n13.png');
   engine.player.store(14, 'images/scientist_n14.png');
   engine.player.store(15, 'images/scientist_n15.png');
   engine.player.store(16, 'images/scientist_n16.png');
   engine.player.store(17, 'images/scientist_n17.png');
   engine.player.store(18, 'images/scientist_n18.png');
   engine.player.store(19, 'images/scientist_n19.png');
   engine.player.store(20, 'images/scientist_n20.png');
   engine.player.store(21, 'images/scientist_n21.png');
   engine.player.store(22, 'images/scientist_n22.png');
   engine.player.store(23, 'images/scientist_n23.png');

   engine.player.store(24, 'images/scientist_e0.png');
   engine.player.store(25, 'images/scientist_e1.png');
   engine.player.store(26, 'images/scientist_e2.png');

   engine.player.store(27, 'images/scientist_s0.png');
   engine.player.store(28, 'images/scientist_s1.png');
   engine.player.store(29, 'images/scientist_s2.png');
   engine.player.store(30, 'images/scientist_s3.png');
   engine.player.store(31, 'images/scientist_s4.png');
   engine.player.store(32, 'images/scientist_s5.png');
   engine.player.store(33, 'images/scientist_s6.png');
   engine.player.store(34, 'images/scientist_s7.png');
   engine.player.store(35, 'images/scientist_s8.png');
   engine.player.store(36, 'images/scientist_s9.png');
   engine.player.store(37, 'images/scientist_s10.png');
   engine.player.store(38, 'images/scientist_s11.png');

   engine.player.store(39,  'images/scientist_w0.png');
   engine.player.store(40, 'images/scientist_w1.png');
   engine.player.store(41, 'images/scientist_w2.png');


   engine.setMap(mapData);

   engine.draw();

   engine.keyboard.canInput = true;

   engine.output('done');
};
4

1 回答 1

1

你有很多图像可能是记忆问题。

但是当你制作精灵时的策略是为你的玩家提供一个包含所有动作的图像：这是一个精灵！

你只需要改变这张图片的背景位置，就可以制造出玩家在奔跑的错觉！这和视差一样！

看看这个有趣的帖子：http ://creativejs.com/2012/01/day-11-sprite-sheets/

在此您将看到两种策略：

  • 使用一个大图像文件进行挖掘并更改背景位置

  • 其他使用画布： http: //jsfiddle.net/ejTCy/7/你只会看到一个图像文件

请注意，您也可以使用 css 制作精灵表动画，并且始终只使用一个图像文件：http: //jsfiddle.net/simurai/CGmCe/

.hi {
    width: 50px;
    height: 72px;
    background-image: url("http://files.simurai.com/misc/sprite.png");

    -webkit-animation: play .8s steps(10) infinite;
       -moz-animation: play .8s steps(10) infinite;
        -ms-animation: play .8s steps(10) infinite;
         -o-animation: play .8s steps(10) infinite;
            animation: play .8s steps(10) infinite;
}

@-webkit-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-moz-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-ms-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@-o-keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

但是多字符呢？如果我有很多敌人，我*想象两种类型的 200 上百个敌人*！

好吧，您将获得所有动画的两个图像，每种类型的角色一个文件，这是同一回事！

希望能帮助到你 ！

如果您想了解更多信息，请询问！我喜欢精灵表游戏！

于 2013-09-24T22:22:57.833 回答