2012年12月15日 星期六

[推文]推薦好玩iPhone App 遊戲《快客鍵俠》



賀!又到了快樂的週末夜啦~今天要跟大家分享的一款App呢,是一上架就擊落憤怒鳥的國產創意遊戲《快客鍵俠》



《快客鍵俠》的風格很西部,而且美術十分有特色。 遊戲的故事是說,兄弟倆成立了一個鑣局,在押貨的過程中,遇到土匪要劫鑣。


2012年12月7日 星期五

解析Wagon Shootout (一): Unity如何清楚化分工作



<問題描述>
在 Unity 裡頭,最令人詬病的就是場景與場景間要怎麼化分工作,才不會讓兩位以上的程序去改到彼此不該改的地方。

其實問題出在場景檔與場景檔是以 binary 的方式儲存。再版本控管上無法直接合併。當然如果你買的是 Pro 的版本,是有設定可以調成文字方式儲存。但文字的缺點就是“檔案肥”、“開啓速度龜”,而且版本控管時的“合併”動作,其實根本看不懂它合併什麼,所以也無從檢查。

2012年11月30日 星期五

在Unity模型資料匯入時,移除動作檔中所夾帶的模型資料



近期在解決在Unity 3d作業時,當fbx檔案匯入時,動作檔總是會有mesh的資料一起進來的問題。

如果某一模型檔有好幾個動作,比方說,模型檔的名稱為monster.fbx而其動作有idle, walk, attack等,則相對應的檔案在Unity 3d的命名規範下,則會為monster@idle.fbx, monster@walk.fbx, monster@attack.fbx等。則每個動作檔被匯入Unity 3d時,可以看到連同模型的資料也一併的進入。

2012年11月27日 星期二

如何從Unity遊戲中,直接開啓FB App?



一般來說,開發者會透過導引的方式,希望用戶在玩完遊戲後同時也Follow粉絲頁,一方面取得第一手消息、一方面也讓玩家感到熱鬧,對吧!

但如何從Unity遊戲中,開啓FB上的粉絲頁呢?也許你會回答:

Application.OpenURL("https://www.facebook.com/WagonShootout");

Good Job~,這樣會是以瀏覽器的方式開啓,但我想你希望的是:
“先檢查手機上是否有安裝FB App,如果有就預設開啓,如果沒有在以Safari開啟。“ 

該怎麼做?很簡單,請你跟我這樣做:
public void FPClick() {
        float startTime;
        startTime = Time.timeSinceLevelLoad;
 
        //open the facebook app
        Application.OpenURL("fb://profile/你的粉絲頁ID");
        if (Time.timeSinceLevelLoad - startTime <= 1f) {
            //fail. Open safari.
        Application.OpenURL("https://www.facebook.com/WagonShootout");        }
}
上面“你的粉絲頁ID”,如何取得?

請用管理者身份進入你的粉絲頁:
點選“編輯專業”->“更新個人資料”
接著注意在你瀏覽器上的 URL 欄位,你會發現一組數字。對!那就是你的粉絲頁ID,給他貼上去就對了。



小編碎碎念:
如果你覺得這篇文章對你有所幫助,請給我們一個“贊”吧!


UnityIN 總編輯:Bric Lin,
Email: ericlin09@gmail.com
曾任職台灣某遊戲公司研發Game Engine,為書籍“OGRE入門指南”譯者,專攻Rendering技術與遊戲開發,目前為獨立團隊CocosPlay主程式

2012年11月11日 星期日

別在瞎子摸象、事後諸葛,現在就開始視覺化你的數值公式



在遊戲公司混了一段時間,最另我好奇的是每次與企劃人員討論實做數值公式時,我總會納悶 “為什麼是這個公式?根據是怎麼來?”

也許剛好與我配合的企劃比較嫩些,回想起來答案大概是以下幾個:
  1. 直覺是這樣
  2. 看魔獸的
  3. 不知道,先試再說,不行以後再調整
  4. 上一個案子這樣設定的,感覺很OK
  5. D&D官方手冊來的
獨立開發後,兼著一點企劃面的東西才發現,媽的!這東西真的很難定義。討論時也許可以很清楚的在白板上畫出想要給玩家的感覺曲線,但真的要變成可以執行的數學公式,卻是遲遲下不了筆。

追根究柢的問題就是...

2012年10月17日 星期三

[客座投稿] iOS 遊戲測試版本發佈和管理



不論是用瀑布式亦或是敏捷型開發,開發iOS遊戲到某個階段時,一定有上實機做測試的需求。若是程式人員的開發環境,有著Unity整合XCode的優勢,只需要將Apple iOS Developer上的教學過程確實的走一遍,得到可用的Development Provisioning Profile,接下來在Unity中輸入正確的Bundle Identifier,把USB線連好,在Unity中按下Build and Run,很快地,遊戲就可以藉由XCode發佈到實機上,讓程式人員做簡單的檢視。




但以這樣發佈的方式是很局限的,不但無法將此版本發佈給外部合作人員或相關人員,就算是團隊中的成員,也很難以此方式進行。當然,在Apple的規劃下,除了有Development的方式做發佈,也提供了Distribution的方式做發佈。一但使用了Distribution的方式,就可以在不透過XCode的方式下將遊戲交付給相關的人員。而這樣的發佈方式在Apple的原先的設定下有二種方法。第一種是透過iTunes,也就是說任何相關人員若想要拿到遊戲程式,只要將iOS連至iTune,就可以下載開發中的遊戲App。第二種是OTA(Over the AIR),名詞聽起來很特別,但實際上就是直接在iOS裝置上,連上網後連到某個位置,以Apple規範的protocol方式下載遊戲。

2012年10月13日 星期六

[好文推薦] Unity中的中文顯示(一):你好,Unity



作者:死貓@indiegm
原文出處:http://www.chinavr.org/article/unity/2009-04-21/88.html

前言:之前有朋友發信來問如何在 Neoaxis 中顯示中文,當時答應寫篇教程放上來。後來忙於I'm Lulu King!的製作,就給擱下了。等 I'm Lulu King! 提交後,卻又累得連打開 Neoaxis 編輯器的勁都沒有了。這一拖就拖到了現在。想來這位朋友應該早已解決Neoaxis的中文顯示問題了吧,再寫教程恐意義不大。Unity 的中文顯示機制和 Neoaxis 頗多類似,今天寫這篇文章也算是向那位朋友聊表歉意了。

還要說明的是,筆者才剛開始學習 Unity,講解中有錯誤或不准確之處還望指正,在此先行謝過。

2012年9月30日 星期日

Draw Call ?? Batch ?? 傻傻分不清楚!!




開發遊戲時,一定被時時提醒要減少 Draw Call,當然UNITY也不例外,打開Game Window裡的 Stats,可以看到 Draw Call 與 Batched 的數字。但到底甚麼是 Draw Call?影響的效能是來自 CPU?還是 GPU?讓 UnityIN 一次告訴你。


首先,讓我們定義何為 “Draw Call”: 
“一個 Draw Call,等於呼叫一次 DrawIndexedPrimitive (DX) or glDrawElements (OGL),等於一個 Batch”
摸過 DirectX 或 OpenGL 的人來說,對 DrawIndexedPrimitive 與 glDrawElements 這 API 一定不陌生。當我們準備好資料 (通常為三角面的頂點資訊) 要 GPU 劃出來時,一定得呼叫這個函式。換句話說,如果在畫面上有一張 "木" 椅子、一張 "鐵" 桌子,那理論上就會有兩個 Draw Call。

2012年9月24日 星期一

專訪獨立開發團隊 100Ways:MeowMeowPuzzle



今天 UnityIN 搶先專訪台灣獨立遊戲開發團隊 100ways,以及他們開發剛於 9.24 正式在 appStore 上架的方塊遊戲 "MeowMeowPuzzle"

MeowMeowPuzzle 是一款以貓咪為主題,類似寶石方塊三消規則的遊戲,只要三個同樣顏色的排成直或橫的一列,就可以消掉並取得分數。若是湊到四個或五個,還會合成具有特殊效果的方塊,引爆該方塊就可以取得範圍或大量方塊消失的效果。遊戲規則簡單易懂,相信有玩過寶石方塊的人都能很快的上手。

100ways 是兩人的小型團隊,由企劃 Avix 與程式 Kiri 組成,兩人之前都有數年遊戲業界開發的經驗。引擎的部分使用 COCOS2D 美術與音樂音效則是採取跟外部團隊合作的方式。


2012年9月6日 星期四

不吃不可的,八月 “Top 5” 總整理



UnityIN在八月,點閱次數突破 “兩萬” 大關。很感謝這半年來一路支持我們的讀者,以及最近才剛認識我們的朋友。目前站內洋洋灑灑總共三十幾篇文章,不曉得您已經看過多少了呢?


在歡慶拿到 “萬人斬” 的成就之餘,就讓小編我為大家整理出 TOP 5,不吃不可的技術文章吧!Let's GO~~

TOP 1: 效能...效能...效能!!!
想知道使用Unity時,在效能上有哪些地方該注意的嗎?看這篇就對了



TOP 2: 當Unity遇上SVN!版本控管的二、三事
Unity 專案怎麼做版本控管?這裡一一道來



TOP 3: 拳皇(KOF)大絕效果!!! (試用於手機平台)
怎麼做到 KOF 放大絕時,背景全黑、人物卻清晰可見呢?看完你就懂



TOP 4: UNITY Motion Trail Script!!
覺得Unity內鍵的Trail Script 總是面對Camera不好用嗎?這個範例解決你的煩惱


TOP 5:UNITY + Xperia Game pad
支援Sony Xperia Play (俗稱:PSP手機) 嗎?來看看吧!




[小編 碎碎念] 
如果你覺得這篇文章寫的不錯,請給我們一個 "贊",加油打氣吧! ^__^


UnityIN 總編輯:Bric Lin,
Email: ericlin09@gmail.com
曾任職台灣某遊戲公司研發Game Engine,為書籍“OGRE入門指南”譯者,專攻Rendering技術與遊戲開發,目前為獨立團隊CocosPlay主程式

2012年9月5日 星期三

Unity PlayerPrefs 的存檔,到底在哪啊!!



最近常被問到一個問題,就是

PlayerPrefs這個Class所儲存的檔案到底怎麼在Windows上刪除?”

如果用Google搜尋,你會找到以下連結:


沒錯!裡頭一段文字寫著:
On Windows standalone players, PlayerPrefs are stored in the registry under HKCU\Software\[company name]\[product name] key, where company and product names are the names set up in Project Settings.
可是這個 “路徑” 到底在藏哪啊!!!請依以下步驟服用:
  1. 在啟動或搜尋裡打入 "regedit",開啟 “開啟登錄編輯程式”
  2. 接著依照官方文件所寫,就可以找到你想要的存檔了
  3. 就這樣~

UnityIN 總編輯:Bric Lin,
Email: ericlin09@gmail.com
曾任職台灣某遊戲公司研發Game Engine,為書籍“OGRE入門指南”譯者,專攻Rendering技術與遊戲開發,目前為獨立團隊CocosPlay主程式


2012年9月4日 星期二

跟著 UnityIN 發掘下一個遊戲開發新星 (終章) : 謝幕



結束了這次為期一個月的 "遊戲新星" 系列報導,最感謝的不外乎報導當中來自 "雲科"、"虎尾"、"南台"、"世新" 與 "大同" 的同學們。謝謝你們在 UnityIN 連名氣都算不上時,願意接受這樣突如其來的邀約採訪。


在來就是TO (科技報橘) 的 家彥、Jensen、Yuning 對於這次活動的支持與幫忙,尤其 家彥 還得幫我這錯字很多的不及格主編修稿、排版,真的萬分感謝。最後是Fliper,沒有被你們拉去 "新一代" 設計展,今天肯定不會有這活動的舉辦,讓我認識這麼多這麼多有遣力的同學們,Thanks Fliper


2012年9月1日 星期六

[客座投稿] “版本控管” 的 “媒媒角角”



在遊戲的製作上,協同工作又更加的複雜,跨業背景的合作中,每個職責的產出物不盡相同。有趣的是,在控管上第一步碰到的問題不在於要如何去解決不同產出物的版本控管,而是在於版本控管的概念導入,讓每個團隊的成員先認同他們的產出物是需要被控管的。

遊戲製作的成員裡,可以粗分成企劃職責為主、美術職責為主和程式職責為主三類。當然在資源更多的環境下,測試職責為主和音樂音效職責為主的人員也會存在。對於不同職掌的人員來說,產出物是有所不同的。企劃在開發前期會產出設計文件,而在中、後期為進入關卡設計的部份 (有些遊戲可能並無所謂的關卡設計)。美術人員則是以圖檔或模型相關檔 (2D和3D不同) 為最主要的產出物。而程式人員則如前述是以程式碼的產出為主。至於音樂音效人員則顧名思義是產出音樂、音效。測試人員會以報表的產出物來反應遊戲現階段的製作品質。

因此,在建置版本控管的規劃上,亦相對的複雜。不但要考量到不同背景的人員對於版本控管的接受性,也要考量到不同產出物的控管上是否契合於所使用的工具,最重要的是,在資源的使用上能夠投入多少到版本控管上,這幾點是左右著遊戲開發團隊在選擇導入版本控管,所需考量的。




以下依據之前為了開發Unity遊戲而選擇版本控管工具想法,做一記錄。配合當時團隊人員背景、建置所需時間及可調度的資源,讓其他團隊參考:


2012年8月30日 星期四

跟著 UnityIN 發掘下一個遊戲開發新星(八):次元之鑰




UnityIN今天要為您送上的,來自大同大學同學:江鴻榮(企劃、程式、設定)、劉穎諺(音樂)、李天陸(美術)、黃柏閔(美術),所共同開發的遊戲 "次元之鑰"。



故事簡介:
充滿著魔法的世界中,跨越不同的次元與時空已非不可行,而在不同時空或不同次元的生物,卻可能因為次元魔法而迫害到原本和平的世界。不同時空或次元的人們,為了守護自己所擁有的一切,而成立了「次元管理局」,來阻止次元亂源的迫害。「次元之鑰」即是打開及閉鎖次元的那把關鍵鑰匙。




2012年8月28日 星期二

跟著 UnityIN 發掘下一個遊戲開發新星(七):Level Up




UnityIN今天要為您送上的,是來自世新大學同學:徐晧恩(企劃、程式)、許民欣(原畫)、陳政良(3D建模、骨架)、魏語醇(主程式)、曾以勒(角色設計、動作),所共同開發的遊戲 "Level Up"。



故事簡介:
在某些擁有悠久歷史、或是具有神靈氣息的自然環境中有著一種人人都想得到的東西,他們如同螢火蟲般地發著白光,一浮一沉地在這些不管是遺跡、森林或是古戰場中徘徊著。他們被稱之為──經驗魂(Level Soul)。

經驗魂(Level Soul),是一種能量。當這股能量到達一定量的時候,就能夠突破自己更上層樓。但經驗球沒辦法久留,他是十分不穩定的能量,只要稍有不慎就會被他人奪走。

但當收集到一個龐大數量並且在體內凝聚一定時日的話,這股能量就將為你所用。因此不管是英雄、魔獸、勇者、野獸、俠士各種萬物,都想要奪取這種能量,不管是想要達成如何的成就、或是想成為食物鏈的頂端、又或是單純想要追求無上力量。

升級之戰(Level UP)已經開始...

2012年8月24日 星期五

Unity小遊戲教學(一)



這一系列是M2H在unitystore上供免費下載的專案。總共有五種,每個都涵蓋遊戲程式所需要的基本需求,我想,根據這些專案可更了解簡易的遊戲設計,並以此為基礎設計出更多有精美、互動性更高的產品。希望經由拆解式的說明,減少進入門檻,讓更多人能夠熟稔遊戲的製作,不論是美術設計人員,或是有新加入遊戲設計領域的熱血青年都能獨立的開發。

2012年8月23日 星期四

跟著 UnityIN 發掘下一個遊戲開發新星(六):Skyland




UnityIN今天要為您送上的,是來自南台科技大學同學:陳欣法(程式)、張雅婷(美術)、郭人彰(企劃、美術),所共同開發療傷系的跑酷遊戲 "Skyland" 。



故事簡介:
小男孩艾尼實現夢想與冒險家爺爺乘坐著飛船尋找奇幻之島,不料遇難暴風雪,神奇的他們迫降在天空群島之中,找到了傳說的天空島,但飛船卻嚴重受損,這回他們必須先想辦法在暴雪島嶼中生存,才能再繼續冒險了。

2012年8月21日 星期二

七年研發,破 "自製引擎" 的三大迷思!!!



從 2006 開發符合 OpenGL ES 1.0 的 Software Rendering Engine 與硬體加速整合,到四年國防替代役的 Game Engine 研發,現在於 "遊戲獨立團隊" 採用 UNITY。這一路 "七年" 走下來的歷程,讓我對 "自製引擎" 由愛生恨。

"自製"?甚麼理由、甚麼堅持、甚麼優勢?


回答前,先想想 "以前的我" 與 "現在的我",在觀念上有怎樣的差異?

過去的我:

  1. 技術是一切、是優越、是存在、是比別人 "屌大" 的鐵證
  2. 熱愛 Coding,從無到有一點一滴的經驗累積
  3. 對 "設計模式" 操弄的自我感覺良好
  4. 賤到骨子裡的 RD 使命,驅動對技術的無止盡追求
現在的我:
  1. 技術是手段,不是目的
  2. Coding 能免則免,超死自己不償命
  3. 沒有神話的 "設計模式",用對地方才是真強者
  4. "技術" 等同打手槍,自爽不能當飯吃


回到主題:
"自製"?甚麼理由、甚麼堅持、甚麼優勢?

迷思一:自製比較屌?
真的不會比較屌,屌爆了到是有可能,RD優越感作祟。甚麼都自己來,一點一滴的累積到最後遊戲販售,不能否認這樣真的爽。但背後所付出的代價有多少?

2012年8月14日 星期二

跟著 UnityIN 發掘下一個遊戲開發新星(五):SPIRIT LINKER




今天UnityIN要您送上的是來自世新大學學生:黃慎行 (主程式)、余松霖 (企畫)、朱倩瑜(美術) 和 王智福 (美術) 所共同開發遊戲 “感應領域” 。


2012年8月10日 星期五

[客座投稿] 海盜尋寶 (Pirate and Treasure):十天,與自己的Game Jam競賽





身為一個獨立遊戲開發者,時常會遇到對遊戲開發有興趣的朋友們對我說,他們也想寫自己的遊戲但總是沒時間。我自己的經驗是:要開發一款好遊戲很難,但開發一款遊戲卻很容易,然而大多數人卻都卡在後者。所以我自己做了一個實驗,測試開發一款遊戲所需要多久時間。最後的成果是:


 

成品:iOS APP 遊戲 『海盜尋寶』(英文名稱是 Pirate and Treasure)
總開發時間:10天
總花費:2萬新台幣(不包含我自己的工錢...)

這篇網誌記錄整個開發過程,希望能對獨立遊戲開發同好有所幫助。

2012年8月9日 星期四

跟著 UnityIN 發掘下一個遊戲開發新星(四):謎藏遊戲




UnityIN今天要為您送上的,在"新一代設計展"的計金獎遊戲,來自大同大學的同學們:吳哲弘(人物動作)、廖韋齊(場景美術)、陳翊鈞(角色設定、建模)、張景堯(程式),所共同開發的 "謎藏遊戲"。


當Unity遇上SVN!版本控管的二、三事



SVN(Subversion) 一直是大家愛用的版本控管軟體 (Git 最近好像比較紅),第一次準備用Unity開發專案的朋友一定很疑惑,到底Unity專案要上傳哪些部分到SVN上才能好版本控管?Unity整體專案除了Script本身外,還包含了許多他特有的東西,如:Prefab、Material、Texture、Shader、Layer、Tag等,這些跟以前純C/C++、JAVA Code以外的東西。

2012年8月7日 星期二

跟著 UnityIN 發掘下一個遊戲開發新星(三):Fight 鬥




UnityIN今天要為您送上的,是來自世新大學的同學們:林明佳(程式、企劃)、汪瑞璽(3D美術)、林時如(2D美術)、林佳祺(程式)、楊潤航(特效美術),所共同開發、以女性為主題的動作遊戲 "Fight鬥",喜歡"OL"、"蘿莉"的有福搂!


2012年8月4日 星期六

分享 "技術" 的三大迷思!



分享 "技術" 的三大迷思:
  1. 最高機密,怎能輕易分享

    這大概是一些公司老闆的通病,但老實說這問題真的存在嗎?想太多才是真的。如果公布一項技術就讓對手超越你,那只表示你隨時都能被超越。看看每年在美國舊金山舉行的 GDC (Game Developer Conference) ,每家廠商無不貢獻當年自家產品所運用到最先進的技術,但有哪家公司因此被抄襲而倒閉?沒有~

    UNITY 4.0 的最新功能,將 Normal map 效果 Back 進 Lightmap 裡,很屌對吧!但你知道這技術早在 2004 的 Half-Life 2 裡被採用,且 Valve 很開放的將技術公開嗎?





    所以 "擔心" 是多餘的。你所分享的技術,會因讀者自身水平而有著不同程度的理解。再者每間公司、每個案子在製程上都有先天上的差異,從 "程式架構" 到 "美術流程" 有所不同,會因為你一篇文章就要改掉一堆東西?那這些主程、主美可能你還沒離職,他們先被老闆 FIRE 了。
  2. 一點點心得,何足掛齒

    這是台灣教育的問題,老實說!就四個字 "沒有自信"。跟老師問問題時,我們總是羞於舉手發表意見一樣,可是看到搶著講的同學,是不是又覺得 "臭屁" ?

    其實只要換個想法就行了。當你在閱讀這篇文章時,我們都清楚,此時此刻在世界的某處一定有某人才剛下載完UNITY,準備第一步的學習。所以,雖然永遠都有比自己強的高手,但隨時也都有比自己 "菜" 的新兵,這世界很公平。

    只要肯分享,永遠不怕沒有受惠者,不是嗎?
  3. 寫了沒人看,白搭!

    這也是台灣讀者的通病。我從許多同事間觀察發現,台灣工程師在研發時所遇到的問題,一定很懂得上網找資料解決問題。但解決後的第一件事情是...

    "關機、下班"。

    發現哪裡不對了嗎?兩字 "回饋"。我們疏於給予我們解答的人 "感謝" 與 "回饋"。所以我們會發現,當洋洋灑灑寫了篇技術文章後,好像沒有多少人會在下面的留言版跟你說 "好",或者 "謝謝大大"。這對長期寫作的人來說,就像演獨腳戲般,當戲院空空蕩蕩久了,自然而然也就收起行囊、走人。

    如果你跟我一樣,早期有 Follow 幾位目前還在的知名遊戲部落客,應該會有更深刻的感受。其中不乏早期以分享技術起家,後來轉向寫些比較容易討論的 "業界動態" 或者 "時事新聞" 等等。

    正因如此,我們才更需要集結大家的力量,將 "技術" 分享這塊在台灣能持續下去,不是嗎?所以,能給的 "讚" 千萬別吝嗇,一個 "贊" 可以撐起一位願意分享技術創作的人,很多個 "贊" 也許能讓台灣遊戲業在技術分享的世界舞台上,登上另一個高峰。

2012年8月3日 星期五

[客座投稿] 火線突擊:Android遊戲發行策略



初次跨足Android的開發者,都會遇到很多營運推廣困難,在此提供一些經驗跟想法讓大家參考看看。

1. 新品效應
Google Play的新品效應跟iOS有些不同,有個"最新熱門免費"的分類,要在這個分類出現必須是上架一個月內的新品,而且下載量加權計算後必須比其他新品高(新品實在太多了,並不是新的就可以上榜)如果產品一開始看不到,不必太過著急。除非是品牌大作,一般來說新遊戲在"最新熱門免費"排名逐步上升,一方面是下載量會持續累積,另一方面是滿月的新遊戲會從這個分類畢業,讓出名次。

因此Google Play的新品效益長達一個月,一個月後無論下載量再高,也會從"最新熱門免費"的分類離開,所以要好好把握這一個月,盡量提升遊戲在一般"熱門免費應用程式"的排名,這才保有長期曝光的機會,延長遊戲生命週期。

2012年7月31日 星期二

跟著 UnityIN 發掘下一個遊戲開發新星(二):OgaFight




UnityIN今天要為您送上的,是來自雲林科技大學同學:王昶元(企劃、美術)、吳筱楓(程式)、柯宇軒(Server程式、介面美術)及張登文  教授(指導老師),所共同開發的遊戲 "OgaFight"。




2012年7月28日 星期六

[客座投稿] "暗黑破壞神" 血條製作實例



各位好,相信大家對於暗黑破壞神的那種圓形的血條並不陌生,此篇就是要分享如何用Unity的GUI功能製作出這種類似的效果。

之前在做專題的時候,為了這個血條效果找了許多相關文章都沒有看到有人寫過,不過最後終於在老外文章裡頭找到一篇類似的效果,這裡在我做些改良後,分享給大家。