返回列表 发新帖

babylonjs教程(27)-使用Canvas2D

[复制链接]

138

主题

171

帖子

2564

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2564
发表于 2016-6-22 22:14:37 | 显示全部楼层 | 阅读模式
目录

  • 主要的类型
  • 谈的够多的了,让我们看一些代码和一些像素
    • Hello World!
    • 让我们旋转它!
    • 世界空间Canvas(World Space Canvas)
      • 访问世界空间Canvas的3D场景节点
  • 更多playground

Canvas2D教程

首先整体功能概述和它的架构可以阅读这个文档

概述的主页也是学习不同概念的很好地方。

Canvas2D是答案,对于那些想在3D场景(在游戏UI里面)上面展示2D内容,它叫做ScreenSpace Canvas或者直接在场景里面为一个矩形容器Canvs内容,被叫做World Space Canvas。

这是小的2D游戏引擎,基于babylon.js核心特征,给你在你的作品中管理2D作品的机会。

这个功能要被设计的尽可能快速和可扩展的,未来会告诉你这个目标会被达到,但是现在我们正在正确的轨道上。

主要类型

Canvas2D

主要的类,是一个矩形用来展示2D内容。

Canvas可以表示在:

  • ScreenSpace(3D场景上面,共面到屏幕上),然后ScreenSpaceCanvas2D类被使用。
  • WorldSpace,代表一个在3D场景中的矩形,WorldSpaceCanvas2D类被使用。

这两个类都是简单包装,来缓解构造时间,但所有的实现都在Canvas2D类,所以我们教程使用的是这个类来代替其他两个。

Group2D

作为一个容器,一个包含子元素引用的新框架。注意任何包含Canvas2D特性的类型可以包含children,这并不是Group2D特有的属性。为了进行性能优化Group2D可以被缓存进bitmap来节约渲染时间,作为纹理花费保存内容。

Shape2D基础类型

Shape2D的绘制使用画笔的参数形式,一个是边框,另外一个是内容(也叫做填充)。到目前为止这里有三种类型的形状:Rectangle2D, Ellipse2D和Lines2D。

Sprite2D

用来展示纹理的部分

Text2D

用来展示一些文子

谈的够多的了,让我们看一些代码和一些像素

Hello World!

最简单的开始点是创建一个ScreenSpace Canvas2D和一个 "Hello World!"文字,这里我们看看:
  1. var canvas = new BABYLON.ScreenSpaceCanvas2D(scene, {
  2.     id: "ScreenCanvas",
  3.     size: new BABYLON.Size(300, 100),
  4.     backgroundFill: "#4040408F",
  5.     backgroundRoundRadius: 50,
  6.     children: [
  7.         new BABYLON.Text2D("Hello World!", {
  8.             id: "text",
  9.             marginAlignment: "h: center, v:center",
  10.             fontName: "20pt Arial",
  11.         })
  12.     ]
  13. });
复制代码

查看它的在线playground

这个代码很好的自我解释,但是让我们运行它:

  • 首先你要注意到创建多个基元的可以被使用:
    • 你调用第一个基元的构造函数来创建(最有可能是Canvas,也可能是其它类型)
    • 然后使用children设置数组来创建children基元在一个级联样式中。
  • 我们使用ScreenSpaceCanvas2D来创建一个实例,默认位置是 (0,0),有宽度300和高度10。内容不会被缓存,强制重新绘制在每一次渲染,作为默认的缓存策略是CACHESTRATEGY_DONTCACHE。
  • 设置填充背景色使用粗画笔和圆半径50。
  • 然后我们创建children数组和Text2D基元相对于它的父(Canvas)水平垂直居中,有20pt Arial字体和默认的颜色(白色)。

让我们旋转它!

让我们设置更多的东西,更复杂了:

  1. var canvas = new BABYLON.ScreenSpaceCanvas2D(scene,
  2.     {
  3.         id: "ScreenCanvas", size: new BABYLON.Size(500, 500),
  4.         backgroundFill: "#C0C0C040", backgroundRoundRadius: 50
  5.     });

  6. var rect = new BABYLON.Rectangle2D({
  7.     id: "mainRect", parent: canvas, x: 200, y: 200, width: 100, height: 100,
  8.     fill: "#404080FF", border: "#A040A0D0, #FFFFFFFF", borderThickness: 10,
  9.     roundRadius: 10,
  10.     children:
  11.     [
  12.         new BABYLON.Rectangle2D(
  13.         {
  14.             id: "insideRect", marginAlignment: "v: center, h: center",
  15.             width: 40, height: 40, fill: "#FAFF75FF", roundRadius: 10
  16.         })
  17.     ]});

  18. var timerId = setInterval(function () {
  19.     if (rect.isDisposed) {
  20.         clearInterval(timerId);
  21.         return;
  22.     }
  23.     rect.rotation += 0.003;
  24. }, 10);
复制代码

查看它的在线playground

解释:

  • 第一部分和第一个例子几乎一样,但是有更大的canvas尺寸。
  • 然后我们创建了第一个Rectangle,注意parent设置了Canvas自身的链接,它叫做“mainRect”,中心在Canvas的(200,200)位置(位置总是从基元的botoom/left角到它父的bottom/left角落)
  • 默认矩形中心是0.5,0.5它作为基元的中心。这样旋转会围绕着基元自身。
  • 然后我们有一个100,100大小的尺寸,粗笔刷用来填充,渐变用于边框。最后我们改变边框的粗细和圆角半径。
  • 我们创建第二个矩形叫做“insideRect”作为"mainRect"的children数组。我们使用对齐来定位,在父元素的中心尺寸是40,40.我们用纯色笔刷来填充内容和自定义圆角半径。
  • 我们定义了一个timer,每10ms改变一次矩形的旋转。

你会注意到,当你运行了这个例子两个矩形都在旋转,这是预料之中的,因为"insideRect"是"mainRect"的孩子,强制基础动画变化。

世界空间Canvas(World Space Canvas)

现在,让我们尝试第二中类型的Canvas:世界空间,对照Screen Space,世界空间是3D场景的一部分,它显示在一个矩形里,作为普通的场景节点。
  1. var canvas = new BABYLON.WorldSpaceCanvas2D(scene, new BABYLON.Size(100, 100), {
  2.     id: "WorldSpaceCanvas",
  3.     worldPosition: new BABYLON.Vector3(0, 0, 0),
  4.     worldRotation: BABYLON.Quaternion.RotationYawPitchRoll(Math.PI / 4, Math.PI / 4, 0),
  5.     renderScaleFactor: 8,
  6.     enableInteraction: true,
  7.     backgroundFill: "#C0C0C040",
  8.     backgroundRoundRadius: 80,
  9.     children: [
  10.         new BABYLON.Text2D("World Space Canvas", { fontName: "30pt Arial", marginAlignment: "h: center, v: bottom" })
  11.     ]
  12. });

  13. // 创建旋转的矩形
  14. var rect = new BABYLON.Rectangle2D(
  15.     { parent: canvas, x: 300, y: 300, width: 200, height: 200, fill: null,
  16.         border: BABYLON.Canvas2D.GetGradientColorBrush(new BABYLON.Color4(0.9, 0.3, 0.9, 1), new BABYLON.Color4(1.0, 1.0, 1.0, 1)),
  17.         borderThickness: 20,
  18.         children:
  19.         [
  20.             new BABYLON.Rectangle2D(
  21.             { parent: rect, width: 80, height: 80, marginAlignment: "h: center, v: center",
  22.             fill: "#0040F0FF", roundRadius: 20 })
  23.         ]});

  24. // 创建"click me!"按钮
  25. var buttonRect = new BABYLON.Rectangle2D(
  26.     { parent: canvas, id: "button", x: 100, y: 100, width: 200, height: 80, fill: "#40C040FF",
  27.         roundRadius: 10,
  28.         children:
  29.         [
  30.             new BABYLON.Text2D("Click Me!", { fontName: "30pt Arial", marginAlignment: "h: center, v: center" })
  31.         ]});

  32. // 创建"Awesome!" button
  33. var button2Rect = new BABYLON.Rectangle2D(
  34.     { parent: canvas, id: "button2", x: 420, y: 100, width: 200, height: 80, fill: "#4040C0FF",
  35.         roundRadius: 10, isVisible: false,
  36.         children:
  37.         [
  38.             new BABYLON.Text2D("Awesome!", { fontName: "30pt Arial", marginAlignment: "h: center, v: center" })
  39.         ]});

  40. //给"Click me!"按钮添加观察,观察点击用来显示隐藏第二个按钮
  41. buttonRect.pointerEventObservable.add(function (d, s) {
  42.     button2Rect.levelVisible = !button2Rect.levelVisible;
  43. }, BABYLON.PrimitivePointerInfo.PointerUp);

  44. //使两个矩形运动   
  45. var timerId = setInterval(function () {
  46.     if (rect.isDisposed) {
  47.         clearInterval(timerId);
  48.         return;
  49.     }
  50.     rect.rotation += 0.01;
  51. }, 10);
复制代码

查看它的在线playground

这次我们创建了一个Canvas它将会呈现在场景里,并没有在上面,它们的位置是0,0,0,旋转从偏航/俯仰/卷结构建成,它的场景大小是100,100,但Canvas缓存了位图它被缩放了8次(为了达到一个更好的渲染质量)。

我们还创建了两个按钮,并给第一个按钮添加了监听来konghi第二个按钮的显示隐藏。

访问世界空间Canvas的3D场景节点

canvas对象不是场景节点,为了接触SceneNode,位于Canvas,渲染它你必须要接触Canvas2D类的worldSpaceCanvasNode属性。这将返回一个基于实例的节点你可以在3D场景中操作和改变Canvas的行为。

更多playground

只要进入Canvas2D的首页,所有playground例子引用在文档的最后面。

回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表