2

自 2 年前以来，我一直在浏览器中构建策略游戏。它已经被一小群人积极玩过，所以它是一个有效的游戏。我们的问题是它的资源匮乏。基本上你想要歌剧或铬。IE9 或多或少无法播放，firefox 在某些地图上可能会很慢。

该游戏是一个基于瓷砖的自上而下的游戏，使用 64x64 像素的 DIV 作为地图。

我们目前处于结束阶段，我们正专注于优化。消耗资源的东西之一是我们的动画水。我们将 32 块不同的水块分成 15 帧。因此，一个 1.1 mb 的 .gif 文件中有 480 个 64x64 图像。

这是水的链接：http ://www.warbarons.com/beta5/terrain/water/water2.gif

我们的游戏使用战争迷雾来隐藏你看不到的敌方单位和城堡，就像任何 RTS 游戏一样。因此，在 .gif 之上通常有一个带有透明 PNG 的图层。

看起来这个解决方案对浏览器要求很高。当我滚动地图以显示 FireFox CPU 中的水时，CPU 会上升 25%，而当看不到水时，它会在 4-5% 左右。

我已经在谷歌上搜索了几天，试图了解更好的技术。我发现了另外两种方法，或者使用遍历电子表格的画布标签，或者使用 CSS 循环遍历电子表格。

我看到这两个选项的问题是所有水砖必须保持同步。如果一个人在另一个人之前开始播放，波浪将不会同步，这将破坏无缝的外观。

我想知道是否有人有解决这个问题的想法？我知道拥有多个 gif 动画会导致不同步问题。

有没有一些更巧妙的方法来使用画布来做到这一点？甚至可以将画布与 div 混合使用，还是需要我们更改整个地图引擎？

任何帮助将不胜感激。

4

1 回答 1

1

有点新手的工作和远景，但是：为了准备，制作所有不同类型的水砖的精灵表，第一帧在左边，每种类型都有一个新的行，向下下降。

  • 在画布后面创建一个<div>“隐藏”的“溢出”属性
  • 使画布的背景透明
  • 在 div 内部，您可以将<div>s 用于水瓦并调整它们的“边距”属性以匹配地图的位置
  • 给他们一个类名称“水”，以及一个与水瓦类型相匹配的类（如“dockleft”、“beachtop”等）
  • 在您的<style>元素中，创建一个类规则“.water”
  • 为规则提供“背景图像”属性，链接到您的精灵表所在的任何位置
  • 对于每种类型的水瓦，创建一个与每种瓦片类型对应的类规则，并为它们提供一个匹配的精灵表的 y 位置
  • 创建一个<style>具有 id 的新元素，该元素将包含所有帧的背景位置
  • 创建一个 javascript 变量来包含所有背景的 x 位置
  • 在你的游戏循环中，每当你希望精灵改变时，将变量递减 64（直到它等于 960，然后将其设置为 0）
  • 当变量改变时，使用变量将新<style>元素的内容设置为它的'background-position-x'的新CSS规则

嗯。有点多，我知道，但比遍历数组并吞噬系统资源、单独更改每个元素要好（至少我是这样认为的）。这是一个简化的代码示例：

<script type="text/javascript">
    var pos = 0; // background-position-x variable

    function loop() {
        document.getElementById('changeMe').innerHTML = ".water{background-position-x:" + pos + "px;}"; //changes the contents of the <style> with the id 'changeMe'
        //changes the <style> with id 'Change'
        pos -= (pos == 960) ? -960 : 64; //assuming your sprite-sheet is oriented horizontally
        setTimeout('loop();', 100);
    }
</script>


<style type="text/css">
    /* Remains unchanged */
    .water {
        width: 64px;
        height: 64px;
    background-image: url('spriteSheet.png');
    }
    .dockleft{
        background-position-y: 420px;

        /* If all of your sprites are on one sheet, you can set the
        'background-position-y' attribute for each type of water tile and 
        give the 'water' class one sprite-sheet url for all of the types */
    }
</style>


<style id="changeMe" type="text/css">
    /* Changed by 'loop()' */
</style>


<body onload="loop();">
    <div class="water dockleft"></div>
</body>
于 2012-01-01T21:46:04.613 回答