環景VR導覽Demo

環景VR導覽，你可以拖曳畫面觀賞實景，使用Threejs貼個天空盒就行了，由於採用WebGL，舊版IE一定是不支援，行動裝置目前IOS可以使用，Android瀏覽器還不行 ，不過相信支援也是遲早的事。 另外放了兩隻馬力歐上去，這代表你可以放置任意的說明指標或只是其他相關連結

專案作品 - ITF競賽活動

遊戲流程
1.掃描RQ Code，按下參加比賽
2.最多可報名5人
3.按下網頁上的 Start Game 按鈕，開始比賽
4.依照手機上的操作進行遊戲

後面是一個很簡單的web socket交換器
網頁是pixijs寫的Canvas遊戲

Html5 fullscreen API (全螢幕)

開發Html5 game還是希望讓瀏覽器全螢幕比較有感覺吧!

現在可以直接使用短短的語法來完成這個功能。

以下讓gameCanvas這個div全螢幕顯示(一般來說應該是你遊戲畫面的Canvas)

var gameCanvas = document.getElementById("gameCanvas");

然後把全螢幕的API綁在一個互動事件上(沒有綁事件的話，會沒有作用)

//綁在事件上

$("startGame").click(function(){ 

     //以下各瀏覽器適性

     if(gameCanvas.requestFullScreen) {
          gameCanvas.requestFullScreen();
     } else if(gameCanvas.webkitRequestFullScreen ) {
          gameCanvas.webkitRequestFullScreen();
     } else if(gameCanvas.mozRequestFullScreen) {
          gameCanvas.mozRequestFullScreen();
     }

});

Evernote 幫您記住生活的點點滴滴，輕鬆保持條理。下載 Evernote。

Html5 Audio 在行動裝置上的播放問題

之前開發Html5遊戲有遇到一個問題，在此備忘一下，也給有需的朋友參考。

Html5 Audio標籤可以很容易直接撥放音效。

瀏覽器可以支援mp3格式的狀況下只要先建立一個Audio物件

var audio = new Audio('bgm.mp3');

遊戲中需要播放這個音效時只要

audio.play();

就可以直接撥放這個音效。

這個方法在PC的瀏覽器上沒有任何問題，但是到行動裝置上卻發現無法撥放。

原因是 Audio 物件在行動裝置中的載入動作需要綁定在一個Touch事件上。

最後我是在頁面上，做了一個開始按鈕 ，按下時也同時載入音效資源。

記得不管用拐用騙，總之放一個按鈕讓user去觸發Touch事件就對了，如果沒有綁在事件上，load()都是沒有作用的。

var audio = new Audio('bgm.mp3');

$("#btn").click(function(){

         audio.load();

});

載入完成之後就可以快樂的使用 audio.play(); 來播放音效了

備註:

audio.oncanplaythrough = function(){
     //載入完成}

audio.onended = function(){       

     //播放完成  

}
關於Audio在行動裝置上autoPlay的支援度可以參考下文
http://pupunzi.open-lab.com/2013/03/13/making-html5-audio-actually-work-on-mobile/

Evernote 幫您記住生活的點點滴滴，輕鬆保持條理。下載 Evernote。

JavaScript函式庫 - 網頁頁籤動畫圖標

網頁頁籤動畫圖標

可以讓你的頁籤作出類似 IOS 推播的效果

Flash vs. HTML5 Stage3D vs. WebGL 

WebGL還沒準備就緒。它只是沒有足夠的瀏覽器來使人們在使用任何大眾遊戲時重視它。但是，如果現在每個人都支持WebGL瀏覽器呢？是否有競爭力？今天的文章將探討這個問題。你會看到什麼樣的遊戲能用HTML5和WebGL，並比較其與Stage3D硬件加速Flash的性能。

對於今天的測試，還是使用本系列前面測試中的位圖，我已經準備好了新的基於WebGL的HTML5版本。我使用基於Starling像Pixi.js  2D層。Pixi.js的一大優勢是，當WebGL不可用時，它會自動回落到普通的“2D”canvas。這可以讓我輕鬆地測試瀏覽器，不處理WebGL在各種環境中得到一個完整的性能。

只是在這麼多設備和這麼多瀏覽器上運行這些測試已經教了我很多。例如，在Android上的Firefox（我已經加入到今天的測試）顯示了幾個“未響應”對話框後，最後才運行了幾秒鐘，完全停止幾秒鐘，顯示“未響應”對話框，然後才穩定運行。一直以來UI是奇慢無比的，瀏覽器經常死機。啟動的過程是痛苦的，但它最終運行了。在HTC Evo V 4G中儘管無數次的嘗試，仍不會運行任何Alpha圖像。

Android上的Google Chrome沒有默認啟用WebGL。你必須進行一些神秘的"實驗" 來啟用它或使用默認的緩慢的“2D”canvas。最終實際上會有多少用戶啟用它？我不知道，但我猜，幾乎沒人會懶得弄。

Android瀏覽器在LG Optimus G上聲稱有一個WebGL環境，顯示腳本超時對話框，然後呈現約20個白色sprite。我已經取消它，因為其輸出從未正確。HTC EVO V 4G它只是簡單的在2D環境中渲染。試著測試一下，看看自己的結果，然後再看下面我的結果。Flash測試沒有變，還是上次的Stage3D版本。

運行HTML5版本測試

運行Flash版本測試

可以直接打開HTML文件獲取HTML5版本的源碼。它包含的是在img標籤中的base64編碼圖片

下面是測試的設備：

[tr]

Name	CPU	GPU	OS
MacBook Pro Retina	2.3 GHz Intel Core i7	NVIDIA GeForce GT 650M	OS X 10.8.3
Windows Desktop	3.4 GHz Intel Core i7 2600	Nvidia GeForce GTX 550 Ti	Windows 7 SP 1
iPad 2	1 GHz ARM Cortex-A9	PowerVR SGX543MP2	iOS 6.1.3
LG Optimus G	1.5 GHz Qualcomm Krait	Qualcomm Adreno 320	Android 4.1
HTC Evo V 4G	1.2 GHz Qualcomm Snapdragon	Qualcomm Adreno 220	Android 4.0

下面是测试的结果：

Device	Opaque Rotation	Opaque Scaling	Opaque Rotating & Scaling	Alpha Rotating	Alpha Scaling	Alpha Rotating & Scaling
HTC Evo V 4G – Android 4 Browser (2D)	0.7	0.8	0.6	0.7	0.8	0.6
HTC Evo V 4G – Firefox 21 (WebGL)	5.6	9.8	6.1	n/a	n/a	n/a
HTC Evo V 4G – Google Chrome 27 (2D)	0.4	0.4	0.3	0.3	0.4	0.3
HTC Evo V 4G – Google Chrome 27 (WebGL)	8.1	10.2	5.5	7.9	9.6	7.8
Apple iPad 2 – Safari (2D)	2.6	2.6	2.5	2.6	2.6	2.5
Apple iPad 2 – Google Chrome 27 (2D)	1.5	1.6	1.5	1.5	1.6	1.5
LG Optimus G – Android Browser (WebGL)	n/a	n/a	n/a	n/a	n/a	n/a
LG Optimus G – Firefox 21 (WebGL)	4.3	12.1	5.2	7.3	10.8	7.5
LG Optimus G – Google Chrome 27 (2D)	0.7	0.7	0.7	0.7	0.7	0.6
LG Optimus G – Google Chrome 27 (WebGL)	12.7	13.8	12.3	11.7	12.7	9.6
Motorola Xoom – Android 4 Browser (2D)	0.9	0.9	0.7	0.9	0.8	0.7
Motorola Xoom – Firefox 21 (WebGL)	5.3	5	4.4	5.1	5.1	4.6
Motorola Xoom – Google Chrome 27 (2D)	0.7	0.7	0.7	0.7	0.7	0.7
Motorola Xoom – Google Chrome 27 (WebGL)	7.2	7.5	6.5	7.6	7.8	6
MacBook Pro Retina – Google Chrome 27 (WebGL)	60	60	60	60	60	60
MacBook Pro Retina – Firefox 21 (WebGL)	60	60	60	60	60	60
MacBook Pro Retina – Safari 6 (WebGL)	20	20	20	20	20	20
MacBook Pro Retina – Flash Player 11.7	60	60	60	60	60	60
Windows Desktop – Google Chrome 27 (WebGL)	60	60	60	60	60	60
Windows Desktop – Firefox 21 (WebGL)	60	60	60	60	60	60
Windows Desktop – Internet Explorer 10 (2D)	18.1	19.7	12.6	21.8	19.1	13.3
Windows Desktop – Flash Player 11.7	60	60	60	60	60	60

這些結果能說明什麼呢？HTML5與往常一樣，結果都是紙上談兵。一般來說，2D環境下的性能在Android上是1FPS,IOS上是1-3FPS.如果你足夠幸運，有WebGL，那麼你可以預期4-10 FPS。當然，你要在移動設備上使用WebGL的唯一方法是，用戶正在使用Firefox或者通過不情願的步驟在Chrome上啟用WebGL。根據2013年6月的統計，這意味著只有不到1.65%的用戶會在移動設備上使用WebGL。當然，這些結果來自於從低（如ipad1）到高（如ipad4）的設備. 

桌面完全是另外一回事。當一切順利的話，它們真的很好。Flash在Chrome,和Firefox上輕鬆達到60FPS .事實上，我曾嘗試在MacBook Pro Retina的Chrome中測試40,000個sprite而不是10,000個，它仍然可保持60FPS.Safari瀏覽器在所有測試中莫名其妙的為20FPS 。IE甚至IE10中，沒有WebGL的，會回落到令人沮喪的12-21PFS.總而言之，約40%的桌面瀏覽器可使用WebGL。

HTML5是極不穩定的。如果你突破這種限制，你的玩家/用戶可能會忍受瀏覽器崩潰，用戶界面反應遲鈍，莫名其妙地性能不佳。有很大的可能，如果不使用WebGL將會造成桌面瀏覽器中性能下降20倍，移動設備中下降3-15倍。即使這樣，有很多3D性能只是繪製一堆2Dsprite。目前2D遊戲很流行，尤其是移動和社交休閒市場。但今天的測試中不強調大型的三角網格，複雜的著色器等。

如果你想製作一個想運行在瀏覽器中的遊戲，不要期望其渲染超過紅白機遊戲。或許不是。Super Mario 移植版本在HTC Evo V 4G的Chrome上運行很慢。即使Pong 移植似乎運行約1FPS,所有的都無法使用。同時，大量的本地安裝應用程序很複雜。如果你想需要WebGL,你也許能夠處理非常簡單的遊戲，Run Pixie Run ，Pixi.js的一個Demo,不太穩定但在HTC EVO V 4G開啟了WebGL的Chrome上勉強可玩。關閉WebGL的大多數用戶會看到什麼，你回到了1FPS：無法播放。

另一方面，Flash's Stage3D是穩定的，無論在什麼操作系統什麼瀏覽器上運行。你能在現代Windows和Mac計算機上達到60 FPS上限。因為它不在作為瀏覽器的插件了，所以不能直接比較。你需要AIR來安裝app，在這種情況下，肯定不能和HTML5比較了。這將導致一個不幸的結論：基於瀏覽器的遊戲隨處可見，並沒有一個高性能的解決方案。對移動端來說，不同型號對應不同性能。IOS甚至都有5種不同型號的iPad，6種不同的iPhone以及5種不同的itouch和ipod。Android設備更是數不勝數。因此很難得到全面的手機性能測試，因為很少有人有那麼多手機。我當然沒有。但是看到此文章的人可能會打開手機上的瀏覽器然後運行上述的測試。想發表自己的測試結果嗎？發表評論吧，要帶上手機設備名字，圖片的alpha值，以及透明度，如果願意還可以加上CPU與GPU數據。
原文鏈接：http://jacksondunstan.com/articles/2289