<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          顫抖吧!00后已經(jīng)開始爆肝寫游戲賺錢了!

          共 5727字,需瀏覽 12分鐘

           ·

          2021-02-26 15:37

          春節(jié)這段時間,社區(qū)有 3 位來自華南師范大學(xué)的大一新生寒假爆肝 14 天,一起完成了一個太空科幻題材小游戲的創(chuàng)作,已經(jīng)上線發(fā)布在微信小游戲,用戶滿意度更是全 5 分,目前游戲完全免費也沒有任何廣告,感興趣的童鞋可以微信搜索【星旅StarTrek】體驗一下噢。
          游戲講了一個關(guān)于述人類命運存亡的科幻故事。在游戲中你可以探索無限大的宇宙空間,在符合物理的太空中自由穿梭與幾十種不同的行星、恒星、超新星、彗星、黑洞與白洞之間。

          期間主程 HK-SHAO 也寫了開發(fā)周記作為技術(shù)分享發(fā)到了 Cocos 的論壇,本篇文章摘自開發(fā)周記,希望分享的技術(shù)能夠幫助大家。


          大家好,我是 HK-SHAO ,隨著游戲的不斷迭代,游戲效果、內(nèi)容也逐漸豐富,游戲項目和其代碼有越來越多的細(xì)節(jié)實現(xiàn)需要注意。
          所以我特寫下周記,記錄一些我在開發(fā)過程中,游戲效果實現(xiàn)的方法、原理,以及一些需要注意的方面。同時也很感謝 Cocos 為我們提供了免費的開發(fā)工具進(jìn)行游戲的創(chuàng)作
          囿于時間匆忙,內(nèi)容可能會略顯晦澀和粗糙,見諒。
          1


          TS 和 Creator 的簡單介紹



          首先,這個 Cocos Creator 小游戲的程序部分是用 TypeScript 編寫的,原因在于 TypeScript 是一個比較嚴(yán)謹(jǐn)?shù)恼Z言,它是由微軟開發(fā)的,擁有強類型并且比 JavaScript 的功能更多,被稱作 JavaScript 的超集。
          TypeScript 可以被編譯成任何版本的 JavaScript,所以它完全可以代替 JavaScript
          正是由于 TypeScript 的強類型,TypeScript 代碼的編寫不容易出現(xiàn)隱藏的錯誤,因為 IDE 會進(jìn)行非常好的錯誤提示,這樣能夠大大提升代碼的生產(chǎn)力。
          另外,用 TypeScript 編寫游戲腳本,IDE 會進(jìn)行代碼提示,一個對象是什么類型、擁有哪些成員變量和方法、這些方法的作用是什么,這些 IDE 都會在代碼編寫過程中給予提示,省去了頻繁查找 Cocos Creator 官方文檔的麻煩。
          然而上述在軟件開發(fā)過程中 IDE 提供的比較基本的功能,由于 JavaScript 的弱類型而都無法提供。
          在 Cocos Creator 里面,每個實體都是節(jié)點(cc.Node),而這些節(jié)點的結(jié)構(gòu)都是樹狀的,我個人覺得這個設(shè)計特別好,不僅對于這個游戲引擎來說能夠提高某些算法的效率,而且對于游戲開發(fā)者來說能夠省去不少功夫。
          這里要提的是,在前端開發(fā)中,網(wǎng)頁的 DOM(文檔對象模型)也是樹狀的,正是因為這個數(shù)據(jù)結(jié)構(gòu)的優(yōu)越性,網(wǎng)頁才能被快速的渲染和更新。
          正是由于 Cocos Creaor 使用了這樣的數(shù)據(jù)結(jié)構(gòu),再加上它的游戲腳本是前端里的 JavaScript 或者 TypeScript,所以 Cocos Creaor 的游戲能夠被打包到幾乎所有平臺(包括 Windows、Android、Linux、Mac OS、Web 以及許多第三方平臺例如微信小游戲、百度小游戲等)。
          簡單點來說,只要能夠打開瀏覽器上網(wǎng)的平臺,CoCos Creator 都能夠一鍵打包并發(fā)布到這個平臺。
          接下來,我會把游戲開發(fā)里面的一些技術(shù)細(xì)節(jié)一一列舉出來
          1

          動效和物理效果



          非線性動效 
          非線性動效相比線性的、勻速的動效在視覺觀感上會好很多,這在現(xiàn)在的手機系統(tǒng)動畫以及一些優(yōu)秀的 PPT 內(nèi)應(yīng)用非常廣泛。這個游戲在很多方面多次使用了一種非線性函數(shù)實現(xiàn)動效,以達(dá)到流暢、柔和的視覺效果。
          這個非線性函數(shù)其實就是這個微分方程  y ′=y ( 1 ? y )  的解 ,這是一個非常有用的非線性函數(shù),在各種領(lǐng)域作用廣泛。
          例如開源的 Python 數(shù)學(xué)可視化引擎 Mainm 里就有它的身影,最近開源的動畫引擎 movy.js 也有它的身影,除此之外這個魔幻的函數(shù)還在高中生物的種群密度、人口學(xué)、統(tǒng)計學(xué)等多個領(lǐng)域大顯用途。我們先解一下這個微分方程。
          如果常數(shù) C 為 0,最后可以化成  , 這其實就是大名鼎鼎的 sigmoid 函數(shù),其還在人工智能領(lǐng)域應(yīng)用廣泛。
          這個函數(shù)曲線是 S 形的,所以高中生物也稱作 S 形曲線。它也被稱作 Logistic 函數(shù),在最近的疫情分析,傳染病模型里面也有它的身影,它的形狀是這樣的。我們可以看到,它的定義域是實數(shù)集,值域是 [ 0 , 1 ] ,并且從 0 到 1 變化非常緩和。
          好了,回歸正題,我在 Cocos Creator 的游戲開發(fā)中頻繁的使用了這個優(yōu)美的函數(shù)曲線,達(dá)到了比較賞心悅目的平滑動畫效果。
          它在程序里的實現(xiàn)方式是這樣的  y ← y ? ( 2 ? y ) 。更通俗一點來說,如果我想讓一個值 t 平滑的從 min 變化到 max 可以在 update 函數(shù)里這樣寫。
          t += (max-t)*dt*speed;
          反之,如果我想讓一個值 t 平滑的從max變化到 min 可以在 update 函數(shù)里這樣寫。
          t -= (t-min)*dt*speed;
          例如,我使用這種方法實現(xiàn)了根據(jù)觸摸改變的非常平滑的攝影機縮放效果。
          除此之外,根據(jù)地球到太陽的距離自動顯示距離箭頭,并且根據(jù)觸摸自動隱藏或者顯示,也利用了這個特性。
          游戲中為了實現(xiàn)平滑而不生硬的視覺效果,我均采用改變游戲中實體受力的方式而避免直接改變速度,因為直接改變速度往往是在撞擊時發(fā)生的,在其它情況盡量少發(fā)生。
          例如,游戲中操控地球的前進(jìn),是給予地球剛體一個根據(jù)觸摸位置而發(fā)生改變的持續(xù)力。而改變地球的旋轉(zhuǎn)角度,則避免直接改變地球的旋轉(zhuǎn)角,而是給予地球邊緣一個小的持續(xù)力,以改變地球的角動量,從而實現(xiàn)改變地球的旋轉(zhuǎn)角。
          此外,我避免攝影機和背景直接跟隨攝影機,而是通過給予它們對應(yīng)剛體的受力,來實現(xiàn)一種錯位的立體感和平滑移動感。
          歸一化 
          一個向量的歸一化就是這個向量的單位向量,在 Cocos Creator 里面,有 cc.Vec2 和 cc.Vec3 兩種類型的向量,它們都有 normalize 這個方法獲得單位向量。但是有時候我想把一個實數(shù)歸一化怎么辦?
          聰明的讀者可能已經(jīng)想到了前文所提及的 sigmoid 函數(shù),但是除此之外,我們其實還可以用 arctan 函數(shù)來對一個實數(shù)歸一化,讓它的值介于 0 到 1 之間。實際上這個函數(shù)作為激活函數(shù)在人工智能領(lǐng)域也和 sigmoid 一樣應(yīng)用廣泛。
          將一個實數(shù)歸一化之后,我們能夠較為容易的對這個數(shù)進(jìn)行操作,這種方法在圖形學(xué),例如 Shader 程序設(shè)計里面應(yīng)用廣泛。我在游戲腳本里也用了這種方法,使得后面的計算和操作更為簡便。
          物理效果 
          在游戲主函數(shù)里,有大量向量之間的運算,用來計算受力的大小和方向。例如,在旋轉(zhuǎn)地球時,通過給予地球邊緣一個持續(xù)力來改變地球的角動量,從而改變旋轉(zhuǎn)角,是一種非常優(yōu)美的方法。
          以黑洞為例,每個天體和地球之間都會形成大小相同,方向相反的力,符合牛頓第三定律
          在物理引擎中,設(shè)置太空為失重環(huán)境,并且置地球的線性速度衰減為 0,符合牛頓第一定律。
          而天體與地球的引力通過牛頓的萬有引力公式計算,符合萬有引力定律。
          除此之外,為了考慮狹義相對論的長度收縮效應(yīng),地球在高速移動的時候,會在與速度垂直的方向收縮,這樣地球會一定程度上變成橢球形。
          另外游戲中的所有天體都會給地球一個力,因此地球所處的引力場其實非常復(fù)雜,這在一定程度上來說帶給了玩家挑戰(zhàn)。
          游戲中的黑洞會有遠(yuǎn)高于其它天體的強引力,而游戲中的白洞會有強斥力,玩家可以充分發(fā)揮自己的能力,利用這樣特性來實現(xiàn)一些高難度技巧性操作。
          游戲在設(shè)計時的細(xì)節(jié)非常多,并且還在不停地打磨和完善,例如黑洞吸進(jìn)了天體會碰撞,兩個黑洞碰撞會形成更大的黑洞,而黑洞和白洞相撞會湮滅。
          實際上玩家想要看到這些效果的概率較低,但是通過這些特性,相信玩家能夠進(jìn)行許多有趣的操作。
          游戲中可以發(fā)射核彈,并且這些核彈會自動尋找距離最近的可打擊天體然后毀滅之。
          而游戲中的彗星在撞擊時沖量很大時會自動銷毀,被恒星或者黑洞捕獲也會自動銷毀。
          地球的每次撞擊都會調(diào)用震動相關(guān) API,以實現(xiàn)更加真實的效果
          游戲的相關(guān)獎罰機制在不斷調(diào)整參數(shù),以達(dá)到更好的效果。
          游戲中充分利用了粒子,以實現(xiàn)更好的視覺效果,這一點在生成星空、彗星的尾巴和火焰時顯得尤為重要。

          視覺效果



          視覺效果這一方面,著色器的作用非常大,然而移動端 GPU 太垃圾,好多著色器運行都會很卡,這是非??上У模@里我還是介紹一下 Cocos Creator 的材質(zhì) Materials 和效果 Effects。
          在 Cocos Creator 里,每個材質(zhì)可以綁定一個 Texture 紋理和 Effects,Effects 是 Cocos Creator 特有的一種程序,里面是包含了配置信息、頂點著色器和片元著色器,其中片元著色器非常強大。
          例如你可以用 shader 程序生成一片動態(tài)的立體星空:
          利用shader生成一顆旋轉(zhuǎn)的恒星:
          甚至一顆立體的、動態(tài)的黑洞:
          或者生成一個銀河系等:

          1



          游戲性能優(yōu)化



          隨著游戲的不斷迭代,我實現(xiàn)了越來越多的效果,同時游戲主邏輯也越來越復(fù)雜,再加上要渲染的實體越來越多,游戲在移動端的幀率有下降趨勢(實際上,游戲在電腦網(wǎng)頁上能夠 200 滿幀運行,然而移動端的性能比較差,可能會不足 60 幀或者有略微掉幀情況)。


          我們先看看游戲在調(diào)試模式下的幀率信息:
          其中 FPS 就是 Frame per Second(每秒的幀數(shù)),一般來說幀率在 60 左右就足夠了,實際上 Cocos Creator 將游戲鎖定在了 60 幀左右,通過修改程序或者調(diào)試模式下更改游戲畫面上方的配置,能提升游戲幀率上限。
          現(xiàn)在我們看到,游戲其實是相當(dāng)流暢的。然而電腦上的流暢不代表移動端的流暢,經(jīng)過我的一些調(diào)試,我發(fā)現(xiàn)其實幀率能夠在 170 以上,移動端就可以比較流暢了。實際上,上方圖片還隱藏了很多信息,下面我一一舉出。
          • Frame Time 游戲運行一幀所需時間 

          • FPS 每秒幀數(shù) 

          • Draw Call CPU 打包發(fā)送給 GPU 去渲染的打包數(shù)量 

          • Game Logic 運行在 CPU上 的游戲處理邏輯每幀所需時間 

          • Renderer GPU 渲染一幀畫面所需時間 

          • WebGL 是否啟用 WebGL 

          實際上,F(xiàn)rame Time = Game Logic + Renderer,從上面的數(shù)據(jù)你也可以看出來。而 FPS 與 Frame Time 成反比,所以我們想要提高游戲的幀率,必須從 Game Logic 和 Renderer 下手。



          優(yōu)化 Game Logic



          使用緩存、算法 
          首先,在 Game Logic 方面,其實是游戲的腳本運行在 CPU上 的耗時,通過緩存游戲?qū)ο?,自動銷毀無用的節(jié)點以及掛載,并運行在其上腳本來提升游戲邏輯方面的性能。
          在游戲加載時,把必要的序列化對象全部加載,并且緩存到一個列表里面。
          每次獲取剛體對象都要調(diào)用 node.getComponent 方法,不如提前緩存了。
          調(diào)用過的方法盡量都緩存下次使用,這樣就不需要重復(fù)調(diào)用方法,大大提高效率。
          另外,其它的一些算法也可以來優(yōu)化游戲性能,例如檢測并作用一個范圍內(nèi)的碰撞體,可以使用四叉樹算法(如果是三維則用八叉樹算法)。
          使用Prefab 
          除此之外,游戲中經(jīng)常出現(xiàn)的或者需要頻繁重復(fù)生成的節(jié)點,利用 Cocos Creator 的序列化功能,提前把這個節(jié)點序列化,生成一個 Prefab 文件,在需要使用時可以通過 cc.instantiate 方法進(jìn)行反序列化,這樣就可以更加高效的獲得一個節(jié)點對象。
          需要注意的是,如果這個 prefab 需要反復(fù)多次頻繁反序列化,需將這個 prefab 設(shè)置為這樣:

          優(yōu)化 Renderer



          自動圖集 
          使用自動圖集能夠讓 Cocos Creator 自動把一系列碎圖打包為整圖,使用自動圖集的優(yōu)勢非常大!
          一張整圖相比碎圖來說網(wǎng)絡(luò)請求次數(shù)更少,或者不需要重復(fù)進(jìn)行硬盤讀寫,從這一方面來說,使用自動圖集能夠減輕 CPU、硬盤、網(wǎng)絡(luò)等方面的壓力。
          更為重要的是,使用整圖可以讓 GPU 一次渲染完成,避免 CPU 重復(fù)調(diào)用 GPU 進(jìn)行渲染,這樣可以降低 Draw Call,而 Draw Call 其實非常大的影響了游戲圖像的渲染效率,所以使用自動圖集能夠提升渲染效率。
          減少節(jié)點數(shù) 
          減少節(jié)點數(shù)同樣是通過降低 Draw Call 來提升游戲性能,所以當(dāng)一個節(jié)點在地圖外不可見,或者以及無用,則考慮將這個節(jié)點自動銷毀。
          優(yōu)化紋理(Materials和Effects) 
          每個 Materials 可以掛載一個 Effects,而 Effects 說白了就算著色器(Shader),著色器分為頂點著色器和片元著色器,它們是直接運行在 GPU 上的程序,能夠在 GPU 層面直接對圖像進(jìn)行操作,效率非常高。
          在合適的時候使用著色器來實現(xiàn)效果,能夠極大地提升游戲性能。
          然而,著色器雖然跑得很卡,也要適可而止。移動端的 GPU 性能遠(yuǎn)低于電腦,在電腦上高清無碼滿幀,可能在手機上就卡成 PPT,所以復(fù)雜的需要大量運算的著色器可能會拖慢游戲圖像的渲染速度,使游戲性能大大降低。
          例如下面這個著色器,在電腦上滿幀,手機上會卡成 PPT。

          最后非常高興能夠和 cyb 和 lby 合作這個游戲項目,游戲的初衷是能完成自己喜歡的作品,并給玩家?guī)砜鞓?/span>希望我們能夠一起加油把這個項目繼續(xù)完善得更好。

          游戲已在微信發(fā)布,歡迎感興趣的童鞋掃碼體驗噢。


          戳【閱讀原文】前往社區(qū)查看更多詳細(xì)信息,快樂交流~
          瀏覽 51
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          評論
          圖片
          表情
          推薦
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  操美眉69 | 国产夫妻自拍网 | 精品人妻一区二区三区视频在线 | 真实亲子乱一区二区 | 亚洲日、韩aⅴ |