DEV STUFF

Damien Pegoraro

Old school Text FX in AGAL

As I’m not really used to do stuff with Starling filter’s and more generally with AGAL, here’s my first real contact with the strange world of shaders.

I found my idea in Rocket Knights Adventure credits on Sega Genesis:

The text effect on the staff roll is pretty cool, so let’s try doing this in AGAL.

Here’s the result: (click on the text to do it again)

This movie requires Flash Player 9

You can also try it in a not-to-small page here

Also works on pictures:

This movie requires Flash Player 9

The approach I took is:

Let’s take a value varying from 0 to 1, corresponding to the rate of the object that is properly rendered.
We call it distance.

distance = 0 ; // nothing is displayed
distance = 0.5; // the left half of the object is fully displayed.
distance = 1 ; // object is fully displayed

Every point with x < distance is drawn directly Every point with x > distance is drawn with a color that comes from x2 = distance.

So if ( x < distance ) color is from x, else color is from x - distance. Here’s my pseudocode :

position = v0
test = position.x > distance ? 1 : 0
offset = position.x - distance
offset = offset * test
position.x = position.x - offset
draw color from position

Now let’s convert this to AGAL:


mov ft0, v0 // copy position
sge ft1.z, ft0.x, fc0.x // test if position > distance and put 0 or 1 in ft1.z
sub ft1.x, ft0.x, fc0.x // ft1.x = position.x - distance
mul ft1.x, ft1.x, ft1.z // ft1.x *= ft1.z
sub ft0.x, ft0.x, ft1.x // position.x -= ft1.x
tex oc, ft0, fs0<2d, wrap, linear, mipnone> // draw from position

To use this with Starling, we need to create a class extending FragmentFilter. I really don’t know how to call this effect, so let’s create a class named FromRightFilter. (Yes… because the text comes from the right…)


package starling.filters
{
import flash.display3D.Context3D;
import flash.display3D.Context3DProgramType;
import flash.display3D.Program3D;
import starling.filters.FragmentFilter;
import starling.textures.Texture;

public class FromRightFilter extends FragmentFilter
{
private static const FRAGMENT_SHADER:String =
]]>

private var mVars:Vector. = new [1, 1, 1, 1];
private var mShaderProgram:Program3D;
private var defaultShaderProgram:Program3D;

private var rate : Number = 0 ;
private var speed : Number = 0;

/**
*
*/
public function FromRightFilter()
{
rate = 0 ;
}

public override function dispose():void
{
if (mShaderProgram) mShaderProgram.dispose();
if (defaultShaderProgram) defaultShaderProgram.dispose();
super.dispose();
}

protected override function createPrograms():void
{
mShaderProgram = assembleAgal(FRAGMENT_SHADER);
defaultShaderProgram = assembleAgal(STD_FRAGMENT_SHADER) ;
}

protected override function activate(pass:int, context:Context3D, texture:Texture):void
{

if ( rate < 1 && speed != 0 ) { rate += speed ; mVars[0] = rate ; context.setProgramConstantsFromVector(Context3DProgramType.FRAGMENT, 0, mVars, 1); context.setProgram(mShaderProgram); } else { context.setProgram(defaultShaderProgram); } } public function start( speed : Number = 0.005 ) : void { this.speed = speed; rate = 0 ; } } }

I added a start() method that begins the render (setting rate from 0 to 1).
The filter also replaces itself by the default fragment shader program when it's done. (Don't know if this is really useful btw...)

Here's how to use it:


var tf : TextField = new TextField(600, 300, "FragmentFilter", "hyper", 80, 0xFF0000) ;
addChild( tf) ;
fil = new FromRightFilter() ;
tf.filter = fil;
fil.start() ;

DOWNLOAD ME

Links to check:

A great FragmentFilter collection that gave me the basic template for a custom filter and lots of crazy samples:

http://blog.onebyonedesign.com/actionscript/starling-filter-collection/

Well and deeply explained tutorials on AGAL:

http://jacksondunstan.com/articles/1661

And of cours, the opcodes list:

http://help.adobe.com/fr_FR/as3/dev/WSd6a006f2eb1dc31e-310b95831324724ec56-8000.html

175 Comments on “Old school Text FX in AGAL

  1. I want to voice my passion for your kindness giving support to those people who need guidance on this important idea. Your personal dedication to getting the solution all-around appeared to be exceedingly helpful and has surely helped girls much like me to attain their aims. Your own important help and advice means a great deal a person like me and somewhat more to my fellow workers. Thanks a ton; from each one of us.

  2. Надёжную обувь всегда тяжело подобрать. Связано это изначально с тем, что стильные кроссовки дорого стоят, а найти что-то оригинальное по оптимальной цене всегда трудно. Если вы не представляете, в каком магазине купить кроссовки, предлагаем рассмотреть шанс покупки кроссовок в интернет-магазинах.

    Интернет-магазин фирменных кроссовок Nike Sneakers-Top.ru

    Сегодня стильные кроссы вы можете подобрать на [url=https://sneakers-top.ru/asics-prod]дисконт интернет-магазин кроссовок asics[/url] где доступно большое количество кроссовок разных размеров и цветов. Интернет-магазин есть дисконтным, поэтому цены в нём низкие. На портале есть много кроссовок для мужчин и девушек. Вы можете найти отзывы клиентов, которые заказывали разные кроссовки Nike и Puma.

    Если вас привлекла какая-то определенная модель, вы можете сделать звонок по телефону 8-(800)-111-22-33, где вам всё подскажут. На портале доступно много кроссовок разных моделей. Вы можете подобрать в интернет-магазине кроссовки для спорта или классические модели.

    На веб-странице [url=https://sneakers-top.ru/nike-prod]кроссовки nike купить с доставкой в москве[/url] находится возможность купить кроссовки разных брендов. Вы можете также пройти регистрацию и дать одобрение на рассылку. Благодаря рассылкам вы сможете узнавать одним из первых о всех скидочных предложениях ресурса.

    Купить брендовые мужские кроссовки в МО

    В наши дни заказать оригинальные кроссы в Москве не так уж и просто. Надо ехать в центр, где цены очень сильно высокие. Чтобы не платить двойную стоимость в фирменных магазинах, фирменные кроссовки вы можете купить и через сеть. В организации очень много кроссовок разных брендов. Если вас интересует конкретная модель из новой коллекции, вам её помогут выбрать.

    Если вы стремитесь приобрести по скидке кроссовки из старой коллекции, это также реально. В фирме очень быстрая доставка. После того, как вы сделаете заказ, с вами свяжется консультант и уточнит адрес доставки. Нужно выделить, что доставка по столице происходит в день заказа.

    На фирменные кроссовки Adidas и New Balance часто проходят акции. Заказать кроссовки Nike вы можете на портале со скидкой. На некоторые модели скидка может доходить до -50%. Более точную цену подсказать вам смогут консультанты интернет-магазина. Если вам не понравятся какая-то определенная модель после доставки, вы её можете также вернуть. Возврат кроссовок проходит невероятно быстро.

    Оплату вы можете провести через банк. При желании сформировать заказ вы можете позвонив в контакт-центр или через веб-портал, перейдя на Sneakers-Top.ru, где оформление товаров проходит очень быстро.

  3. My husband and i were absolutely excited when Raymond could finish off his homework through the entire precious recommendations he received in your web page. It is now and again perplexing to just happen to be giving for free techniques which usually some others might have been making money from. And we also see we have the website owner to be grateful to because of that. Those illustrations you have made, the simple blog menu, the relationships your site aid to instill – it’s got all wonderful, and it’s really facilitating our son and us do think that issue is brilliant, and that is very pressing. Many thanks for the whole thing!

  4. sildenafil and stomach acid
    viagra online prescription
    quando não posso tomar sildenafil
    [url=http://viagrarow.com/]generic viagra[/url]

Leave a Reply

Your email address will not be published. Required fields are marked *