课程目标：

针对“做好PC小游戏需要哪些功能”进行分析，并结合优秀的实战案例为开发者详细讲解PC小游戏的适配指南，帮助开发者理解与做好PC小游戏的开发。

课程大纲：

一、PC小游戏介绍

二、打造PC小游戏

三、PC小游戏新能力

微信小游戏PC端的用户活跃时长是移动端的2.2倍。你知道吗？

高用户活跃时长带来的便是高ARPU值与高用户付费渗透率。那么，做好一款PC微信小游戏，让用户有绝佳的游戏体验，就显得尤为重要。

在“PC小游戏能力全新升级&适配指南”课程中，微信公开课讲师Pcheng针对“做好PC小游戏需要哪些功能”进行分析，并结合优秀的实战案例为开发者详细讲解PC小游戏的适配指南，帮助开发者理解与做好PC小游戏的开发。

相较于移动端，便捷体验与平台优势是PC端小游戏两个明显的优点。

■ 便捷体验：小游戏用户可以在PC端微信左下角快速找到“游戏”一栏，并通过“游戏”页推荐或搜索按钮，找到好友在玩的小游戏。

■ 平台优势：据统计，在PC端使用小游戏的用户时长是移动端的2.2倍。这直接带来了两个好处：一是ARPU值PC端为移动端的5.2倍；二是用户的付费渗透率PC端为移动端的2.1倍。

那么，移动端小游戏又该如何做PC适配，这里有两个模式供大家使用。

■ 兼容模式：兼容模式使用非常简单，开发者可以在不更改任何一行代码的情况下，直接将自己的小游戏以兼容模式运行在PC平台。

当然，缺点也比较明显。画质和键鼠适配两个问题无法得到妥善解决，将移动端的模式照搬到PC端，会极大的影响用户的游戏体验。

■ 适配模式：所以，针对大屏幕我们推出了适配模式。众多的鼠标外设都可以去进行平台性的适配，且只需要少量代码更改，就可以完成大幅度的用户体验提升。

打造PC小游戏

那么该如何利用适配模式，打造一款体验良好的小游戏？大屏适配、键鼠适配、设备接力三个方面是关键。

1、大屏适配

将“改造”的《欢乐斗地主》与“没改造”的《跳一跳》进行对比，我们可以发现大窗口和全屏带来的优势是显而易见的，这两者能给用户带来沉浸式体验。

实现大屏适配，只需要在游戏的配置game.json里面去设置“resizable”为true即可。

需要注意的是，resizable字段所支持的窗口拖动大小是固定值，为16:9，并不可以让用户以任意的比例去拖动窗口的大小；只要指定了resizable字段，在小游戏窗口的右上角就会出现全屏按钮，用户点击后，就可以进入全屏状态。

2、键鼠适配

以小游戏《欢乐斗地主》为例，在PC端，玩家可以通过鼠标左键完成选牌动作，右键完成出牌动作，这种使用鼠标的左右键去进行游戏的交互，在PC上是更符合用户的习惯，用户体验更佳。

鼠标事件

首先，我们来看底层是如何分发鼠标事件到触摸事件的。

当用户按下鼠标按键的时候，就会分发一个事件，名字叫on Mouse Down。如果是鼠标左键，底层就会同步分发一个名为on Touch Start的事件

当鼠标移动的时候，底层会自动分发on Mouse Move事件。如果此时为鼠标左键按下状态，那么底层也将同步分发on Touch Move事件。

当鼠标弹起的时候，会分发on Mouse Up事件，如为鼠标右键的弹起，则底层会分发on Touch End事件。

在适配模式下，所有涉及鼠标左键的操作，都会转换成触控事件分发到开发者。如果小游戏只需要使用到鼠标，那么采用这种模式，就不需要开发者监听鼠标的事件，直接监听触控的事件也可以完成游戏的交互。

鼠标适配需要注意的是，即使在鼠标按键没有按下去的情况下，移动鼠标，on Mouse Move事件也是会触发的。

这就和触控事件不一样，触控事件的Touch Move，是需要用户手指点击在屏幕上才会触发。但是Mouse Move只要鼠标在窗口上移动了就会有，这里的逻辑需要多加考虑。

此外，即使开发者监听了鼠标的点击事件，三个全部都监听了，触控事件也是照样会触发的。如果开发者同时监听了两个事件，且没有做特殊的场景值的区分，小游戏的某些函数可能就会在同一时间被执行两次，这会带来一些Bug。

这里建议开发者去做兼容性的代码，避免这些Bug的产生，兼顾游戏在移动端和手机端的体验。

在PC端，鼠标事件的应用场景十分广泛。

■ 点击事件：除棋牌类游戏的选牌、出牌之外，以《扫雷》为例，可以通过鼠标右键去标记地雷。另外，还可以通过鼠标右键，弹出菜单。有一些小游戏会设置物品栏，右键点击该物品后，用户可以把它删除或进行编辑、查看详细信息等操作。

■ 移动事件：以《打飞机》为例，在手机上，用户需要按下，再去控制飞机的移动。但是在PC端可以改成只要鼠标动了飞机就跟着鼠标一起动，无需用户一直点着鼠标的左键不放。

滚轮事件

很多小游戏都有排行榜的功能，当人数变多，排行榜页面变长时，滚轮的使用就非常有必要。

以《欢乐斗地主》的滚轮操作为例，在PC端，玩家可以用鼠标的滚轮去控制游戏公告页与排行榜的滚动。

相比起用户在手机上按下手指，滑动手指的便捷，如果PC端不进行滚轮事件适配，就需要用户先按下鼠标，再拖动鼠标，这种操作会显得非常变扭。

有了滚轮事件的适配之后，开发者可以通过监听滚轮事件去完成操作，就不需要去监听鼠标点击与移动这一系列事件了。实际上，滚轮事件只有一个，就是onWheel，它和Web标准的接口是很像的。

同样值得注意的是：第一，onWheel返回掉的参数WheelEvent，其实是Web标准事件的子集。它包含delta X、delta Y这些值，delta X就是横向滚动量，delta Y就是纵向滚动量。

第二，delta X、delta Y应该只关注它的正负性，因为正负就代表了上下左右，这个数值它可能是像素点，也有可能是行，也有可能是页。因为没有另一个参数去标注它到底是以什么单位去计量的，所以开发者只关注正负即可，然后通过正负去控制页面的渲染。

滚轮事件相应的使用场景可以包括排行榜、游戏公告、好友列表等，甚至桌球类的游戏，还可以通过滚轮的滚动去控制击球的力度，或对击球的角度进行微调。

自定义鼠标事件

在PC端，开发者可以为小游戏设置自定义鼠标图标。

图中《欢乐斗地主》的鼠标图标是蓝色的箭头。相比于windows默认的白色小箭头，显然它更为显眼、更为可爱，更让用户有想玩它的欲望。此外，这个接口只能在PC端调用，手机端虽然可能调用，但是起不到任何的效果。

目前官网上最新的微信版本，是支持两种格式的鼠标图标设置的，一种是CUR，一种是ICO。开发者也可以传入一个关键字Default，传入了Default之后，即可恢复成默认的鼠标样式。

键盘适配

以《我功夫特牛》为例，我们可以发现，键盘A、D键操作，要比用鼠标点按屏幕左右键操作更简便，更能提升用户体验。

如果屏幕中只有两个按钮，玩家用鼠标还比较容易操作。但如果屏幕中有3-5个按钮，那么键盘事件的支持可以大幅提升用户体验。

键盘事件，其实就是键盘按下和键盘弹起两个事件的监听。键盘事件适合那些需要控制方向键，或者WASD键去控制人物移动的游戏，或者是一些多技能的小游戏，包括《王者荣耀》《跳一跳》《打飞机》等。

3、设备接力

当用户想把移动端游戏放到PC上玩，这个时候我们可以使用设备接力的能力，来满足用户需求。

以《英雄杀》为例，我们在手机端打开《英雄杀》这个小游戏，并且同时登录电脑上的微信，可以看到手机端右上角三个点的菜单里面多出了一个“在电脑上打开”的按钮。

点击按钮后，电脑客户端就会自动拉起《英雄杀》这个小游戏，并从竖屏切换到横屏、从小屏切换到大屏，实现更好的游戏体验。

此外，微信小游戏还提供了另一种方式，开发者可以在游戏的代码中，主动调用一个叫做“startHandoff”的接口。该种方式将会有弹窗弹出并询问开发者，是否要在电脑上打开。

适配接力有两个需要注意的点。首先，在电脑上打开此按钮，需要用户提前登录到PC端。如没有登录，用户在手机上是看不到这个按钮的；另外，开发者虽然无法决定用户点击这个按钮的时机，但是可以监听这个按钮点击的事件。

这就有点像分享，用户点了右上角的“在电脑上打开”也是有一个事件的，在这个事件里面可以返回一些参数，这些参数会被作为PC电脑小游戏的启动参数去使用，如此一来，就可以完成设备接力的无缝衔接。

关于 startHandoff 这个主动拉起接力的接口，目前正在内测中，开发者可以打开《英雄杀》进行先行体验。

PC小游戏新能力

1、PC端可实现操作顺手的FBS游戏

这个功能可以帮助开发者开发关于鼠标锁定的小游戏。当用户点击鼠标，然后进入鼠标的锁定状态，移动鼠标可以控制一个物体的移动，当用户按下ESC键之后，就退出鼠标的锁定状态，恢复隐藏了的鼠标。

首先，开发者需要调用一个来隐藏鼠标的接口，之后就可以监听鼠标移动的事件，此外，开发者还需要去监听键盘的按键事件。官方还提供了另一个接口让开发者退出指针锁定的状态，让鼠标恢复显示。

除了FPS游戏，所有的3D游戏场景游戏都可以通过鼠标锁定游戏完成镜头、视角的切换。2D游戏当然也可以考虑的，但射击类的游戏，第一人称的游戏会应用更多一些。这个版本最快于5月份上线。

2、PC端可实现流畅运行的“重”游戏

以《轩辕传奇》的PC小游戏为例，人物的移动、多人物的打斗，都是非常顺畅的，基本上看不出卡顿痕迹。这种3D的多场景、多人物游戏渲染起来比较复杂，但它仍然能够达到大概30帧的状态。在手机上是如此，那么在电脑上会有更高的性能表现。

3、支持第三方网页＆软件拉起PC小游戏

以QQ软件管家与《欢乐斗地主》为例，用户可以通过点击QQ软件管家上的《欢乐斗地主》，直接拉起了微信上的《欢乐斗地主》。

首先，开发者需要登录到微信的开放平台，给自己的主体绑定域名，这个域名就是自己网页使用的域名，然后再绑定一个PC小游戏的Open ID。绑定了之后，开发者就可以调用微信官方提供的JSSDK，在网页面引入了SDK之后，就可以调用函数拉起电脑上的小游戏。

如果想在软件上拉起小游戏，开发者可以通过内嵌的浏览器，去访问开发者绑定的域名。QQ软件管家使用的就是这套方案，在软件内内置了浏览器，通过浏览器打开了微信小游戏。

这个功能还在内测中，开发者可以打开QQ软件管家，或者打开QQ游戏大厅去体验这个功能。