Glowfilter to a sprite
-
So I've been trying to add a hover over glow filter to a sprite of mine and all the stuff I find online is out off date. I tried using FlxSpriteFilter but that doesn't exist anymore and I really don't know how to go about setting a glow filter to this sprite to be able to turn it on and off when hovered over and out.
-
I tried using FlxSpriteFilter but that doesn't exist anymore
That's only half-true, it's been replaced by
FlxFilterFrames- usage example here:
-
Yeah I used that, but removing the filter removed the filter from the list and wouldn't glow again. When I had it create a new filter frame every time I hovered over, it ended up moving my sprite for some reason.
-
This is what I have so far and when I hover over a slot it moves where my slot is and just adds another filter. Any help please?
public function new(X:Int, Y:Int, OffsetX:Int, OffsetY:Int, Index:Int) { super(X + OffsetX * Index, Y + OffsetY * Index); // Load the image loadGraphic(AssetPaths.invSlot__png); // Glowfilter _filter = new GlowFilter(); _filter.color = 0xFFFFFF; _filter.blurX = 25; _filter.blurY = 25; // Set the size of the image setGraphicSize(32, 32); // Setup the mouse events FlxMouseEventManager.add(this, onDown, null, onOver, onOut); } private function onOver(Sprite:FlxSprite) { _sprFilter = createFilterFrames(this, _filter); updateFilter(this, _sprFilter); } private function onOut(Sprite:FlxSprite) { _sprFilter.removeFilter(_filter); } function createFilterFrames(sprite:FlxSprite, filter:BitmapFilter) { var filterFrames = FlxFilterFrames.fromFrames( sprite.frames, SIZE_INCREASE, SIZE_INCREASE, [filter]); return filterFrames; } function updateFilter(sprite:FlxSprite, sprFilter:FlxFilterFrames) { sprFilter.applyToSprite(sprite, false, true); }
-
This post is deleted!
-
Please provide a simple test case! You've only posted a piece of your code which is not enough to test the bug and help you.
-
This is my whole invSlot class.
package; import flash.filters.BitmapFilter; import flash.filters.BitmapFilterQuality; import flash.filters.GlowFilter; import flixel.FlxSprite; import flixel.graphics.frames.FlxFilterFrames; import flixel.input.mouse.FlxMouseEventManager; import flixel.tweens.FlxTween; /** * ... * @author Takahiro */ class InvSlot extends FlxSprite { static inline var SIZE_INCREASE:Int = 10; private var _sprOver:FlxSprite; private var _sprDown:FlxSprite; private var _filter:GlowFilter; private var _sprFilter:FlxFilterFrames; public function new(X:Int, Y:Int, OffsetX:Int, OffsetY:Int, Index:Int) { super(X + OffsetX * Index, Y + OffsetY * Index); // Load the image loadGraphic(AssetPaths.invSlot__png); // Glowfilter _filter = new GlowFilter(); _filter.color = 0xFFFFFF; _filter.alpha = 1; _filter.blurX = 25; _filter.blurY = 25; _filter.quality = BitmapFilterQuality.MEDIUM; // Set the size of the image setGraphicSize(32, 32); // Setup the mouse events FlxMouseEventManager.add(this, onDown, null, onOver, onOut); } private function onDown(Sprite:FlxSprite) { } private function onOver(Sprite:FlxSprite) { _sprFilter = createFilterFrames(this, _filter); updateFilter(this, _sprFilter); } private function onOut(Sprite:FlxSprite) { _sprFilter.removeFilter(_filter); } private function createFilterFrames(sprite:FlxSprite, filter:BitmapFilter) { var filterFrames = FlxFilterFrames.fromFrames( sprite.frames, SIZE_INCREASE, SIZE_INCREASE, [filter]); return filterFrames; } private function updateFilter(spr:FlxSprite, sprFilter:FlxFilterFrames) { sprFilter.applyToSprite(spr, false, true); } }And this is me creating the slots in my inventory class
private function createSlots():Void { //Creating inventory slots var i:Int = 0; while (i < MAX_SLOTS) { var slots:InvSlot = new InvSlot(45, 174, MAX_SPACING, 0, i); add(slots); _slotArry.insert(i, slots); i++; } }
-
This should work:
public function new(X:Int, Y:Int, OffsetX:Int, OffsetY:Int, Index:Int) { super(X + OffsetX * Index, Y + OffsetY * Index); // Load the image loadGraphic(AssetPaths.invSlot__png); // Glowfilter _filter = new GlowFilter(); _filter.color = 0xFFFFFF; _filter.alpha = 1; _filter.blurX = 25; _filter.blurY = 25; _filter.quality = BitmapFilterQuality.MEDIUM; // Set the size of the image setGraphicSize(32, 32); // Setup the mouse events FlxMouseEventManager.add(this, onDown, null, onOver, onOut); _sprFilter = createFilterFrames(this); } private function onDown(Sprite:FlxSprite) { } private function onOver(Sprite:FlxSprite) { _sprFilter.addFilter(_filter); updateFilter(this, _sprFilter); } private function onOut(Sprite:FlxSprite) { _sprFilter.removeFilter(_filter); updateFilter(this, _sprFilter); } private function createFilterFrames(sprite:FlxSprite) { var filterFrames = FlxFilterFrames.fromFrames( sprite.frames, SIZE_INCREASE, SIZE_INCREASE, []); return filterFrames; } private function updateFilter(spr:FlxSprite, sprFilter:FlxFilterFrames) { sprFilter.applyToSprite(spr, false, true); }
-
For the most part that is what I was looking for, thank you. Seems I just needed some more updates, makes sense. Though I'm still having a bit of a problem with it. The problem I'm having is that the "mouseOver" hit box is based on the original size of the sprite before it's changed to 32x32. I know I could just resize the image of my sprite but I want to learn how to get around this type of thing through coding.
Edit: Found out about "updateHitBox" and tried it on this. Seems to move my sprites when I load the inventory. Also the glowfilter on the 1st and 2nd boxes of the inventory get stuck like that then none of the other ones will glow.
-
I feel like this filter feature is pretty buggy. It crashes when I leave the mouse off the last slot for no reason.
And I don't think it's worth it. Instead try to generate a glow effect as an image and put it in your game under the slots. That will save you a lot of time.
If you can't do that I can help you. You would need to describe what you want.
