您的位置:奥门新浦京网址 > Wed前段 > 在线调试方案的思考与实践,游戏开发

在线调试方案的思考与实践,游戏开发

发布时间:2019-10-14 18:31编辑:Wed前段浏览(92)

    H5 游戏开发:指尖大冒险

    2017/11/29 · HTML5 · 游戏

    原文出处: 凹凸实验室   

    在今年八月中旬,《指尖大冒险》SNS 游戏诞生,其具体的玩法是通过点击屏幕左右区域来控制机器人的前进方向进行跳跃,而阶梯是无穷尽的,若遇到障碍物或者是踩空、或者机器人脚下的阶砖陨落,那么游戏失败。

    笔者对游戏进行了简化改造,可通过扫下面二维码进行体验。

     

    图片 1

    《指尖大冒险》SNS 游戏简化版

    该游戏可以被划分为三个层次,分别为景物层、阶梯层、背景层,如下图所示。

     

    图片 2

    《指尖大冒险》游戏的层次划分

    整个游戏主要围绕着这三个层次进行开发:

    • 景物层:负责两侧树叶装饰的渲染,实现其无限循环滑动的动画效果。
    • 阶梯层:负责阶梯和机器人的渲染,实现阶梯的随机生成与自动掉落阶砖、机器人的操控。
    • 背景层:负责背景底色的渲染,对用户点击事件监听与响应,把景物层和阶梯层联动起来。

    而本文主要来讲讲以下几点核心的技术内容:

    1. 无限循环滑动的实现
    2. 随机生成阶梯的实现
    3. 自动掉落阶砖的实现

    下面,本文逐一进行剖析其开发思路与难点。

    网页性能管理详解

    2015/09/17 · HTML5, JavaScript · 性能

    原文出处: 阮一峰   

    你遇到过性能很差的网页吗?

    这种网页响应非常缓慢,占用大量的CPU和内存,浏览起来常常有卡顿,页面的动画效果也不流畅。

    图片 3

    你会有什么反应?我猜想,大多数用户会关闭这个页面,改为访问其他网站。作为一个开发者,肯定不愿意看到这种情况,怎样才能提高性能呢?

    本文将详细介绍性能问题的出现原因,以及解决方法。

    在线调试方案的思考与实践

    2015/08/28 · HTML5 · 调试

    原文出处: 李靖(@Barret李靖)   

    本文的要点不在移动端调试上,移动端调试无非就是调试页面和调试工具之间存在分离,消除这种分离并创建连结就能解决移动端的调试问题。重点阐述的是所见即所得的调试模式下会遇到的阻碍。

    当我们打开网页,发现一个模块没有正确地渲染或者空白时,如果控制台有报错,会直接根据报错定位到源码位置开始 debug;如果控制台没有报错,则会根据模块名或者模块特征的一个值,通过全局搜索找到这个模块的位置,然后在调试工具中断点,单步调试,找到问题所在,此时我们可能会这样做:

    情形一:

    小A同学打开控制台,发现断点调试不好写代码,于是将压缩的源码复制一份保存到本地,格式化,然后将线上资源通过代理工具代理到本地文件。

    情形二:

    小B同学早早的为自己配了一份本地开发环境,于是他遇到问题之后,直接去源码中定位错误位置,由于使用的是预处理语言,所以需要先打包编译之后再在本地预览效果。

    情形三:

    小C同学的调试方式是小A和小B的综合版本,将线上的资源代理到本地 build 目录文件,在 src 目录下修改之后编译打包到 build,然后预览。

    一、无限循环滑动的实现

    景物层负责两侧树叶装饰的渲染,树叶分为左右两部分,紧贴游戏容器的两侧。

    在用户点击屏幕操控机器人时,两侧树叶会随着机器人前进的动作反向滑动,来营造出游戏运动的效果。并且,由于该游戏是无穷尽的,因此,需要对两侧树叶实现循环向下滑动的动画效果。

     

    图片 4

    循环场景图设计要求

    对于循环滑动的实现,首先要求设计提供可前后无缝衔接的场景图,并且建议其场景图高度或宽度大于游戏容器的高度或宽度,以减少重复绘制的次数。

    然后按照以下步骤,我们就可以实现循环滑动:

    • 重复绘制两次场景图,分别在定位游戏容器底部与在相对偏移量为贴图高度的上方位置。
    • 在循环的过程中,两次贴图以相同的偏移量向下滑动。
    • 当贴图遇到刚滑出游戏容器的循环节点时,则对贴图位置进行重置。

     

    图片 5

    无限循环滑动的实现

    用伪代码描述如下:

    JavaScript

    // 设置循环节点 transThreshold = stageHeight; // 获取滑动后的新位置,transY是滑动偏移量 lastPosY1 = leafCon1.y + transY; lastPosY2 = leafCon2.y + transY; // 分别进行滑动 if leafCon1.y >= transThreshold // 若遇到其循环节点,leafCon1重置位置 then leafCon1.y = lastPosY2 - leafHeight; else leafCon1.y = lastPosY1; if leafCon2.y >= transThreshold // 若遇到其循环节点,leafCon2重置位置 then leafCon2.y = lastPosY1 - leafHeight; else leafCon2.y = lastPosY2;

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // 设置循环节点
    transThreshold = stageHeight;
    // 获取滑动后的新位置,transY是滑动偏移量
    lastPosY1 = leafCon1.y + transY;  
    lastPosY2 = leafCon2.y + transY;
    // 分别进行滑动
    if leafCon1.y >= transThreshold // 若遇到其循环节点,leafCon1重置位置
      then leafCon1.y = lastPosY2 - leafHeight;
      else leafCon1.y = lastPosY1;
    if leafCon2.y >= transThreshold // 若遇到其循环节点,leafCon2重置位置
      then leafCon2.y = lastPosY1 - leafHeight;
      else leafCon2.y = lastPosY2;

    在实际实现的过程中,再对位置变化过程加入动画进行润色,无限循环滑动的动画效果就出来了。

    一、网页生成的过程

    要理解网页性能为什么不好,就要了解网页是怎么生成的。

    图片 6

    网页的生成过程,大致可以分成五步。

    HTML代码转化成DOM CSS代码转化成CSSOM(CSS Object Model) 结合DOM和CSSOM,生成一棵渲染树(包含每个节点的视觉信息) 生成布局(layout),即将所有渲染树的所有节点进行平面合成 将布局绘制(paint)在屏幕上

    1
    2
    3
    4
    5
    HTML代码转化成DOM
    CSS代码转化成CSSOM(CSS Object Model)
    结合DOM和CSSOM,生成一棵渲染树(包含每个节点的视觉信息)
    生成布局(layout),即将所有渲染树的所有节点进行平面合成
    将布局绘制(paint)在屏幕上

    这五步里面,第一步到第三步都非常快,耗时的是第四步和第五步。

    “生成布局”(flow)和”绘制”(paint)这两步,合称为”渲染“(render)。

    图片 7

    ☞ 代理调试的烦恼

    而对于比较复杂的线上环境,代理也会遇到很多障碍,比如:

    线上资源 combo

    出现错误的脚本地址为  ,它对应着 a.js,b.js,c.js 三个脚本文件,如果我们使用 Fiddler/Charles 这样的经典代理工具调试代码,就必须给这些工具编写插件,或者在替换配置里头加一堆判断或者正则,成本高,门槛高。

    线上代码压缩

    打包压缩,这是上线之前的必经流程。由于我们在打包的环节中并没有考虑为代码添加 sourceMap,而线上之前对应 index-min.jsindex.js 也因为安全方面的原因给干掉了,这给我们调试代码造成了极大的不便利。

    代码依赖较多,拉取代码问题

    很多时候,我们的页面依赖了多个 asserts 资源,而这些资源各自分布在多个仓库之中,甚至分布在不同的发布平台上,为了能够在源码上清晰的调试代码,我们不得不将所有的资源下载到本地,期间一旦存在下载代码的权限问题,整个调试进度就慢下来,这是十分不能忍受的事情。比如某系统构建的页面,页面上的模块都是以仓库为维度区分的,一个页面可能对应了5-50个仓库,下载代码实为麻烦。

    最可怕的调试是,本地没有对应的测试环境、代理工具又不满足我们的需求,然后就只能, 编辑代码->打包压缩->提交代码->查看效果->编辑代码->... ,如果你的项目开发是这种模式,请停下来,思考调试优化方案,正所谓磨刀不误砍柴工。

    二、随机生成阶梯的实现

    随机生成阶梯是游戏的最核心部分。根据游戏的需求,阶梯由「无障碍物的阶砖」和「有障碍物的阶砖」的组成,并且阶梯的生成是随机性。

    二、重排和重绘

    网页生成的时候,至少会渲染一次。用户访问的过程中,还会不断重新渲染。

    以下三种情况,会导致网页重新渲染。

    • 修改DOM
    • 修改样式表
    • 用户事件(比如鼠标悬停、页面滚动、输入框键入文字、改变窗口大小等等)

    重新渲染,就需要重新生成布局和重新绘制。前者叫做”重排”(reflow),后者叫做”重绘”(repaint)。

    需要注意的是,”重绘”不一定需要”重排”,比如改变某个网页元素的颜色,就只会触发”重绘”,不会触发”重排”,因为布局没有改变。但是,”重排”必然导致”重绘”,比如改变一个网页元素的位置,就会同时触发”重排”和”重绘”,因为布局改变了。

    ☞ 开启懒人调试模式

    当看到线上出现问题(可能是其他同学负责页面的问题),脑中浮出这样的场景:

    复制代码 我:"嘿,线上有问题啦!我要调试代码!" 电脑:"好的,主人。请问是哪个页面?"(弹出浮层) 我:浮层中输入URL。 电脑:"请问是哪个地方出问题了?" 我:(指着电脑)"模块A和模块B。" 电脑:正在下载A、B资源...正在将上线A、B映射到本地...自动打开A、B对应文件夹 我:编辑代码,然后实时预览效果。

    1
    2
    3
    4
    5
    6
    7
    8
    复制代码
      我:"嘿,线上有问题啦!我要调试代码!"
    电脑:"好的,主人。请问是哪个页面?"(弹出浮层)
      我:浮层中输入URL。
    电脑:"请问是哪个地方出问题了?"
      我:(指着电脑)"模块A和模块B。"
    电脑:正在下载A、B资源...正在将上线A、B映射到本地...自动打开A、B对应文件夹
      我:编辑代码,然后实时预览效果。

    在这里我们需要解决这样几个问题

    • 将页面对应的所有仓库/资源罗列在用户面前
    • 下载资源的权限提示和权限处理
    • 线上资源解 combo,然后映射到本地

    当然调试之后,可以还有一个操作:

    我:"哈,已经修复了,帮我提交代码~" 电脑:正在diff代码...收到确认提交信号,提交到预发环境...收到已经预览信号...正在发布代码...收到线上回归信号...流程结束

    1
    2
    我:"哈,已经修复了,帮我提交代码~"
    电脑:正在diff代码...收到确认提交信号,提交到预发环境...收到已经预览信号...正在发布代码...收到线上回归信号...流程结束

    除了 debug 代码,我们需要做的就只是用眼睛看效果是否 ok,整个流程优化下来,体验是很赞的!

    无障碍阶砖的规律

    其中,无障碍阶砖组成一条畅通无阻的路径,虽然整个路径的走向是随机性的,但是每个阶砖之间是相对规律的。

    因为,在游戏设定里,用户只能通过点击屏幕的左侧或者右侧区域来操控机器人的走向,那么下一个无障碍阶砖必然在当前阶砖的左上方或者右上方。

     

    图片 8

    无障碍路径的生成规律

    用 0、1 分别代表左上方和右上方,那么我们就可以建立一个无障碍阶砖集合对应的数组(下面简称无障碍数组),用于记录无障碍阶砖的方向。

    而这个数组就是包含 0、1 的随机数数组。例如,如果生成如下阶梯中的无障碍路径,那么对应的随机数数组为 [0, 0, 1, 1, 0, 0, 0, 1, 1, 1]。

     

    图片 9

    无障碍路径对应的 0、1 随机数

    三、对于性能的影响

    重排和重绘会不断触发,这是不可避免的。但是,它们非常耗费资源,是导致网页性能低下的根本原因。

    提高网页性能,就是要降低”重排”和”重绘”的频率和成本,尽量少触发重新渲染。

    前面提到,DOM变动和样式变动,都会触发重新渲染。但是,浏览器已经很智能了,会尽量把所有的变动集中在一起,排成一个队列,然后一次性执行,尽量避免多次重新渲染。

    JavaScript

    div.style.color = 'blue'; div.style.marginTop = '30px';

    1
    2
    div.style.color = 'blue';
    div.style.marginTop = '30px';

    上面代码中,div元素有两个样式变动,但是浏览器只会触发一次重排和重绘。

    如果写得不好,就会触发两次重排和重绘。

    JavaScript

    div.style.color = 'blue'; var margin = parseInt(div.style.marginTop); div.style.marginTop = (margin + 10) + 'px';

    1
    2
    3
    div.style.color = 'blue';
    var margin = parseInt(div.style.marginTop);
    div.style.marginTop = (margin + 10) + 'px';

    上面代码对div元素设置背景色以后,第二行要求浏览器给出该元素的位置,所以浏览器不得不立即重排。

    一般来说,样式的写操作之后,如果有下面这些属性的读操作,都会引发浏览器立即重新渲染。

    JavaScript

    offsetTop/offsetLeft/offsetWidth/offsetHeight scrollTop/scrollLeft/scrollWidth/scrollHeight clientTop/clientLeft/clientWidth/clientHeight getComputedStyle()

    1
    2
    3
    4
    offsetTop/offsetLeft/offsetWidth/offsetHeight
    scrollTop/scrollLeft/scrollWidth/scrollHeight
    clientTop/clientLeft/clientWidth/clientHeight
    getComputedStyle()

    所以,从性能角度考虑,尽量不要把读操作和写操作,放在一个语句里面。

    JavaScript

    // bad div.style.left = div.offsetLeft + 10 + "px"; div.style.top = div.offsetTop + 10 + "px"; // good var left = div.offsetLeft; var top = div.offsetTop; div.style.left = left + 10 + "px"; div.style.top = top + 10 + "px";

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // bad
    div.style.left = div.offsetLeft + 10 + "px";
    div.style.top = div.offsetTop + 10 + "px";
     
    // good
    var left = div.offsetLeft;
    var top  = div.offsetTop;
    div.style.left = left + 10 + "px";
    div.style.top = top + 10 + "px";

    一般的规则是:

    样式表越简单,重排和重绘就越快。 重排和重绘的DOM元素层级越高,成本就越高。 table元素的重排和重绘成本,要高于div元素

    1
    2
    3
    样式表越简单,重排和重绘就越快。
    重排和重绘的DOM元素层级越高,成本就越高。
    table元素的重排和重绘成本,要高于div元素

    ☞ 解决代理遇到的问题

    上面我们提到了三个问题,平时开发遇到最头疼的一个是 combo ,曾经我们页面上的代码加一个 ?_xxx  参数就能够直接开始调试模式,那是因为程序的入口只有一个,而且所有脚本的依赖也打包到一个叫做 deps.js  文件中,加上调试参数之后,可以将原来 combo 加载的文件:  ,按照非 combo 的方式加载:

    1
    2
    3
    http://example.com/path/a.js
    http://example.com/path/b.js
    http://example.com/path/c.js

    上面的代码可以轻松地代理到本地,但是有的系统生成的代码并没有 deps.js  文件,它是将脚本直接输出到页面上:

    <script src=";

    1
    <script src="http://example.com/path/??a-min.js,b-min.js,c-min.js"></script>

    ☞ 解决 combo 问题

    此时通过 Fiddler/Charles 工具比较难满足需求,对于这个问题有两个处理方案:

    1). 浏览器请求全部代理到本地的一个服务

    首先写一个本地服务:

    JavaScript

    var http = require('http'); // npm i http-proxy --save var httpProxy = require('http-proxy'); var proxy = httpProxy.createProxyServer({}); var server = http.createServer(function(req, res) { console.log(req.url); if(req.url.indexOf("??") > -1){ // combo资源让 3400 端口的服务处理 proxy.web(req, res, { target: '' }); } else { // 直接返回 proxy.web(req, res, { target: req.url }); } }).listen(3399, function(){ console.log("在端口 3399 监听浏览器请求"); });

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    var http = require('http');
    // npm i http-proxy --save
    var httpProxy = require('http-proxy');
    var proxy = httpProxy.createProxyServer({});
     
    var server = http.createServer(function(req, res) {
      console.log(req.url);
      if(req.url.indexOf("??") > -1){
        // combo资源让 3400 端口的服务处理
        proxy.web(req, res, { target: 'http://127.0.0.1:3400' });
      } else {
        // 直接返回
        proxy.web(req, res, { target: req.url });
      }
    }).listen(3399, function(){
        console.log("在端口 3399 监听浏览器请求");
    });

    代码的意思是,利用 http-proxy 这个 npm 包,代理浏览器的请求,浏览器上使用 switchSharp 设置本地代理为  ,当请求过来,先判断 url,如果 url 中包含了 ?? 则将其作为 combo 资源处理,代理给本地的另一个服务  ,这个服务收到请求后会将 combo 内容分解成多个,全部请求完之后再吐出来。

    2). 使用本地服务请求 html 代码,替换 html 代码内容

    使用强制手段(源码替换)将代码解 combo,比如源码页面为:

    <!-- html code --> <script src="; <!-- html code -->

    1
    2
    3
    <!-- html code -->
    <script src="http://example.com/path/??a-min.js,b-min.js,c-min.js"></script>
    <!-- html code -->

    使用本地服务请求这个url,然后转换成:

    <!-- html code --> <script src="; <script src="; <script src="; <!-- html code -->

    1
    2
    3
    4
    5
    <!-- html code -->
    <script src="http://example.com/path/a.js"></script>
    <script src="http://example.com/path/b.js"></script>
    <script src="http://example.com/path/c.js"></script>
    <!-- html code -->

    实现这个操作的代码:

    JavaScript

    var http = require('http'); // npm i request --save; var request = require('request'); http.createServer(function(req, res){ var path = req.url.slice(req.url.indexOf("path=") + 5); console.log(path); if(!path) { res.write("path is empty"); res.end(); return; } request(path, function (error, response, body) { if (!error && response.statusCode == 200) { console.log(body); // 代码替换 body = body.replace('<script src=";', '<script src=" <script src=" <script src=";' ); res.write(body); res.end(); } }); }).listen(3399, function(){ console.log("listening on port 3399"); });

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    var http = require('http');
    // npm i request --save;
    var request = require('request');
    http.createServer(function(req, res){
        var path = req.url.slice(req.url.indexOf("path=") + 5);
        console.log(path);
        if(!path) {
            res.write("path is empty");
            res.end();
            return;
        }
        request(path, function (error, response, body) {
            if (!error && response.statusCode == 200) {
                console.log(body);
                // 代码替换
                body = body.replace('<script src="http://example.com/path/??a-min.js,b-min.js,c-min.js"></script>',
                    '<script src="http://example.com/path/a.js"></script>
                    <script src="http://example.com/path/b.js"></script>
                    <script src="http://example.com/path/c.js"></script>'
                );
                res.write(body);
                res.end();
            }
        });
    }).listen(3399, function(){
        console.log("listening on port 3399");
    });

    比如请求  ,即可拿到淘宝首页的源码,然后对拿到的代码做替换。

    ☞ 解决代码压缩问题

    对于这个问题,建议在线上放两份源码,一份是压缩源码,一份是未压缩源码,当页面 url 存在 debug 参数的时候,返回未压缩版本,正常返回压缩版本。当然,也可以采用上述方式处理问题。

    不过,更合理的方式应该是 sourceMap,前端没有秘密,压缩代码只是增加了 hacker 的攻击成本,并不妨碍有能力的 hacker 借系统漏洞入侵。所以可以为源码提供一份 sourceMap 文件。

    JavaScript

    var gulp = require('gulp'); var sourcemaps = require('gulp-sourcemaps'); gulp.task('javascript', function() { gulp.src('src/**/*.js') .pipe(sourcemaps.init()) //.pipe(xx()) .pipe(sourcemaps.write()) .pipe(gulp.dest('dist')); });

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var gulp = require('gulp');
    var sourcemaps = require('gulp-sourcemaps');
     
    gulp.task('javascript', function() {
      gulp.src('src/**/*.js')
        .pipe(sourcemaps.init())
          //.pipe(xx())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('dist'));
    });

    关于 sourceMap 的 gulp 插件配置,详情可以戳这里。不仅仅是 JavaScript,CSS 也有 source maps,这个信息可以在 Chrome 控制台的设置选项中看到:

    图片 10

    ☞ 代码的拉取

    如果一个项目只有你知道如何修改,那这个项目的技术设计就有点糟糕了,为了让众人都能处理你项目中的问题,一定要需要一个简洁的模式为开发者快速搭建测试环境,文档是一方面,如果有个一键操作的命令,那就更棒了!

    # 启动脚本 start: createFile getMod getPage # 创建目录 createFile: @[ -d module ] || mkdir module @[ -d page ] || mkdir page # 拉取模块仓库,这里有几十个,比较费时,请耐心等待... getMod: cd module; for i in $(MODS); do [ -d $(MODPATH)$$i ] || git clone $(MODPATH)$$i; git co -b master; git co -b $(MODSV); done # 拉取页面仓库,tbindex getPage: cd page; @[ -d tbindex ] || git clone $(PAGEPATH)$PAGE;

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    # 启动脚本
    start: createFile getMod getPage
     
    # 创建目录
    createFile:
      @[ -d module ] || mkdir module
      @[ -d page ] || mkdir page
     
    # 拉取模块仓库,这里有几十个,比较费时,请耐心等待...
    getMod:
      cd module;
      for i in $(MODS); do
        [ -d $(MODPATH)$$i ] || git clone $(MODPATH)$$i;
        git co -b master;
        git co -b $(MODSV);
      done
     
    # 拉取页面仓库,tbindex
    getPage:
      cd page;
      @[ -d tbindex ] || git clone $(PAGEPATH)$PAGE;

     

    上面是一个 MakeFile 的部分代码,作用是创建开发目录,拉取分支信息,然后开始服务器,打开浏览器,使用 IDE 打开目录,万事就绪,只等主人敲代码。

    整个流程就一两分钟,完成开发之前所有的准备工作。这个脚本不仅仅是给自己使用,如果其他人也需要参与开发,一个命令就能让参与者进入开发模式,加上文档说明,省却了很多沟通成本。

    本文由奥门新浦京网址发布于Wed前段,转载请注明出处:在线调试方案的思考与实践,游戏开发

    关键词: