圖轉貼自CreativeApplications.Net,部分文翻譯自CreativeApplications.Net

原文網址 http://www.creativeapplications.net/android/mobile-app-development-processing-android-tutorial/

 

Processing為一套提供使用者製作圖形、動畫、互動內容的開放原始碼開發工具(環境)。非常適合比較沒有程式碼撰寫經驗的設計師、藝術家、研究者等人使用。

PS. 筆者部落格中也有關於NyARToolKit於Processing上製作擴增實境內容之範例。對Processing製作AR擴增實境的人歡迎參考。

 

本篇則是將CreativeApplications.Net上一篇關於以Processing撰寫Android Application的教學部分翻譯至本文中。

正文開始:

利用Processing製作一個Android上的應用程式非常的簡單。有多簡單呢?本篇教學將花不到您25分鐘即可建立一個Android應用程式。

** 跟著這篇教學,你並不需要一台Android手機。安裝最新版的Processing,已經有內建模擬器(emulator)。

** 在開始跟著教學之前,強烈建議您確認電腦有安裝Java 執行環境。Mac使用者可以直接點選[軟體更新],Windows使用者可以到Java網站下載最新執行環境。

 

 

步驟一:安裝Android SDK

SDK (Software Development Kit) 即為軟體開發套件,我們可以輕鬆的下載後安裝,就可以開始協助我們開發應用程式。

請至下述網址安裝符合自己電腦作業系統之SDK:

http://developer.android.com/sdk

檔案下載回來後,需要解壓縮。

以Mac為例,解壓縮完畢會有一個名稱類似於"android-sdk-mac_x86"的資料夾,將此資料夾移動到硬碟中安全的目錄下,以免誤刪。

接著,進入該資料夾下的"tools"目錄中,滑鼠雙擊"android"檔案,此時會啟動terminal(終端機),並自動開啟 Android SDK和AVD manager,如下所示:

接著,我們要利用這個AVD Manager安裝Android應用程式在編譯時所需的套件,點擊左方欄位列表的"Available Packages",並將視窗中間的圈選框打勾。

接下來就會有一串可供下載的清單:

我們可以安裝所有的套件,或是只選擇其中幾個較新的安裝,最後按下"Install Selected"按鈕,接著按"Accept All" "Install" 即開始安裝。

現在,我們便準備好 Processing Android 所需的套件囉。

 

步驟二:下載可開發 Android 的 Processing IDE

原本已經是 Processing 的使用者,提醒您檢查一下您 Processing IDE 的版本號,請於以下網址下載並安裝最新版 Proceesing (撰寫此篇文章時最新版本號為 0190,搶鮮版為 0191):

http://www.processing.org/download/

詳細的Processing Android資訊可參考:

http://wiki.processing.org/w/Android

 

 

步驟三:製作Android應用程式!

在我們製作複雜的應用程式之前,我們先以一個簡單的sketch初試牛刀,以下的程式碼希望在橘色背景的畫布正中間畫出一個白色方塊:

 


void setup() {
   size(480,800);

   smooth();
   noStroke();
   fill(255);
   rectMode(CENTER);     //This sets all rectangles to draw from the center point
};


void draw() {
   background(#FF9900);
   rect(width/2, height/2, 150, 150);
};

 

如果我們直接按下 Run 按鈕 (或 Apple+R),Processing 會編譯我們的sketch,並在一個新的視窗中以 Java Applet 執行,此為Processing最基本的編譯與執行行為。當然,您也可以在選單列中選 "Sketch > Present",那麼便會在全螢幕的狀態下執行您的sketch。若選擇 "File > Export" 則能將sketch編譯成 Java Applet binary,可以供您匯入網頁中。而 "File > Export Application" 則可以產生一個可獨立執行的執行檔,只要電腦中有 Java 執行環境,都可執行該程式,因此您可以將自己撰寫的程式分享給朋友 :-D。

以上三種編譯功能都與Android模式不同,什麼?Android模式?沒錯,再新的Processing中增加了一個重要的新功能,我們可以直接在Processing裡面撰寫Android Application!而程式碼的撰寫方式(語法)就如同往常您撰寫一般的Processing一樣!

從選單列中,我們可以發現以前未見過的"Android"標籤,按下去後會有一個清單,請選擇"Android Mode",我們便來瞧瞧剛剛那個簡易的sketch在Android Mode下run(編譯並執行)會是什麼樣子吧!

* 如您在編譯與執行時,發生錯誤。請檢察您的Android SDK 有否正確安裝,並盡量更新到最新版本。

* 請注意!模擬器(emulator) 執行時需要一段時間(筆者在Core 2 Duo 2.53G/ 4G DDR3的MBP上,仍需一段時間,而且動作有點慢)。

若您覺得在模擬器上執行Android 應用程式不夠刺激,沒關係,接下來我們要將這些畫面放到Android手機上!

 

步驟四:在Android手機上執行程式!

重要:要讓您撰寫的Android應用程式在手機上正常運作,請務必要確認手機中 "USB除錯模式" 有打開!該功能在手機的"設定>應用程式>開發"中。如果您是Windows使用者,以可能需要作一些額外的安裝

 

將您的Android裝置(手機)透過USB接到電腦上後,請在Processing的選單列中執行 "sketch > present"(或按Shift+Apple+R)即可。

 

非常好!如果以上步驟您都正常完成,且還想嘗試具有互動性的範例程式碼的話,請試試接下來的程式碼:

 

 


/*
World's simplest Android App!
blprnt@blprnt.com
Sept 25, 2010
*/


//Build a container to hold the current rotation of the box
float boxRotation = 0;


void setup() {
  //Set the size of the screen (this is not really necessary in Android mode, but we'll do it anyway)
  size(480,800);
  //Turn on smoothing to make everything pretty.
  smooth();
  //Set the fill and stroke colour for the box and circle
  fill(255);
  stroke(255);
  //Tell the rectangles to draw from the center point (the default is the TL corner)
  rectMode(CENTER);

};


void draw() {
  //Set the background colour, which gets more red as we move our finger down the screen.
  background(mouseY * (255.0/800), 100, 0);
  //Chane our box rotation depending on how our finger has moved right-to-left
  boxRotation += (float) (pmouseX - mouseX)/100;

  //Draw the ball-and-stick
  line(width/2, height/2, mouseX, mouseY);
  ellipse(mouseX, mouseY, 40, 40);

  //Draw the box
  pushMatrix();
    translate(width/2, height/2);
    rotate(boxRotation);
    rect(0,0, 150, 150);
  popMatrix();
};

一樣,我們使用 Present 功能(Shift+Apple+R)在 Android 手機上執行 sketch!

 

我們可以以手指頭在Android上與小方塊互動囉!

Have Fun :-)

創作者介紹

DKBLOG

DK 發表在 痞客邦 PIXNET 留言(5) 人氣()


留言列表 (5)

發表留言
  • fish1342
  • 請問processing只可以接受NyARToolKit嗎 ?ARToolKit也可以嗎 ?
  • NyARToolKit有for Android版喔!所以不用透過processing了

    DK 於 2012/10/24 23:37 回覆

  • 誌陽 高
  • 我找不到讚的選項啊
  • 問題人物
  • 我想請教你關於andriod和一個叫processing的東西。

      我在processing 寫了一個小遊戲:
      是在pc上使用webcam攝影,按下space鍵後讓電腦做畫面的擷取,存成一張png的照片,在以這張照片的pixel做標準,對畫面做每個pixel的RGB值的比較,設定一個色差範圍的大小做運算,當有人或事物進入畫面後,與原先的png畫面有pixel大於此範圍的差異時,便告訴電腦對此pixel做改變,只要大於設定之範圍的pixel將它變成透明,讓畫面就算拍攝到有人進來webcam後,也不會出現在畫面中的假象。

    再使用麥克風收音,收取玩家的聲音之分貝大小,利用此分貝大小,對剛剛webcam擷取到差異過大的pixel值,做通明度的改變,只要分貝越大透明度就越小,讓玩家在麥克風前大喊越大聲,其出現在畫面中就越清楚。

      這個遊戲我使用processing完成,我想寫成apk的檔案讓andriod系統的人能夠安裝,但是我沒有學過andriod的程式,對andriod非常陌生,我想直接使用processing的內建功能來轉換成可執行在andriod sdk模擬器上的apk,然而我只成功的將processing 基本的繪圖和滑鼠相關編輯轉換成andriod可運行之apk並在PC上的AVD模擬器成功執行,但只要有使用到WEBCAM的擷取或麥克風收音(還沒加運算單純連接測試)的程式都無法成功轉成APK檔,造成無法運行於ANDRIOD上,我想了解其中原因,希望學長能幫我解答,我的靈感來自ANDRIOD的AH PAH小飛船遊戲,它是利用聲音控制預先畫好的小飛船進行起飛和發射的控制,我想模仿它,再加上ANDRIOD手機上的攝影機做擷取畫面,然後做遊戲的介面,利用聲音改變介面。
  • 據我的認知以Processing 1.0寫Android似乎支援的function不多,也不支援webcam部分。要再查一下新版Processing是否支援了。

    DK 於 2012/10/24 23:36 回覆

  • pizg
  • 我的processing版本是2.0b3, 按照您的方法安裝Android SDK並執行processing之後, 會出現如下錯誤:
    Error from inside the Android tools. check the console.
    BUILD FAILED
    C:\Program Files\Android\android-sdk\tools\ant\build.xml:517: Unable to resolve project target 'android-10'
    請問該如何解決.
  • SDK 線上再裝 API Level 10 即可

    DK 於 2012/10/24 23:33 回覆

  • 想指定編譯後輸出的Android版本
  • 請問,手機,平版Android的版本與顯示像素與螢幕直放橫置不同,能透過程式指定嗎?
找更多相關文章與討論