工作台

我们在玩法库中通过点击一个模板，比如2048，点击立即使用后即可进入工作台的配置界面。

工作台可以分为3个层级

基本信息

基本信息面板主要修改活动的基本内容，比如设定游戏的开始结束时间，这样一旦游戏结束时间到了，那么活动会自动下线，此时玩家进入将无法正常的游玩活动流程。可以正常体验玩法，但是最终后端的抽奖接口会暂停，前端也不再会发送抽奖请求。

另外还可以配置把活动嵌入APP等高级功能，具体自己体验。

界面配置

界面配置是我们需要重点关注的一个功能。

活动的页面结构

一个游戏的通用页面如下，还有一些其他的特殊页面，比如助力类此处不讨论

Loading加载页

刚开始的那个进度条的页面便是加载页。H5营销活动讲究的是整体活动的流畅性。不像一些单页面的Web App，对于Web APP可以通过懒加载资源从而达到首屏的快速预览，因为Web App不知道用户下一个会点击哪个页面，所以无法进行大规模的预加载。

而相对于我们的H5页面，整体的流程都是固定的，而且主页面在于之后的活动页，所以需要做一个预加载，把之后的游戏资源/模板资源都进行一次预加载，从而使得之后的流程顺畅以及不闪屏。

开放配置：加载页的通用配置。

开始页

玩家点击开始游戏即可运行。

开放配置：开始页的通用配置。

结束页

开放配置：结束页的通用配置。

活动页

活动页不像前面的加载页/开始页/结束页那样，相关的配置都是固定的。如果你对比不同游戏的活动页，会发现每个游戏的活动页都是不一样的。毕竟游戏玩法不同，对应的资源也不一样，所以需要开放的配置也会不一样。

在该2048活动中，我们修改了一下2 4的资源，截图如下

工作台中修改的资源，游戏中也发生了对应的改变。

实现原理

其实具体的实现原理也比较简单，在2048游戏对应的JS文件中，我们可以找到如下代码

//加载2048素材图片资源
var config = self.config['game'];

game.load.image("2",config['2']);
game.load.image("4",config['4']);
game.load.image("8",config['8']);
game.load.image("16",config['16']);
game.load.image("32",config['32']);
game.load.image("64",config['64']);
game.load.image("128",config['128']);
game.load.image("256",config['256']);
game.load.image("512",config['512']);
game.load.image("1024",config['1024']);
game.load.image("2048",config['2048']);

其中的config['game']是外部加载的一份JSON文件，所以上述代码的意思就是指根据外部的JSON文件，请求不同的资源图片并插入游戏中。

2048游戏对应的JSON文件相关配置如下

"game":{
    "2":"//24haowan-cdn.shanyougame.com/2048/assets/images/2.png",
    "4":"//24haowan-cdn.shanyougame.com/2048/assets/images/4.png",
    "8":"//24haowan-cdn.shanyougame.com/2048/assets/images/8.png",
    "16":"//24haowan-cdn.shanyougame.com/2048/assets/images/16.png",
    "32":"//24haowan-cdn.shanyougame.com/2048/assets/images/32.png",
    "64":"//24haowan-cdn.shanyougame.com/2048/assets/images/64.png",
    "128":"//24haowan-cdn.shanyougame.com/2048/assets/images/128.png",
    "256":"//24haowan-cdn.shanyougame.com/2048/assets/images/256.png",
    "512":"//24haowan-cdn.shanyougame.com/2048/assets/images/512.png",
    "1024":"//24haowan-cdn.shanyougame.com/2048/assets/images/1024.png",
    "2048":"//24haowan-cdn.shanyougame.com/2048/assets/images/2048.png",
}

前面提到过，每一个游戏都会对应着一份JS以及JSON。即是在我们的玩法库中，每一个模板都会有一份模板JSON，我们每次在玩法库中，点击某个模板立即使用后，也就是上面创建2048的过程，会进入对应模板的工作台页面，可以发现该工作台对应的链接如下

https://www.24haowan.com/webCustom/workbench/id/1129512234

其中的1129512234就是该用户此次创建游戏的ID值，该ID是一个唯一值，不管之后用户是测试，还是发布到微信进行推广，此ID值都不变(该ID值匹配单一游戏，如果用户退到玩法库重新创建一个新的游戏，ID值会发生改变，因为此时用户就创建了两个活动，拥有两个游戏的ID，在两个活动的工作台中修改互不影响，更不会影响到平台其他用户创建的那些活动)。

在生成一个ID的过程中，也是JSON复制的过程。每次创建一个游戏，后端会自动针对当前的游戏ID复制一份JSON文件。比如2048的模板JSON文件为index.json，那么在创建游戏的过程中，后端会根据2048的这份index.json复制出一份新的针对当前游戏的JSON，比如1129512234.json。打开network面板即可看到相关JSON。

我们在工作台中修改相关的配置其实修改的也正是这份1129512234.json文件，比如上面的修改资源2对应的图片，或者是游戏场景里面的背景图片等，都是在修改对应的1129512234.json。在游戏运行时，会加载该份JSON并根据JSON的路径请求资源回来，并且通过JS把图片替换到游戏或者是某个场景中。这就实现了工作台资源的替换功能。

营销配置

主要配置抽奖条件，除此之外还可以配置抽奖时填写表单信息以及更改公众号授权等等功能。

results matching ""

    No results matching ""