作为一个从c++转过来的程序员,flash原生的自定义mask实在是太好用,能方便实现各种效果,比如新手引导的高亮、viewport效果等。可惜starling的显示对象并不支持mask特性,查阅google,终于找到pixelmask这个开源代码,实现了想要的效果,感谢这位作者。(注:该mask只有渲染的裁剪功能,并没有原生mask的hitTest功能)

使用方法:

// myCustomDisplayObject and myCustomMaskDisplayObject can be any Starling display object:
var myCustomDisplayObject:Sprite = new Sprite();
var myCustomMaskDisplayObject:Sprite = new Sprite();// for masks with animation: 较费,因为每次render都需要刷新RenderTexture,尽量避免同时出现大量这种带mask的动画。(宿主为动画或者mask本身也会动,都需要将animate设置成true)
var maskedDisplayObject:PixelMaskDisplayObject = new PixelMaskDisplayObject();
maskedDisplayObject.addChild(myCustomDisplayObject);// for masks with no animation (note, MUCH better performance!) 静态
var maskedDisplayObject:PixelMaskDisplayObject = new PixelMaskDisplayObject(-1, false);
maskedDisplayObject.addChild(myCustomDisplayObject);// Apply the masking as you would in classic flash.display style.
// Note: the mask display object should not be added to the display list.

maskedDisplayObject.mask = myCustomMaskDisplayObject; //mask基于像素,可以自定义形状,而不是传统的矩形viewport
addChild(maskedDisplayObject);

pixelMask通过两个renderTexture的Blend来实现,一个是要渲染的对象,另外一个是mask。

刷新RenderTexture

        private function refreshRenderTextures(e:Event=null) : void {if (_mask) {clearRenderTextures();_maskRenderTexture = new RenderTexture(_mask.width, _mask.height, false, _scaleFactor);_renderTexture = new RenderTexture(_mask.width, _mask.height, false, _scaleFactor);// create image with the new render texture_image = new Image(_renderTexture);// create image to blit the mask onto_maskImage = new Image(_maskRenderTexture);// set the blending mode to MASK (ZERO, SRC_ALPHA)          // BlendMode.register(MASK_MODE_NORMAL,Context3DBlendFactor.ZERO,Context3DBlendFactor.SOURCE_ALPHA);         // BlendMode.register(MASK_MODE_INVERTED,Context3DBlendFactor.ZERO,Context3DBlendFactor.ONE_MINUS_SOURCE_ALPHA);                if (_inverted) {_maskImage.blendMode = MASK_MODE_INVERTED;} else {_maskImage.blendMode = MASK_MODE_NORMAL;}}_maskRendered = false;}

将mask叠加到目标texture

        private function drawRenderTextures() : void{// undo scaling and positioning temporarily because its already applied in this execution stackvar matrix:Matrix = this.transformationMatrix.clone();this.transformationMatrix = new Matrix();_superRenderFlag = true;            _renderTexture.draw(this);_superRenderFlag = false;this.transformationMatrix = matrix;_renderTexture.draw(_maskImage);}

渲染

        public override function render(support:RenderSupport, parentAlpha:Number):void{if (_isAnimated || (!_isAnimated && !_maskRendered)) {if (_superRenderFlag || !_mask) {super.render(support, parentAlpha);} else {            if (_mask) {                   _maskRenderTexture.draw(_mask);_renderTexture.drawBundled(drawRenderTextures);                _image.render(support, parentAlpha);_maskRendered = true;}}} else {_image.render(support, parentAlpha);}}

PixelMask: http://wiki.starling-framework.org/extensions/pixelmask

git: https://github.com/jonathanhart/pixelmask

转载于:https://www.cnblogs.com/kumbayaco/p/3317664.html

基于Starling的mask实现相关推荐

  1. [转]基于Starling移动项目开发准备工作

    最近自己趁业余时间做的flash小游戏已经开发得差不多了,准备再完善下ui及数值后,投放到国外flash游戏站.期间也萌生想法,想把游戏拓展到手机平台.这两天尝试了下,除去要接入ane接口的工作,小游 ...

  2. 基于Starling移动项目开发准备工作

    转自: Starling中文站 -  Starling移动开发教程 作者: 郭少瑞(NeoGuo) 现在移动开发可谓热火朝天,如果您是一位Flash开发者,或许您所在的团队,已经开始基于Flash内容 ...

  3. (新手入门)AS3基于starling引擎移动开发之Starling入门

    Starling入门 上一期介绍了基于starling的AS3在移动开发上的大致情况,这一期我向各位新手朋友介绍starling的使用,建立第一个可以运行的starling程序,让大家初步了解star ...

  4. (新手入门)AS3基于starling引擎移动开发之入门介绍

    从本期开始,我将陆续推出关于Actionscript3.0的移动开发入门知识,旨在帮助没有AS3开发经验而想从事或了解AS3移动开发的朋友,所以我的这一系列教程将是入门教程,欢迎各路大神.大牛多指教, ...

  5. (新手入门)AS3基于Starling引擎移动开发之starling简单碰撞

    本期介绍游戏中经常要用到的碰撞,作为新手入门级碰撞介绍,我准备介绍利用Rectangle类实现碰撞,这个方法可以实现不是很精确的碰撞,但是如果用活了,基本可以满足大部分游戏碰撞的需求. 在starli ...

  6. python基于mask检测人体并输出黑白剪影

    使用mask Rcnn实现人物黑白剪影 因为涉及到这块内容,就想着分享出来希望能给大家一个参考. 使用的是python+mask,不会用的可以看看气球那个例子(没耐心的不看也行,反正也不复杂). 生成 ...

  7. 阿里达摩院实习生立功!何恺明Mask R-CNN精度提升,一半输入数据量就行 | CVPR2020...

    乾明 十三 发自 凹非寺 量子位 报道 | 公众号 QbitAI 输入的数据量更小,深度神经网络在图像分类/分割任务上的精度反而提升了. 这就是阿里达摩院提出的图像分析新方法:"频域学习&q ...

  8. Starling实现的硬皮翻书效果

    原文:Starling实现的硬皮翻书效果 作者:郭少瑞 ---------------------------------------– 更新(2012-12-31): 在今年的最后一天,这个效果终于 ...

  9. Starling Feathers:Starling专属UI框架

    来自Starling中文站 http://www.starlinglib.com/wiki/News:Starling_Feathers 目录 [隐藏] 1 Feathers类库(即原Foxhole) ...

最新文章

  1. ScrollView中的LinearLayout不能使用android:layout_heig...
  2. php服务器无法上传图片,IIS+php服务器无法上传图片解决办法_PHP教程
  3. vue3中websocket用法
  4. VM虚拟机下配置centos linux系统
  5. Android之使用VideoView组件播放一个简单的视频
  6. 微信小程序电商实战-首页(下)
  7. 原生js实现网站倒计时效果 给网站添加一个活动倒计时效果 线报活动结束提示效果
  8. 加载Selenium2Library却显示红色
  9. ubuntu ftp 服务的使用
  10. 计算机论文研究思路怎么写,论文的研究思路怎么写
  11. 史蒂夫·乔布斯的故事:启示录还是警世钟?
  12. 图像分割-连通区域分析
  13. 内容交付网络(CDN)的全球与中国市场2022-2028年:技术、参与者、趋势、市场规模及占有率研究报告
  14. 排序函数qsort和sort那点事
  15. 安卓获取不到imsi_Android10.0 SDK29版本拿不到手机的IMSI解决办法
  16. 孤立汉语数字语音识别系统
  17. 网页中的th/th是什么意思
  18. 情人节——与她对弈五子棋(Python实现)
  19. vue实现带文字switch切换简化版
  20. 淘宝天猫抓包评论地址

热门文章

  1. Android 获取联系人的公司,android-如何从设备的联系人列表中获取用户...
  2. ads s参数拟合_数据分析--拟合
  3. redis没有bin目录_分布式缓存 Redis 集群搭建,这里一次性帮你搞定!
  4. throws java_基于Java中throw和throws的区别(详解)
  5. gcc mips64编译后无法运行在octeon上运行_V 语言运行hello world程序
  6. 用Java绘制柱形图_Java使用JFreeChart绘制柱形图
  7. oracle数字日期43841怎么转,安装0racle已崩溃,求助大佬
  8. javascript window Timing
  9. 数据结构之基于Java的顺序栈实现
  10. mysql中值换行显示为乱码_MySQL数据移植中的乱码问题