在2d網頁遊戲中同步動畫片

我在2年前就在瀏覽器中構建了一個策略遊戲。它已經被一小羣人積極地扮演，所以它是一款有效的遊戲。我們的問題是它的資源飢餓。基本上你想要歌劇或鉻。 IE9或多或少無法播放，並且Firefox在某些地圖上可能會很慢。在2d網頁遊戲中同步動畫片

該遊戲是一個基於瓦片的自上而下的遊戲，使用64x64pixel DIV的地圖。

我們目前正處於最後階段，我們正在關注優化。吃資源的其中一件事就是我們的動畫水。我們有32個不同的水磚，每個水磚分成15個框架。因此，一個.gif文件中的480個64x64圖像是1.1 MB。

這裏是水的鏈接：http://www.warbarons.com/beta5/terrain/water/water2.gif

我們的遊戲採用戰爭迷霧隱藏的敵方單位和城堡，你不能看就像任何RTS遊戲。因此，在.gif的頂部通常會有一個具有透明PNG的圖層。

看來這個解決方案對瀏覽器的要求相當高。當我滾動地圖來顯示FireFox CPU的水位時，CPU會上升到25％，而當沒有水進入時，CPU會上升4-5％。

我一直在谷歌搜索幾天，現在試圖得到一個更好的技術的想法。我已經找到了另外兩種方式來做這件事，無論是用一個在電子表格上迭代的畫布標籤，還是使用CSS來循環顯示電子表格。

我看到這兩個選項的問題是，所有的水磚必須保持同步。如果一個人在另一個人之前開始遊戲，那麼這些浪潮不會同步，這將破壞無縫外觀。

我想知道有沒有人有想法解決這個問題？我知道有多個gif動畫會導致不同步的問題。

是否有一些切肉刀的方式使用畫布來做到這一點？甚至可以將畫布和div混合在一起，還是需要我們改變整個地圖引擎？

任何幫助將不勝感激。

來源

2011-10-03 Mattias Carlström

「因此，對.gif文件的頂部通常有一個透明的PNG層」 - 這不就是相當容易作弊？ – Flexo

當您加載遊戲時，您只知道從服務器獲取的信息。當你進入FOW時，對數據庫的Ajax調用將檢查你在移動過程中發現的所有圖塊。因此客戶沒有關於他不應該知道的事情的信息。 PNG只是在那裏表明你不能看到這方面的內容。 –

位新手解決問題並且很快，但是：要做好準備，請製作一張包含所有不同類型水貼圖的精靈表，並在左邊第一個框架中爲每個類型添加一個新行，下降。

與「隱藏」畫布
後面的「溢出」屬性創建<div>使畫布透明
在div的，你可以使用<div> S爲水磚的背景，調整其「邊距」屬性以匹配地圖的位置
爲他們提供所有類別名稱「水」，以及與水磚類型相匹配的類（例如「碼頭左岸」，「海灘上」等）。）
在您的<style>元素中，製作一個班級規則「。水'
給規則的'背景圖像'屬性，鏈接到任何和無論你的精靈表
對於每種類型的水瓦，創建一個類規則對應每個瓦片類型，並給他們對於精靈片
匹配y位置創建具有一個ID，一個新的<style>元件將包含所有的幀的背景位置
創建一個JavaScript變量conatin所有的x位置的背景
在你的遊戲循環中，當你想讓精靈改變時（直到它等於960，然後它0）
當變量的變化，設置新<style>元素的內容爲新的CSS規則爲它的「背景位置-X」使用可變

咩設置。我知道有一點，但比循環數組和吞噬系統資源更好，單獨更改每個元素（至少我是這麼認爲的）。這裏有一個簡單的代碼示例：

<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-01 21:46:04 FSFatScooter

在2d網頁遊戲中同步動畫片

回答

相關問題