# 二维资源添加

# 概述

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

# `资源系统内的资源`

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

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

# `外部资源`

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

# HTMLCanvas使用流程

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