Continuando a minha idéia, fiz o primeiro teste:

  1. Criei um PerlinNoise estreito e longo, com stitch = true pro final emendar no começo;
  2. Criei um método pra criar uma linha de acordo com um BitmapData de y = 1;
  3. Criei um método pra criar as linhas uma a uma a aprtir de “fatias” do PerlinNoise;
  4. Em cada linha, fiz um método pra montar o “3D”, diminuindo, movendo e aplicando alpha.
Com isso obtive esse efeito:
O legal é que alterando poucas linhas eu tenho os mais variados efeitos, como textura, ondas ou montanhas, altas ou baixas.
Agora vou fazer uns testes pra deixar visualmente mais interessante e tentar deixar mais leve. Depois disso, tô pensando em criar realmente em 3D, como na figura do outro post.
Se alguém quiser fazer seus testes, aqui está o código ( cuidado, código porco ):

stage.quality = "medium";

var noise:BitmapData = new BitmapData( 300, 800 );
noise.perlinNoise( noise.width, noise.height, 7, Math.random() * 256, true, false, 7, true );
var container:Sprite = new Sprite();
container.x = 100;
container.y = 150;
addChild( container );

function createLine( bmd:BitmapData ):Sprite
{
var line:Sprite = new Sprite();
line.graphics.beginFill( 0xFFFFFF, 1 );
line.graphics.lineStyle( 0, 0x000000, 0 );
line.graphics.lineTo( 0, -( bmd.getPixel( 0, 1 ) & 0xFF ) / 1.7 );
line.graphics.lineStyle( 0, 0x000000, 0.2 );
for( var i:uint = 0; i < bmd.width; i +=5 )
{
line.graphics.lineTo( i, -( bmd.getPixel( i, 1 ) & 0xFF ) / 1.7 );
}
line.graphics.lineStyle( 0, 0x000000, 0 );
line.graphics.lineTo( i, 0 );
line.graphics.endFill();

return line;
}

var count:uint = 1;
function animate()
{
var bmd:BitmapData = new BitmapData(noise.width, 2 );
bmd.copyPixels( noise, new Rectangle( 0, count, noise.width, 2 ), new Point() );
var elm:Sprite = new Sprite();
var line:Sprite = createLine( bmd );
line.x -= line.width / 2;
line.y -= line.height / 2;
elm.addChild( line );
elm.addEventListener( Event.ENTER_FRAME, onLineFrame );
container.addChild( elm );
container.scaleX = container.scaleY = 2;
container.x = 250;
container.y = 350;
count += 5;
if( count >= noise.height - 1 ) count = 1;
}
function onLineFrame( e:Event ):void
{
var elm:Sprite = e.target as Sprite;
var ratio:Number = elm.scaleY;
ratio -= 0.01;
elm.scaleX = ( ratio / 1.5 ) + 0.5;
elm.scaleY = ratio;
elm.y = -160 * ( 1 - ratio );
elm.alpha = ( ratio * 1.5 ) - 0.5;
if( ratio <= 0.3 )
{
elm.parent.removeChild( elm );
elm.removeEventListener( Event.ENTER_FRAME, onLineFrame );
}
}
//animate();
setInterval( animate, 10 );


No Responses to “Terrenos no Flash - parte 2”  

  1. No Comments

Leave a Reply