前端必看 | 2D遊戲化互動入門基礎知識

時間 2021-07-22

標籤 html 前端 canvas segmentfault 瀏覽器網絡前端工程師函數工具 oop 欄目遊戲简体版

原文原文鏈接

簡介：在非遊戲環境中將遊戲的思惟和遊戲的機制進行整合運用，以引導用戶互動和使用

本文做者：淘系前端團隊-Eva.js做者-明非html

CodeDay#7 北京站報名ing，歡迎點擊免費報名。前端

背景

如今愈來愈多的公司和 App 開始使用遊戲化的方式去作產品了，所謂遊戲化，是指在非遊戲環境中將遊戲的思惟和遊戲的機制進行整合運用，以引導用戶互動和使用的方法。canvas

支付寶裏面的螞蟻莊園、螞蟻森林，經過遊戲和公益的結合實現用戶的留存和活躍。淘寶支付寶的芭芭農場、京東的東東果園、拼多多的多多果園、美團的小美果園...無一不是經過遊戲化的方式去提高用戶留存的方案。segmentfault

本篇文章，咱們會列出一些遊戲化互動類的遊戲，而後對一個案例進行拆分，帶你們學習一些2D互動最基礎的知識，讓你們可以快速上手寫互動遊戲。瀏覽器

能作什麼

咱們來看幾個2D互動項目，目前，大多數的互動都是以遊戲的形式展示，經過遊戲的玩法和精緻的效果，讓用戶有更好的互動體驗，咱們經過養成，採集，塔防，抓娃娃等相似遊戲的形式，結合業務屬性，達到更好的業務效果。網絡

基礎學習

2D互動經常使用能力

首先，咱們看一下2D互動遊戲所用到的經常使用能力，第一部分是前端知識，主要包括渲染所需的繪製工具，遊戲循環，資源加載的能力。前端工程師

而後是基礎的繪製和動畫能力，也就是前面提到的一些遊戲基礎元素。在遊戲開發中，會涉及到不少數學相關的知識，好比讓遊戲中的物體模擬真實的物理效果，或者像一些遊戲中的人機對戰中的機器人，是使用遊戲 AI 來實現的，在本文中不會過多講解數學類知識。函數

互動遊戲是如何運行起來的

互動遊戲是如何運行起來的呢？工具

首先，咱們知道，目前不少前端項目都是經過數據帶動視圖的，遊戲也是這樣的，好比說，咱們在遊戲裏面有一個飛機，那麼，咱們須要定義飛機的尺寸，以及他在遊戲中的位置，和他對應的飛機圖片，這些屬於遊戲數據，咱們將數據提交給渲染引擎，渲染引擎根據這些數據內容將對應的內容渲染到畫布上。oop

遊戲是動態運行的，爲了實現一些動畫/真實物理效果效果，咱們經過動畫，AI，物理引擎等工具控制數據的變化，而後經過循環來持續修改數據，而且渲染到畫布實現遊戲的運行。

循環

咱們知道，經過循環來實現遊戲的運行效果，接下來咱們來看一下在前端瀏覽器環境下，遊戲循環是如何實現的。

瀏覽器提供了 requestAnimationFrame 方法，要求瀏覽器在下一次繪製以前，調用制定的回調函數，這個方法通常是用於更新動畫的。

瀏覽器在的每一次重繪咱們叫作1幀，瀏覽器默認的繪製頻率是60幀，也就是說，正常狀況下，瀏覽器一秒會刷新60次。

經過下面的方法，咱們能夠保證每一幀渲染以前，咱們能夠進行數據的計算以及調用渲染方法：

const loop = () => {
  requestAnimationFrame(loop)
  // 計算數據
  // 繪製圖形
}
requestAnimationFrame(loop)

由於requestAnimationFrame方法只會在下一次繪製前被調用，因此，咱們須要在每次調用方法的時候去調用一次這個方法保證遊戲繼續運行，因此在loop方法裏面會重複調用這個方法。

通常狀況下，咱們會把這個方法放在函數的最前面，由於，若是在計算數據和繪製圖形的過程當中報錯了，會致使程序沒法執行到這個方法，遊戲也就停掉了。

畫布

在 html 中，咱們通常使用 canvas 標籤來繪製圖像，它自己沒有繪製能力，使用 getContext 獲取繪製上下文，調用上下文上面的方法進行繪製。

經常使用的繪製上下文有 Canvas API 和 WebGL，通常 CanvasAPI 來繪製2D圖像，WebGL 可繪製 2D 和 3D 圖像，他的性能更高。

canvas 提供了一些比較基礎的 API，可是在互動遊戲中的元素是比較複雜的，因此通常都會有渲染引擎和遊戲引擎來承接這些元素。

本文不會詳細講解 Canvas，能夠到 MDN 等平臺學習。

基礎渲染

接下來我會介紹一下，在2D遊戲化互動遊戲中，咱們常常用到幾種渲染方案。

圖片
文本
圖形
精靈
九宮格
遮罩

圖片和文本就不用說了，是視圖開發中最經常使用到的。咱們從圖形開始說

圖形

通常在開發中會常用一些簡單的圖形，圖片不只會用在直接展現內容，也會用在對渲染內容的遮罩，例如一張圖片只顯示圖形內的內容，也會用在按鈕區域判斷、物理引擎碰撞的形狀等等地方。

精靈

精靈圖也是咱們在 CSS 中接觸的精靈圖，就是將多張圖片合成在一張大圖中，在使用時渲染其中某個位置，經過精靈圖的方式，咱們能夠提升網絡加載效率以及渲染效率。通常精靈資源是由兩個文件組成，一個是圖片文件，另一個是位置信息文件。通常使用引擎進行渲染時，只須要關心對應小圖的名稱。

九宮格

咱們常常會遇到一些尺寸不固定，可是周圍或四遍樣式不變形的圖片，也就是 .9 圖，例如消息氣泡，若是直接設置寬高會將整個氣泡圖片拉變形。

使用九宮格的原理進行解決：

通常渲染引擎也會提供方便的方式實現。

遮罩

經過遮罩能夠實現渲染內容的遮罩效果，是否是很像給div設置 overflow:hidden 呢

基礎動畫

過渡動畫

例如一個物體通過3秒，從100px的地方移動到500px。咱們能夠經過如下方法計算。
startTime 是動畫開始的時間。

若是一個物體向右作勻速運動，咱們可使用公式 s = v * t

通常狀況下，咱們都會使用現成的動畫庫，相似 Tween.js 實現，固然在實現複雜的動畫邏輯時，還可使用一些工具，相似 Lottie，咱們仍是須要手寫動畫的。

逐幀動畫

骨骼動畫

骨骼動畫能夠模擬實現一些比較複雜有必定關節邏輯的動畫，比起幀動畫而言，所使用的圖片更少，佔用內存更小。

骨骼動畫主要如下幾部分組成：

骨骼動畫貼圖

骨骼設計以及動畫

貼圖+骨骼+動畫

因此骨骼動畫資源通常由三個文件組成，經常使用的骨骼動畫設計軟件是 Spine 和 Dragonbones，通常是由設計師或者動畫設計師進行設計。開發者只須要使用軟件導出的資源便可。

項目實戰

瞭解到以上的內容，咱們就能夠開發互動項目了，工欲善其事，必先利其器，這裏咱們推薦由淘系技術部開源的 Eva.js，它是專門給前端開發者提供的開發遊戲化互動項目所設計的。目前淘寶、天貓、支付寶、優酷、阿里媽媽、AliExpress、Lazada、考拉等不少產品都在使用，2020年雙11養貓貓項目也是使用 Eva.js 實現的。

接下來咱們拿一個最簡單的 Demo 來學習使用 Eva.js。

這是一顆心作左右移動動畫，點擊後彈出一個alert。

Eva.js 的遊戲是由遊戲對象和組件構成，遊戲對象表明遊戲中的一個物體，組件表明物體的能力，在這個例子中，只有一個物體，他的能力有三個：

顯示成一個心的圖片
有一個左右的過渡動畫
點擊事件

咱們剛剛分析了這個 Demo 所須要的能力，接下來咱們要作 Eva.js 開發遊戲的四步操做

Step1 添加資源&建立遊戲

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 傳入了一個資源的裏面，這裏不必定只有圖片資源，還能夠有幀動畫、骨骼動畫等等資源，這裏以圖片資源舉例子。更多Demo能夠進入 Eva.js 官網中查看。

在添加資源以後，咱們也建立了一個遊戲實例，這是運行遊戲的主要運行時，由於 Eva.js 只有一個最核心的遊戲運行時，因此咱們全部的功能都是要本身安裝的哦～因此咱們要安裝這個遊戲所須要的系統，圖片、事件、動畫。

RendererSystem 是用來將遊戲渲染出來的系統，全部渲染的能力都依賴這個系統，裏面設置了寬高以及所要渲染的canvas對象。
ImgSystem 是用來畫圖片的系統
EventSystem 是用來觸發點擊事件的系統
TransitionSystem 是用來作位移動畫的系統

Step2 建立對象，並設置定位

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 的第一個參數爲對象的名稱，第二個參數爲對象的位置信息，其中 size 設置對象大小， position 設置位置，其餘的能夠後續參考文檔學習哦～

Step3 添加所須要的組件

剛剛咱們在 new Game 的時候添加了實現視頻功能所須要的系統，這些系統是爲了讀取組件上面的數值而後實現功能的，因此，咱們須要給對象添加組件之後，纔可以讓對象實現對應的功能。

咱們目前所須要的功能是圖片渲染、點擊事件、位移動畫，因此咱們要添加三個組件

圖片渲染

import { Img } from '@eva/plugin-renderer-img'

heart.addComponent(
  new Img({
    resource: 'imageName',
  }),
);

調用 heart 的 addComponent 方法既可添加組件，這裏咱們添加 Img 組件， Img 組件有個 resource 參數，該參數是圖片資源的名稱，其實對應了 Step1 中添加的圖片資源的名稱。固然雪碧圖、骨骼動畫也是一樣的原理，須要在 resource 中添加資源，在添加組件的時候使用。

點擊事件

import { Event } from '@eva/plugin-renderer-event'

const evt = heart.addComponent(new Event())
evt.on('tap', () => {
  alert(1)
})

給遊戲對象添加一個 Event 組件，並經過 on 方法綁定 tap 事件， on 的第二個參數爲 tap 事件所觸發的函數，固然，Event 組件還有其餘事件，咱們能夠經過 Eva.js 文檔查看。

位移動畫

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)

上面的代碼中，咱們建立了一個動畫組，名字叫作 idle 當前動畫組裏面，咱們對 heart.transform 組件的 position.x 屬性進行數值變化，0->1000ms，數值從0->400，1000ms->2000ms，數值從400->0，而後使用 Transition 組件的 play 方法，讓動畫執行 Infinity 次。