egret

本案例参考： http://emoji.decathlon.trustingme.cn/ 但是实现方式不一样。 教程目录 一 head first 二 打开本地图片功能 三 拖拽和缩放手势，调整图片 四 gifjs工具类动态表情合成 五 demo源码下载 一 head first 显示原理 1.1 利用<input>标签打开本地图片。 1.2 FileReader读取图片，生成base64字符串给Egret显示。 1.3 Egret中利用RenderTexture截取多张表情图的base64字符串，传给gifjs工具类生成动态GIF。 二 本地图片上传 首先我们实现打开本地图片功能。微信里有图片接口，但是还得接微信jssdk。 我们这里用<input>标签实现。 [AppleScript] 纯文本查看 复制代码 ? 1 < input type = "file" id = "uploadImg" > 页面显示效果这样 <ignore_js_op> 我们把它隐藏起来，不然显示在游戏里就很丑了。 [AppleScript] 纯文本查看 复制代码 ? 1 < input type = "file" id = "uploadImg" style = "display:none" / > 我们在exml上创建一个上传按钮，ID为openFileBtn。 创建一个确认按钮，ID为okBtn。

各位开发者好，白鹭引擎团队今天发布2020年最大的一次更新：Egret5.3版本。由于白鹭引擎团队在2019年已经针对部分开发者提供过内部的5.3.x 版本，所以本次更新的版本号为 5.3.5。 根据白鹭引擎 2018年以来的规划，版本号第二位为奇数位表示这个版本是抢先体验版而非稳定版，因此我们将在 Egret 5.3 系列版本中相对激进的引入新特性，但是在本次更新的5.3.5中我们还是优先保证现有开发者能直接升级至最新版本同时尽量不引入新的问题。 闲话少说，本次更新内容包含了四大部分： 1、引擎运行时改善； 2、支持发布到360PC小游戏； 3、Egret UI Editor 发布 1.9 版本； 4、Egret Inspector 发布 3.5 版本。 引擎运行时 [新增] 增加对 EgretPro 的适配，在 EgretPro 中可以无需修改直接使用该版本引擎； [新增] canvas 渲染模式增加对 Mesh 渲染的支持，使得 DraonBones 或 Spine 可以在 Canvas 模式下渲染网格动画； [新增] 增加 ttf 字体文件的支持； [修复] Rectangle 中 contains 与 containsPoint 对是否包括边界点的返回结果不同的问题； [修复] 显示对象与 mask 的角度为 90 度时，显示错误的问题； [修复] 微信浏览器下

近几年前端领域不断地涌现出新的技术，旧的技术也不断地进行更新换代。随着技术的不断进步，前端开发涉及的领域，也变得越来越广，一起来了解一下前端几个重要的领域吧。 PC PC (Personal Computer) 即个人电脑。目前 电脑端 仍是前端一个主要的领域，主要分为面向大众的各类网站，如新闻媒体、社交、电商、论坛等和面向管理员的各种 CMS (内容管理系统)和其它的后台管理系统。 其实早期并没有 "前端工程师" 的称号，那时候一般叫做 "网页设计师" 或 "美工"。记得最早接触到的网页设计软件是微软开发的 "Frontpage"，后面才接触到 "网页三剑客" (Dreamweaver、Fireworks、Flash) 中的 Dreamweaver，直到现在的各种 IDE (集成开发环境)，如 Sublime Text、WebStorm、Visual Studio Code 、Atom 等。 对于前端工程师来说，开发 PC 端项目，最痛苦的事情莫过于 解决浏览器兼容性 问题，特别是 IE 浏览器不同版本的问题。值得高兴的是，针对现代浏览器不同特性的兼容问题，可以借助构建工具的插件来实现自动添加不同浏览器的特性前缀，比如 Post CSS 的 Autoprefixer 插件。 接下来我们来看一下，PC 端 第一个网页 长啥样： Web App Web App 是指使用 Web

前言 　　一行白鹭上青天 需求 　　最近，我们老板刷刷的为了省事，给美术减压（背景有点长，不说了）。 　　 美术出 fairygui，我需要在网页上看到实时操作，并且看到效果！ 需求分析 　　这怕是要了我的狗命啊，但是要年底了，包住饭碗要紧。 　　提炼关键字， fairygui ， 网页展示，操作，Egret 　　再浓缩一下： fairygui 为交互素材，白鹭为引擎，vue为展示页面 一、fairygui 是什么？ 　　官方地址： http://www.fairygui.com/guide/ 　　 FairyGUI提供了一个强大的UI编辑器， 使用习惯与Adobe系列软件保持一致 ，美术设计师和策划都可以轻松上手。 　　airyGUI提供了多个游戏引擎SDK： Unity 、 Cocos2d-x 、 Cry Egine , MonoGame , Havok Vision/Project Anarchy 、 Egret 、 LayaAir 、 CocosCreator 、 Haxe 、 Pixi 、 Flash 、 Starling ，未来还将支持 UE4 、 LibGDX 等。借助FairyGUI-SDK， 　　你可以轻松在UI中使用3D对象、粒子等元素，而且FairyGUI还解决了环形进度条、像素点击测试、图文混排、循环列表、虚拟列表、曲面UI、VR输入等UI开发中常见的痛点

游戏中会用着一些简单的动画，公司一般使用的dragonbones制作，导出二进制格式或者MC来使用。 感觉一些简单动画直接使用动画编辑器更加简便些。 引擎版本：5.0.14 wing版本：4.1.0 一 效果图 二 使用动画编辑器 我这里使用的是类似Flash的MovieClip的概念。 这个开场动画是一个自定义组件，由OpenAnim.ts 和OpenAnimSkin.exml组成。 你可以使用代码创建，或者直接拖动到其他exml中使用它(这样非常方便摆位置)。 写了一堆又删了，关于动画编辑器的教程，还是看官方的吧。哈哈...哈哈... 官方动画编辑器教程： http://developer.egret.com/cn/github/egret-docs/Wing/animation/index.html 三 使用OpenAnim 1 自定义组件OpenAnim，包含动画的皮肤OpenAnimSkin.exml 使用的素材 OpenAnimSkin.exml OpenAnim.ts [AppleScript] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 / * * * 开场动画 *

公司的人想用龙骨，但是同事在官网找不着二进制的资料 ...于是写了个简单demo。 demo中包含了帧动画、骨骼动画json、极速和二进制的资源和代码 测试环境： DragonBonesPro 5.5 (5.6一直报错无法导出，后来据说是未注册登录...) Egret Wing4.1.0 EgretEgnie 5.0.14 目录：一、代码运行效果图 二、效率和内存占用对比 三、二进制龙骨使用方法 四、Demo下载 一、 代码运行效果图： demo中使用的龙骨动画来自打开dragonbone软件后首页的那条龙 二、 效率和内存占用对比： 这里帧动画的图没压缩哈，看上去5m真吓人，可以到tiny上压缩，压缩了是800多kb。 三、 二进制龙骨使用方法 一般都会使用最新的二进制格式，也是官方推荐的。 软件左上菜单 文件 -> 导出 -> 二进制 会得到3个文件，放到Egret项目resource资源文件夹下 将文件导入资源配置文件default.res.json中 二进制dbbin文件需要选择类型为bin egretProperties.json文件中导入dragonBones库，并编译一遍引擎 代码中创建骨骼动画 [AppleScript] 纯文本查看 复制代码 ? 1 2 3 4 5 6 7 8 let factory = dragonBones.EgretFactory

参考： Laya动画基础 Egret帧动画工具类 版本：2.1.1.1 序列图动画 白鹭的序列图动画，使用TexureMerger合图，然后使用MovieClip类播放。 Laya的话，使用图集打包工具合图，然后使用Animation类播放。 一个泡泡爆炸的序列图 laya右上角选择工具，图集打包。 选择动画的父文件夹 ，后缀选择atlas，点击确定。 例如图片路径是laya\anim\pao0\pao0.png，图片文件夹路径则是laya\anim\pao0，则应该选择路径是 ：图片父文件夹路径laya\anim。 打包生成pao0.atlas和pao0.png 将动画文件atlas和png放入laya项目assets/anim文件夹下，并在代码中加载使用 public pao0:Laya.Animation; onEnable(){ //加载动画资源 this.pao0 = new Laya.Animation(); this.pao0.loadAtlas("anim/pao0.atlas",Laya.Handler.create(this, this.onAnimLoaded)); } private onAnimLoaded(){ //循环播放动画 Laya.stage.addChild(this.pao0); this.pao0.play(0,true,""); }

如何开发一个可维护性，可扩展，跨平台的换装游戏呢，本文从产品设计、龙骨动画、前端再到后端如何管理等角度，来介绍摩比秀换装模块从0到1的实现过程。 项目背景   我们一直在思考，如何能激励学员自主学习的积极性？从上课表现良好奖励摩比星、app上及时完成课后练习挣得摩比星等，但这些学员获得的星星多了也没有兴趣了，我们需要一个途径能让学员挣得的摩比星有价值，这样就能产生一个良性的循环来激励学习。这样的背景下，摩比秀诞生了。   我们的学员可以在摩比秀通过摩比星来兑换不同虚拟服装，穿上后在课前点名环节就可以穿着这件衣服展示在我们的IPS上，同学们都可以看到，同时还可以领养小宠物，领养宠物之后就可以进行各种各样的学习了，比如：“编程启蒙”，让孩子们感受程序的魅力。   今天就来说一说换装这一块具体的实现方案。 体验地址： 1） 摩比秀：http://shop.mobbyxt.com/html/index/login.html   测试账号：18201652946/20140706 分校选北京 2）小demo ：https://activity.firstleap.cn/egretLeapDemo/index.html 技术选型 我们考虑到跨平台性，需要在App里、服务号、白板端等场景下使用，决定用H5来开发，然后又对比了一些游戏引擎Cocos2d-js和Egret等,最终决定采用Egret

本文由云+社区发表 使用一个简单的游戏开发示例，由浅入深，介绍了如何用Laya引擎开发微信小游戏。 作者：马晓东，腾讯前端高级工程师。 微信小游戏的推出也快一年时间了，在IEG的游戏运营活动中，也出现了越来越多的以小游戏作为载体运营的活动类型，比如游戏预约，抢先试完等等，都收到了非常良好的效果。 在支持微信小游戏的游戏引擎中，Cocos，Egret，Laya都对小游戏的开发提供了很多强大的支持。前段时间正好抽空研究了一下这块的内容，现做一个总结，针对如何使用Laya引擎开发微信小游戏给大家做一下介绍。因为时间有限，研究并不深入, 如有高手路过，忘不吝赐教。 做个啥游戏呢？“绝地求生”很火，我们做个“绝地求死”如何？策划也很简单，和绝地求生相反，主角不是跳伞的玩家，而是地面的炮手，大炮要把跳伞的伞兵用大炮一个个都消灭掉。 牛逼的策划有了，咱们进入正题，看看怎么实现吧！ 1. 如果不用引擎会怎样？ 1.1 Canvas了解下 微信小游戏提供了canvas这个游戏核心组件。利用Canvas可以在画布上画出文字、图形、图像等等。 不过讲微信小游戏之前，得先说说H5，在H5时代获取canvas对象非常简单，如下图： var canvas=document.getElementById("myCanvas"); var ctx=canvas.getContext("2d"); 常用的一些API

如何开发一个可维护性，可扩展，跨平台的换装游戏呢，本文从产品设计、龙骨动画、前端再到后端如何管理等角度，来介绍骨骼换装游戏从0到1的实现过程。 项目背景 我们一直在思考，如何能激励学员自主学习的积极性？从上课表现良好、app上及时完成课后练习等途径挣的星星，但这些学员获得的星星多了也没有兴趣了，我们需要一个途径能让学员的星星有价值，这样就能产生一个良性的循环来激励学习。这样的背景下，我们设计了一套这样的系统。 我们的学员可以在通过星星来兑换不同虚拟服装，穿上后在课前点名环节就可以穿着这件衣服展示在我们的IPS上，同学们都可以看到，同时还可以领养小宠物，领养宠物之后就可以进行各种各样的学习了，比如：“编程启蒙”，让孩子们感受程序的魅力。 今天就来说一说换装这一块具体的实现方案。 体验地址： 小demo ： https://activity.firstleap.cn/egretLeapDemo/index.html 技术选型 我们考虑到跨平台性，需要在App里、服务号、白板端等场景下使用，决定用H5来开发，然后又对比了一些游戏引擎Cocos2d-js和Egret等,最终决定采用Egret+Dragonbones来实现。 官网： https://egret.com/ 基本概念 首先来说一下骨骼动画里的一些基本概念，只有了解了这些，才能进行后面的游戏开发、系统管理的设计等。 1）、骨架