Question

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

该游戏是一款基于平铺的自上而下游戏，使用64x64pixel DIV作为地图。

我们目前处于最后阶段，我们专注于优化。吃资源的一件事就是我们的动画水。我们有32块不同的水砖，每块水分成15帧。因此，一个.gif文件中的480 64x64图像为1.1 MB。

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

我们的游戏使用Fog of War隐藏敌人单位和城堡，就像任何RTS游戏一样。因此，在.gif之上通常会有一个带有透明PNG的图层。

这个解决方案似乎对浏览器要求很高。当我滚动地图以显示FireFox中的水时CPU上升到25％，而在没有水的情况下它大约为4-5％。

我一直在谷歌上搜索几天，试图了解更好的技术。我发现了另外两种方法，可以使用canvas标签迭代电子表格，也可以使用CSS循环遍历电子表格。

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

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

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

非常感谢任何帮助。

Answer 1

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

在画布后面创建一个“隐藏”溢出属性的<div>
使画布的背景透明
在div内部，您可以使用<div> s作为水砖并调整其“边距”属性以匹配地图的位置
给他们所有类别的“水”，以及与水瓦类型相匹配的类（如'dockleft'，'beachtop'等）
在<style>元素中，制作一个类规则'.water'
为规则指定'background-image'属性，链接到您的精灵表中的任何地方
对于每种类型的水砖，创建一个与每个瓷砖类型相对应的类规则，并为它们提供精灵表匹配的y位置
创建一个带有id的新<style>元素，其中包含所有帧的背景位置
创建一个javascript变量以控制所有背景的x位置
在你的游戏循环中，每当你想要精灵改变时，将变量递减64（直到它等于960，然后将其设置为0）
当变量发生变化时，使用变量

<style>

咩。我知道，有点多，但比循环数组和吞噬系统资源更好，单独更改每个元素（至少我假设如此）。这是一个简化的代码示例：

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

在2D网页游戏中同步动画拼贴

1 个答案: