所有前端必看的二次元游戏化交互基础知识整合运用先进的思维和游戏机制，引导用户进行交互和使用方法。支付宝中的蚂蚁庄园和蚂蚁森林，通过游戏和公益相结合的方式，实现了用户的留存和激活。淘宝和支付宝的巴巴农场、京东的东东果园、拼多多的多多果园、美团的小美果园……都是通过游戏化来提高用户留存的解决方案。在这篇文章中，我们将列举一些游戏化的互动游戏，然后拆分一个案例带你学习一些最基本的2D交互知识，让你快速上手手写互动游戏。我们能做什么让我们看几个2D交互式项目。目前大部分的交互都是以游戏的形式展现。通过游戏的玩法和精美的特效，让用户获得更好的交互体验。我们开发收集、塔防、抓娃娃等同类游戏，结合业务属性，取得更好的业务效果。基本学习2D交互能力首先，让我们了解一下2D交互游戏中常用的能力。第一部分是前端知识，主要包括渲染所需的渲染工具、游戏循环、资源加载能力等。然后是基本的绘图和动画功能，这是前面提到的游戏的一些基本元素。在游戏开发中，涉及到很多与数学相关的知识，比如让游戏中的物体模拟真实的物理效果，或者一些游戏中人机对战中的机器人是利用游戏AI来实现的。在这篇文章中没有过多的数学知识。互动游戏如何运作？互动游戏如何运作？首先，我们知道目前很多前端项目都是通过数据来驱动浏览量，游戏也是如此。例如，如果我们在游戏中有一架飞机，那么我们需要定义飞机的大小及其在游戏中的位置。对应的飞机图片属于游戏数据。我们将数据提交给渲染引擎，渲染引擎根据数据内容在画布上渲染相应的内容。游戏动态运行。为了实现一些动画/真实的物理效果，我们通过动画、AI、物理引擎等工具控制数据的变化，然后通过循环不断修改数据，渲染到画布上，实现游戏的运行.循环我们知道，游戏的运行效果是通过循环来实现的。接下来我们看一下游戏循环在前端浏览器环境下是如何实现的。浏览器提供了requestAnimationFrame方法，要求浏览器在下次绘制前调用指定的回调函数。该方法一般用于更新动画。浏览器的每次重绘称为1帧，浏览器默认的绘制频率为60帧，也就是说正常情况下，浏览器每秒会刷新60次。通过下面的方法，我们可以保证在每一帧渲染之前，我们可以计算数据并调用渲染方法：constloop=()=>{requestAnimationFrame(loop)//计算数据//绘制图形}requestAnimationFrame(loop)因为requestAnimationFrame方法只会在下一次绘制之前被调用，所以我们每次调用该方法都需要调用这个方法来保证游戏继续运行，所以在loop方法中会重复调用这个方法。一般情况下，我们会将这个方法放在函数的最前面，因为如果在计算数??据和绘制图形的过程中报错，程序将无法执行这个方法，游戏就会停止。Canvas在html中，我们一般使用canvas标签来绘制图片，本身没有绘制能力，使用getContext获取绘制上下文，调用上下文上的方法进行绘制。常用的绘图上下文包括CanvasAPI和WebGL。一般使用CanvasAPI绘制2D图像，而WebGL可以绘制2D和3D图像，性能更高。Canvas提供了一些基本的API，但是交互游戏中的元素比较复杂，所以一般都有渲染引擎和游戏引擎来承接这些元素。本文不会详细讲解Canvas，大家可以在MDN等平台上学习。基础渲染接下来介绍一下我们在二维游戏化交互游戏中经常使用的几种渲染方案。图片文字就不用说了，图形精灵，九方格遮罩图文，是视图开发中最常用的。先从图形说起，图形在开发中一般都会用到一些简单的图形。图片不仅用于直接显示内容，还用于遮罩渲染内容。比如一张图片只显示图形中的内容，并且会用到按钮区域判断，物理引擎碰撞的形状等。Sprite精灵也是我们在CSS中接触到的精灵。就是把多张图片组合成一张大图，在使用的时候渲染某个位置。通过精灵，我们可以提高网络加载效率和渲染效率。一般的精灵资源由两个文件组成，一个是图片文件，一个是位置信息文件。一般在使用引擎进行渲染时，只需要关心对应缩略图的名称即可。在九宫格中，我们经常会遇到一些图片，尺寸不固定，但是周围或者四通样式没有变形，就是.9的图片，比如消息气泡，如果直接设置宽高，整个气泡图片将被拉伸和变形。使用九宫格原理解决：通用的渲染引擎也会提供方便的实现方式。Masking可以通过masking实现渲染内容的遮蔽效果。是不是很像给div设置overflow:hidden？基本动画过渡动画例如，一个对象在3秒后从100px移动到500px。我们可以通过以下方法计算。startTime是动画开始的时间。如果物体以恒定速度向右移动，我们可以使用公式s=v*t。一般来说，我们会使用现成的动画库，类似于Tween.js。当然，我们在实现复杂的动画逻辑时也可以借助一些工具，类似Lottie，我们还是需要手写动画。逐帧动画骨骼动画骨骼动画可以模拟一些具有一定关节逻辑的复杂动画。与帧动画相比，它使用的图片更少，占用内存更少。骨骼动画主要由以下几部分组成：骨骼动画贴图骨骼设计和动画贴图+骨骼+动画，所以骨骼动画资源一般由三个文件组成。常用的骨骼动画设计软件有Spine和Dragonbones，一般由设计师或动画设计。师来设计。开发者只需要使用软件导出的资源即可。在实际项目实战中了解以上内容后，我们就可以开发交互项目了。工欲善其事，必先利其器。这里推荐淘系技术部开源的Eva.js。它是专门为前端开发人员提供的。专为游戏化互动项目的开发而设计。目前淘宝、天猫、支付宝、优酷、阿里妈妈、全球速卖通、Lazada、考拉等众多产品都在使用。2020年双十一养猫项目也是使用Eva.js实现的。下面我们就通过最简单的Demo来学习使用Eva.js。这是一个心脏左右移动的动画，点击后弹出提示。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,},]);constgame=newGame({系统:[newRendererSystem({canvas:document.querySelector('#canvas'),宽度:750,高度:1000,}),newImgSystem(),newEventSystem(),newTransitionSystem()],});addResource传入一个资源，不仅有图片资源，还有帧动画、骨骼动画等资源，这里以图片资源为例。更多Demo可以在Eva.js官网查看。添加资源后，我们还创建了一个游戏实例，它是运行游戏的主要运行时，因为Eva.js只有一个核心游戏运行时，所以我们所有的功能都得自己安装~所以我们要安装系统需要通过这个游戏、图片、事件和动画。RendererSystem是用于渲染游戏的系统。所有的渲染能力都依赖于这个系统，它设置了宽度和高度以及要渲染的画布对象。ImgSystem是用来画图的系统EventSystem是用来触发点击事件的系统TransitionSystem是用来做位移动画的系统Step2创建对象并设置定位import{GameObject}from'@eva/eva.js'constheart=newGameObject('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添加必需的组件我们只是在新游戏中添加了实现视频功能所需的系统。这些系统用于读取组件上的值，然后实现功能。因此，我们需要给对象添加组件，才能让对象实现相应的功能。目前我们需要的功能是图片渲染、点击事件、位移动画，所以需要添加三个组件imagerenderingimport{Img}from'@eva/plugin-renderer-img'heart.addComponent(newImg({resource:'imageName',}),);调用heart的addComponent方法添加组件，这里我们添加Img组件，Img组件有一个resource参数，就是图片资源的名称，实际上对应的是图片资源的名称Step1添加的图片资源。当然，同样的原理也适用于精灵图像和骨骼动画。资源需要添加到resource中，在添加组件时使用。点击事件import{Event}from'@eva/plugin-renderer-event'constevt=heart.addComponent(newEvent())evt.on('tap',()=>{alert(1)})添加到游戏中object一个Event组件，通过on方法绑定点击事件。on的第二个参数是点击事件触发的函数。当然Event组件还有其他事件，我们可以通过Eva.js文档查看。位移动画import{Transition}from'@eva/plugin-transition'consttransition=heart.addComponent(newTransition())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}]}]}过渡。在上面play('idle',Infinity)的代码中，我们创建了一个名为idle的动画组，在当前动画组中，我们改变heart.transform组件的position.x属性的值，0->1000ms，并且值从0->400变化，1000ms->2000ms，值从400->0，然后使用Transition组件的play方法让动画执行Infinity次。Step4运行一般游戏都是自动运行的，所以在完成以上工作后，游戏就会开始自动运行了。综上所述，未来游戏化产品会越来越多，开发互动游戏将成为前端工程师的必备技能。通过这篇文章，我们可以学习一些基本的游戏化交互技术，也可以学习通过Eva.js如何实现最简单的交互游戏。如果我们想要更多地了解游戏化和交互技术，我们需要更多地了解游戏引擎、渲染原理、动画、物理、音效等技术。对于交互式业务开发，目前Eva.js可以满足大部分需求。前端领域的游戏化方向才刚刚起步。Eva.js是一款专注于游戏化项目开发的游戏引擎，目前还处于起步阶段。未来，Eva.js会继续专注于前端，专注于游戏化项目，让游戏化项目开发更简单。我们也希望大家能够参与到前端游戏化领域的建设中来，我们也会持续分享相关技术，输出游戏化项目开发能力。
