- 综合排序
- 最热优先
- 最新优先
- 来自专栏拂晓风起
createjs入门
createjs是一个轻量级的框架，稍微有点时间和耐心，就可以把全部源代码都看一遍，毕竟只有三十几个js文件。 地址：http://www.createjs.com/ 开发createjs的动画或游戏，没有重型的IDE或什么工具支持，我们只能从零开始写js。 一方面，这样对于jser来说，足够灵活；另外一方面，createjs因此足够精简足够小。 2、 建立html和canvas标签，onload后再执行createjs相关逻辑。 3、 编写createjs逻辑。 这个非常简单，因为createjs只提供了最简单的基础功能，我们理解了基础功能后就可以叠积木了。 关于createjs，最关键是要理解类结构 ?
1.4K40发布于 2018-07-03 - 来自专栏花叔的专栏
改装后适用于小游戏开发的createjs引擎
createjs是一个轻量的游戏引擎，轻量到都不觉得它是引擎了。 小游戏发布初期，花叔给封装了一个相应的createjs版本引擎，访问这个地址： http://ac.wxnodes.cn/application/images/createLib.zip “最强坦克”小游戏就是基于这个引擎研发的 /weapp-adapter.js') //官方adapter window.createjs = require('.. /createLib/create.js') window.rootStage = new createjs.Stage(canvas) //canvas为主域主屏canvas window.createjs.Ticker.framerate = 60 window.createjs.Ticker.addEventListener("tick", tick) function tick(e) { rootStage.update()
1.7K31发布于 2018-07-23 - 来自专栏前端进阶学习交流
一篇文章教会你利用createjs实现界面效果
【二、项目准备】 1、去网站： http://www.createjs.cc/ 下载EaselJs、TweenJs这两个模块。 ? createjs.DOMElement("instrutions"); d.alpha=0; d.x=50; createjs.Tween.get createjs.Tween.get(d).wait(100).to({y:40,alpha:1},2000,createjs.MotionGuidePlugin.bounceIn); 5）组件添加到舞台 （stage）,createjs.Ticker.addEventListener("tick",stage);表示刷新舞台。 3、大家可以尝试了解createjs的其他模块，官网上有对应的API文档供大家学习。 4、按照操作步骤，自己尝试去做。
1.5K10发布于 2020-11-26 - 来自专栏拂晓风起
cocos2d-js 和 createjs 性能对比（HTML5）
cocos2d-js除了做native游戏外，还可以用来做HTML5游戏/动画，那么它跟adobe的createjs框架比较会怎么样呢？ 在PC的chrome运行，cocos2d-js和createjs都能满帧60fps，轻松搞掂无压力。 ? createjs：使用canvas 2d渲染，保持在28fps。 createjs： ? 小结： 总体来说，由于cocos2d-js可以在webgl上渲染，所以性能会比createjs要好。 再考虑框架的附加能力方面，cocos2d-js框架提供的UI编辑器、粒子系统、骨骼动画、瓦片地图等等，都是createjs这个轻量级选手不具备的，createjs只能从零开始，一切都得靠开发者自行实现。
2.6K40发布于 2018-07-03 - 来自专栏腾讯社交用户体验设计
H5动画开发快车道 - AnimateCC与createjs开发实践
Createjs CreateJS为CreateJS库，可以说是一款为HTML5游戏开发的引擎。目前被Adobe整合到Animate CC中，作为导出canvas动画的基础javascript库。 () 这里可以是额外处理的对象 } var p = createjs.extend(View1,createjs.Container); cls.View1 = createjs.promote // createjs.Ticker.setFPS();和createjs.Ticker.addEventListener("tick", stageBreakHandler);是必须要加的，stageBreakHandler fnStartAnimation = function() { createjs.Ticker.setFPS(lib.properties.fps); createjs.Ticker.addEventListener (View1,createjs.Container); cls.View1 = createjs.promote(View1, "Container");}()); 一个动画效果就完成，当然刚开始的时候可能要花点时间来熟悉
3.9K41发布于 2018-06-29 - 来自专栏Coding迪斯尼
VUE+WebPack游戏设计：'乘法防线'游戏设计
/static/easeljs-0.7.1.min.js"></script> <script type="text/javascript"> window.createjs = createjs window对象里，后面我们开发组件时，需要从window全局对象获取createjs对象。 (this.canvas) var hello = new window.createjs.Text('Hello CreateJS', '18px', 'white') this.stage.addChild 接着我们再从createjs对象里构建一个Text对象，顾名思义，它使用来在页面上显示字符串的，字符串的内容就是’Hello CreateJS’,第二个参数表示字体大小是18像素单位，第三个参数用来指定字体的颜色 对CreateJS的详细文档可以从以下链接获取 代码中的Text对象是CreateJS库中的一个子类，它的作用是在页面上渲染字符串，就如例子中一样。
1.1K20发布于 2018-07-19 - 来自专栏前端进阶学习交流
一篇文章教会你使用HTML打造一款颜色配对游戏
【一、项目背景】 createjs是一个基于canvas的制作H5游戏、动画、交互的库。包括EaselJs、TweenJs、SoundJs、 PreloadJs四个部分。 function init() { stage = new createjs.Stage("canvas"); } 4、定义画图形方法buildShapes()，调用createjs.Shape function startGame() { createjs.Ticker.setFPS(60); createjs.Ticker.addEventListener("tick", function createjs.Tween.get(shape).to({x:shape.homeX, y:shape.homeY}, 200, createjs.Ease.quadOut); 10、定义赢的方法 3、大家可以尝试了解createjs的其他模块，官网上有对应的API文档供大家学习。 4、按照操作步骤，自己尝试去做。
1.1K10发布于 2020-11-26 - 来自专栏Coding迪斯尼
实现盒子动画和键盘特效
createjs库给我们提供一种有效的动画实现机制，它会导出一个Ticker类，该类提供了一个接口setFPS, 例如通过调用createjs.Ticker.setFPS(40), 那么createjs 就能对页面在一秒内进行40次刷新，每次刷新时会发出一个’tick’消息，我们只要监听这个消息，并提供会调函数，那么createjs就会在一秒内回调我们的函数40次，在该函数中，我们再通过createjs ('canvas') this.stage = new this.createjs.Stage(this.canvas) this.createjs.Ticker.setFPS createjs的定时回调机制实现游戏的主循环。 (this.canvas) this.createjs.Ticker.setFPS(40) this.createjs.Ticker.addEventListener('tick
91120发布于 2018-07-19 - 来自专栏拂晓风起
HTML5动画软件工具编辑器 HTML5动画分类 工具推荐
============================================================== 除上述全部编辑器之外，还不得不提及两个比较牛逼的js库，用于辅助动作制： CreateJS ：http://www.createjs.com/#! /CreateJS GSAP-JS：http://www.greensock.com/gsap-js/ CreateJS被Adobe CC用于导出html5动画，而GSAP的制作者GreenSock
3.1K30发布于 2018-07-05 - 来自专栏拂晓风起
HTML5骨骼动画Demo | 使用min2d、createjs、pixi播放spine动画
createjs 这是HTML5动画引擎比较好用，也比较小的一个，如果项目纯碎为了播放骨骼动画，而不是一个游戏，强烈推荐用这个。缺点是对webgl支持不好，官方也没什么动作去做好webgl的支持。 步骤大概是： 引入spine官方的spine.js 读取纹理atlas，根据atlas部件数量，建立相应的createjs图元和从属关系 读取动画json，新建spine.Skeleton、spine.AnimationState 混淆后只有13KB，而createjs达到100+KB，PIXI是287KB，更不用说白鹭引擎和cocos2d-js了，相对而言，他们就是巨无霸。 整个思路跟createjs类似，但我做了一层封装，所以播放spine动画会相对简单一些。 补充一句：createjs和min2d都只支持region类型的attachment，不支持skinnedmesh。
6.7K51发布于 2018-07-03 - 来自专栏Coding迪斯尼
VUE+WebPack游戏设计:实现盒子爆破效果和界面美化
/static/easeljs-0.7.1.min.js"></script> <script type="text/javascript"> window.createjs = createjs this.clearInputs() } }, showCircle (x, y) { var circle = new this.createjs.Bitmap tweenjs库可以实现很多图片显示效果，具体说明可以参看以下链接： http://www.createjs.com/Docs/TweenJS/classes/Ease.html 至此，游戏的基本流程我们都做完了 for (var i = 0; i < this.initialLifes; i++) { // change var heart = new this.createjs.Bitmap () var bitmap = new this.createjs.Bitmap('../..
1.2K30发布于 2018-07-19 - 来自专栏腾讯社交用户体验设计
你离高效制作动画只差一篇文章的距离
通过调试生成的h5，我们可以发现Animate CC是在canvas上通过createjs引擎绘制动画的。关于createjs，大家可以看看其中文社区 、或者ajex的博客来了解更多。 解决办法就是换用requestanimationframe播放，在fnStartAnimation方法里添加createjs.Ticker.timingMode = createjs.Ticker.RAF fnStartAnimation = function() { createjs.Ticker.setFPS(lib.properties.fps); createjs.Ticker.addEventListener ("tick", stage); //默认的设置 //createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED; //建议设置 createjs.Ticker.timingMode ajex的博客有一篇《createjs性能优化》，大家可以看看。不过以我目前做动画的经验来看，做了上面2点优化方案，就可以比较流畅了。
1.6K20发布于 2018-06-29 - 来自专栏腾讯社交用户体验设计
教你爱的正确姿势-QQ红包520项目总结
在此我想到了三个方案：纯H5+CSS3、视频、animate cc+createjs。 实际上，animate cc+createjs的实现动画的方式有很多好处，在此简单列举一下： 1.可视化实现，制作时可以很直观地看到效果。 ? 将createjs.Ticker.timingMode设为createjs.Ticker.RAF。 而设置为createjs.Ticker.RAF后，会改用requestAnimationFrame来播放动画，在安卓机上也能流畅播放。 4.声音不要放在createjs提供的预加载方法上。因为没有缓存，声音文件预加载会严重拖慢loading的速度。
1.5K30发布于 2018-06-29 - 来自专栏互联网杂技
H5动画开发快车道
经过一段时间的摸索，发现AnimateCC（就是原来的Flash）可以导出canvas动画，而且是基于createjs这个开发轻量级游戏的js库的，非常适合用来做移动端的一些h5动画。 Createjs CreateJS为CreateJS库，可以说是一款为HTML5游戏开发的引擎。目前被Adobe整合到Animate CC中，作为导出canvas动画的基础javascript库。 TweenJS：补间动画”引擎 SoundJS：音频播放引擎 PrloadJS：资源预加载 具体的文档和Demo介绍以及API的使用方法，可以通过官网来了解：http://createjs.com/docs 比如下面这个小的h5动画，使用上面的animate cc和createjs两天就可以搞定： 雪碧图功能 如果碰到图片很多的项目怎么办呢？ 下面给大家推荐一个学习an和createjs方面的非常不错的博客，把上面的教程看完，基本上就可以出师了：
5.6K80发布于 2018-04-03 - 来自专栏飞扬的花生
preloadjs实现网页资源预加载
script> <script> var canvas = document.getElementById("myCanvas"); var stage = new createjs.Stage (canvas); var manifest; var preload; var progressText = new createjs.Text("" +i+".png" }) } //开始预加载 function startPreload() { preload = new createjs.LoadQueue (true); //注意加载音频文件需要调用如下代码行 preload.installPlugin(createjs.Sound);
3.6K50发布于 2018-04-18 - 来自专栏游戏开发之旅
H5游戏开发：游戏引擎入门推荐
CreateJS ? CreateJS 周边产品 CreateJS 官方提供了 TweenJS 支持动画开发，同时通过 SoundJS 和 PreLoadJS 提供了音频和预下载的支持，对于 H5 游戏基础功能的支持是足够的 在兼容性方面，CreateJS 支持 PC 端和移动端几乎所有的浏览器。此外，CreateJS 还支持用 flash CC 开发导出由 CreateJS 渲染的 H5 游戏。
7.5K20发布于 2019-12-02 - 来自专栏TagBug
小游戏开发概述 - 笔记
缺点： 界面能力不友好 生态很差 # Egret（白鹭） 优势： 工具链比较完善 第三方库支持好 企业定制能力强 缺点： 更新迭代遭瓶颈 生态较差 # CreateJS 库 & Phaser 游戏引擎 CreateJS：它是多个库的集合，EASELJS (控制素材展示与组合)、TWEENJS (控制素材缓动动画)、SOUNDJS (控制声音)、PRELOADJS (控制加载 Phaser 游戏引擎：除了 CreateJS 为基础的展示、声音、动画、加载系统，还设计了摄像机、物理引擎、内置浏览器、插件系统等高级功能。
1.3K20编辑于 2023-03-17 - 来自专栏一个小程序员的成长笔记
常用js，css文件统一加载方法，并在加载之后调用回调函数
// 如果有js文件，开始加载js if (obj.script.length > 0) { addTask(createJs // 如果有js文件，开始加载js if (obj.script.length > 0) { addTask(createJs cssCount++; } /** * 添加<script> js加载完后执行回调函数 * @param obj 当前对象 */ function createJs script.getAttribute("src")); if (obj.script.length > 0) { addTask(createJs
4.6K70发布于 2018-03-07 - 来自专栏黒之染开发日记
【easeljs】矢量形状 Shape类
代码例子： var graphics = new createjs.Graphics().beginFill("#ff0000").drawRect(0, 0, 100, 100); var shape = new createjs.Shape(graphics); //也可以使用Shape的graphics属性绘制出与上面一样的效果 var shape = new createjs.Shape()
1.1K30发布于 2018-10-19 - 来自专栏Coding迪斯尼
VUE+WebPack游戏设计：欲望都市,构建类RPG游戏的开发
本节开始，我们将基于上一个项目所学到的知识，利用createjs 和 Tween两个图形绘制库开发一款新的游戏，名为欲望都市。 先像以前项目一样启动一个新的VUE工程，然后在index.html里面把createjs和tween这两个库引入项目，代码如下： <! /static/easeljs-0.7.1.min.js"></script> <script type="text/javascript"> window.createjs = createjs </script> <title>Isometric City</title> </head> <body>
< canvas: null, stage: null } }, .... } 游戏的宽和高分别是960和480像素，cjs将用来对应createjs1.1K40发布于 2018-07-19
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号