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.


  • administrators

    I tried using FlxSpriteFilter but that doesn't exist anymore

    That's only half-true, it's been replaced by FlxFilterFrames - usage example here:

    http://haxeflixel.com/demos/FlxSpriteFilters/



  • 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.


Log in to reply
 

Looks like your connection to HaxeFlixel was lost, please wait while we try to reconnect.