寫在Demo戰鬥系統之前,先用原型工具做套UI第一篇-登錄界面

      因爲老父親上月末突然離世,這個月很多事情都被打亂了,頭半個月一直都沉浸在無盡的悲痛中,希望看文章的小夥伴大家隨着暑期的到來多關心下父母,尤其是父母有心腦血管病史的小夥伴,多注意下父母的防暑降溫工作,因爲這個月一直在忙父親離世的一些事情,所以博客沒考慮好如何更新,後來想了下,不如介紹下用axureRP製作遊戲UI,這個其實不是什麼程序的技術工作,在協同工作中,一般策劃小夥伴纔會使用這個東西,UI的代碼書寫前面無論是u3d還是cocos2dx使用cocos編輯器工具都有書寫(遊戲都做出來了,我們直接玩就好了,還寫個演示幹什麼,可能會有人有疑問),那麼爲什麼還要介紹這個工具如何製作ui呢,因爲前段時間有小夥伴在網上發帖說他去面試,考官面試時說,現在的手遊開發只注重系統和數值,玩家幾乎不看劇情,都是跳過的,恩,的確,因爲現階段遊戲行業因爲競爭激烈,遊戲公司爲了趕工不得不對遊戲製作中的一些環節作出取捨,其實這個不是我提倡的,但沒辦法現實往往是很殘酷的,不是受開發者意識所左右的,而是受市場導向所控制的,在這種重壓下,別說國內的一些中小遊戲企業,就連暴雪這個遊戲行業巨人近期也出現了這樣的問題,《德拉諾之王》的在今年第二季度出現的玩家大面積流失很大程度上就是因爲魔獸世界的團隊在趕工的重壓之下對遊戲劇情和新功能的把握沒有進行過多評估所導致的,看來這個困局是整個行業的,那麼如何在遊戲開發過程中減少一些溝通的麻煩,儘可能的讓團隊把時間擠出來用在開發中呢(這裏是擠出來時間完善遊戲功能, 可不是擠出時間來提早上市)傳統中游戲系統UI一般策劃都會畫流程圖,然後畫出界面事例圖,然後寫一篇文檔來講解這個UI要實現的效果,我貼一下一個系統策劃畫的UI圖(不針對遊戲和個人,感謝提供這個東東熱心小夥伴),好了,這個只是一個普通的遊戲UI界面的一頁的簡單效果圖,一個很普通的遊戲UI一個界面居然畫了7張這麼多,但僅僅看這個還不能完全理解策劃到底要幹什麼,策劃還要畫一個流程圖,再寫一份文檔來講解這個幾張圖到底是什麼意思,頭一陣子網上一個北京的主策說,一個好的系統策劃,就上面這個東西,一個圖也能寫出上萬字的說明文檔,聽上去真實頭頸發麻,但是這個問題就來了,策劃的單頁上萬字的文檔,美術和程序怎麼看,如果一個界面文檔就1萬字,那麼一款遊戲的文檔就要幾十萬字,程序和美術看完這些文檔就要花費大量的時間,那麼程序的編碼和美術的畫圖時間呢?(我不是說文檔不重要,相反程序的數據文檔書寫的好壞直接影響一款遊戲的成敗,一款成熟的遊戲框架,必須要有一個完善的文檔做說明,這裏給大家看一張優秀的程序文檔說明截圖)這個文檔說明對遊戲開發提供了相當大的便利,所以我覺得現在很多遊戲公司開始使用專門的工具來做UI演示是一個好選擇,因爲就溝通方面來講,減少了書面文檔的大小,直觀,通熟易懂,當然現在都提倡策劃要會編程,但我想說這個不能減少溝通的難度,因爲策劃不可能把ui的代碼都寫出來,如果策劃把ui代碼寫完了,那還要程序幹什麼,所以既能完成頁面效果演示,又不用寫代碼,只維護很必要的策劃文檔說明,這對協同開發中效率提高,我覺得好處多多,不過這只是我個人意見,不同意的小夥伴也不用發帖罵我。

本來想在網上找一個別人做好的rpUI文件看看,但沒找到,策劃吧裏面看到了一個簡單的6節課的ui教程不過只有6張效果圖,講解6課不到1000個字,實際意義不大,所以只好自己用axture做個東西,看看它到底能做成什麼樣的ui界面。經過幾天的努力,我發現axture作出的東西簡單直觀,甚至花點時間遊戲也能勉強做出來(不過意義不大,直接編程更簡單)我們就先看看我做的ui什麼樣子吧。

首先登錄界面,這個沒什麼好說的,遊戲的登錄界面現在大體上區別不大,如果刻意特立獨行,反而會不受玩家所接受。我們看下效果。


跟上面傳統的貼一張圖,我們看看怎麼做的,原型庫一個最大的好處就是無代碼編程,你可以不需要學任何一門語言,只要掌握基本的條件邏輯,就可以用原型庫提供的組件好像搭積木一樣來實現複雜的交互了(我發現用這個可以直接做簡單的瀏覽器遊戲哦【不過因爲畢竟都是軟件封裝的方法,所以限制頗多,用它開發遊戲有點自找麻煩,不過作爲演示就太好了】),我們看看這一頁是怎麼做的,其實很簡單,先貼一張背景圖,然後託兩個標籤,命名爲賬號:和密碼:然後拉兩個文本輸入框用來當做輸入框,這個如果小夥伴們用過U3D的ngui插件或者Cocos Studio1.6(現在版本是2.x,生成格式和載入方法都發生了變化,使用也稍有不同,我還不太熟悉,這裏不做介紹)的話,這個界面的製作方法跟正常遊戲製作過程中所用到的方法是完全一樣的,另外我們看上面的圖中有兩個按鈕,一個是一鍵註冊,一個是登錄,上面的動畫演示了,直接點擊登錄,下面會有一個提示信息登錄失敗,這時候,我們只要點擊一鍵註冊,賬號和密碼就會自動填寫,再點登陸,就登錄成功了,這個是正常網絡遊戲(手遊)的一般登錄界面,我們看下用axture怎麼作出這個演示的。

我們分別給文本輸入框起名,然後再點擊事件中添加用例,這樣當點擊一鍵註冊的時候,預設的文字就會自動添加進輸入框,然後我們點擊登錄按鈕,看看登錄按鈕怎麼做的,

我們看到這裏面用到了兩個用例,這兩個語法是互斥的,自動生成的代碼寫的也很清楚,就是if...else語句,遊戲中這個地方要麻煩很多,要取回服務器的消息,然後解析來對比,關於登錄判定與解析的真正代碼可以參見我前面《Nodejs簡單應用,自制的烽煙註冊系統說明》和《u3d簡單網遊的通信,拿某簡單例子學習一下》兩篇博客,裏面提供了代碼,自行學習,我這裏不是講代碼怎麼寫,而是講如何用演示工具來做這個效果,所以忽略真實代碼功能,我們點擊登錄之後,場景就發生了轉變,這是因爲這個頁面其實是我們製作的整個演示的第一頁整個演示我們分出了5個頁面狀態(遊戲裏面我們稱爲狀態機【這裏用動態面板來實現{其實就是軟件內置的switch狀態機,很方便}】)我們點擊登錄按鈕之後,狀態跳轉到了Serverselection就是選擇服務器頁面,這個頁面功能非常簡單,所以我們就一起說下

這個頁面只有3個東西,右上的圖片返回按鈕,一個可選擇的下拉列表框,一個登錄服務器按鈕,具體實現

好了我們看下具體如何實現,很簡單,返回按鈕就是一個動態面板狀態改變的設定回到上一個登錄界面,然後當沒有選服務器的時候顯示文本尚未選擇服務器,如果選擇了,那麼進入Roleselection的狀態,因爲這個狀態下有很多子狀態機(動態面板),所以我們這裏先設一個Rolelihui狀態到nolihui,這個如何實現可以參見《Erlang服務器編程初步,體驗一下傾國傾城的魅力(繼續忙裏偷閒)》這篇博客,然後看下傾國傾城的代碼,另外,第一個頁面使用了一鍵註冊的方式(前面博客中提到的scut服務器就使用了這種方法),這個在現階段的手機遊戲中很方便,但傳統的網遊一般會彈出一個註冊頁面來完成註冊,這個代碼實現可以參見《 

u3d簡單網遊的通信,拿某簡單例子學習一下

》裏面有一個完整的彈出註冊菜單代碼供參考。好了第一篇就到這裏,我們下一個界面再見。





發佈了66 篇原創文章 · 獲贊 57 · 訪問量 24萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章