原生渲染

BK.Node 节点

添加节点到root：

var node = new BK.Node();
node.id = 1;
node.name = "test";
node.position = {x:100,y:100};
node.scale = {x:1.5,y:1.5};
node.rotation = {x:0,y:0,z:0};
node.hidden = false;
node.vertexColor = {r:1,g:1,b:1,a:1};
node.canUserInteract = true;
node.zOrder = 1;
BK.Director.root.addChild(node);

接口说明：BK.Node 节点

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

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 设置纹理：

var tex = new BK.Texture('GameRes://texture/plane_blue.png');
var size = tex.size; //纹理的实际像素宽高
var width = size.width;
var height = size.height;

接口说明：BK.Texture 纹理

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

BK.Mesh 网格

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

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

//生成如山坡状的网格
BK.Script.loadlib('GameRes://script/demo/tinyfly/terrain.js');
var controlPoints = [
     {"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},
     {"x":20,"y":100,"isup":false}
];
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.Mesh 网格

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

BK.SkeletonAnimation 骨骼动画

基于 spine 的骨骼动画。

接口说明：BK.SkeletonAnimation 骨骼动画

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

BK.AnimatedSprite 帧动画

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

接口说明：BK.AnimatedSprite 帧动画

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

BK.SpriteSheetCache 图集

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

BK.Script.loadlib('GameRes://script/core/render/SpriteSheetCache.js');
BK.Script.loadlib('GameRes://script/core/render/Sprite9.js');
//加载图集
var texPath = "GameRes://resource/texture/spritesheet/test.png";
var jsonPath = "GameRes://resource/texture/spritesheet/test.json";
//生成图集缓存对象
var sheetCache = new SpriteSheetCache();
sheetCache.loadSheet(jsonPath,texPath);
//1.通过图集生成精灵
var sp = sheetCache.createSheetSprite("icon.png",200,200);
if(sp){
    BK.Director.root.addChild(sp);
}
//2.通过图集生成九宫图
var texture   = sheetCache.getTextureByFilename("green_btn.png");
var frameInfo = sheetCache.getFrameInfoByFilename("green_btn.png");
if (frameInfo && texture) {
    var sprite9 = new Sprite9(frameInfo.frame.w,frameInfo.frame.h,texture,{top:32,bottom:32,left:64,right:64},{x:frameInfo.frame.x,y:frameInfo.frame.y},true);
    BK.Director.root.addChild(sprite9);
    sprite9.size = {width:300,height:150};
    sprite9.position = {x:200,y:200};
}

接口说明：BK.SpriteSheetCache 图集

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

BK.ClipMask 蒙版

var sp = new BK.Sprite(200, 200, tex, 0, 1, 1, 1);
sp.name = "sp";
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 蒙版节点

ClipNode 是利用模板遮罩来完成对 Node 区域裁剪的方法。

使用：

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

//对应图例1
var wid = BK.Director.screenPixelSize.width
var stencilTex = new BK.Texture("GameRes://texture/mask/mask1.png");
var stencilSp = new  BK.Sprite(wid, wid, stencilTex, 0, 1, 1, 1);
var clipNode =new BK.ClipNode(stencilSp);
var tex = new BK.Texture("GameRes://texture/icon.png");
var sp =new BK.Sprite(wid,wid,tex,0,1,1,1);
BK.Director.root.addChild(clipNode);
clipNode.addChild(sp);
clipNode.inverted = true;
clipNode.alphaThreshold = 0.5;
//对应图例2
var wid = BK.Director.screenPixelSize.width
var stencilTex = new BK.Texture("GameRes://texture/mask/mask1.png");
var stencilSp = new  BK.Sprite(wid, wid, stencilTex, 0, 1, 1, 1);
var clipNode =new BK.ClipNode(stencilSp);
var tex = new BK.Texture("GameRes://texture/icon.png");
var sp =new BK.Sprite(wid,wid,tex,0,1,1,1);
BK.Director.root.addChild(clipNode);
clipNode.addChild(sp);
clipNode.inverted = false;
clipNode.alphaThreshold = 0.5;

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

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

BK.ClipRectNode 裁剪节点

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);

接口说明：BK.ClipRectNode 裁剪节点

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

canvas

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

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

webgl

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

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

原文: https://hudong.qq.com/docs/engine/engine/native/func/funcs/render.html

1.1.3.2.渲染