启动参数

参数名默认值类型描述
widthnullNumber宽度
heightnullNumber高度
referWidth320Number基准参考宽度,如:320、375
fixSizefalseBoolean是否固定尺寸为传入的宽高(适用于PC)
canvasId'TinyCanvas'Stringcanvas的DOM
orientation0Number横竖屏[0: 竖屏, 1: 横屏]
dpi1Number分辨率
fps60Number[>=1.1.7] 帧频,接受传入:10、20、30、40、50、60
showFPSfalseBoolean是否显示帧频
viewTouchedfalseBoolean[>=1.2.0] Canvas 的 DOM 对象是否可被点触/滑动
renderType0Number渲染类型 [0: 自动识别, 1: WEBGL, 2: CANVAS]
renderOptions{}Object渲染参数,见:Tiny.RENDER_OPTIONS
extraContextAttributes{}Object额外的Context参数,更多见 HTMLCanvasElement.getContext~contextAttributes
autoRender1Number是否自动渲染 [0: 手动, 1: 自动]
var config = {
  showFPS: true, // 显示帧频
  dpi: 1.5, // 分辨率设置为 1.5
  height: 300, // 固定高度为 300
  width: 300, // 固定宽度为 300
  fixSize: true, // 固定尺寸为传入的宽高
  renderType: Tiny.RENDERER_TYPE.CANVAS, // 强制使用 CANVAS 渲染
  renderOptions: { // 非特殊场景可以不用设置此参数
    antialias: true, // 抗锯齿
    transparent: false, // canvas 不透明
    clearBeforeRender: true, // 每次渲染之前都清空画布
    backgroundColor: 0x2a3145,
    roundPixels: false,
  },
  autoRender: 1, // 自动渲染
};

Tips

  1. 基准参考宽度 referWidth 不设置的话,默认是 320,即视觉稿给的是 640 的尺寸,如果视觉是 750,那就需要设置为 375(即:750/2);
  2. 通过参数 fixSize 来固定尺寸为传入的宽高,这比较适合 PC 页面,对于全屏的移动端不用设置,Tiny.js 会做好;
  3. canvasId 不设置的话,会自动创建一个 ID 为 TinyCanvas 的 canvas;
  4. autoRender 的自动模式是直接进入游戏的主调度,通过 Tiny.ticker.Ticker 定时渲染,手动模式只渲染一次,如果再次渲染可以调用 Application 的实例化对象的 render 方法(如:app.render(););
  5. renderOptions.antialias 抗锯齿在渲染类型为 WebGL 时有效,Tiny.GraphicsTiny.Text 效果较明显,另外抗锯齿并不一定在所有平台都有效;
  6. renderOptions.transparent 透明设置为 true 后,renderOptions.backgroundColor 无效;
  7. renderOptions.clearBeforeRender 在渲染类型为 WebGL 时,如果要设置为 false,那一定要设置 renderOptions.preserveDrawingBuffer: true 才有效;
  8. renderOptions.roundPixels 设置为 true 时可以提升渲染性能,但是图像进行放大后会取消图像像素点的插值运算,转而出现像素块;了解像素插值?
  9. dpi 对比图:

如果不配置 renderType,Tiny.js 默认使用 WebGL 渲染,因为性能、速度都非常好,当然,你也可以配置 renderType 来决定使用哪种渲染类型

注意:iOS 9.x 的 WKWebViews 在使用 WebGL 时,会高概率的出现 crash(了解更多?)。规避的方案可以把 WebGLRenderingContext 置为 null,不用 WebGL。

window.WebGLRenderingContext = null;