Olá amigos,

Atendendo a pedidos estou trazendo este tutorial ao FlashPedia.

Recentemente fiz um efeito de relâmpago no jogo Luz da Escuridão para melhorar ainda mais o visual do jogo.

Escolhi fazer o efeito via AS3 com pixel bender para aproveitar a execução eficiente em diferentes arquiteturas (GPU e CPU), que incluem sistemas multicore  e multiprocessamento, tendo uma considerável melhora de performance.

Vamos ao tutorial:

1 – Abra a ferramenta Pixel Bender Toolkit

2 – Baixe a imagem de exemplo

3 – Crie um novo Kernel filter e escreva o código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<languageVersion : 1.0;>
 
kernel NewFilter
<   namespace : "Your Namespace";
	vendor : "Your Vendor";
	version : 1;
	description : "your description";
>
{
	input image4 src;
	output pixel4 dst;
 
	parameter float contrast
	<minValue:1.0;
	maxValue:10.0;
	defaultValue:1.0;>;
 
	void   
	evaluatePixel()
	{
		dst = sampleNearest(src,outCoord());
		dst *= contrast;
	}
}

OBS: O código simplesmente altera o contraste da imagem. Vc pode dar ‘run’ e usar a imagem acima para visualizar a alteração.

3 – Exporte o kernel filtro para flash player (No menu da ferramenta existe essa opção). O filtro no formato formato .pbj vai ser gerado.

4 – Abra o flash, crie um novo documento as3 e crie um movieclip com a imagem do passo 2. Dê a esse movieclip o nome de instancia ‘background’.

5 -  Aqui está a classe do relampago (Torne ela a document class do seu .fla). É necessário ter a tweenmax para rodar o tutorial:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

package 
{
	import com.greensock.easing.Bounce;
	import flash.display.MovieClip;
 
	import flash.events.Event;
	import flash.events.TimerEvent;
	import flash.filters.ShaderFilter;
	import flash.display.Shader;
	import flash.utils.ByteArray;
	import flash.utils.Timer;
	import com.greensock.*;
	/**
	 * ...
	 * @author virtue
	 */
	public class ThunderEffect extends MovieClip
	{
		[Embed("thunder.pbj", mimeType="application/octet-stream")]
		private var PixelBenderThunderEffect:Class;
 
		private var shader:Shader;
		private var shaderFilter:ShaderFilter;
		public var contrast:Number = 1.0;
		private var timer:Timer;
		private var repeats:int = 3;
		private var duration:Number = 0.1;
		private var myTween:TweenMax;
 
		public function ThunderEffect() 
		{
			init(background);
		}
 
		private function init(back:MovieClip):void
		{
			shader = new Shader(new PixelBenderThunderEffect() as ByteArray);
			shaderFilter = new ShaderFilter(shader);
 
			timer = new Timer(1000, 0);			
			timer.addEventListener(TimerEvent.TIMER, timerComplete, false, 0, true);
			timer.start();
		}
 
		private function changeContrast():void
		{
			shader.data.contrast.value = [contrast];
			background.filters = [shaderFilter];			
		}
 
		private function timerComplete(e:TimerEvent):void 
		{
			timer.delay = randomNumber(5000, 30000);
 
			repeats = int( randomNumber(1, 7) );
 
			if (repeats % 2 == 0) 
			{
				repeats++;
			}
 
			myTween = new TweenMax(this, duration, { contrast:1.5, onComplete:launchSound, onUpdate:changeContrast, ease:Bounce.easeInOut, repeat:repeats, yoyo:true } );
 
		}				
 
		private function launchSound():void
		{
			//Insira aqui seu código para tocar o som
		}
 
		private function randomNumber(low:Number, high:Number):Number
		{
			return Math.round(Math.random() * (high - low)) + low;
		}	
 
	}
 
}

Vamos a explicação

Nós criamos a classe PixelBenderThunderEffect associada ao conteúdo do .pbj. Eu dei o nome de thunder.pbj e escolhi a pasta bin para colocar meu arquivo, porém vc pode colocar na mesma pasta do swf.

• [Embed("thunder.pbj", mimeType="application/octet-stream")]

• private var PixelBenderThunderEffect:Class;

Criamos as variáveis que irão manipular os shaders

• private var shader:Shader;

• private var shaderFilter:ShaderFilter;

A variável responsável por alterar o contraste do movieclip dinamicamente

• public var contrast:Number = 1.0;

Um timer para garantir que o efeito de tempos em tempos seja executado.

• private var timer:Timer;

O numero de repetições do efeito quando executado

• private var repeats:int = 3;

A duração do efeito

• private var duration:Number = 0.1;

A variavel de interpolação

• private var myTween:TweenMax;

Ok, continuando, o construtor chama a função init, que inicializa o shader, shaderFilter e timer (que inicialmente demora apenas 1 segundo (poderia ser randomizado tb, é claro) para ativar o primeiro relampago).

O evento timerComplete associado é chamado e a linha

• timer.delay = randomNumber(5000, 30000);

que atribui ao delay um valor randomico entre 5 e 30 segundos até o proximo relampago.

O código abaixo garante o numero de repetições impar do relampago. Ele deve ser impar pois o tween é do tipo yoyo. Experimente tirar o condicional e vc vai ver o porque.

• repeats = int( randomNumber(1, 7) );

• if (repeats % 2 == 0)

• {

• repeats++;

• }

E finalmente o tween é aplicado

• myTween = new TweenMax(this, duration, { contrast:1.5, onComplete:launchSound, onUpdate:changeContrast, ease:Bounce.easeInOut, repeat:repeats, yoyo:true } );

Veja que o contraste é setado para 1.5 (poderia ser um valor randomico tb), no evento onComplete nós executamos o metodo launchSound que pode executar o barulho de um trovão e o método changeContrast aplica o valor a variavel do shader e o shader ao movieclip.

Bom, espero que tenham gostado.

Até a próxima.