Day4. 其实一切东西都在那，只是少了渲染 - Render

昨天谈到了我们的弹珠台，开了那麽多需求，大家有猜到今天要从哪个需求开始看起吗？

没错！哪个需求都不是，我们先来看看这个世界样貌的显现根本，也就是最基本的 Render，我们能够看到画面，与它密不可分，我们今天会来更深入了解一下它的角色与设置的可选选项，并用我们 Day2的范例程序码(没错，又是它)来看看我们改了设置的差异。

今天的Demo

今天的Demo原始码

Matter.Render

是一个函式库自带的模组，具有debug功能，依赖於一个canvas上。好处他支援一些绘制的方式─这意味这我们可以快速地看到我们的扣是否有正常运作。

宣告创建时element代表要塞入canvas的dom，或是你也可以直接丢入指定的canvas设定为render标的，engine我们先暂时使用内建提供的Matter.Engine就可以了，其他选项，等我们读到 engine的章节再来聊，我们先不深究。

var Engine = Matter.Engine,
    Render = Matter.Render;
var render = Render.create({
    element: document.body,
    engine: engine
});

我们看到 Day4 的范例程序码，里面带有一个画面跟一些按钮。会推荐大家可以先用复制的，在我们走下面的流程可以实际跑跑看感受一下差异，会更清楚每段的功能。

好的，让我们分段落来看。第一段我们目光聚焦到Create的地方，基本上 Matter.js 中大部分模组都含有Create方式用於创建，创建多可丢入options来改变预设的属性。

var render = Render.create({
            element: document.body,
            engine: engine, 
            options: {
                width: 800,
                height: 600,
                pixelRatio: 1,
                background: '#bfe9f5', //"#bfe9f5"
                wireframeBackground: '#14151f',
                hasBounds: this.bounds,
                enabled: true,
                wireframes: false,
                showSleeping: true,
                showDebug: false,//
                showStats: true,//
                showPerformance: false,
                showBroadphase: false,
                showBounds: false,
                showVelocity: true,//
                showCollisions: true,//
                showSeparations: false,
                showAxes: false,
                showPositions: false,
                showAngleIndicator: true,//
                showIds: true,//
                showVertexNumbers: false,
                showConvexHulls: false,
                showInternalEdges: false,
                showMousePosition: false
            }        
        });

这段我们来看一下创建能改的属性，几个我目前猜想後面可能会用到的属性我会提出来讲，其他的要请大家自行尝试。

外框组的 Height / Width 相信应该是大家熟悉的属性，这边只要输入int就好，不需带单位。

关於 background/ wireframeBackground / wireframes 三个属性我们一起讲。当你 wireframe 是启用的时候，会套用wirteframe层的资讯显示，所以这时候你改动 background没有用，要改动wireframeBackground 才能看到变化，反之当你把wireframe关掉，如我们的范例程序码一样时，就是靠 background 来显示背景颜色。

开发中我们会对一些物体运动资讯或当前资讯有问题，那这些选项的显示开关能帮助提供你更多资讯：showDebug / showStats / showVelocity / showCollisions / showAngleIndicator / showIds。

上面这些创建选项(或那些没提到的)你都可以试试并观察一下有开没开、设定前设定後的差异。

再来看一下我们每个按钮做的事情。

首先是Run/Stop The Render

对应的指令是：

Render.run(render);
Render.stop(render);

如果要看实际运行，要把第 79 行的程序码先注解，不要让他在过程中直接Render。

重整後可以看到如果即时按了Run，可以看到画面会在你按的当下才被渲染到Canvas上。你很快的按了Run，再按Stop，会发现本来两个下坠的方形坠落到一半时就停住了，如果等一会再按Run，会发现方形已经在地上了。

经过这个尝试，应该更能理解Render本身的职责，就是持续渲染更新画布，先停再开却发现方形已经落地，就是因为负责做计算的是engine，其中的计算即使没Render也是持续进行着，当你要Render的当下，engine中计算的方形位置已经落地了。

下面再针对Render中的一些属性提出来看一下，第一行有个换背景颜色的按钮，左详细的扣会是这段，这里可以提一下上面Create一个属性，isEnabledWireframe，如果是显示成wrieframe的话，会忽略背景那些画面显示细项，也就是必须要为false的状况，这个设置才会生效。(上面有提过了)

var backgroundColor = document.getElementById("backgroundColor").value;            
render.options.background = backgroundColor;

//如果要设置为透明的
render.canvas.style.background = "transparent";

第二行会是专注在单一物件的视点移动，可以按按看体验一下视点移动的感觉，不过笔者目前还没特别看到Reset视点回去的方式。

//lookAt(render物件, lookAt对象, 画面padding(用下面xy方式输入), 是否将视点置中)
Render.lookAt(render,boxA,{x:0,y:0},center=true);
Render.lookAt(render,boxB,{x:100,y:100},center=true);
Render.lookAt(render,ground,{x:0,y:0},center=true);

其他会是一些比较细的设置，如果有兴趣的朋友可以再往里面深入，直接参考文件，我只分享其中一个选项：PixelRatio，一般我们也不会主动去调，大家可以体验一下。

WIKI解说

有兴趣了解的这篇我觉得写得很详细

以这个选项为例，是用於配合画面显示像素长宽比来做出更合适的显示效果，当然我们一般不需手动指定，以这个选项为例，我们其实也可以输入auto让他自动侦测就可以了。

var pixelRatio = document.getElementById("pixelRatioInput").value;
Render.setPixelRatio(render, pixelRatio);//可在pixelRatio位置填入 "auto"

关於画面渲染（Render）相关的介绍我们大概介绍到这边，相信大家对画面如何渲染出来及一些相关指令都有了一些认识。