收藏
评论

开放数据域UI绘制解决方案发布 —— 轻量级的Canvas渲染引擎官方

我们有收到很多反馈:在开放数据域做UI界面太难了!!


“我只是想绘制一个简单的好友列表,最多加个赠送或者邀请按钮,在开放数据域做UI界面太难了!!”


“开放数据域引入一个独立的游戏引擎会占据好多代码包体积”


“纯canvas开发真的太麻烦,代码可读性差,事件处理也很麻烦”


这是很多开发者的心声。


为此,开发哥哥们也提供了开放数据域UI绘制的解决方案——轻量级的canvas渲染引擎


体积小!性能还杠杠的!上面的demo就是用它完成的。


轻量级的canvas渲染引擎


这款轻量级的canvas渲染引擎,它具有以下特点:


· 引擎体积很小,压缩之后仅~50kb;

· 类Web开发,只需提供XML + CSS即可渲染界面,提高代码可维护性;

· 性能强大:长列表滚动可跑满60帧;




| 使用教程:


· step 1:克隆本项目到合适的文件夹,引用引擎


// 通过Git的方式安装
git clone https://github.com/wechat-miniprogram/minigame-canvas-engine
 
// 引用渲染引擎
import Layout from 'minigame-canvas-engine'


· step 2:为UI界面编写模板和样式

let template = `
<view >
  <text value="hello canvas"> </text>
</view>
`
 
let style = {
    container: {
         width: 200,
         height: 100,
         backgroundColor: '#ffffff',
         justContent: 'center',
         alignItems: 'center',
     },
     testText: {
         color: '#ff0000',
         width: 200,
         height: 100,
         lineHeight: 100,
         fontSize: 30,
         textAlign: 'center',
     }
}


· step 3:调用渲染API,执行真正的渲染

// 将模板和样式传给渲染引擎,渲染引擎会生成布局树和渲染树等,准备渲染到canvas上面
Layout.init(template, style);
  
// sharedContext自行创建
Layout.layout(sharedContext);
 
/**
 * 设置sharedCancas在主域绘制的物理尺寸和位置信息,这一步非常重要,
 * 因为子域渲染引擎并不关心外部使用的引擎是什么,而是自己监听触摸事件来进行事件处理,
 * 因此需要拿到真实的物理尺寸、位置信息来执行事件处理。
 */
Layout.updateViewPort({
   width : 200,
   height: 100,
   x     : 100,
   y     : 100
});


· step 4:效果预览




|| TIPS:


详细的教程可以查看文档


为了方便调试,还可以使用在线编辑功能


上面的邀请好友获得激励的demo示例,也是用这个canvas渲染引擎实现的喔。


对定向分享奖励还有什么疑问或者经验分享?希望了解哪些方面的实践教程?欢迎在评论区留言。


3397浏览
最后一次编辑于  2019-12-13
收藏

10 个评论

  • To.
    To.
    2019-12-13

    赞啊

    2019-12-13
    赞同 4
    回复
  • _
    _
    2019-12-23

    这也太麻烦了吧 不会CSS这些web技术的怎么拼哇 官方能否给给可视化的

    2019-12-23
    赞同 1
    回复
  • Mian Goo
    Mian Goo
    2020-08-04
     真机开增强编译 会报错,如何解决?
     
     报这个 @babel/runtime/helpers/interopRequire
    
    
    2020-08-04
    赞同
    回复
  • 藤井树
    藤井树
    2020-06-04

    方案是不错,还是需要考虑到实用性。场景上拓展还需要加强一下。上面的案例和文档还有很多错处。编译的时候,没有很好指导,导致有一些弯路。 例如还有适配问题。

    2020-06-04
    赞同
    回复 1
  • 藤井树
    藤井树
    2020-06-04

    有无具体类似白鹭,laya 和cco 引擎应用案例呢?这块案例可以拓展一下

    2020-06-04
    赞同
    回复
  • 海阔天空®
    海阔天空®
    2020-04-12

    难道开发gg不知道github被q限速了 clone 很慢吗? 为何放到国内服务器上面呢。。 🐤

    2020-04-12
    赞同
    回复
  • vicky
    vicky
    2020-03-10

    真是福音呀!但现在的引擎只支持image标签显示图片,而我们游戏在子域有很多等级段位图片需要显示,希望能扩展支持sprites图集,可以类似div的背景图片显示

    2020-03-10
    赞同
    回复
  • Super Programmer
    Super Programmer
    2020-01-06

    请问怎么做屏幕适配啊...

    2020-01-06
    赞同
    回复
  •           小飞
    小飞
    2019-12-13

    赞一个

    2019-12-13
    赞同
    回复
  • cole
    cole
    2019-12-13

    还没用,不过看着就有食欲,除了微信,QQ平台支持这种模式吗

    2019-12-13
    赞同
    回复 5
    • LXZ
      LXZ
      2019-12-14
      同问qq支持吗
      2019-12-14
      1
      回复
    • 袁梓民
      袁梓民
      2020-01-06
      emmm,QQ什么场景需要这个?
      2020-01-06
      回复
    • LXZ
      LXZ
      2020-03-04回复袁梓民
      qq小游戏排行榜哦
      2020-03-04
      回复
    • 藤井树
      藤井树
      2020-06-04回复袁梓民
      这个如何用?感觉引入进去就报错了
      2020-06-04
      回复
    • 藤井树
      藤井树
      2020-06-04回复袁梓民
      功能还是有一些报错。需要检验一下
      2020-06-04
      回复
登录 后发表内容