PIXI.js 開發Canvas在觸控裝置瀏覽器捲動不觸發問題

PIXI.js 開發Canvas的內容，預設情況在觸控裝置下需要拖曳滾動瀏覽器卷軸時，會發現無法觸發卷軸滾動事件，原因是觸控拖曳與Canvas畫面中的拖曳事件相衝突，所以PIXI把觸控事件擋掉了。

如果你需要開啟瀏覽器拖曳滾動，可以加一行

renderer.plugins.interaction.autoPreventDefault = false;

renderer是你的PIXI.Renderer物件
如此便可開啟滾動拖曳，但是會有幾個問題需要注意
1.遊戲中的拖曳當然也會觸發卷軸滾動
2.滑鼠事件也會一起觸發，可以考慮統一使用滑鼠事件，不註冊觸控事件

Node.js 使用npm指令出現 Error: ENOENT, stat 錯誤

筆記備忘一下，也提醒需要的人

安裝Node.js後，一定會使用npm安裝需要的module

某些情況會遇到Error: ENOENT, stat 錯誤

請手動建立這個目錄

C:\Users\你的帳戶\AppData\Roaming\npm

之後即可正常使用

這封郵件來自 Evernote。Evernote 是您專屬的工作空間，免費下載 Evernote

Adobe AIR 輸出 IOS APP 在IOS 8無法上架問題

用Adobe AIR開發APP是相當方便的事，輸出IOS ipa必須要使用Mac 的Application Loader送審上架到APP Store。

最近IOS系統更新到了8，官方說明 Application Loader 的版本必須要升級到3.0以上 (一般來說，你可以直接更新你的XCode到最新版就行了)

不過使用 Application Loader 上傳時卻發生了問題

  ERROR ITMS-9000: "Invalid Segment Alignment. This app does not have proper segment alignment and should be rebuilt with the latest version of Xcode. Please contact Developer Technical Support if you need further assistance."

總之是因為目前的AIR SDK (我是用 AIR 15) 沒有顧慮到新版IOS 8的規格，以下提供解決方法。

首先下載修正版的SDK

Mac - https://dh8vjmvwgc27o.cloudfront.net/airsdk_ld64/archive_air_15.0_with_asc2_drm_sdk.tbz2 

Win - https://dh8vjmvwgc27o.cloudfront.net/airsdk_ld64/archive_air_15.0_with_asc2_drm_sdk.zip

(或者是直接覆蓋SDK中的這個修正檔案)

最後記得在 application.xml 檔案中的IOS設定檔<InfoAdditions>裡面加上這個key值

<key>MinimumOSVersion</key>

<string>6.1</string>

設定完成後輸出就可以正常送審了

這封郵件來自 Evernote。Evernote 是您專屬的工作空間，免費下載 Evernote

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。