今日 Google 塗鴉:CSS Sprites 的原理

今日 Google 塗鴉:CSS Sprites 的原理

ADVERTISEMENT

蝦米!今天都過了一大半還來講解Google塗鴉衝蝦米?很多人可能都已經欣賞完今天的瑪莎葛蘭姆117歲誕辰動畫,關於她為什麼會動起來,其實並不是用以往常見的GIF動畫製成,背後也有一些好玩的背景知識,且聽我們娓娓道來:

如果我們以滑鼠右鍵來點選瑪莎女士的圖片,找到的只是一張她靜止不動的「起手式」而已,你得進一步查看原始碼,或者透過加裝Firebug擴充套件的Firefox瀏覽器(Chrome也有Firebug Lite)來找出其他的隱藏圖片,以及控制他們的程式碼。用Firebug解析會比較簡單,所以我們就用它來當小柯南。

今日 Google 塗鴉:CSS Sprites 的原理

▲在瑪莎的圖片上按右鍵>檢視圖片看看。

今日 Google 塗鴉:CSS Sprites 的原理

▲結果只有一張靜止不動的起手式,看來另有玄機。

今日 Google 塗鴉:CSS Sprites 的原理

▲安裝Firebug後,只要按右鍵>觀察元素,左下視窗就會彈出對應的原始碼。

Google首頁雖然簡潔,裡頭的原始碼也不少,透過Firebug便可直接跳到剛剛瑪莎的起手式圖片位置,這張graham11-hp-start.png的前後除了超連結的<a>標籤,再上一層還有一個<div>標籤,也就是被<div id=”hplogo”>和</div>包起來的,都是和瑪莎跳舞圖片相關的物件。

了解這一點之後,再往超連結關閉的</a>標籤往下看,會有一大串像這樣的圖片元件:

<div id="hplogo0" style="left: 307px; top: 48px; width: 88px; height: 89px; background: url("logos/2011/graham11-hp-sprite.png") no-repeat scroll 0px 0px transparent;"></div>

這些圖片從編號「hplogo0」一直遞增到了「hplogo154」,總共有155張,除了編號和其後的座標相關參數不斷微調之外,其中的「background: url("logos/2011/graham11-hp-sprite.png")」這一段是完全不變的,這是為什麼呢?把「logos/2011/graham11-hp-sprite.png」這張圖接到www.google.com網址後面,相信聰明如你一定可以馬上想到答案。

 

今日 Google 塗鴉:CSS Sprites 的原理

▲在瑪莎的圖片上按右鍵,再按「觀察元素」。

今日 Google 塗鴉:CSS Sprites 的原理

▲在起手式的圖片下方會有一大串後續的「分鏡圖」。

今日 Google 塗鴉:CSS Sprites 的原理

▲在網址列輸入www.google.com,再貼上logos/2011/graham11-hp-sprite.png就能看到隱藏版大圖(看原圖)。

發現了嗎?瑪莎跳舞的動畫,簡單的說就是把各個動作(frames)畫在同一張大圖上,再透過不同的座標和位移參數,串成一幅連環動畫而已。這時候好學的朋友舉手發問了:「為什麼不畫成一堆小圖,而是全部拼成一張呢?」這是因為你的瀏覽器每載入一張圖片,就會提出一次HTTP request,155張就是155次,在背景載入一張大圖,透過參數去變換它,會遠比傳155次request有效率得多,這樣的做法就叫做CSS Sprites。

Sprites這個字也相當有梗,喜歡研究遊戲設計的人應該會略知一二,在硬體資源有限的遊戲時代,比方說紅白機裡的瑪莉歐,會把瑪大叔所有的動作:跳躍、走路、蹲下等等拼成一張大圖,然後預先載入記憶體,再根據程式的指示秀出相關的部位。所以如果你在Google裡搜sprites,可以找到不少懷舊遊戲主角的各種姿勢圖片集,甚至有人已經幫你剪接成GIF檔,可以在論壇裡的大頭貼秀一下。

今日 Google 塗鴉:CSS Sprites 的原理

▲這是Google圖片搜尋Sprites的結果。

沒錯,這跟CSS Sprites做的事完全是異曲同工。而後期由於3D繪圖的盛行,Sprites也可以延伸解釋為將2D點陣圖片嵌入在3D場景的技術,回想一下你是不是曾經在遊戲場景裡看到一棵樹或一朵花,走近之後發現只是「紙片樹」或「紙片花」,那就是Sprites了。

當然啦,T客邦網站也有活用到Sprites的技術,你也找到了嗎?(Oops,好像完全沒提到瑪莎女士,再見)

黑眼bobo
作者

寫了超過十年的稿,以後還想繼續寫

使用 Facebook 留言
Quinn
4.  Quinn (發表於 2011年5月11日 23:08)
是logos/2011/graham11-hp-sprite.png
不是logo/2011/graham11-hp-sprite.png╯-__-)╯ ╩╩╯-__-)╯ ╩╩
黑眼bobo
6.  黑眼bobo (發表於 2011年5月11日 23:55)
※ 引述《Quinn》的留言:
> 是logos/2011/graham11-hp-sprite.png
> 不是logo/2011/graham11-hp-sprite.png╯-__-)╯ ╩╩╯-__-)╯ ╩╩

sorry,趕稿之下手眼不大協調,已修正
黑眼bobo
7.  黑眼bobo (發表於 2011年5月11日 23:57)
※ 引述《IIN》的留言:
> 感覺跟LF2有點像呢

是小朋友齊打交嗎?因為我是老頭子,所以跟這款不大熟 (≧▽≦)
Grz
8.  Grz (發表於 2011年5月12日 08:48)
我還正在想5/11都要過了怎麼bobo大還沒有出來說今天的咕狗doodles為什麼會動,還好有看到!上一課(≧▽≦)
0547a3952e3800472abd96253df670c1?size=48&default=wavatar
10.  hahaha (發表於 2011年5月12日 11:01)
突然想起以前家用電視遊樂器在8bit, 16bit的時代,
主機的主要功能規格, 除了發色數, 解析度, VRAM大小, 背景面數(layer)...等等, 通常也都是以畫面上能同時處理幾個角色(sprite)而不會延遲或破圖為一個主要的依據呢~ :D
黑眼bobo
11.  黑眼bobo (發表於 2011年5月12日 11:12)
那個年代應該很久遠了,小時只管玩,都沒注意到那些事,大型機台好像也會標榜這樣的性能
527b95c2984f18149b146b3db4142a76?size=48&default=wavatar
12.  Mr.J (發表於 2011年5月12日 12:42)
遊戲中的「紙片樹」或「紙片花」那叫"Billboard",
不是Sprite
D4aa12519670fe291cdcfcae3aa792a4?size=48&default=wavatar
14.  yesureadmin (發表於 2011年6月08日 10:37)
这个动作完全写下来,该是多么的复杂啊
發表回應
謹慎發言,尊重彼此。按此展開留言規則