二维资源添加

概述

二维世界里面使用的资源,一般来说可以分为:

资源系统内的资源

Scene、Prefab 包含整个二维场景或某个二维模块,所有节点、对应组件、属性的预制件。

Texture2D、SpriteFrame Texture2D是2D贴图资源文件,SpriteFrame是根据Texture2D贴图创建的图片描述资源。

外部资源

如需要使用HTMLCanvasHTMLImageElement,这类注册资源外的资源,可以使用根据这些资源对象,动态创建Texture2D的流程。

HTMLCanvas使用流程

HTMLCanvas.png

/** 
 * HTMLCanvas
*/
const entity = game.createEntity2D('CanvasItem');
entity.transform2D.size.x = 400;
entity.transform2D.size.y = 400;
const canvasSp = entity.addComponent(engine.UISprite);
uiRoot.addChild(entity.transform2D);

// 创建HTMLCanvas
const htmlCanvas = document.createElement('canvas');
htmlCanvas.width = 400;
htmlCanvas.height = 400;
const ctx = htmlCanvas.getContext('2d');

// 画个房子
ctx.fillStyle = '#fd0';
ctx.strokeStyle = '#0cc';
ctx.lineWidth = 10;
ctx.strokeRect(75, 140, 150, 110);
ctx.fillRect(130, 190, 40, 60);
ctx.beginPath();
ctx.moveTo(50, 140);
ctx.lineTo(150, 60);
ctx.lineTo(250, 140);
ctx.closePath();
ctx.stroke();

// 根据HTMLCanvas创建Texture2D
const texture2D = new engine.Texture2D();
texture2D.initWithCanvas(htmlCanvas);

// 根据Texure2D创建SpriteFrame
const spriteFrame = engine.SpriteFrame.createFromTexture(texture2D);
canvasSp.spriteFrame = spriteFrame;

HTMLImage使用流程

// 需使用wx.downloadFile接口下载图片解决跨域问题
const htmlImage = ...;

// 根据HTMLImage创建Texture2D
const texture2D = new engine.Texture2D();
texture2D.initWithImage(htmlImage);
/* 改动频繁的纹理,可以选择动态纹理 */
// texture2D.initDynamicTexture() 创建动态纹理
// texture2D.updateSubTexture() // 上传局部纹理

// 根据Texure2D创建SpriteFrame
const spriteFrame = engine.SpriteFrame.createFromTexture(texture2D);