建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
背景
現(xiàn)在越來(lái)越多的公司和 App 開(kāi)始使用游戲化的方式去做產(chǎn)品了，所謂游戲化，是指在非游戲環(huán)境中將游戲的思維和游戲的機(jī)制進(jìn)行整合運(yùn)用，以引導(dǎo)用戶(hù)互動(dòng)和使用的方法。
支付寶里面的螞蟻莊園、螞蟻森林，通過(guò)游戲和公益的結(jié)合實(shí)現(xiàn)用戶(hù)的留存和活躍。淘寶支付寶的芭芭農(nóng)場(chǎng)、京東的東東果園、拼多多的多多果園、美團(tuán)的小美果園...無(wú)一不是通過(guò)游戲化的方式去提升用戶(hù)留存的方案。
本篇文章，我們會(huì)列出一些游戲化互動(dòng)類(lèi)的游戲，然后對(duì)一個(gè)案例進(jìn)行拆分，帶大家學(xué)習(xí)一些2D互動(dòng)最基礎(chǔ)的知識(shí)，讓大家能夠快速上手寫(xiě)互動(dòng)游戲。
能做什么
我們來(lái)看幾個(gè)2D互動(dòng)項(xiàng)目，目前，大多數(shù)的互動(dòng)都是以游戲的形式展現(xiàn)，通過(guò)游戲的玩法和精致的效果，讓用戶(hù)有更好的互動(dòng)體驗(yàn)，我們通過(guò)養(yǎng)成，采集，塔防，抓娃娃等類(lèi)似游戲的形式，結(jié)合業(yè)務(wù)屬性，達(dá)到更好的業(yè)務(wù)效果。
基礎(chǔ)學(xué)習(xí)
2D互動(dòng)常用能力
首先，我們看一下2D互動(dòng)游戲所用到的常用能力，第一部分是前端知識(shí)，主要包括渲染所需的繪制工具，游戲循環(huán)，資源加載的能力。
然后是基礎(chǔ)的繪制和動(dòng)畫(huà)能力，也就是前面提到的一些游戲基礎(chǔ)元素。在游戲開(kāi)發(fā)中，會(huì)涉及到很多數(shù)學(xué)相關(guān)的知識(shí)，比如讓游戲中的物體模擬真實(shí)的物理效果，或者像一些游戲中的人機(jī)對(duì)戰(zhàn)中的機(jī)器人，是使用游戲 AI 來(lái)實(shí)現(xiàn)的，在本文中不會(huì)過(guò)多講解數(shù)學(xué)類(lèi)知識(shí)。
互動(dòng)游戲是如何運(yùn)行起來(lái)的
互動(dòng)游戲是如何運(yùn)行起來(lái)的呢？
首先，我們知道，目前很多前端項(xiàng)目都是通過(guò)數(shù)據(jù)帶動(dòng)視圖的，游戲也是這樣的，比如說(shuō)，我們?cè)谟螒蚶锩嬗幸粋€(gè)飛機(jī)，那么，我們需要定義飛機(jī)的尺寸，以及他在游戲中的位置，和他對(duì)應(yīng)的飛機(jī)圖片，這些屬于游戲數(shù)據(jù)，我們將數(shù)據(jù)提交給渲染引擎，渲染引擎根據(jù)這些數(shù)據(jù)內(nèi)容將對(duì)應(yīng)的內(nèi)容渲染到畫(huà)布上。
游戲是動(dòng)態(tài)運(yùn)行的，為了實(shí)現(xiàn)一些動(dòng)畫(huà)/真實(shí)物理效果效果，我們通過(guò)動(dòng)畫(huà)，AI，物理引擎等工具控制數(shù)據(jù)的變化，然后通過(guò)循環(huán)來(lái)持續(xù)修改數(shù)據(jù)，并且渲染到畫(huà)布實(shí)現(xiàn)游戲的運(yùn)行。
循環(huán)
我們知道，通過(guò)循環(huán)來(lái)實(shí)現(xiàn)游戲的運(yùn)行效果，接下來(lái)我們來(lái)看一下在前端瀏覽器環(huán)境下，游戲循環(huán)是如何實(shí)現(xiàn)的。
瀏覽器提供了 requestAnimationFrame 方法，要求瀏覽器在下一次繪制之前，調(diào)用制定的回調(diào)函數(shù)，這個(gè)方法一般是用于更新動(dòng)畫(huà)的。
瀏覽器在的每一次重繪我們叫做1幀，瀏覽器默認(rèn)的繪制頻率是60幀，也就是說(shuō)，正常情況下，瀏覽器一秒會(huì)刷新60次。
通過(guò)下面的方法，我們可以保證每一幀渲染之前，我們可以進(jìn)行數(shù)據(jù)的計(jì)算以及調(diào)用渲染方法：
- const loop = () => { requestAnimationFrame(loop) // 計(jì)算數(shù)據(jù) // 繪制圖形}requestAnimationFrame(loop)
因?yàn)閞equestAnimationFrame方法只會(huì)在下一次繪制前被調(diào)用，所以，我們需要在每次調(diào)用方法的時(shí)候去調(diào)用一次這個(gè)方法保證游戲繼續(xù)運(yùn)行，所以在loop方法里面會(huì)重復(fù)調(diào)用這個(gè)方法。
一般情況下，我們會(huì)把這個(gè)方法放在函數(shù)的最前面，因?yàn)?，如果在?jì)算數(shù)據(jù)和繪制圖形的過(guò)程中報(bào)錯(cuò)了，會(huì)導(dǎo)致程序無(wú)法執(zhí)行到這個(gè)方法，游戲也就停掉了。
畫(huà)布
在 html 中，我們一般使用 canvas 標(biāo)簽來(lái)繪制圖像，它本身沒(méi)有繪制能力，使用 getContext 獲取繪制上下文，調(diào)用上下文上面的方法進(jìn)行繪制。
常用的繪制上下文有 Canvas API 和 WebGL，一般 CanvasAPI 來(lái)繪制2D圖像，WebGL 可繪制 2D 和 3D 圖像，他的性能更高。
canvas 提供了一些比較基礎(chǔ)的 API，但是在互動(dòng)游戲中的元素是比較復(fù)雜的，所以一般都會(huì)有渲染引擎和游戲引擎來(lái)承接這些元素。
本文不會(huì)詳細(xì)講解 Canvas，可以到 MDN 等平臺(tái)學(xué)習(xí)。
基礎(chǔ)渲染
接下來(lái)我會(huì)介紹一下，在2D游戲化互動(dòng)游戲中，我們經(jīng)常用到幾種渲染方案。
圖片
文本
圖形
精靈
九宮格
遮罩
圖片和文本就不用說(shuō)了，是視圖開(kāi)發(fā)中最常用到的。我們從圖形開(kāi)始說(shuō)
圖形
一般在開(kāi)發(fā)中會(huì)經(jīng)常使用一些簡(jiǎn)單的圖形，圖片不僅會(huì)用在直接展示內(nèi)容，也會(huì)用在對(duì)渲染內(nèi)容的遮罩，例如一張圖片只顯示圖形內(nèi)的內(nèi)容，也會(huì)用在按鈕區(qū)域判斷、物理引擎碰撞的形狀等等地方。
精靈
精靈圖也是我們?cè)?CSS 中接觸的精靈圖，就是將多張圖片合成在一張大圖中，在使用時(shí)渲染其中某個(gè)位置，通過(guò)精靈圖的方式，我們可以提高網(wǎng)絡(luò)加載效率以及渲染效率。一般精靈資源是由兩個(gè)文件組成，一個(gè)是圖片文件，另外一個(gè)是位置信息文件。一般使用引擎進(jìn)行渲染時(shí)，只需要關(guān)心對(duì)應(yīng)小圖的名稱(chēng)。
九宮格
我們經(jīng)常會(huì)遇到一些尺寸不固定，但是周?chē)蛩谋闃邮讲蛔冃蔚膱D片，也就是 .9 圖，例如消息氣泡，如果直接設(shè)置寬高會(huì)將整個(gè)氣泡圖片拉變形。
使用九宮格的原理進(jìn)行解決：
一般渲染引擎也會(huì)提供方便的方式實(shí)現(xiàn)。
遮罩
通過(guò)遮罩可以實(shí)現(xiàn)渲染內(nèi)容的遮罩效果，是不是很像給div設(shè)置 overflow:hidden 呢
基礎(chǔ)動(dòng)畫(huà)
過(guò)渡動(dòng)畫(huà)
例如一個(gè)物體經(jīng)過(guò)3秒，從100px的地方移動(dòng)到500px。我們可以通過(guò)以下方法計(jì)算。
startTime 是動(dòng)畫(huà)開(kāi)始的時(shí)間。
如果一個(gè)物體向右做勻速運(yùn)動(dòng)，我們可以使用公式 s = v * t
一般情況下，我們都會(huì)使用現(xiàn)成的動(dòng)畫(huà)庫(kù)，類(lèi)似 Tween.js 實(shí)現(xiàn)，當(dāng)然在實(shí)現(xiàn)復(fù)雜的動(dòng)畫(huà)邏輯時(shí)，還可以使用一些工具，類(lèi)似 Lottie，我們還是需要手寫(xiě)動(dòng)畫(huà)的。
逐幀動(dòng)畫(huà)
骨骼動(dòng)畫(huà)
骨骼動(dòng)畫(huà)可以模擬實(shí)現(xiàn)一些比較復(fù)雜有一定關(guān)節(jié)邏輯的動(dòng)畫(huà)，比起幀動(dòng)畫(huà)而言，所使用的圖片更少，占用內(nèi)存更小。
骨骼動(dòng)畫(huà)主要以下幾部分組成：
骨骼動(dòng)畫(huà)貼圖
骨骼設(shè)計(jì)以及動(dòng)畫(huà)
貼圖+骨骼+動(dòng)畫(huà)
所以骨骼動(dòng)畫(huà)資源一般由三個(gè)文件組成，常用的骨骼動(dòng)畫(huà)設(shè)計(jì)軟件是 Spine 和 Dragonbones，一般是由設(shè)計(jì)師或者動(dòng)畫(huà)設(shè)計(jì)師進(jìn)行設(shè)計(jì)。開(kāi)發(fā)者只需要使用軟件導(dǎo)出的資源即可。
項(xiàng)目實(shí)戰(zhàn)
了解到以上的內(nèi)容，我們就可以開(kāi)發(fā)互動(dòng)項(xiàng)目了，工欲善其事，必先利其器，這里我們推薦由淘系技術(shù)部開(kāi)源的 Eva.js，它是專(zhuān)門(mén)給前端開(kāi)發(fā)者提供的開(kāi)發(fā)游戲化互動(dòng)項(xiàng)目所設(shè)計(jì)的。目前淘寶、天貓、支付寶、優(yōu)酷、阿里媽媽、AliExpress、Lazada、考拉等很多產(chǎn)品都在使用，2020年雙11養(yǎng)貓貓項(xiàng)目也是使用 Eva.js 實(shí)現(xiàn)的。
接下來(lái)我們拿一個(gè)最簡(jiǎn)單的 Demo 來(lái)學(xué)習(xí)使用 Eva.js。
這是一顆心做左右移動(dòng)動(dòng)畫(huà)，點(diǎn)擊后彈出一個(gè)alert。
Eva.js 的游戲是由游戲?qū)ο蠛徒M件構(gòu)成，游戲?qū)ο蟠碛螒蛑械囊粋€(gè)物體，組件代表物體的能力，在這個(gè)例子中，只有一個(gè)物體，他的能力有三個(gè)：
顯示成一個(gè)心的圖片
有一個(gè)左右的過(guò)渡動(dòng)畫(huà)
點(diǎn)擊事件
我們剛剛分析了這個(gè) Demo 所需要的能力，接下來(lái)我們要做 Eva.js 開(kāi)發(fā)游戲的四步操作
Step1 添加資源&創(chuàng)建游戲
- import { resource, Game } from '@eva/eva.js'import { RendererSystem } from '@eva/plugin-renderer'import { ImgSystem } from '@eva/plugin-renderer-img'import { EventSystem } from '@eva/plugin-renderer-event'import { TransitionSystem } from '@eva/plugin-transition'resource.addResource([ { name: 'imageName', type: RESOURCE_TYPE.IMAGE, src: { image: { type: 'png', url: '//gw.alicdn.com/bao/uploaded/TB1lVHuaET1gK0jSZFhXXaAtVXa-200-200.png', }, }, preload: true, },]);const game = new Game({ systems: [ new RendererSystem({ canvas: document.querySelector('#canvas'), width: 750, height: 1000, }), new ImgSystem(), new EventSystem(), new TransitionSystem() ],});
addResource 傳入了一個(gè)資源的里面，這里不一定只有圖片資源，還可以有幀動(dòng)畫(huà)、骨骼動(dòng)畫(huà)等等資源，這里以圖片資源舉例子。更多Demo可以進(jìn)入 Eva.js 官網(wǎng) 中查看。
在添加資源之后，我們也創(chuàng)建了一個(gè)游戲?qū)嵗?，這是運(yùn)行游戲的主要運(yùn)行時(shí)， 因?yàn)?Eva.js 只有一個(gè)最核心的游戲運(yùn)行時(shí)，所以我們所有的功能都是要自己安裝的哦～所以我們要安裝這個(gè)游戲所需要的系統(tǒng)，圖片、事件、動(dòng)畫(huà)。
RendererSystem 是用來(lái)將游戲渲染出來(lái)的系統(tǒng)，所有渲染的能力都依賴(lài)這個(gè)系統(tǒng)，里面設(shè)置了寬高以及所要渲染的canvas對(duì)象。
ImgSystem 是用來(lái)畫(huà)圖片的系統(tǒng)
EventSystem 是用來(lái)觸發(fā)點(diǎn)擊事件的系統(tǒng)
TransitionSystem 是用來(lái)做位移動(dòng)畫(huà)的系統(tǒng)
Step2 創(chuàng)建對(duì)象，并設(shè)置定位
- import { GameObject } from '@eva/eva.js'const heart = new GameObject('heart', { size: { width: 200, height: 200 }, position: { x: 0, y: 0, }, origin: { x: 0, y: 0 }, anchor: { x: 0, y: 0, },});
GameObject 的第一個(gè)參數(shù)為對(duì)象的名稱(chēng)，第二個(gè)參數(shù)為對(duì)象的位置信息，其中 size 設(shè)置對(duì)象大小， position 設(shè)置位置，其他的可以后續(xù)參考文檔學(xué)習(xí)哦～
Step3 添加所需要的組件
剛剛我們?cè)?new Game 的時(shí)候添加了實(shí)現(xiàn)視頻功能所需要的系統(tǒng)，這些系統(tǒng)是為了讀取組件上面的數(shù)值然后實(shí)現(xiàn)功能的，所以，我們需要給對(duì)象添加組件以后，才能夠讓對(duì)象實(shí)現(xiàn)對(duì)應(yīng)的功能。
我們目前所需要的功能是圖片渲染、點(diǎn)擊事件、位移動(dòng)畫(huà)，所以我們要添加三個(gè)組件
圖片渲染
- import { Img } from '@eva/plugin-renderer-img'heart.addComponent( new Img({ resource: 'imageName', }),);
調(diào)用 heart 的 addComponent 方法既可添加組件，這里我們添加 Img 組件， Img 組件有個(gè) resource 參數(shù)，該參數(shù)是圖片資源的名稱(chēng)，其實(shí)對(duì)應(yīng)了 Step1 中添加的圖片資源的名稱(chēng)。當(dāng)然雪碧圖、骨骼動(dòng)畫(huà)也是同樣的原理，需要在 resource 中添加資源，在添加組件的時(shí)候使用。
點(diǎn)擊事件
- import { Event } from '@eva/plugin-renderer-event'const evt = heart.addComponent(new Event())evt.on('tap', () => { alert(1)})
給游戲?qū)ο筇砑右粋€(gè) Event 組件，并通過(guò) on 方法綁定 tap 事件， on 的第二個(gè)參數(shù)為 tap 事件所觸發(fā)的函數(shù)，當(dāng)然，Event 組件還有其他事件，我們可以通過(guò) Eva.js 文檔查看。
位移動(dòng)畫(huà)
- import { Transition } from '@eva/plugin-transition'const transition = heart.addComponent(new Transition())transition.group = { idle: [ { name: 'position.x', component: heart.transform, values: [ { time: 0, value: 0, tween: 'ease', }, { time: 1000, value: 400, tween: 'ease', }, { time: 2000, value: 0 } ] } ]}transition.play('idle', Infinity)
上面的代碼中，我們創(chuàng)建了一個(gè)動(dòng)畫(huà)組，名字叫做 idle 當(dāng)前動(dòng)畫(huà)組里面，我們對(duì) heart.transform 組件的 position.x 屬性進(jìn)行數(shù)值變化，0->1000ms，數(shù)值從0->400，1000ms->2000ms，數(shù)值從400->0，然后使用 Transition 組件的 play 方法，讓動(dòng)畫(huà)執(zhí)行 Infinity 次。
Step4 運(yùn)行
一般游戲都是自動(dòng)運(yùn)行的，所以做完以上工作后，游戲會(huì)自動(dòng)開(kāi)始運(yùn)行。
總結(jié)
未來(lái)會(huì)有越來(lái)越多的游戲化產(chǎn)品，開(kāi)發(fā)互動(dòng)類(lèi)游戲?qū)⒊蔀榍岸斯こ處煹谋貍浼寄埽ㄟ^(guò)本篇文章，我們可以了解到一些基礎(chǔ)的游戲化互動(dòng)技術(shù)，也通過(guò) Eva.js 學(xué)習(xí)了如何實(shí)現(xiàn)一個(gè)最簡(jiǎn)單的互動(dòng)游戲。
如果想對(duì)游戲化、互動(dòng)技術(shù)更加深入，我們需要去深入學(xué)習(xí)游戲引擎、渲染原理、動(dòng)畫(huà)、物理、音效等技術(shù)，對(duì)于互動(dòng)業(yè)務(wù)開(kāi)發(fā)來(lái)說(shuō) Eva.js 目前能滿(mǎn)足大部分需求。
前端領(lǐng)域中游戲化方向剛剛起步， Eva.js 是專(zhuān)注于開(kāi)發(fā)游戲化項(xiàng)目的游戲引擎，也處于剛剛起步的狀態(tài)，未來(lái) Eva.js 會(huì)繼續(xù)專(zhuān)注于前端，專(zhuān)注于游戲化項(xiàng)目，讓游戲化項(xiàng)目開(kāi)發(fā)更簡(jiǎn)單。我們也希望大家能夠參與到前端游戲化領(lǐng)域的建設(shè)中來(lái)，我們也會(huì)陸續(xù)分享相關(guān)的技術(shù)，輸出游戲化項(xiàng)目開(kāi)發(fā)能力。
文章名稱(chēng)：所有前端都要看的2D游戲化互動(dòng)入門(mén)基礎(chǔ)知識(shí)
轉(zhuǎn)載來(lái)源：http://www.5511xx.com/article/dhsgcgo.html
