圖轉貼自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 :-)

arrow
arrow
    全站熱搜

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