Text, Strokes, Glows, and Lag

13 posts

Flag Post

In my game, when an enemy is killed, a score popup shows you what you got for that kill. I wanted to apply a stroke that changes colour depending on how many points you got, so that it was blue if the score was in the hundreds, purple if it’s in the thousands, etc. Once the popup appears, it slowly fades away.


This is what it looks like right now. Pretty eh?

As far as I know; there’s no way to make a stroke, so I used glows. I applied a black glow filter on the textbox to create that black stroke, and a purple filter on the parent mc.

public var underGlow:GlowFilter = new GlowFilter(0x000000,1,2,2,100,1);
public var blueGlow:GlowFilter = new GlowFilter(0x00FFFF,1,4,4,100,1);
public var purpleGlow:GlowFilter = new GlowFilter(0xFF00FF,1,4,4,100,1);
if (s >= 100) {
	scoreBox.filters = [main.underGlow];
}
if ((s >= 100) && (s < 1000)) {
	letterSize = 14;
	this.filters = [main.blueGlow];
}
if ((s >= 1000) && (s < 10000)) {
	letterSize = 16;
	this.filters = [main.purpleGlow];
}//etc.

One problem. Having twenty or more movieclips with two glow filters each, with variable alphas, often on top of each other, is somewhat heavy for a pc to handle.

It doesn’t take much for it to start to lag, especially considering that the explosions on all the ships fade away as well.

Does anyone know how I can make a stroke-like effect without using resource-hungry filters? Or at least fix the lag? The game is already at 30FPS so I’m not going any slower. Your help would be invaluable to me.

-Yoshiyahu

 
Flag Post

Did you turn cacheAsBitmap=true for any of these? Or just have these MCs have a Bitmap underlay, you render the TF and filters there with a single draw() call, then you fade the Bitmap out.

 
Flag Post

I don’t even know what cacheAsBitmap is. :/
I’m not sure what you said after that…

Is it better for performance for me to draw the objects in the editor, or draw them on creation using shapes?

 
Flag Post

Wish I could help, but I can’t. Just wanted to say that I love the style! and I am looking to do something like this and will be watching for the solution :)

 
Flag Post
Originally posted by PixelSingularity:

Wish I could help, but I can’t. Just wanted to say that I love the style! and I am looking to do something like this and will be watching for the solution :)

I’m glad you like it. I’m particularly fond of it myself. It turned out exactly the way I wanted it to.

Unfortunately it appears as though there is no solution to the lag other than keeping the number of enemies on screen lower and making the elements with variable alphas stay on screen for less time.

EDIT: Forget that, there’s no way I’m toning down the insanity of the number of enemies on-screen. I’ll just have a huge options menu where you can reduce the graphics to their bare minimum if you can’t handle the game.

…It seems that that graphic and performance limitations are continuously hindering the creative ability of game developers.

 
Flag Post

CacheAsBitmap property
Try it, and check performance.

 
Flag Post
Originally posted by vesperbot:

CacheAsBitmap property
Try it, and check performance.

It made a very slight difference. I applied it to all the ships, bullets, and drops, and it made it a little bit better also.

I’m not going to fret over it though, I think it’ll be ok. It’s not unbearable, and I have a very low-end PC anyway. Most of the time I won’t have a ridiculous number of things on screen, only at specific moments when I deliberately have a huge wave of enemies.

I have the consolation of knowing that my game is going to be really really pretty on expensive, powerful PCs.

 
Flag Post

You could always try blitting the text. Just save the textfield image of each number 0-9 and the comma to be used in a bitmapdata array, then when you need to create text on the bitmap just copypixels the numbers and commas in the right order into a new bitmapdata to be drawn on the bitmap on the stage.

Here is a little demo of how it could look/preform and here is the source

I tinted the canvas bitmap on the stage, just click to make rising textfields with glowfilters that fade out or the bitmapdata equivalents if the bitmap is on. Also put an autoclick for massive amounts of texts.

Hopefully it helps or gives some ideas, was fun to make regardless

 
Flag Post

as an alternative to the glow filter, set the textfield’s opaqueBackground property to the color you wanted on the filter. it doesn’t form-fit like your glow, but it is much cheaper. (could be a third quality option for it: “TextGlow: off, cheap, fancy”)

to get a form-fitting glow cheaply you’d need to look into drawing the font data with the graphics class (x3: glow, black outline, white inlay). this aproach has the advantage of being cheaper to render when the quality setting is lowered and i’d suggest keeping the option to turn off the glow: it’s still less expensive to not draw something at all. also, the opaqueBackground method will still work if you draw it to a Shape then addChild that

 
Flag Post

I stole a quick snippet from tigforums awhile back and modified it for a function, it outlines a bitmap. If your text is a bitmap you can use it.

Link!

I noticed after ~4-5 thickness it looks weirder, so take care with how large your thickness is.

 
Flag Post
Originally posted by RTL_Shadow:

I stole a quick snippet from tigforums awhile back and modified it for a function, it outlines a bitmap. If your text is a bitmap you can use it.

Link!

I noticed after ~4-5 thickness it looks weirder, so take care with how large your thickness is.

If I used cacheAsBitmap; would this work?

Otherwise, if I’m gunna turn the text into a bitmap and do it that way; I may as well just add the stroke I need to the font, turn it into a bitmap, and blit it all on at once.

Indeed, I think I’ll try it anyway.

 
Flag Post
Originally posted by DrYoshiyahu:
Originally posted by RTL_Shadow:

I stole a quick snippet from tigforums awhile back and modified it for a function, it outlines a bitmap. If your text is a bitmap you can use it.

Link!

I noticed after ~4-5 thickness it looks weirder, so take care with how large your thickness is.

If I used cacheAsBitmap; would this work?

Otherwise, if I’m gunna turn the text into a bitmap and do it that way; I may as well just add the stroke I need to the font, turn it into a bitmap, and blit it all on at once.

Indeed, I think I’ll try it anyway.

If you have direct access to the BitmapData, you can do it.

 
Flag Post

What BitmapData?