Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for openfl.filters.BevelFilter #2665

Open
wants to merge 5 commits into
base: 9.4.0-Dev
Choose a base branch
from

Conversation

scanline
Copy link
Contributor

@scanline scanline commented Sep 27, 2023

At the moment the BevelFilter is completely missing - not even a stub. A quick example like this:

package;

import openfl.display.Shape;
import openfl.display.Sprite;
import openfl.filters.BevelFilter;
import openfl.text.TextField;
import openfl.text.TextFormat;

class Main extends Sprite
{

	public function new()
	{
		super();
		var button:Sprite = createButton(10, 10);
		addChild(button);

		button = createButton(310, 10);
		button.filters = [new BevelFilter(14, 45, 0xFFFFFF, 0.5, 0x000000, 0.5, 4, 4, 1, 1, "inner", false)];
		addChild(button);

		button = createButton(10, 120);
		button.filters = [new BevelFilter(14, 45, 0xFFFFFF, 0.5, 0x000000, 0.5, 4, 4, 1, 1, "inner", true)];
		addChild(button);

		button = createButton(310, 120);
		button.filters = [new BevelFilter(14, 45, 0xFFFFFF, 0.5, 0x000000, 0.5, 4, 4, 1, 1, "outer", false)];
		addChild(button);

		button = createButton(10, 230);
		button.filters = [new BevelFilter(14, 45, 0xFFFFFF, 0.5, 0x000000, 0.5, 4, 4, 1, 1, "full", false)];
		addChild(button);
	}

	private function createButton(x:Float, y:Float):Sprite
	{
		var sprite:Sprite = new Sprite();

		var shape = new Shape();
		shape.graphics.beginFill(0xd3d3d3, 1);
		shape.graphics.drawRoundRect(0, 0, 280, 96, 20, 20);
		shape.graphics.endFill();
		sprite.addChild(shape);

		var format:TextFormat = new TextFormat();
		format.size = 48;
		format.font = "_sans";
		format.align = "center";

		var tField:TextField = new TextField();
		tField.autoSize = "left";
		tField.defaultTextFormat = format;
		tField.text = "Button";
		tField.y = 48 - tField.height / 2;
		tField.x = 140 - tField.width / 2;
		sprite.addChild(tField);
		sprite.x = x;
		sprite.y = y;
		return sprite;
	}
}

which the Flashplayer displays like this:

BevelFilterFlash

just throws Type not found : openfl.filters.BevelFilter when targeting e.g. html5.

With this pull request OpenFL now supports the complete features of the BevelFilter and things will look like this:
BevelFilter

BitmapFilterType.INNER with knockout set to true and false work flawlessly while BitmapFilterType.OUTER and BitmapFilterType.FULL suffer from the same fate as any other of OpenFL's OpenGL-based filters (GlowFilter and the like):
OpenFL does not allow dynamic resizing of textures to make room for the filter's effect
.

joshtynjala and others added 4 commits September 12, 2023 08:33
…ine style (closes openfl#2659)

The null default values from the lineStyle() function signature were propagating and being converted to 0, which changed the caps/joints style when running drawGraphicsData() with the result of readGraphicsData()
Since the measurement cache can be problematic in some use cases, I decided to include the `skip_measurement_cache` flag in the internals. This define is likely to become obsolete and removed in future versions.
Implements openfl.filters.BevelFilter
@joshtynjala joshtynjala changed the base branch from develop to 9.4.0-Dev September 27, 2023 22:45
@joshtynjala
Copy link
Member

I switched the base branch to 9.4.0-Dev since the 9.3.0 release is happening soon, and this should have more time for testing once merged.

Taking care of the extra area caused by applying this filter to a DisplayObject
@scanline
Copy link
Contributor Author

As it turns out I was wrong. After digging through openfl.display.DisplayObjectRenderer.hx

displayObject.__getFilterBounds(rect, displayObject.__cacheBitmapMatrix);

I realized that OpenFL does take care of the extra area caused by a filter now. We just need to tell it the new size.
Well, with the latest commit the outcome of this filter will now look close to the Flashplayer even for BitmapFilterType.FULL and BitmapFilterType.OUTER.
BevelFilterUpdated

@joshtynjala
Copy link
Member

This works correctly in Chrome and Safari. However, in Firefox, there's an exception thrown. If you can fix it, I'll be happy to merge!

[openfl.display.Shader] ERROR: Unable to initialize the shader program
Uniform uBevelType is not linkable between attached shaders.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants