Texture Mask

author:
Daniel Sperl
description:
A mesh style that discards alpha values below a certain threshold; useful for masks.
compatible:
v2.0
tag:
mask, stencil, alpha
homepage:
https://gist.github.com/PrimaryFeather/d13b8d14d329a364c7cb

Overview

Starling 1.7 added support for stencil masks via a new property on display objects (“mask”). One way to create such a mask is to use the new “Canvas” class for drawing a vector shape.

However, for complex shapes, it's easier to simply use the pixels of a certain texture as a mask. That's what this class is for.

The Adobe Flash Plugin is needed to display this content.

Starling 2

The version for Starling 2 is implemented as a mesh style. This allows you to assign it to any mesh object (like Quad, Image, or even MovieClip). Any pixels with an alpha value below a certain threshold will be discarded. You can display such an object anywhere in the display tree, but it is especially useful as a stencil mask.

// get a sprite with some content
var sprite:Sprite = createMySprite();
addChild(sprite);
 
// create the image that will act as a mask, and assign the "TextureMaskStyle"
var mask:Image = new Image(assets.getTexture("shape"));
var style:TextureMaskStyle = new TextureMaskStyle();
mask.style = style;
sprite.mask = mask;
 
// change threshold to fine-tune the result
style.threshold = 0.3;

Starling 1.7

To use this extension with Starling 1.7, use the TextureMask class instead.

A “TextureMask” is actually a conventional display object, very similar to the “Image” class. The main difference to an image is that any pixels with an alpha value below a certain threshold will be discarded.

// get a sprite with some content
var sprite:Sprite = createMySprite();
addChild(sprite);
 
// create a "TextureMask" and assign it to the "mask" property
var textureMask:TextureMask = new TextureMask(assets.getTexture("shape"));
sprite.mask = textureMask;
 
// change threshold to fine-tune the result
textureMask.threshold = 0.3;

Changelog

  • 2015/05/07: First public version
  • 2016/02/18: Created Starling 2 version

User Comments

Feel free to edit this part of the page!

I'm getting a compiling error @ line 21 of TextureMaskStyle. (Call to a possibly undefined method extend through a reference with static type VertexDataFormat

public static const VERTEX_FORMAT:VertexDataFormat =

          MeshStyle.VERTEX_FORMAT.extend("threshold:float1");
          

I changed it to what you had previously which got rid of the compiling error but the mask doesn't work on a texture after setting a TextureMaskStyle

public static const VERTEX_FORMAT:VertexDataFormat =

	   VertexDataFormat.fromString("position:float2, texCoords:float2, color:bytes4, threshold:float1"); 

Here is my code:

private function test():void

	{
		var test:Image = new Image(assetController.getTexture("test"));
		test.x = 50;
		test.y = 50;
		addChild(test);
		
		var maskStyle:TextureMaskStyle = new TextureMaskStyle();
		test.style = maskStyle;
		
		maskStyle.threshold = .1;
		
		gridBG.mask = test;
	}
  extensions/texture_mask.txt · Last modified: 2017/02/16 13:19 by daniel
 
Powered by DokuWiki