黄色日本国产,91牛,台湾成人国产,日韩性爱A∨,欧美日韩A V,五月丁香婷婷导航在线播放,一级欧美在线现看,久热在这里只有精品66

春節(jié)這段時(shí)間，社區(qū)有 3?位來(lái)自華南師范大學(xué)的大一新生寒假爆肝?14 天，一起完成了一個(gè)太空科幻題材小游戲的創(chuàng)作，已經(jīng)上線發(fā)布在微信小游戲，用戶滿意度更是全 5?分，目前游戲完全免費(fèi)也沒(méi)有任何廣告，感興趣的童鞋可以微信搜索【星旅StarTrek】體驗(yàn)一下噢。

游戲講了一個(gè)關(guān)于述人類(lèi)命運(yùn)存亡的科幻故事。在游戲中你可以探索無(wú)限大的宇宙空間，在符合物理的太空中自由穿梭與幾十種不同的行星、恒星、超新星、彗星、黑洞與白洞之間。

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

大家好，我是?HK-SHAO?，隨著游戲的不斷迭代，游戲效果、內(nèi)容也逐漸豐富，游戲項(xiàng)目和其代碼有越來(lái)越多的細(xì)節(jié)實(shí)現(xiàn)需要注意。

所以我特寫(xiě)下周記，記錄一些我在開(kāi)發(fā)過(guò)程中，游戲效果實(shí)現(xiàn)的方法、原理，以及一些需要注意的方面。同時(shí)也很感謝 Cocos 為我們提供了免費(fèi)的開(kāi)發(fā)工具進(jìn)行游戲的創(chuàng)作！

囿于時(shí)間匆忙，內(nèi)容可能會(huì)略顯晦澀和粗糙，見(jiàn)諒。

TS 和?Creator 的簡(jiǎn)單介紹

首先，這個(gè) Cocos Creator 小游戲的程序部分是用 TypeScript 編寫(xiě)的，原因在于 TypeScript 是一個(gè)比較嚴(yán)謹(jǐn)?shù)恼Z(yǔ)言，它是由微軟開(kāi)發(fā)的，擁有強(qiáng)類(lèi)型并且比 JavaScript 的功能更多，被稱(chēng)作 JavaScript 的超集。

TypeScript 可以被編譯成任何版本的 JavaScript，所以它完全可以代替 JavaScript。

正是由于 TypeScript 的強(qiáng)類(lèi)型，TypeScript 代碼的編寫(xiě)不容易出現(xiàn)隱藏的錯(cuò)誤，因?yàn)?IDE 會(huì)進(jìn)行非常好的錯(cuò)誤提示，這樣能夠大大提升代碼的生產(chǎn)力。

另外，用 TypeScript 編寫(xiě)游戲腳本，IDE 會(huì)進(jìn)行代碼提示，一個(gè)對(duì)象是什么類(lèi)型、擁有哪些成員變量和方法、這些方法的作用是什么，這些 IDE 都會(huì)在代碼編寫(xiě)過(guò)程中給予提示，省去了頻繁查找 Cocos Creator 官方文檔的麻煩。

然而上述在軟件開(kāi)發(fā)過(guò)程中 IDE 提供的比較基本的功能，由于 JavaScript 的弱類(lèi)型而都無(wú)法提供。

在 Cocos Creator 里面，每個(gè)實(shí)體都是節(jié)點(diǎn)（cc.Node），而這些節(jié)點(diǎn)的結(jié)構(gòu)都是樹(shù)狀的，我個(gè)人覺(jué)得這個(gè)設(shè)計(jì)特別好，不僅對(duì)于這個(gè)游戲引擎來(lái)說(shuō)能夠提高某些算法的效率，而且對(duì)于游戲開(kāi)發(fā)者來(lái)說(shuō)能夠省去不少功夫。

這里要提的是，在前端開(kāi)發(fā)中，網(wǎng)頁(yè)的 DOM（文檔對(duì)象模型）也是樹(shù)狀的，正是因?yàn)檫@個(gè)數(shù)據(jù)結(jié)構(gòu)的優(yōu)越性，網(wǎng)頁(yè)才能被快速的渲染和更新。

正是由于 Cocos Creaor 使用了這樣的數(shù)據(jù)結(jié)構(gòu)，再加上它的游戲腳本是前端里的 JavaScript 或者 TypeScript，所以 Cocos Creaor 的游戲能夠被打包到幾乎所有平臺(tái)（包括 Windows、Android、Linux、Mac OS、Web 以及許多第三方平臺(tái)例如微信小游戲、百度小游戲等）。

簡(jiǎn)單點(diǎn)來(lái)說(shuō)，只要能夠打開(kāi)瀏覽器上網(wǎng)的平臺(tái)，CoCos Creator 都能夠一鍵打包并發(fā)布到這個(gè)平臺(tái)。

接下來(lái)，我會(huì)把游戲開(kāi)發(fā)里面的一些技術(shù)細(xì)節(jié)一一列舉出來(lái)

動(dòng)效和物理效果

非線性動(dòng)效?

非線性動(dòng)效相比線性的、勻速的動(dòng)效在視覺(jué)觀感上會(huì)好很多，這在現(xiàn)在的手機(jī)系統(tǒng)動(dòng)畫(huà)以及一些優(yōu)秀的 PPT 內(nèi)應(yīng)用非常廣泛。這個(gè)游戲在很多方面多次使用了一種非線性函數(shù)實(shí)現(xiàn)動(dòng)效，以達(dá)到流暢、柔和的視覺(jué)效果。

這個(gè)非線性函數(shù)其實(shí)就是這個(gè)微分方程? y ′=y ( 1 ? y )? 的解，這是一個(gè)非常有用的非線性函數(shù)，在各種領(lǐng)域作用廣泛。

例如開(kāi)源的 Python 數(shù)學(xué)可視化引擎 Mainm 里就有它的身影，最近開(kāi)源的動(dòng)畫(huà)引擎 movy.js 也有它的身影，除此之外這個(gè)魔幻的函數(shù)還在高中生物的種群密度、人口學(xué)、統(tǒng)計(jì)學(xué)等多個(gè)領(lǐng)域大顯用途。我們先解一下這個(gè)微分方程。

如果常數(shù) C 為 0，最后可以化成??

，這其實(shí)就是大名鼎鼎的 sigmoid 函數(shù)，其還在人工智能領(lǐng)域應(yīng)用廣泛。

這個(gè)函數(shù)曲線是 S 形的，所以高中生物也稱(chēng)作 S 形曲線。它也被稱(chēng)作 Logistic 函數(shù)，在最近的疫情分析，傳染病模型里面也有它的身影，它的形狀是這樣的。我們可以看到，它的定義域是實(shí)數(shù)集，值域是 [ 0 , 1 ] ，并且從 0 到 1 變化非常緩和。

好了，回歸正題，我在 Cocos Creator 的游戲開(kāi)發(fā)中頻繁的使用了這個(gè)優(yōu)美的函數(shù)曲線，達(dá)到了比較賞心悅目的平滑動(dòng)畫(huà)效果。

它在程序里的實(shí)現(xiàn)方式是這樣的? y ← y ? ( 2 ? y ) 。更通俗一點(diǎn)來(lái)說(shuō)，如果我想讓一個(gè)值 t 平滑的從 min 變化到 max 可以在 update 函數(shù)里這樣寫(xiě)。

t += (max-t)*dt*speed;

反之，如果我想讓一個(gè)值 t 平滑的從max變化到 min 可以在 update 函數(shù)里這樣寫(xiě)。

t -= (t-min)*dt*speed;

例如，我使用這種方法實(shí)現(xiàn)了根據(jù)觸摸改變的非常平滑的攝影機(jī)縮放效果。

除此之外，根據(jù)地球到太陽(yáng)的距離自動(dòng)顯示距離箭頭，并且根據(jù)觸摸自動(dòng)隱藏或者顯示，也利用了這個(gè)特性。

游戲中為了實(shí)現(xiàn)平滑而不生硬的視覺(jué)效果，我均采用改變游戲中實(shí)體受力的方式而避免直接改變速度，因?yàn)橹苯痈淖兯俣韧窃谧矒魰r(shí)發(fā)生的，在其它情況盡量少發(fā)生。

例如，游戲中操控地球的前進(jìn)，是給予地球剛體一個(gè)根據(jù)觸摸位置而發(fā)生改變的持續(xù)力。而改變地球的旋轉(zhuǎn)角度，則避免直接改變地球的旋轉(zhuǎn)角，而是給予地球邊緣一個(gè)小的持續(xù)力，以改變地球的角動(dòng)量，從而實(shí)現(xiàn)改變地球的旋轉(zhuǎn)角。

此外，我避免攝影機(jī)和背景直接跟隨攝影機(jī)，而是通過(guò)給予它們對(duì)應(yīng)剛體的受力，來(lái)實(shí)現(xiàn)一種錯(cuò)位的立體感和平滑移動(dòng)感。

歸一化?

一個(gè)向量的歸一化就是這個(gè)向量的單位向量，在 Cocos Creator 里面，有 cc.Vec2 和 cc.Vec3 兩種類(lèi)型的向量，它們都有 normalize 這個(gè)方法獲得單位向量。但是有時(shí)候我想把一個(gè)實(shí)數(shù)歸一化怎么辦？

聰明的讀者可能已經(jīng)想到了前文所提及的 sigmoid 函數(shù)，但是除此之外，我們其實(shí)還可以用 arctan 函數(shù)來(lái)對(duì)一個(gè)實(shí)數(shù)歸一化，讓它的值介于 0 到 1 之間。實(shí)際上這個(gè)函數(shù)作為激活函數(shù)在人工智能領(lǐng)域也和 sigmoid 一樣應(yīng)用廣泛。

將一個(gè)實(shí)數(shù)歸一化之后，我們能夠較為容易的對(duì)這個(gè)數(shù)進(jìn)行操作，這種方法在圖形學(xué)，例如 Shader 程序設(shè)計(jì)里面應(yīng)用廣泛。我在游戲腳本里也用了這種方法，使得后面的計(jì)算和操作更為簡(jiǎn)便。

物理效果?

在游戲主函數(shù)里，有大量向量之間的運(yùn)算，用來(lái)計(jì)算受力的大小和方向。例如，在旋轉(zhuǎn)地球時(shí)，通過(guò)給予地球邊緣一個(gè)持續(xù)力來(lái)改變地球的角動(dòng)量，從而改變旋轉(zhuǎn)角，是一種非常優(yōu)美的方法。

以黑洞為例，每個(gè)天體和地球之間都會(huì)形成大小相同，方向相反的力，符合牛頓第三定律

在物理引擎中，設(shè)置太空為失重環(huán)境，并且置地球的線性速度衰減為 0，符合牛頓第一定律。

而天體與地球的引力通過(guò)牛頓的萬(wàn)有引力公式計(jì)算，符合萬(wàn)有引力定律。

除此之外，為了考慮狹義相對(duì)論的長(zhǎng)度收縮效應(yīng)，地球在高速移動(dòng)的時(shí)候，會(huì)在與速度垂直的方向收縮，這樣地球會(huì)一定程度上變成橢球形。

另外游戲中的所有天體都會(huì)給地球一個(gè)力，因此地球所處的引力場(chǎng)其實(shí)非常復(fù)雜，這在一定程度上來(lái)說(shuō)帶給了玩家挑戰(zhàn)。

游戲中的黑洞會(huì)有遠(yuǎn)高于其它天體的強(qiáng)引力，而游戲中的白洞會(huì)有強(qiáng)斥力，玩家可以充分發(fā)揮自己的能力，利用這樣特性來(lái)實(shí)現(xiàn)一些高難度技巧性操作。

游戲在設(shè)計(jì)時(shí)的細(xì)節(jié)非常多，并且還在不停地打磨和完善，例如黑洞吸進(jìn)了天體會(huì)碰撞，兩個(gè)黑洞碰撞會(huì)形成更大的黑洞，而黑洞和白洞相撞會(huì)湮滅。

實(shí)際上玩家想要看到這些效果的概率較低，但是通過(guò)這些特性，相信玩家能夠進(jìn)行許多有趣的操作。

游戲中可以發(fā)射核彈，并且這些核彈會(huì)自動(dòng)尋找距離最近的可打擊天體然后毀滅之。

而游戲中的彗星在撞擊時(shí)沖量很大時(shí)會(huì)自動(dòng)銷(xiāo)毀，被恒星或者黑洞捕獲也會(huì)自動(dòng)銷(xiāo)毀。

地球的每次撞擊都會(huì)調(diào)用震動(dòng)相關(guān) API，以實(shí)現(xiàn)更加真實(shí)的效果

游戲的相關(guān)獎(jiǎng)罰機(jī)制在不斷調(diào)整參數(shù)，以達(dá)到更好的效果。

游戲中充分利用了粒子，以實(shí)現(xiàn)更好的視覺(jué)效果，這一點(diǎn)在生成星空、彗星的尾巴和火焰時(shí)顯得尤為重要。

視覺(jué)效果

視覺(jué)效果這一方面，著色器的作用非常大，然而移動(dòng)端 GPU 太垃圾，好多著色器運(yùn)行都會(huì)很卡，這是非?？上У模@里我還是介紹一下 Cocos Creator 的材質(zhì) Materials 和效果 Effects。

在 Cocos Creator 里，每個(gè)材質(zhì)可以綁定一個(gè) Texture 紋理和 Effects，Effects 是 Cocos Creator 特有的一種程序，里面是包含了配置信息、頂點(diǎn)著色器和片元著色器，其中片元著色器非常強(qiáng)大。

例如你可以用 shader 程序生成一片動(dòng)態(tài)的立體星空：

利用shader生成一顆旋轉(zhuǎn)的恒星：

甚至一顆立體的、動(dòng)態(tài)的黑洞：

或者生成一個(gè)銀河系等：

游戲性能優(yōu)化

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

我們先看看游戲在調(diào)試模式下的幀率信息：

其中 FPS 就是 Frame per Second（每秒的幀數(shù)），一般來(lái)說(shuō)幀率在 60 左右就足夠了，實(shí)際上 Cocos Creator 將游戲鎖定在了 60 幀左右，通過(guò)修改程序或者調(diào)試模式下更改游戲畫(huà)面上方的配置，能提升游戲幀率上限。

現(xiàn)在我們看到，游戲其實(shí)是相當(dāng)流暢的。然而電腦上的流暢不代表移動(dòng)端的流暢，經(jīng)過(guò)我的一些調(diào)試，我發(fā)現(xiàn)其實(shí)幀率能夠在 170 以上，移動(dòng)端就可以比較流暢了。實(shí)際上，上方圖片還隱藏了很多信息，下面我一一舉出。

Frame Time 游戲運(yùn)行一幀所需時(shí)間?
FPS 每秒幀數(shù)?
Draw Call CPU 打包發(fā)送給 GPU 去渲染的打包數(shù)量?
Game Logic 運(yùn)行在 CPU上的游戲處理邏輯每幀所需時(shí)間?
Renderer GPU 渲染一幀畫(huà)面所需時(shí)間?
WebGL 是否啟用 WebGL?

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

優(yōu)化 Game Logic

使用緩存、算法?

首先，在 Game Logic 方面，其實(shí)是游戲的腳本運(yùn)行在 CPU上的耗時(shí)，通過(guò)緩存游戲?qū)ο?，自?dòng)銷(xiāo)毀無(wú)用的節(jié)點(diǎn)以及掛載，并運(yùn)行在其上腳本來(lái)提升游戲邏輯方面的性能。

在游戲加載時(shí)，把必要的序列化對(duì)象全部加載，并且緩存到一個(gè)列表里面。

每次獲取剛體對(duì)象都要調(diào)用 node.getComponent 方法，不如提前緩存了。

調(diào)用過(guò)的方法盡量都緩存下次使用，這樣就不需要重復(fù)調(diào)用方法，大大提高效率。

另外，其它的一些算法也可以來(lái)優(yōu)化游戲性能，例如檢測(cè)并作用一個(gè)范圍內(nèi)的碰撞體，可以使用四叉樹(shù)算法（如果是三維則用八叉樹(shù)算法）。

使用Prefab?

除此之外，游戲中經(jīng)常出現(xiàn)的或者需要頻繁重復(fù)生成的節(jié)點(diǎn)，利用 Cocos Creator 的序列化功能，提前把這個(gè)節(jié)點(diǎn)序列化，生成一個(gè) Prefab 文件，在需要使用時(shí)可以通過(guò) cc.instantiate 方法進(jìn)行反序列化，這樣就可以更加高效的獲得一個(gè)節(jié)點(diǎn)對(duì)象。

需要注意的是，如果這個(gè) prefab 需要反復(fù)多次頻繁反序列化，需將這個(gè) prefab 設(shè)置為這樣：

優(yōu)化?Renderer

自動(dòng)圖集?

使用自動(dòng)圖集能夠讓 Cocos Creator?自動(dòng)把一系列碎圖打包為整圖，使用自動(dòng)圖集的優(yōu)勢(shì)非常大！

一張整圖相比碎圖來(lái)說(shuō)網(wǎng)絡(luò)請(qǐng)求次數(shù)更少，或者不需要重復(fù)進(jìn)行硬盤(pán)讀寫(xiě)，從這一方面來(lái)說(shuō)，使用自動(dòng)圖集能夠減輕 CPU、硬盤(pán)、網(wǎng)絡(luò)等方面的壓力。

更為重要的是，使用整圖可以讓 GPU 一次渲染完成，避免 CPU 重復(fù)調(diào)用 GPU 進(jìn)行渲染，這樣可以降低 Draw Call，而 Draw Call 其實(shí)非常大的影響了游戲圖像的渲染效率，所以使用自動(dòng)圖集能夠提升渲染效率。

減少節(jié)點(diǎn)數(shù)?

減少節(jié)點(diǎn)數(shù)同樣是通過(guò)降低 Draw Call 來(lái)提升游戲性能，所以當(dāng)一個(gè)節(jié)點(diǎn)在地圖外不可見(jiàn)，或者以及無(wú)用，則考慮將這個(gè)節(jié)點(diǎn)自動(dòng)銷(xiāo)毀。

優(yōu)化紋理（Materials和Effects）?

每個(gè) Materials 可以掛載一個(gè) Effects，而 Effects 說(shuō)白了就算著色器（Shader），著色器分為頂點(diǎn)著色器和片元著色器，它們是直接運(yùn)行在 GPU 上的程序，能夠在 GPU 層面直接對(duì)圖像進(jìn)行操作，效率非常高。

在合適的時(shí)候使用著色器來(lái)實(shí)現(xiàn)效果，能夠極大地提升游戲性能。

然而，著色器雖然跑得很卡，也要適可而止。移動(dòng)端的 GPU 性能遠(yuǎn)低于電腦，在電腦上高清無(wú)碼滿幀，可能在手機(jī)上就卡成 PPT，所以復(fù)雜的需要大量運(yùn)算的著色器可能會(huì)拖慢游戲圖像的渲染速度，使游戲性能大大降低。

例如下面這個(gè)著色器，在電腦上滿幀，手機(jī)上會(huì)卡成 PPT。

最后非常高興能夠和 cyb 和 lby 合作這個(gè)游戲項(xiàng)目，做游戲的初衷是能完成自己喜歡的作品，并給玩家?guī)?lái)快樂(lè)，希望我們能夠一起加油把這個(gè)項(xiàng)目繼續(xù)完善得更好。

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

戳【閱讀原文】前往社區(qū)查看更多詳細(xì)信息，快樂(lè)交流~

顫抖吧！零零后已經(jīng)開(kāi)始爆肝寫(xiě)游戲了！

顫抖吧！零零后已經(jīng)開(kāi)始爆肝寫(xiě)游戲了！