createjs初学-关于cache

本文介绍了CreateJS中的DisplayObject.cache方法,该方法将显示对象绘制到新的canvas中,提升不常变化复杂对象的性能。当对象内容变化时需重新调用cache或updateCache。详细阐述了参数含义,包括指定缓存区域和缩放比例。同时提到,应用滤镜时应在cache前设置,Bitmap对象使用cache的特殊情况以及Sprite不需要调用cache。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在DisplayObject中有一个cache方法,在这里介绍一下。

这个方法是把显示对象画到一个新的canvas中。这样一些不经常变化的复杂的显示对象性能上会优化好多(比如说有许多子对象的容器或者复杂的Shape)。在cache了以后,就不用在每一次stage.update()重绘的时候重新渲染了,所以可以大大提高效率。被缓存的显示对象可以移动、旋转、改变透明度。如果被缓存的显示对象的内容变化的话,就要重新调用cache()或者updateCahce()方法。
在官网的这个例子里面,可以明显的看出来缓存的效果。
官网cache例子

cache (x y width height [scale=1] ) 

这个方法有五个参数,最后一个scale是可选的,默认为1.
前四个参数指定了显示对象要缓存的区域,注意的事x和y的坐标都是根据当前这个显示对象本身的坐标系来计算。
最后一个参数scale表示在缓存时缩放的比例,比如 myShape.cache(0,0,100,100,2) 这样使用时,缓存出来的结果大小事200*200。

缓存一个圆型的Shape

var shape = new createjs.Shape();
shape.graphics
### FairyGUI与CreateJS集成进行前端UI开发 #### 创建项目结构 为了实现FairyGUI与CreateJS的集成,需先设置好基础环境。确保已安装Egret Wing或其他支持CreateJS项目的IDE。 #### 导入资源包 在项目中导入FairyGUI扩展库以及所需的CreateJS库文件[^1]。这一步骤通常通过配置构建工具完成,如Webpack或Grunt。 #### 初始化舞台 创建并初始化一个基于HTML5 Canvas的舞台实例,作为所有视觉元素的基础容器: ```javascript // Initialize stage with CreateJS var canvas = document.getElementById('gameCanvas'); var stage = new createjs.Stage(canvas); createjs.Ticker.setFPS(60); // Set frame rate to 60 FPS createjs.Ticker.addEventListener("tick", handleTick); function handleTick(event) { stage.update(); } ``` #### 加载FairyGUI场景 利用FairyGUI提供的API加载打包好的界面资源,并将其渲染到舞台上: ```javascript fgui.UIPackage.addPackage("res/ui/StartScene"); // Add UI package from resources path let startView = fgui.UIObjectFactory.newObject(fgui.UIPackage.getItemByURL("ui://StartScene/startBtn")); stage.addChild(startView.displayObject); // Convert FGUI component into display object compatible with CreateJS ``` #### 添加交互逻辑 对于`startBtn`这样的节点,在其上附加事件监听器来处理用户的输入行为,比如点击效果和启动新游戏流程等操作: ```javascript const buttonComponent = startView.getChild("n0").asCom; // Assuming 'n0' is the ID of your Button node within StartScene buttonComponent.onClick(addEventListener, function () { console.log("Game started!"); // Implement game initialization code here... }); ``` 以上代码片段展示了如何将FairyGUI中的按钮转换为可被CreateJS识别的对象,并为其绑定简单的点击回调函数。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值