享受視覺,

享受音樂,

泡杯咖啡,

再來細細品嘗每一篇文章不是很棒的一件事嗎 ?

請移到新部落格喔~ zzz

2009年7月30日 星期四

[教學] 如何在 blog 任意位置貼上圖片?


Moka 網站上的星星是怎麼貼上的?
若跟 Moka 一樣是使用Blogger,
1.請在 版面配置-> 修改HTML -> head 結束標籤之前加上
<script src="xxx/userDefine.js" type="text/javascript"></script>
userDefine.js 為自訂義函式可以放自己想要的內容
( userDefine.js 請放在自己的空間內,之前有介紹免費空間可以使用)

2.請在 userDefine.js 中加入 userDefine 與 createImage 函式
/*
* function userDefine by moka 09/07/31
*/
function userDefine()/*:void*/{ 
// put anything you want below~:D,舉例我放5顆星星 
 for(var i = 0; i<5;i++)
  createImage("header-inner", "xxx/star.gif", "star"+i, 20*i, 20, 50, 50);
}

/*
* function createImage by moka 09/07/31
*
* @parentNodeID 想要放在哪一個標籤內。
*  moka 是設置 id 為 header-inner 字串,
*  這樣的話產生的圖片會在 id 為 header-inner 的標籤內。
* @imgURL 圖片網址。
* @id 目前創立圖像的ID。
* @left 圖片x 座標。
* @top 圖片y 座標。
* @width 圖片寬度。
* @height 圖片高度。
*/

function createImage(
parentNodeID/*:String*/,
imgURL/*:String*/,
id/*:String*/,
left/*:Number*/,
top/*:Number*/,
width/*:Number*/,
height/*:Number*/)/*:void*/
{
var divObj = document.createElement('div');
divObj.id = id;
divObj.style.position = "absolute";
divObj.style.left=left + "px";
divObj.style.top=top + "px";
var imgObj = document.createElement('img');
imgObj.src = imgURL;
imgObj.width = width;
imgObj.height = height;
divObj.appendChild(imgObj);
document.getElementById(parentNodeID).appendChild(divObj);
}

3.最後請在 版面配置-> 修改HTML -> body 結束標籤之前加上
<script type="text/javascript">userDefine()</script>

2009年7月29日 星期三

[作品] EarthTransform

滑鼠點擊畫面可以讓地球變形喔 ~

原始檔下載 source :P

2009年7月28日 星期二

[閒聊] 說話技巧 talking skills

今天去西門町誠品書店翻了一些關於說話技巧的書籍,其中看到一篇關於讚美他人的技巧。書中內容大意是說今天一個公司的主管 A ,對於這次的專案執行成果非常滿意,主管 A 在此專案的團隊面前說:「這次的功勞多虧林先生( PM ) 的有效管理才得以順利完成 」。的確林先生對這個專案有極大的貢獻,但是這句話聽在其它合作團員的耳裡是非常不是滋味的,他們會心理想難道我們都沒有盡一份心力在專案上嗎 ? 什麼跟什麼。由此可知當讚美一個人時也要選場合跟對象,如果對象是一群人就要格外小心自己的言談。

翻了幾篇說話技巧的撇步,頓時覺得說話技巧的重要性,有時無心插柳也會讓人感到不適,所以講話要非常謹言慎行。如果今天說錯話而對方是好朋友那還可以諒解,如果對方是上司,那升遷的機會就會越來越遠了。所以會說話的人,基本上人際關係也會廣闊、感情關係也較順利,更不用說工作上能無往而不利。相反的不會說話的人反而會吃很多虧,像是公司面試時,沒辦法好好表達自己的能力所在,說不定就丟掉一個工作機會,即使個人能力再強也沒用了,非常現實。
我想說話的技巧也是一種學問,美國人類行為科學研究者湯姆士指出:「說話的能力是成名的捷徑。它能使人顯赫,鶴立雞群。能言善辯的人,往往使人尊敬,受人愛戴,得人擁護。它使一個人的才學充分拓展,事半功倍,業績卓著。」他甚至斷言:「發生在成功人物身上的奇蹟,一半是由口才創造的。」。

我本身口調不是很好,也吃過很多虧,也得罪過人,但是我想說話的能力是可以慢慢進步和訓練的,只要有企圖心的話 :D 。

2009年7月27日 星期一

[閒聊] 關於3D介面的操作

3D 介面並沒有像 2D 介面發展的一樣成熟,也有人說 2D 介面比 3D 介面好操作。回頭看現今的 2D 介面真的是琳瑯滿目,比較常看到的介面有 Label、Button、Text field、Radio button、Combo Box、CheckBox、ColorPicker、Dialog、ScrollBar、ProgressBar、Tabs、Icon 等好幾種甚至更多種的操作介面。而這些 2D 介面的操作有 mouse click、mouse drag、rollover、type text、choose item、wait、double click 等互動方式。

如果把這些 2D 介面丟到 3D 中是一件好事嗎?

假設今天把一個平面按鈕放在 3D 空間內,並對按鈕圖案作Y軸旋轉。第一個遇到的問題是當 button 旋轉 90 度時是根本沒辦法操作的,或者說根本看不見按鈕。因此按鈕的 Y 軸旋轉角度必須介於 -90 ~ 90 度之間,還有一個問題是 button 上的文字會因為 Y 軸旋轉而辨識度下降,所以設計上可能要更小心,譬如說 -30 ~ 30 度之間的角度是一般人可以對文字辨識出來的程度。您可以發現原本的 2D 介面放到 3D 空間中會有許多要留意的地方。

現今 3D 介面操作有幾種互動方式:

利用滑鼠滾輪對 3D 畫面 ( camera ) 進行 z 軸的平移。
利用滑鼠滾輪對 3D 畫面進行 zoom in、zoom out。
利用滑鼠對 3D 物件 rollover
利用滑鼠對 3D 物件 mouseClick
利用滑鼠對 3D 物件 doubleClick
對 3D 畫面進行 mouse drag 可以讓該畫面中的 3D 物件旋轉。
對 3D 畫面進行 mouse drag 可以讓該畫面對 3D 物件旋轉 ( camera 對物件進行軌道式旋轉 - orbit )。
對 3D 畫面進行 mouse drag 可以讓該畫面中的 3D 物件平移。
對 3D 畫面進行 mouse drag 可以讓該畫面平移 ( camera x/y 軸平移 )。

此外 3D 介面開發還尚不成熟,許多 3D 物件展示還是需要靠 2D 介面的輔助才得以達到最佳的互動效果。IPhone 的 CoverFlow 算是一個完整的 3D 介面,因為沒有依靠 2D 介面輔助,但是大家要知道蘋果早就對外宣稱iphone是觸控式手機,所以大家知道可以用手指來操作,假設今天平台是電腦,當使用者第一次接觸這畫面時沒有 2d 介面輔助,使用者會知道如何操作這個介面嗎 ? 因此 3d 介面設計上要格外小心。3D 介面的設計在未來將是許多介面設計師需面臨的問題與挑戰,我想這是一個很有趣的議題。

下圖一.Mac CoverFlow ( scrollBar & 3d display 有 2D 介面輔助)
下圖二.IPhone CoverFlow ( 觸控 & 3d display 但是沒有 2D 介面輔助)


2009年7月26日 星期日

[教學] DP - Creational Pattern - Factory

這邊將介紹軟體設計模式的工廠模式 Factory

看完前一篇 Simple Factory 教學,發現還是有一個問題存在。那就是每當天線寶寶多一個角色就需要在 class ToyFactory 中的 switch 增加新的分支,這部份還是不夠好,因為要模組化程式總不能一直改類別裡的內容。尤其程式要模組的最佳原則就是對已建立好的類別不作更動,但是可以對其作擴展與延伸。了解模組的精要後,看看如何修改上個範例。

如果我把 ToyFactory 類別抽象化為 IToyFactory。因為我不知道將來還會加進什麼天線寶寶,所以以介面方式來做個規範,未來新加入的天線寶寶都可以依照這個規範去實作。

希望藉由不同的生產線製作不同的天線寶寶:
public interface IToyFactory{
 public function createTeletubb():IDance{} // 規範每個生產線都要有製作天線寶寶的能力
}

針對客戶要求的天線寶寶種類實作不同的生產線:
class TIinkyWinkyFactory implements IToyFactory{
 public static function createTeletubb(): IDance{ return new return new TinkyWinky(); }
}
class PoPoFactory implements IToyFactory{
 public function createTeletubb(): IDance{ return new return new PoPo(); }
}
class LaaLaaFactory implements IToyFactory{
 public function createTeletubb(): IDance{ return new return new LaaLaa(); }
}
class DispyFactory implements IToyFactory{
 public function createTeletubb(): IDance{ return new return new Dispy(); }
}

若客戶只需要會跳舞的丁丁天線寶寶:
class ClientDemo{
 public static function main():void{
  var usedFactory:IToyFactory = new TIinkyWinkyFactory(); //建立丁丁生產線
  var demoToy:IDance = usedFactory. createTeletubb();
  demoToy.dance();
 }
}

Factory 優點介紹:

現在若要新增新的天線寶寶 BenBen 有兩個地方要改,第一個地方是要新增 BenBen 類別,第二是要新增 BenBen 生產線 BenBenFactory。而在客戶端程式變成要先建立生產線,再藉由生產線建立天線寶寶。看似多了幾道複雜的手續,但是換來的是不需對舊程式作更動(Simple Factory 範例中以switch 增加新的分支會破壞模組),又可以對程式作延展,完全符合模組的精神,與Simple Factory相比,Factory主要把物件生成邏輯交給客戶端作決定。另一方面假設用戶臨時說我不要丁丁我想要換迪西,您會發現要動的地方只有var usedFactory:IToyFactory = new DispyFactory(); ,其他地方都不用動,程式需修改的範圍很小。Factory的使用時機在您的成品中有一個或多個元件無法確定時,您必須先規劃這些元件的操作介面,然後用元件的抽象操作介面先完成其它的工作,元件的實作則推遲至實現元件介面的子類完成,一旦元件加入,即可完成您的成品。

2009年7月25日 星期六

[教學] DP - Creational Pattern - Simple Factory

這邊將介紹軟體設計模式的簡單工廠模式 Simple Factory

舉個例子~今天某客戶 (Client) 希望看到可以跳舞 (IDance) 的天線寶寶 (Teletubb),玩具工廠 (ToyFactory) 須依照客戶的需求來製作玩具。

工廠的玩具設計部分如下
設計一個 IDance 介面擁有 dance() 方法
設計天線寶寶雛形類別class Teletubb 並實現介面 IDance
設計丁丁類別 class TinkyWinky 繼承 Teletubb 並覆寫dance(){ trace("丁丁之舞"); }
設計小波類別 class PoPo 繼承 Teletubb 並覆寫dance(){ trace("小波之舞"); }
設計拉拉類別 class LaaLaa 繼承 Teletubb 並覆寫dance(){ trace("拉拉之舞"); }
設計迪西類別 class Dipsy 繼承 Teletubb 並覆寫dance(){ trace("迪西之舞"); }

工廠主要做的事就是依照客戶需求製作不同天線寶寶,所以工廠設計如下:
class ToyFactory{
 public static function createTeletubb( toyName:String ): IDance {
  switch(toyName){
   case DanceToy.TINKYWINKY : return new TinkyWinky();
   case DanceToy.POPO : return new PoPo();
   case DanceToy.LAALAA : return new LaaLaa();
   case DanceToy.DIPSY : return new Dipsy();
  }
 }
}

class DanceToy{
 public static TINKYWINKY:String = "丁丁";
 public static POPO:String = "小波";
 public static LAALAA:String = "拉拉";
 public static DIPSY:String = "迪西";
}

若客戶只需要會跳舞的丁丁天線寶寶:
class ClientDemo{
 public static function main():void{
  var demoToy:IDance = ToyFactory. createTeletubb(DanceToy.TINKYWINKY);
  demoToy.dance();
 }
}

Simple Factory 優點介紹:

Simple Factory 重點在依照客戶端不同需求建立物件,並對客戶端隱藏物件生成的方式與細節。由此範例來探討,如果說客戶要求天線寶寶多一個角色叫BenBen,只要建立class BenBen 與class ToyFactory 中的 switch 部份增加BenBen 的分支即可。如果客戶覺得丁丁的舞步不好看,只要在class TinkyWinky 這邊修改dance(){ trace("新丁丁之舞"); }。可以發現,不管是玩具設計或者玩具工廠裡在做改版都不會影響客戶端程式。所以物件生成方式之變化與客戶端程式碼隔離可以降低程式的耦合度,不但有好的延展性,也比較容易維護。

[作品] Shadow 影子

利用鏡射的範例作延伸,作出 pv3d 本身沒有的即時 shadowmap 模擬。


2009年7月24日 星期五

[作品] ToonStyle

利用 webcam 作影像擷取,並針對影像不同明暗程度作填色,塑造類似卡通風格的動態影像。

2009年7月23日 星期四

[作品] Reflection 鏡射

這邊提供一個 3D 鏡射模擬處理方式,對 pv3d 想更深入了解的同好們可以測試看看。經由此繪製流程也可以製作 shadow,下一篇 3d 文章會撰寫一個實際的例子。

[閒聊] The Secret of My Logo 筆者 logo 是怎麼想出來的

七巧板最早出現於專書記載是清嘉慶八年 ( 1803 ) 刊行的《七巧圖合壁》。隨著七巧板的盛行與風靡,衍生出許多排板遊戲的問世。著名且深受喜愛的排板有「蛋形九巧板」、「雙園七巧板」、「心形七巧板」、「燕式七巧板」、「圓形十巧板」、「畢氏七巧板」、「八卦七巧板」及「益智四巧板 ( T型板 ) 」等。別小看他們,現今許多流行的商品設計師會利用七巧板的 idea 設計書櫃、桌椅等等。

七巧板的玩法有四種:

1. 依圖成形,即是根據已知的圖形來排出答案。

2. 見影排形,從已知的圖形找出一種或一種以上的排法。

3. 自創圖形,您可以自己創造新的玩法、排法。

4. 數學研究,也就是利用七巧板來求解或證明數學問題。

話說單單一種「蛋形九巧板」就能排出一百多種飛禽圖形,我的 logo 也是利用此九巧板拼湊而成的自創圖形喔 : )。

[作品] Swing 搖擺

Swing 效果是用 PV3D 平面物件頂點位移所產生的波浪效果。除了波浪效果外,也可以靠頂點位移產生魚眼或是任意自定義扭曲的效果。

2009年7月21日 星期二

[教學] Make Them More Creativity ~ 進階 AR 玩法



(click to enlarge the picture)

AR 應用上可以有很多種玩法,大家有沒有想過自己做操作介面呢?
上圖是我設計出來的汽車方向盤 (steering wheel front & back) ,印製出來後用筆刀跟剪刀把方向盤圖案以外的白色區塊剪掉,然後將方向盤前後作黏合(可加卡紙或瓦楞紙增加厚度),最後再撰寫互動程式即可直接透過 webcam 與方向盤作互動。

舉個例子,在遊戲互動開發中,可以設計成方向盤的旋轉方式來控制汽車移動的方向。
相信透過此範例介紹,大家會有更新奇的想法出現 :D

下載筆者設計的向量圖 vector image source(.fla) flash cs3+

2009年7月19日 星期日

[作品] Webcam Virtual Button 虛擬按鈕



本程式需要一台 webcam 才能使用,建議在光源充足的環境測試 。操作方式有幾種,用手指或筆跟虛擬按鈕(上圖5個圓圈)互動,或是站遠一點用揮手方式互動。在未來製作發想上,可以做手指 DDR、ParaPara Paradise、Samba De Amigo沙鈴音樂節奏遊戲等等有趣的開發。在昏暗環境常常會偵測不到,可以調整影像閥值 (原始檔內有說明)。更多技術上的問題可以大家一起進行討論。

作品欣賞 demo
原始檔下載 source (回覆是PO文的動力)

(原始檔可任意修改散布,希望使用本範例在網路發表時能標明原著網址)

[推薦] Flash 3D 特效宅急便 ( PV3D )

新書推薦,最流行的 flash pv3d 出範例教學書了~~


作者 milkmidi 的話:

把我對 Flash 的研究與熱愛, 全寫在其中
本書的前幾章, 特別安排 ActionScript3.0 的許多範例
好讓你一步步瞭解 as2 和 as3 的差別
再安排製作動畫不可缺少的 Tweener 類別和一些常用的數學動畫公式
最後當然就來到本書的重點 PV3D 啦
從 PV3D 的原理, 基本架構一點一點的介紹
再透過許多實用的範例, 從中瞭解 PV3D 製作的小技巧

2009年7月18日 星期六

[作品] Follower 追隨者

許多 Shooting Game 都會出現的追蹤型飛彈或雷射。我把它寫成一個類別 Follower,大家可以套用自己的創意在程式裡頭,作出更豐富的變化。

原始檔下載 source(回覆是PO文的動力)

(原始檔可任意修改散布,希望使用本範例在網路發表時能標明原著網址)

2009年7月17日 星期五

[教學] Motion Graphic 動態圖像

Motion Graphic 是重視影像與聲音節奏搭配的動態影片,製作的撇步在於把握每一時刻視覺上都在「動」的狀態即可。在許多電影、遊戲或網站的 Title 都會放置一些酷炫的動畫,這些動畫非常引人注目,像是 007 開場動畫、蜘蛛人開場動畫...等都是動態圖像表現。在台灣專業的網站製作公司中,有些公司開始把動態圖像放在網頁前導頁吸引觀者,例如由米蘭數位科技公司製作的海尼根原裝酷樂聯合國網站 Title 部分就非常出色。

這邊介紹一個我非常喜歡的網站 Video Copilot,裡面有將近百則的 AE 免費教學,都是非常專業等級的開源教學範例。希望透過網站分享,讓大家對 Motion Graphic 有所認知。

Video Copilot 產品宣傳影片, press start button to play(need quicktime player)



更多的動態圖像範例可以藉由 Google 大神找尋 Motion Graphic 的關鍵字。

2009年7月16日 星期四

[教學] Feedback Design 的必要性

不管在網頁設計上,或是產品設計上,回饋 (Feedback) 是很重要的設計元素。透過回饋方式,可以讓使用者知道目前操作平台的狀態,尤其良好的回饋不但減輕使用者操作上的負擔,也可以提高使用者對該平台的滿意度。回饋有包含很多種,例如聲音回饋、視覺回饋、震動回饋等,以下舉一些回饋設計的例子:

1.網頁設計上,讀取聲音或圖片時必須添加 loading 的圖片讓使用者知道網頁正在進行讀取。
2.網頁設計上,滑鼠滑過按鈕時,須以切換圖片或音效播放的方式來告知使用者滑鼠已經在按鈕上了。
3.網頁設計上,滑鼠按下按鈕時,要切換按鈕圖示告知使用者現在是按鈕按下的狀態。
4.網頁設計上,tab 的欄位跳躍功能,可以讓使用者知道目前該在哪個欄位輸入資料。
5.遊戲設計上,當遊戲主角被怪物砍傷時,視覺上可以看到主角被砍傷的畫面,聽覺上可以聽到主角受傷時的叫聲,觸覺上可以感受手持搖桿的震動。
6.手機設計上,除了鈴聲方式告知使用者有來電,在吵雜的環境中也可以靠震動方式告知來電或簡訊。
7.Mac 的鍵盤設計上,透過發光方式在暗室也可以打字,這也是良好的視覺回饋。

個人覺得,回饋是一種貼心的設計,適當的使用回饋技巧可以大幅提高操作平台的使用性。

[教學] 免費音編軟體 Audacity

在網頁製作、互動光碟、遊戲製作上,常會需要一些音效來增添色彩。Audacity是一款用於錄音和編輯聲音的、自由的開放源碼軟體。透過他可以修改聲音波形,製作出殘響 (echo)、男生聲音變女聲聲音、娃娃音等有趣效果,大家可以在網路上可以搜尋一些 free sound effect,並透過 Audacity 重新編輯成想要的聲音。就個人所知台灣也有一些聲音工程的科系專門在聲音上的研究,像是對聲波作傅立葉轉換 ( 壓縮 )、lowpass、highpass、echo、EQ、synthesis、mix...等等。雖然聲音研究不是筆者的專業,但是多了解新知總是件好事。

Audacity taiwan official site (官網下載)
Audacity taiwan wiki (有教學)

其他聲音編輯效果外掛下載
LADSPA外掛程式0.4.15 installer (.exe檔, 1.5 MB) - 超過九十種外掛程式
LAME MP3編碼器 - 允許Audacity匯出MP3檔案。
VST Enabler - 允許Audacity讀取VST外掛程式。(VST有玩過cubase音編軟體應該知道)
外掛程式 - 下載效果和過濾器。


2009年7月15日 星期三

[教學] 粒子系統進階

粒子系統是專門模擬分子行為的程式設計,常在電影、遊戲、3D軟體中出現。粒子系統可以模擬出雪、沙塵、火焰、流體、光影效果,有一套知名粒子系統製作軟體名為 particle illusion ,是我以前大三暑假在動畫公司實習所用到的軟體。這套軟體簡單易學,很多專業的視覺特效都能製作出來。像我在實習時參予台灣奇案和劉伯溫傳奇的特效製作,裡面的角色在發功時都需要一些粒子特效,不管是佛光、氣功,甚至爆炸等等,都可以藉由這套軟體輕易達成,最後這些粒子效果算出影片後,可以拿到 AfterEffects 內進行影片合成。為什麼會在這邊提到這個軟體呢 ? 因為我看到台灣有人 ( CJ cat ) 在進行 Flash 粒子系統程式 Emitter 的開發,所以讓我想起以前種種。粒子系統的視覺效果是非常令人陶醉的,很多有學過電腦圖學或視覺程式創作的學生也會碰到這個課題。我想藉由這套軟體,可以讓大家很快對粒子系統有所認知。(大家可以至官網下載試用)

下圖截自官網,可點擊放大檢視:




















粒子系統在設計上要掌握幾個要點,每顆粒子都要有一些必要的屬性,像是粒子座標 x/y position 跟粒子移動速度 x/y speed,還有粒子存活時間 lifeTime 是最基本的要素,其他次要屬性可以參考 particle illusion 內參數的設計。

[教學] 免費且快速架站方式

EasyPHP 是一個完全免費的整合式架站軟體,其中包含 php(server 腳本)、apache(伺服器)、mySQL(資料庫)、phpMyAdmin(資料庫視覺管理介面),請至官網下載。下載完畢後,安裝並重新啟動電腦。在 C:\Program Files\EasyPHP 3.0\www (假設安裝這個路徑) 放置您的 website,並執行 EasyPHP 應用程式。請打開瀏覽器並在網址列輸入 http://127.0.0.1/ 並按 Enter,若 www 資料夾下有 index.html 則會直接連結到您的首頁。

假設您不想把 IP 放在網址列上又不想花錢申請 DNS (Domain Name System),網路上有很多 free 的網域申請可以幫您做轉址服務,那您就要拜託 Google 大神幫您完成願望囉。
感謝由網友高見龍所補充類似的套裝軟體,xamppappserv

2009年7月14日 星期二

[閒聊] 探討網站設計

雖然筆者 blog 名為 Design ++,但是至今都沒有寫出一篇關於設計的文章,實為羞愧。筆者才疏學淺,也說不出什麼大道理,但個人還是希望對網站設計表達自己的評述與觀感,若有不合理之處,望予以指正。

在民國 85 年以前,台灣的網站幾乎都是純文字的網站,也沒有所謂的設計概念在網站裡頭,對網路瀏覽者而言,獲取資訊為主要目的。隨著網路科技進步日新月異與電腦繪圖的技術發展,呆板的純文字網頁馬上被取代為圖文並茂的網站。不可否認的是,主題雷同的網站也隨著時間流逝而與日俱增,此時此刻為了讓網站能脫穎而出,網站的視覺設計也變成網路競爭的重要一環。

以網站視覺設計來說,許多企業會將 VIS (visual identity system) 導入網站來拓展與延伸企業形象,網站的視覺與氣氛營造也會跟隨不同的企業文化而改變,所以不同形式的公司網站會有不同的視覺設計(總不能說將國賓飯店的網站視覺設計成麥當勞網站一樣,畢竟兩者取向與訴求不同)。因此瀏覽者進入網站第一時間接收到的視覺資訊會直接影響瀏覽者對該網站的感官與印象,這種印象有時候是致命關鍵。

觀看台灣的網站設計,近年來的作品水準已經比往年高出許多,在視覺設計上也有很大的突破。但是網站設計師還需要面對更多的挑戰、掌握更多的知識,除了了解網頁美術設計、色彩選擇、版型製作、人機互動介面設計、程式設計、網站資料庫規劃、網站架構策劃、如何讓程式美術企畫行銷人員相互配合討論...等 Know-How 之外,最重要的是需要跟客戶作良好的溝通與引導,不但自己知道客戶的需求,也讓客戶理解您的專業理念,這樣才能把網站做到位。




[閒聊] 專業的 flash 遊戲

誰說 flash 遊戲不能做到專業水準
http://www.nitrome.com/ 以創意玩法為主的 flash 遊戲製作公司
http://www.bubblebox.com/ 聚集很多不同類型且高品質的遊戲

[知識] 3d 互動整合式開發環境

所謂虛擬實境 ( Virtual Reality,VR ) 即電腦利用電腦繪圖或影像合成技術,並結合聲音處理所模擬建構的虛擬世界。繼 VR 後有更多的發展,像是 AR (Augmented Reality )、MR ( Mixed Reality ) 等虛擬物件結合真實世界的表現和綜合各種電子裝置相關技術論述發表出來。

如果大家有注意到,曾經沒落一時的 AR 最近變得很流行。從最早 PS2 的 EyeToy,至 PS3 的 Eyepet,到最近想超越 wii 的微軟所提出的 Project Natal ( tip.1) ,都是透過虛擬實境加上影像辨識技術 ( tip.2 ) 的結合使用,讓使用者可以在遊戲上獲得更多的互動體驗。除此之外,也有人針對 Flash PV3D 推出 AR 外掛工具 ( FLARToolkit ) 讓大家使用喔 : )。

回到正題,虛擬實境 VR 有相當廣大的應用領域範圍,舉凡醫學、娛樂、工程、教育訓練...等等各方面都有。目前比較多台灣學生所接觸到的 3d 互動整合式開發環境有下列幾套軟體:

Anark -------------------( javascript )
Virtool Dev --------------( Virtools Script )
Unity --------------------( actionscript ) - 新秀
Quest3d -----------------( Lua script )
EON ---------------------( VB Script )
Adobe Director Lingo3d---( lingo )
Adobe Flash Pv3d--------( actionscript )
Google O3d --------------( javascript ) - 新秀

Unity 是比較新的互動 3d 開發軟體,價格上算便宜又大碗 ( Mac/PC版都有 ),令人驚艷的地方在這套軟體所用的互動腳本神似 actionscript,所以對 3d 互動媒體開發想了解的 as 程式開發人員是一個大好消息。比較要注意的是,雖然上述的這些軟體製作的互動成品都能在網頁上顯示,但是要記得使用者需安裝 Player 外掛才能撥放。

總的來說,拋開 flash 沒有如前五套軟體有良好的 3d 編輯介面可以使用之缺點,flash 的優點在 user 播放 flash 程式時不用特地去下載與安裝撥放程式 ( 畢竟會造成使用者負擔 )-我想大家應該都知道目前全世界 90% 以上的電腦都有內建 flash 的 player plugin ( adobe 吃定了市場 )。或許對許多想開發 3d 互動網站的網路業者來說,使用 flash pv3d 是較好的選擇,也不用擔心 user 因為排斥安裝外掛而產生網站流量流失問題。

[tip.1] Project Natal 是微軟在 XBox 360 遊戲機上所提出的最新遊戲互動方案,厲害的地方在他使用最先端的 full-body tracking 技術,透過 webcam 它可以偵測人體的頭、手、四肢、軀幹...等等,不用搖桿或遙控器,揮揮手、抖抖腳,就可以讓遊戲裏頭人物做出跟你一樣的動作,好像很屌 @@。

[tip.2] 影像辨識技術目前有發展許多種類,就個人所知有 shape tracking、color tracking、marker tracking(QR Code)、face tracking、hand tracking...等等。

2009年7月12日 星期日

[知識] 最令人詬病的 FLASH 問題

我想大家都知道 Flash 最大的詬病就在瀏覽器的上下頁功能。假設你由 Google 首頁連到某 Flash 網站,而在 Flash 網站內有3個頁面 A.B.C,您的瀏覽方式是 Google -> A -> B -> C,當你在 C 頁面點擊瀏覽器的上一頁時會跳到 Google 頁面而不是 B 頁面,這是很不合理的現象,也違反使用者操作習慣。有人發現這個問題,並提出解決方式 (swfaddress),透過 javascript 的輔助,還原應有的功能,最後可以讓 Flash 擁有如 HTML 網頁一樣的上下頁連結瀏覽方式。

2009年7月10日 星期五

[作品] Keroro 3D Lowpoly Model

Keroro 160面 model 建模完成。 走路動畫需要 max8 + colladaMax + DAEMC2。我架好骨架才想到不能用 max2010 = =",如果哪位大哥大姐想幫忙輸出 .dae,請告知一聲 Orz。 話說 .3ds 應該包含 Keyframe 資訊,也就是說可以記錄動畫資訊,可是內建 max3ds.as 並不完全,期待哪一天看到改版。操作時先點選畫面一下,再以上下左右操控角色。

2009年7月9日 星期四

[教學] 免費 Web 技術教學網

w3school 是非常有名的網頁技術教學網站,
目前有中文版網站 http://www.w3school.com.cn/
需要簡字閱讀能力 (我覺得身為台灣人應該要識簡書正,不是識正書簡 = =)
我想多看看偶像劇就會慢慢認識簡體字了 ( pps 網路電視可以讓你看到爽,不要在上班看就好 : p )

網站內包羅萬象,從最基本網頁 HTML 到最流行的 AJAX. 應有盡有 ~

-HTML教學
-XML教學
-瀏覽器角本
-伺服器腳本
-.NET(dotnet)教學
-多媒体教學

我在裏頭學到很多網頁建置知識,
前台.後台.XML.CSS 等技術與觀念,
相信此網站對大家在網頁建置上有幫助。

大家如果覺得我的網站還不錯,
我希望大家能留留言讓我知道

(意見連結 或 Cbox 都可以留言),
這樣可以促進交流,

私底下聯絡可以告知我並留下您的email,
感激不盡 : ) 。

2009年7月7日 星期二

[作品] EVA-01 TEST TYPE 3D Lowpoly Model


最近迷上 Lowpoly 模型建置,花了將近 15 hr 作的 3D model,使用的軟體是 3dmax。建模大部份時間花在 target weld . cut . 3角面4角面建模 . make plane . smooth . 切割最佳化..等等。整個建模都是在重複這幾個動作,最終完成了這個作品。頂點 923 . 面數 1050,雖然拉模型過程很累,但是看到完成品超有成就感 : )
(原始檔可任意修改散布,希望使用本範例在網路發表時能標明原著網址)