Created
April 17, 2025 20:40
-
-
Save shifterbit/a0202dd3365154b127575f198fcf7056 to your computer and use it in GitHub Desktop.
sample code to make use of masks for meters in fraymakers
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function createMeter() { | |
| // For the foreground and background sprites, we can use either sprites or vfxs, really doesnt matter | |
| var resource = self.getResource().getContent("meter"); | |
| Engine.log(resource); | |
| var meterBackgroundSprite = Sprite.create(resource); | |
| meterBackgroundSprite.currentAnimation = "meterBackground"; | |
| var meterBackgroundVfx = match.createVfx(new VfxStats({ spriteContent: resource, animation: "meterBackground", loop: true }), null); | |
| // This is for your filled meter Sprite(This can also be a vfx if you wish) | |
| var meterFullSprite = Sprite.create(resource); | |
| meterFullSprite.currentAnimation = "meterFull"; | |
| var meterFullVfx = match.createVfx(new VfxStats({ spriteContent: resource, animation: "meterFull", loop: true })); | |
| meterFullVfx.setVisible(false); | |
| // This must be a sprite however | |
| var meterMaskSprite = Sprite.create(resource); | |
| meterMaskSprite.currentAnimation = "meterMask"; | |
| // We Create a mask Filter | |
| var meterMask = new MaskFilter(meterMaskSprite); | |
| // This is your meter root container, don't add sprites to it directly(well you can but its better you don't if you wanna keep consistent layering) | |
| var meterContainer = Container.create(); | |
| // This container contains background elements for your meter, basically anything BELOW the progress bar | |
| var meterBackgroundContainer = Container.create(); | |
| // This is the container where the progress bar and mask should go | |
| var meterMaskContainer = Container.create(); | |
| // This is for stuff you want to be ABOVE the progress bar | |
| var meterForegroundContainer = Container.create(); | |
| // Notice the order here, containers are added from bottom layer to highest layer | |
| meterContainer.addChild(meterBackgroundContainer); | |
| meterContainer.addChild(meterMaskContainer); | |
| meterContainer.addChild(meterForegroundContainer); | |
| meterBackgroundContainer.addChild(meterBackgroundVfx.getViewRootContainer()); | |
| // Mask sprite is always the last child to be added | |
| meterMaskContainer.addChild(meterFullSprite); | |
| meterMaskContainer.addChild(meterMaskSprite); | |
| // We add the mask filter that we created earlier | |
| meterMaskContainer.addFilter(meterMask); | |
| // Add our meter container to our damage counter | |
| self.getDamageCounterContainer().addChild(meterContainer); | |
| var maxDamage = 100; | |
| var currentDamage = 0; | |
| meterMaskSprite.width = 1; | |
| // Mask scale X starts at 0, meaning the filled part is completely invisible | |
| meterMaskSprite.scaleX = 0; | |
| self.addEventListener(GameObjectEvent.HIT_DEALT, function (e) { | |
| var damage = e.data.hitboxStats.damage; | |
| currentDamage += damage; | |
| // We manipulate visibility by increasing the scaleX | |
| meterMaskSprite.scaleX = Math.min(1, currentDamage/100); | |
| if (currentDamage > maxDamage + 10) { | |
| currentDamage = 0; | |
| meterMaskSprite.scaleX = 0; | |
| } | |
| }, { persistent: true }); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment