原生渲染

接口说明：BK.Node 节点

示例代码：

BK.Sprite 精灵

Sprite 是游戏中常见的显示图像的方式，多用于游戏中的人物和可移动物品：

var tex = new BK.Texture('GameRes://texture/test.png');
var sp = new BK.Sprite(200,200,tex,0,1,1,1);
sp.size = {width:200,height:200};     //大小
sp.anchor = {x:0.5,y:0.5};            //锚点
sp.cornerRadius = 50;                 //圆角

接口说明：BK.Sprite 精灵

示例代码：script/demo/render/sprite_demo.js

BK.Texture 纹理

Texture 是游戏中的纹理贴图，可以为图层（如背景）甚至 Sprite 设置纹理：

接口说明：BK.Texture 纹理

示例代码：script/demo/render/texture_demo.js

Mesh 通过自定义顶点数组，映射到纹理中的不同位置中，可以做成非常灵活的多边形等。

我们可以通过 Mesh 让下面这张草地图来生成山坡状的网格：

//生成如山坡状的网格
BK.Script.loadlib('GameRes://script/demo/tinyfly/terrain.js');
     {"x":0,"y":100,"isup":true},
     {"x":20,"y":300,"isup":false},
     {"x":20,"y":200,"isup":false},
     {"x":20,"y":300,"isup":true},
     {"x":20,"y":200,"isup":false},
     {"x":20,"y":200,"isup":true},
];
var tex =new BK.Texture('GameRes://resource/texture/terrain.png');
var terr =new terrain(10,controlPoints);
terr.processData();
var vertexes = terr.vertexes;
var indices = terr.indics;
var moutainMesh = new BK.Mesh(tex,vertexes,indices);
BK.Director.root.addChild(moutainMesh);
var scale = BK.Director.screenPixelSize.width / 640;
BK.Director.root.scale = {x:scale,y:scale};

接口说明：

BK.SkeletonAnimation 骨骼动画

基于 spine 的骨骼动画。

接口说明：

示例代码：script/demo/spine/skeletonAnimation_demo.js

BK.AnimatedSprite 帧动画

帧动画的每一帧都是角色特定姿势的一个快照，动画的流畅性和平滑效果都取决于帧数的多少。

接口说明：

示例代码：script/demo/render/animatedSprite_demo.js

可以使用 SpriteSheetCache 图集生成精灵或者九宫图：

接口说明：BK.SpriteSheetCache 图集

示例代码：script/demo/render/spriteSheetCache_demo.js

BK.ClipMask 蒙版

var sp = new BK.Sprite(200, 200, tex, 0, 1, 1, 1);
sp.anchor = {x: 0.5, y : 0.5};
sp.position = {x: 350, y : 600, z: 0};
sp.mask = new BK.ClipMask(stencilSp2, false, 0.0);
sp.mask = new BK.ClipMask(tempSP, false, 0.0);
sp.mask.inverted = false;
sp.mask.alphaThreshold = 0.0;

接口说明：BK.ClipMask 蒙版

示例代码：script/demo/render/clip_node_demo.js

BK.ClipNode 蒙版节点

使用：

• 新增一个模板纹理
• 通过模板纹理创建蒙版节点
• 加入一个叠加精灵
• 设置叠加参数

接口说明：BK.ClipNode 蒙版节点

示例代码：script/demo/render/clip_node_demo.js

ClipRectNode 是对指定x、y坐标、高、宽的区域进行裁剪的方法。

使用：

• 创建BK.ClipRectNode
• 创建BK.Sprite并加入到 BK.ClipRectNode中，作为子节点
• 设置裁剪参数（也可以在创建BK.ClipRectNode时指定）

  var clipNode = new BK.ClipRectNode( 125, 125, 125, 125);
  clipNode.position = {x: 125, y: 125, z: 0};
  BK.Director.root.addChild(clipNode);
  var tex = new BK.Texture("GameRes://texture/icon.png");
  var sp =new BK.Sprite(250,250,tex,0,1,1,1);
  clipNode.addChild(sp);

接口说明：

示例代码：script/demo/render/clip_rect_node_demo.js

canvas

canvas 是一个可以使用脚本来绘制图形的画布，可以用于绘制图表、制作图片构图或者制作动画。

示例代码：script/demo/render/canvas_demo.js

webgl

WebGL 用于呈现交互式3D和2D图形。

示例代码：