Posts Tagged ‘Programação’

MUDAMOS DE ENDEREÇO

junho 9, 2010

olá pessoal, mudei de endereço e aguardo sua visita:

http://HamisterTower.com.br

Novidades:

Nessa nova fase do blog  continuaremos com o foco em no flash e jogos a novidade é que também abordaremos assuntos como: Flex, Air, outras engines (Away3d, Sandy, Alternativa3d, Box2d,Jiblib), Realidade Aumentada, Componentes especifico para jogos e alguns de meus projetos pessoais entre outras coisas.

Não deixem de acompanhar o blog, lembrando que estamos em outro endereço: http://HamisterTower.com.br espero a visita de vocês lá, vlw Abraços.

Anúncios

Papervision BasicView

maio 28, 2009

Olá pessoal, finalmente consegui um tempinho para criar um novo post. Hoje falaremos sobre uma classe que foi criada no intuito de simplificar a nossa vida com o papervision a classe BasicView

BasicView é uma classe para aplicações simples, criando uma classe extendida de basicview você não precisa ficar instanciando cameras, viewports, renderes, pois a propria classe ja faz isso.

Veja como nosso código fica muito otimizado, Neste exemplo estamos criando apenas uma esfera, utilizando um MovieAssetMaterial para importar um movieclip com o id igual a “smile” de nossa biblioteca e rotacionando um pouco a esfera com o metodo yaw.

ppv

Arquivo: ppv_basic.as

package  {
	import org.papervision3d.objects.primitives.Sphere;
	import org.papervision3d.materials.MovieAssetMaterial;
	import org.papervision3d.view.BasicView;
	public class ppv_basic extends BasicView{
		public var sphere:Sphere =  new Sphere(
             new MovieAssetMaterial("smile"), 200,10,10);
		public function ppv_basic() {
			scene.addChild(sphere);
			sphere.yaw(-125);
			startRendering();
		}
	}
}
Lembrando que para este codigo funcionar precisamos criar um arquivo flash, adicionar o pacote de classes do papervision e ter algum movieclip na biblioteca com o linkage “smile”.

Apesar da simplicidade eu não recomendo usar basicview para projetos complexos, mas se você estiver interessado em algum projeto muito simples seu uso é indispensavel. Para complementar a classe BasicView possui os seguintes paramêtros opcionais, seguido de suas propriedades default:

BasicView (viewportWidth:Number = 640, viewportHeight:Number = 480,
 scaleToStage:Boolean = true, interactive:Boolean = false, cameraType:String = "Target")

Espero que tenham gostado deste post, ando meio ocupado estudando diversas coisas ao mesmo tempo, também comecei a estudar a engine Away3d muito utilizada também para construção de projetos 3d no flash, similar ao papervision, podes ter certeza que logo logo estarei compartilhando este novo conhecimento com vocês. Obrigado pela sua visita e até o proximo post

Papervision MouseClick

maio 7, 2009

mundi

Olá pessoal como havia prometido nosso mais novo tutorial papervision não estamos usando o Cubo, para diversificar um pouco decidi utilizar a Esfera.

Este tutorial é essencial para ter uma base de criação de site em papervion, neste tutorial vamos aprender a colocar nosso viewport para aceitar interação e definiremos nossa esfera para funcionar como botão simples, onde a única funcionalidade será pausar e retomar a rotação.

Depois de uma seqüência de tutoriais sobre papervision existe muitos pontos que não precisarei explicar de novo, como  por exemplo: inserir uma esfera e importar uma textura para ela. Hoje me focarei somente nos pontos chaves.

Viewport3D

O viewport é o nosso ambiente 3d, extremamente essencial para criar algo com o papervision, quando criamos nosso viewport3d podemos definir alguns parâmetros iniciais.

    new niewport3D(width, height, autoscale, interactive)
  • width (Number): Define a largura de nosso viewport3d;
  • height (Number): Define a altura de nosso viewport3d;
  • autoscale (Boolean): Determina se o viewport vai se escalar ao Stage.
  • Interactive (Boolean): Permite o uso de interações com o mouse, possibilitando o uso do evento InteractiveScene3DEvent.

Criando Interação

Em nosso código passaremos a definir o parâmetro interativo para true. Com o viewport definido para true poderemos definir agora nosso material para interative possibilitando ele ser clicado quando estiver em um objeto primitivo.Neste exemplo eu usarei o MovieMaterial, mas vocês poderiam utilizar qualquer outro tipo de material, lembrando que com o movie material eu importo um movieclip que esteja em minha biblioteca ou que já tenha sido instanciado.

     skin = new MovieMaterial(mov);
     skin.interactive = true;

Agora poderemos adicionar um listener em nossa esfera chamando o evento de interação especifico seguido de um método que será executado.

    esfera.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS,PRESS);

Código: main.as

package
{
    import flash.display.Sprite;
    import flash.display.MovieClip;
    import flash.events.Event;
    import org.papervision3d.materials.MovieMaterial;
    import org.papervision3d.objects.primitives.Sphere;
    import org.papervision3d.scenes.Scene3D;
    import org.papervision3d.view.Viewport3D;
    import org.papervision3d.cameras.Camera3D;
    import org.papervision3d.render.BasicRenderEngine;
    import org.papervision3d.events.InteractiveScene3DEvent;
    public class main extends Sprite
    {
        public var cena:Scene3D;
        public var viewport:Viewport3D;
        public var camera:Camera3D;
        public var renderer:BasicRenderEngine;
        public var esfera:Sphere;
        public var mov:MovieClip = new earth();
        public var skin:MovieMaterial;
        public var paused:Boolean = false;
        public function main ()
        {
            Set ();
            Objetos ();
        }
        public function Set ():void
        {
            viewport = new Viewport3D(300,300,false,true);
            addChild (viewport);
            cena = new Scene3D ;
            renderer = new BasicRenderEngine ;
            camera = new Camera3D ;
        }
        public function Objetos ():void
        {
            skin = new MovieMaterial(mov);
            skin.interactive = true;

esfera = new Sphere(skin,300,30);

            cena.addChild(esfera);

esfera.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS,PRESS);

            addEventListener (Event.ENTER_FRAME,Loop,false, 0, true);
        }
        public function PRESS (e:InteractiveScene3DEvent ):void
        {
            paused = !paused;
        }
        public function Loop (e:Event):void
        {
            if (!paused)
            {
                esfera.roll(1)
                esfera.yaw(3)
                esfera.pitch(1)
            }
            renderer.renderScene (cena,camera,viewport);
        }
    }
}

Lembrando que para este tutorial funcionar devemos importer as classes do papervision e definir como classe padrão do fla a classe main,
Tentei fazer algo bem simples para demonstrar a interação do mouse com o papervision, com isso podemos criar diversas coisas seguindo a criatividade de cada um. Tentarei fazer algo mais elaborado para próximo tutorial. Espero que tenham gostado e que estes tutoriais sobre papervision estejam sendo úteis para vocês em seus estudos. Bem ate a próxima.


									

Papervision MovieMaterial

maio 4, 2009

moviematerial

Clique na imagem para testar

Olá pessoal , para dar continuidade ao nosso estudo sobre papervision, hoje vamos falar sobre mais um tipo de material que podemos utilizar nos nosso objetos primitivos a textura MovieMaterial. Antes de começamos a falar sobre esse material vamos falar sobre um problema que ocorria com a classe MovieAssetMaterial.

Quando aprendemos sobre MovieAssetMaterial, passávamos uma string como parâmetro e importávamos de nossa biblioteca um movieclip onde o valor da propriedade linkage era igual da string referida. Mas a classe MovieAssetMaterial não aceita importar um movieclip que tenha come base uma classe que necessite de um parâmetro.

A classe MovieMaterial utiliza como parâmetro a instanciação de um movielip ao invés de uma string referindo sua propriedade linkage, com isso seu movieclip padrão não necessariamente precisa estar na bibliote, você pode trabalhar com um movieclip já instanciado, assim você pode utilizar o método gotoAndStop para indicar outro frame antes de ter instanciado ele como material..Outra vantagem é a possibilidade de utilizar um movieclip da biblioteca que tenha como base uma classe que exija parâmetro.

Construtor

Para criarmos um MovieMaterial devemos instanciar um objeto do tipo MovieMaterial.
Nosso único parâmetro obrigatório é um do tipo DisplayObject que é a referencia de nossa textura.

var  material:MovieMaterial =  new MovieMaterial(movieAsset);

movieAsset (DisplayObject): Referencia de um movieclip existente carregado na memória ou no stage.
Transparent (Boolean): Define se a textura possuirá transparência. [opcional]
Animated (Boolean): Define se o movieclip sera animado [opcional]

Tutorial

Neste tutorial eu quis brincar um pouco e mais uma vez dou uma demonstração de tile system com papervison, mas desta vez vamos ter uma classe que se comportará como movieclip aonde receberá como parâmetro um número que definirá qual vetor vai utilizar para criar o cenário, depois utilizaremos como material nosso cenário, A parte relacionada a papervision não terá mistério nenhum pois estarei usando a estrutura do tutorial anterior relacionado a materiais.

Arquivos

Neste tutorial trabalharemos com os seguintes arquivos:
1- MovieMaterial.fla
2- main.as
3- faceField.as: Classe que criará um cenário tile system para se comportar como material

MovieMaterial.fla:

obtile

1- faceField: Movieclip
2- obTile:MovieClip
3- main (definir como classe principal)

obs: para criar um movirclip vazio basta segurar ctrl + F8.

faceField.as

Esta classe não existe mistério nenhum, seu construtor recebe um numero como parâmetro e se for 1 desenha o vetor map1 e se for outro desenha o vetor map2. Em seguida percorre a seqüência de loops para desenhar o tile.

package
{
    import flash.display.MvieClip;
    public class faceField extends MovieClip
    {
        public var map1:Array = [
        [1,1,1,1,1,1,1,1,1,1,1],
        [1,0,0,0,0,0,0,0,0,0,1],
        [1,0,0,0,0,1,0,0,0,0,1],
        [1,0,0,0,1,1,0,0,0,0,1],
        [1,0,0,0,0,1,0,0,0,0,1],
        [1,0,0,0,0,1,0,0,0,0,1],
        [1,0,0,0,0,1,0,0,0,0,1],
        [1,0,0,0,0,1,0,0,0,0,1],
        [1,0,0,0,1,1,1,0,0,0,1],
        [1,0,0,0,0,0,0,0,0,0,1],
        [1,1,1,1,1,1,1,1,1,1,1],
        ];
        public var map2:Array = [
        [1,1,1,1,1,1,1,1,1,1,1],
        [1,0,0,0,0,0,0,0,0,0,1],
        [1,0,0,0,1,1,1,0,0,0,1],
        [1,0,0,1,0,0,0,1,0,0,1],
        [1,0,0,1,0,0,0,1,0,0,1],
        [1,0,0,0,0,0,1,0,0,0,1],
        [1,0,0,0,0,1,0,0,0,0,1],
        [1,0,0,0,1,0,0,0,0,0,1],
        [1,0,0,1,1,1,1,1,0,0,1],
        [1,0,0,0,0,0,0,0,0,0,1],
        [1,1,1,1,1,1,1,1,1,1,1],
        ];
        public function faceField (n:Number)
        {
            for (var j =0; j<11; j++)
            {
                for (var i=0; i<11; i++)
                {
                    var t:MovieClip = new obTile();
                    addChild (t);
                    t.x = i * 20;
                    t.y = j * 20;
                    if (n==1)
                    {
                        t.gotoAndStop(map1[j][i]+1);
                    }
                    else
                    {
                        t.gotoAndStop(map2[j][i]+1);
                    }
                }
            }
        }
    }
 }

main.as

Nossa classe principal não possui nenhum mistério, utilizamos a estrutura do tutorial papervision materiais.

Utilizamos apenas MovieMaterial para formação das faces do cubo, com a diferença apenas na maneira de que são chamadas desta apenas uma fogem do padrão.

    skinTile1.gotoAndStop(1);
    skinTile2.gotoAndStop(2);
    faceMovTile1 =  new MovieMaterial(skinTile1);
    faceMovTile2 =  new MovieMaterial(skinTile2);

Apesar dos objetos terem sidos criados no começo da classe só neste ponto que instanciamos os objetos para se portar como material, desta maneira garante que os moviesclips vão estar em seus respectivos frames antes de instanciarmos os materiais.

package
{
    //flash
    import flash.display.Sprite;
    import flash.display.MovieClip;
    import flash.events.Event;
    //papervision
    import org.papervision3d.scenes.Scene3D;
    import org.papervision3d.view.Viewport3D;
    import org.papervision3d.cameras.Camera3D;
    import org.papervision3d.render.BasicRenderEngine;
    //Material
    import org.papervision3d.materials.utils.MaterialsList;
    import org.papervision3d.materials.MovieMaterial;
    // objeto
    import org.papervision3d.objects.primitives.Cube;
    public class main extends Sprite
    {
        public var cena:Scene3D;
        public var viewport:Viewport3D;
        public var camera:Camera3D;
        public var renderer:BasicRenderEngine;
        //Material
        public var skinMaterial1:MovieClip = new faceField(1);
        public var faceMov1:MovieMaterial = new MovieMaterial(skinMaterial1);
        public var skinMaterial2:MovieClip = new faceField(2);
        public var faceMov2:MovieMaterial = new MovieMaterial(skinMaterial2);
        public var skinTile1:MovieClip = new obTile();
        public var skinTile2:MovieClip = new obTile();
        public var faceMovTile1:MovieMaterial;
        public var faceMovTile2:MovieMaterial;
        //objetos Primitivos
        public var obCube:Cube;
        public function main ()
        {
            Set ();
            Objetos ();
        }
        public function Set ():void
        {
            viewport = new Viewport3D(400,300,true,false,true,true);
            addChild (viewport);
            cena = new Scene3D ;
            renderer = new BasicRenderEngine ;
            camera = new Camera3D ;
            camera.focus = 600;
            camera.zoom = 1;
        }
        public function Objetos ():void
        {
            skinTile1.gotoAndStop(1);
            skinTile2.gotoAndStop(2);
            faceMovTile1 =  new MovieMaterial(skinTile1);
            faceMovTile2 =  new MovieMaterial(skinTile2);
            //Cube
            obCube = new Cube(
                new MaterialsList(
                {front: faceMov1,
                 back: faceMov1,
                 left: faceMovTile1,
                 right: faceMovTile2,
                 top: faceMov2,
                 bottom: faceMov2}
                )
            ,220,220,220,1,1,1);
            cena.addChild (obCube);
            addEventListener (Event.ENTER_FRAME,Loop,false, 0, true);
        }
        public function Loop (e:Event):void
        {
            obCube.yaw (-4);
            obCube.pitch (-2);
            renderer.renderScene (cena,camera,viewport);
        }
    }
}

Espero que tenham gostado do tutorial, apesar de MovieMaterial ser uma textura bem útil não devemos esquecer das outras texturas, é sempre bom usar a textura certa para cada momento assim deixa o programa mais leve. Ao que parece vocês já devem estar enjoados de exemplos com cubo, por isso tentarei mudar um pouco de objeto para o próximo tutorial, estou dando uma olhada em coisas interessantes com o objeto “Plane” quem sabe ele não vira tema do nosso próximo tutorial de papervision. Obrigado pela visita e volte sempre.

Papervision Tile [Player]

abril 8, 2009

Olá pessoal, para lhes ser sincero eu não pretendia fazer uma continuação tão cedo para o papervison tile, mas eu me empolguei muito ao escrever o tutorial anterior, e decidi criar uma continuação. Prestem atenção no flash a seguir.

ssemeny
Clique na imagem para visualizar a apresentação

Este foi o ultimo passo do nosso tutorial tile sytem, pois bem, a primeira meta do nosso tutorial papervision tile será replicar esta aplicação para o 3d. Agora veja como ficará o projeto final deste tutorial de hoje.

game
Clique na imagem pra visualizar a apresentação

Sobre:

Poderemos utilizar o mesmo arquivo fla que construímos no tutorial anterior, mas eu não irei utilizar o mesmo arquivo main, pois desta vez adicionaremos alguns conceitos de POO (Programação Orientada a Objetos) em nosso tutorial.

Nosso tutorial será constituído pelos seguintes arquivos:

  • ppv_tile.fla: Este arquivo não tem mistério nenhum, é o mesmo que utilizamos no tutorial anterior.
  • Tile3D.as: Este arquivo será a classe modelo para cada bloco, ele será responsável por desenhar o cubo, manipular as propriedades de coordenadas tile, ground e wall, que nos dirá se o tile desenhado permitir caminhar sobre ele e se ele funcionará como uma parede que impedirá a passagem quando o player estiver no mesmo nível.
  • Player.as: Esta classe além de desenhar nosso player no cenário e manipular coordenadas, ela também contará com o método de mover o player pelo cenário.
  • main.as: Nosso arquivo principal, será responsável por montar nosso ambiente 3d, adicionar o player no cenário e manipular o teclado para movimentar o player.

Obs: Não podemos esquecer-nos de referenciar a biblioteca do papervision.

Diretórios:

Neste tutorial utilizaremos o conceito de pacotes, e as classes não estarão no mesmo diretório que o arquivo fla, veja a imagem como será organizado nosso diretório.

dir

Como funcionará o código.

No nosso arquivo main.as criaremos 3 vetores, um para informar os materiais, outro para informar a altura que cada tile irá ficar e um terceiro que terá o mesmo comprimento dos outros, mas utilizaremos ele para armazenar objetos da classe Tile3D para podermos ter uma fácil manipulação de dados usando coordenadas tile.

Em nosso loop de criação de tiles instanciaremos cada posicionamento do veto tiles[i][j] pra se comportarem como um novo objeto do tipo Tile3D.

Nossa classe Tile3D será uma classe estendida da classe Cube do papervision, a diferença que nossa herança vai precisar de parâmetros adicionais como tamanho do cubo, posicionamento x,z,y no tile.

No decorrer do loop definiremos a propriedade wall e ground de acordo com os vetores especificadores de altura e material, utilizaremos os métodos da classe.

Ao termino do loop instanciaremos o objeto player do tipo Player

A classe Player receberá como parâmetros: o tamanho do tile, e posicionamento x,z e y como parâmetro opcional.

Para mover o player pelo cenário invocaremos o método move da classe Player, que recebe como parâmetros: direcionamento Z, direcionamento X e o vetor com os objetos de tile.

Lógica das classes Tile3D e Player:

Criar um cubo com os parâmetros passados pelo construtor de Tile3D e Player. Logo em seguida repassar os parâmetros para classe mãe Cubo. Não permitiremos o usuário alterar os atributos diretamente, pois para alterarmos precisaremos de uma validação, por isso estaremos utilizando os atributos do tipo privado, a validação será da seguinte maneira: O usuário informara qual será o tile que ele quer posicionar o cubo, o método automaticamente modificará o atributo que armazena o posicionamento no tile e calculará a posição física dele no plano 3d (x,z,y).

Lógica Get/Set:

Vamos supor que o atributo no qual armazenaremos o posicionamento do tileX esta definido como public. Ao fazermos “Player.tileX = 2;” modificaremos o nosso atributo para 2, mas com isso o nosso Player não se moveu para a posição 2. Este problema é solucionado utilizando a lógica get/set. Um método Get para recupera um valor (x = Player.tileX) e um método set para modifica um valor (Player.tileX = 2). Como não podemos ter atributos com o mesmo nome que os métodos utilizaremos “_nome” quando for atributo e “get nome ou set nome” para função.

private var _tileX:int;
private function gotoTile(n:int):Number{
    return _cubeW * n;
}
public function set tileX(n:int):void {
    _tileX = n;
    x = gotoTile(n);
}
public function get tileX():int {
    _tileX = Math.floor(x /_tileWidth);
    return _tileX;
}

Eu sei que a teoria pode estar meio confusa para alguns mas prometo que montarei um tutorial mais detalhado sobre Orientação a Objetos para vocês poderem refazerem este tutorial dizer. “Uhmmm então é isso.”

Move Player

Nosso método move na classe Player funcionará da seguinte forma, ele receberá parametros de adição para x,z e um vetor. se passarmos como parametro (0,1,vetor) estaremos informando que queremos que o player mova 0 na escala X e +1 na escala Z. Mas antes de mover verificamos se o bloco no qual nosso player está querendo se mover é permitido andar sobre ele (ground = true) e também se não existe um bloco do tipo parede atrapalhando (wall = false), só depois de verificarmos se é permitido andar que movimentamos nosso player.

        public function  move(dirx:int,dirz:int,arrayObj:Array):void {
            var nextTileX:Number = tileX + dirx;
            var nextTileZ:Number = tileZ + dirz;
            if (arrayObj[nextTileX][nextTileZ]!= "undefined" && !(arrayObj[nextTileX][nextTileZ].wall) && arrayObj[nextTileX][nextTileZ].ground){
                if ((dirx == 1) ||  (dirx == -1) || (dirz == 1) ||  (dirz == -1)) {
                    tileX = nextTileX;
                    tileZ = nextTileZ;
                }
            }
        }

Códigos:

Segue abaixo o código referente as arguivos: Tile3D.as, Player.as, main.as. Lembrando que o nome dos arquivos precisam ser exatamente estes respeitando letra maiuscula e minuscula, o mesmo vale para as pastas que os arquivo serão alocados.

  • Tile3D.as
package org.tile3d{
    import org.papervision3d.materials.utils.MaterialsList;
    import org.papervision3d.objects.primitives.Cube;
    public class Tile3D extends Cube {
        private var _wall:Boolean;
        private var _ground:Boolean = true;
        private var _tileX:int;
        private var _tileY:int;
        private var _tileZ:int;
        private var _cubeW:Number;
        public function Tile3D(matList:MaterialsList,_cubeW:Number=20,_tileX:Number=1,_tileZ:Number=1,_tileY:Number=1) {
            super(matList,_cubeW,_cubeW,_cubeW);
            this._cubeW = _cubeW;
            tileX = _tileX;
            tileZ = _tileZ;
            tileY = _tileY;
        }
        private function gotoTile(n:int):Number{
            return _cubeW * n;
        }
        //Get e Set: Modificando os valores dos atributos privados
        public function set tileX(n:int):void {
            _tileX = n;
            x = gotoTile(n);
        }
        public function get tileX():int {
            return _tileX;
        }
        public function set tileY(n:int):void {
            _tileY = n;
            y = gotoTile(n);
        }
        public function get tileY():int {
            return _tileY;
        }
        public function set tileZ(n:int):void {
            _tileZ = n;
            z = gotoTile(n);
        }
        public function get tileZ():int {
            return _tileZ;
        }
        //Permite que o objeto seja usada como chão
        public function set ground(valor:Boolean):void {
            _ground = valor;
        }
        public function get ground():Boolean {
            return _ground;
        }
        //Transforma o objeto em uma parede
        public function set wall(valor:Boolean):void {
            _wall = valor;
        }
        public function get wall():Boolean {
            return _wall;
        }
    }
}
  • Player.as
package  org{
    import org.papervision3d.objects.primitives.Cube;
    import org.papervision3d.materials.MovieAssetMaterial;
    import org.papervision3d.materials.utils.MaterialsList;
    public class Player extends Cube {
        private var _tileX:int;
        private var _tileY:int;
        private var _tileZ:int;
        private var _tileWidth:Number;
        private var matP:MovieAssetMaterial = new MovieAssetMaterial("playermat1");
        private var p:MaterialsList = new MaterialsList({all: matP});
        public function Player(_tileWidth:Number=20,_tileX:Number=1,_tileZ:Number=1,_tileY:Number=1) {
            super(p,15,15,15);
            this._tileWidth = _tileWidth;
            tileX = _tileX;
            tileZ = _tileZ;
            tileY = _tileY;
        }
        public function  move(dirx:int,dirz:int,arrayObj:Array):void {
            var nextTileX:Number = tileX + dirx;
            var nextTileZ:Number = tileZ + dirz;
            if (arrayObj[nextTileX][nextTileZ]!= "undefined" && !(arrayObj[nextTileX][nextTileZ].wall) && arrayObj[nextTileX][nextTileZ].ground){
                if ((dirx == 1) ||  (dirx == -1) || (dirz == 1) ||  (dirz == -1)) {
                    tileX = nextTileX;
                    tileZ = nextTileZ;
                }
            }
        }
        private function gotoTile(n:int):Number{
            return _tileWidth * n+(_tileWidth-15)/2;
        }
        //Get e Set: Modificando os valores dos atributos privados
        public function set tileX(n:int):void {
            _tileX = n;
            x = gotoTile(n);
        }
        public function get tileX():int {
            _tileX = Math.floor(x /_tileWidth);
            return _tileX;
        }
        public function set tileY(n:int):void {
            _tileY = n;
            y = gotoTile(n);
        }
        public function get tileY():int {
            _tileY = Math.floor(y/_tileWidth);
            return _tileY;
        }
        public function set tileZ(n:int):void {
            _tileZ = n;
            z = gotoTile(n);
        }
        public function get tileZ():int {
            _tileZ = Math.floor(z/_tileWidth);
            return _tileZ;
        }
    }
}
  • main.as
package  {
     //flash
    import flash.display.MovieClip;
    import flash.events.*;
    import org.tile3d.*;
    import org.Player;
    //Papervision
    import org.papervision3d.objects.primitives.Plane;
    import org.papervision3d.objects.primitives.Cube;
    import org.papervision3d.scenes.Scene3D;
    import org.papervision3d.render.BasicRenderEngine;
    import org.papervision3d.cameras.Camera3D;
    import org.papervision3d.view.Viewport3D;
    import org.papervision3d.materials.MovieAssetMaterial;
    import org.papervision3d.materials.utils.MaterialsList;
    public class main extends MovieClip {
        //papervision
        public var cena:Scene3D;
        public var viewport:Viewport3D;
        public var camera:Camera3D;
        public var renderer:BasicRenderEngine;
        public var centro:Plane;
        //material
        public var matGrass:MovieAssetMaterial = new MovieAssetMaterial("grass");
        public var matBase0:MovieAssetMaterial = new MovieAssetMaterial("base0");
        public var matBase1:MovieAssetMaterial = new MovieAssetMaterial("base1");
        public var matFlower:MovieAssetMaterial = new MovieAssetMaterial("flower");
        public var matWater:MovieAssetMaterial = new MovieAssetMaterial("water", true);
        public var w:MaterialsList = new MaterialsList(
        {front: matWater,
        back: matWater,
        left: matWater,
        right: matWater,
        top: matWater,
        bottom: matWater});
        public var g:MaterialsList = new MaterialsList(
        {front: matBase1,
        back: matBase1,
        left: matBase1,
        right: matBase1,
        top: matGrass,
        bottom: matBase1});
        public var f:MaterialsList = new MaterialsList(
        {front: matBase1,
        back: matBase1,
        left: matBase1,
        right: matBase1,
        top: matFlower,
        bottom: matBase1});
        public var b:MaterialsList = new MaterialsList(
        {all: matBase0});
        //tiles
        public var arrayTile:Array =[
        [w, w, w, w, w, w, w, w, w, w, w, w, w, w, w],
        [w, g, g, g, g, g, f, g, w, w, w, w, w, w, w],
        [w, g, g, f, g, g, g, g, g, w, g, g, f, w, w],
        [w, g, g, g, g, f, g, g, g, w, g, g, g, w, w],
        [w, w, g, g, g, g, g, g, g, f, f, g, g, w, w],
        [w, w, g, g, g, g, g, g, g, f, g, g, w, w, w],
        [w, g, g, g, g, g, g, g, g, g, g, w, w, w, w],
        [w, g, g, g, f, w, g, f, g, g, w, w, w, w, w],
        [w, w, g, g, w, w, g, g, g, w, w, w, w, w, w],
        [w, w, w, w, w, w, w, w, w, w, w, w, w, w, w]];
        public var arrayTileHeight:Array = [
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,1,0,0,0,0,0,0,0,0],
        [0,0,0,1,0,0,0,0,0,0,0,0,1,0,0],
        [0,0,0,0,0,1,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,1,1,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,1,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,1,0,0,1,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]];
        public var tiles:Array = [
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,1,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,1,0,0,0,0,0,1,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,1,0,0,0,0,0,1,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]];
        //Player
        public var player:Player;
        //Outros
        public var tileWidth:Number = 20;
        public function main () {
            Set ();
            Objetos ();
        }
        public function Set ():void {
            viewport = new Viewport3D(400,300,true,false,true,true);
            addChild (viewport);
            setChildIndex (viewport,1);
            cena = new Scene3D ;
            renderer = new BasicRenderEngine ;
            camera = new Camera3D ;
            camera.focus = 100;
            camera.zoom = 10;
            camera.x = 650;
            camera.z = 450;
            camera.y = 700;
        }
        public function Objetos () {
            for (var i = 0; i < arrayTile.length; i++) {
                for (var j = 0; j <  arrayTile[0].length; j++) {
                    //Criando blocos extras na altura 					
                    tiles[i][j] = new Tile3D(arrayTile[i][j],tileWidth,i,j,arrayTileHeight[i][j]); 					if (arrayTileHeight[i][j]>0) {
                    tiles[i][j].wall=true;
                    for (var k=0; k<arrayTileHeight[i][j];k++){
                        var tilesBlock=new Tile3D(b,tileWidth,i,j,k);
                        cena.addChild (tilesBlock);
                    }
                }
                if (arrayTile[i][j] == w){
                    tiles[i][j].ground=false;
                }
                //Criando bloco Tile
                cena.addChild (tiles[i][j]);
                }
            }
            //Player
            player = new Player(20,1,1);
            cena.addChild (player);
            stage.addEventListener (KeyboardEvent.KEY_UP, onKeyUpEvent,false,0,true);
            addEventListener (Event.ENTER_FRAME,Loop,false, 0, true);
        }
        public function Loop (e:Event):void {
            camera.lookAt (player);
            renderer.renderScene (cena,camera,viewport);
        }
        public function movePlayer(ob:Cube,dir:String,code:int) {
            if (code==37){
                player.move(0,-1,tiles);
            }else if (code==39){
                player.move(0,1,tiles);
            }else if (code==38){
                player.move(-1,0,tiles);
            }else if (code==40){
                player.move(1,0,tiles);
            }
        }
        public function onKeyUpEvent (event:KeyboardEvent ):void {
            var Code:Number=event.keyCode;
            if (Code==37 ||Code==38 ||Code==40 ||Code==39 ) {
                movePlayer (player,null,Code);
            }
        }
    }
}

Papervision [Objetos Primitivos]

fevereiro 11, 2009

Ola pessoal, como havia mencionado no post anterior, hoje nós teremos a primeira parte de uma serie de tutoriais sobre Papervision.
Neste tutorial falaremos sobre os Objetos Primitivos geométricos 3Ds (Plano, Esfera, Cone, Cilindro, Cubo). Depois sobre materiais de preenchimento. Lembrando que é sempre bom ter uma noção básica de matemática analítica.

ppv_ob

Primeiro Passo

Criaremos 2 arquivos, ambos ficarão na mesma pasta um deles será o main.as e o outro será o arquivo .fla que você pode nomealo da maneira que quiser. Após criar os arquivos no arquivo .fla você deve escrever na propriedade Document Class = “main”. Você também terá que definir o pacote do papervision. (post relacionado a como baixar e definir pacote do papervision aqui)

Componentes Obrigatórios

Para criar um objeto primitivo no Flash usando Papervision é muito simples. Desde que já tenha estruturado o código para poder rodar os componentes do papervision. Vamos analisar o código obrigatório.

Primeiro teremos que importar os pacotes referentes ao ambiente 3d que será criado. Depois criaremos 2 métodos em nosso main, o primeiro deles “Set()” será responsável pela criação do ambiente 3d, o segundo será aonde criaremos nossos objetos 3ds, ainda no segundo método, nós vamos criar um eventListener para criar um loop de enterframe. Nesse loop usaremos um método do papervision para ele renderizar nossa cena 3D. Nosso código base ficará mais ou menos assim.

package {
	//flash
	import flash.display.Sprite;
	import flash.events.Event;
	//papervision
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.render.BasicRenderEngine;
	//Material
	import org.papervision3d.materials.utils.MaterialsList;
	import org.papervision3d.materials.WireframeMaterial;
	// objeto
	//Aqui importaremos nossos Objetos 

	public class main extends Sprite {
		public var cena:Scene3D;
		public var viewport:Viewport3D;
		public var camera:Camera3D;
		public var renderer:BasicRenderEngine;
		//Material
		public var material:WireframeMaterial = new WireframeMaterial(0x00ff00, 1);
		//Aqui instanciaremos nossos Objetos
		public function main () {
			Set ();
			Objetos ();
		}
		public function Set ():void {
			viewport = new Viewport3D(400,300,true,false,true,true);
			addChild (viewport);
			cena = new Scene3D ;
			renderer = new BasicRenderEngine ;
			camera = new Camera3D ;
			camera.focus = 150;
			camera.zoom = 10;

		}
		public function Objetos ():void {
                        //Aqui colocaremos nossos objetos
			addEventListener (Event.ENTER_FRAME,Loop,false, 0, true);
		}
		public function Loop (e:Event):void {
			renderer.renderScene (cena,camera,viewport);
		}
	}
}

Objetos Primitivos:

Se observarem em nosso código existe 3 pontos marcados para inserimos códigos relacionados a objetos.
• Importar pacotes referentes a objetos
• Instanciar as variáveis que serão os nossos objetos
• Inserir o objeto na cena.

Importar pacotes referentes a objetos

Segue a lista de pacotes referentes aos objetos 3D que trabalharemos.

 import org.papervision3d.objects.primitives.Plane;
 import org.papervision3d.objects.primitives.Cone;
 import org.papervision3d.objects.primitives.Cylinder;
 import org.papervision3d.objects.primitives.Sphere;
 import org.papervision3d.objects.primitives.Cube;

Instanciar as variáveis que serão os nossos objetos

Criaremos uma variável para cada objeto diferente.

 //objetos Primitivos
 public var obPlano: Plane;
 public var obCone:Cone;
 public var obCylinder:Cylinder;
 public var obSphere:Sphere;
 public var obCube:Cube;

Inserir o objeto na cena

Ao criarmos um objeto 3d é necessário dizer qual é o material relacionado a sua face em nossos exemplos por enquanto com exceção do Cube todos estarão definidos como null, no cubo nós importamos o material básico wireframe, mas não entraremos em detalhes agora pois este será o tema do próximo tutorial de papervision, após o material é a definição da largura, altura e profundidade no caso do Cubo.

//Plano
 obPlano = new Plane(null,50,50);
 obPlano.x = -150;
 obPlano.y = 75;
 cena.addChild (obPlano);
//Cone
 obCone = new Cone(null,50,50);
 obCone.x = -50;
 obCone.y = 25;
 cena.addChild (obCone);
//Cylinder
 obCylinder = new Cylinder(null,50,50);
 obCylinder.x = 80;
 obCylinder.y = 50;
 cena.addChild (obCylinder);
//Sphere
 obSphere = new Sphere(null,50,50);
 obSphere.x = -125;
 obSphere.y = -75;
 cena.addChild (obSphere);
//Cube
 obCube = new Cube(
      new MaterialsList(
      {front: material,
      back: material,
      left: material,
      right: material,
      top: material,
      bottom: material}
      ) ,50,50,50);
 obCube.x = 100
 obCube.y = -75;
 cena.addChild (obCube);

Extra

Para dar uma noção melhor que os objetos criados são mesmo 3D utilizaremos no loop os métodos yaw(), roll() e picth() que servem para rotacionar os objetos sobre o seu próprio eixo. Experimente alterar os valores para observar novos resultados.

obPlano.yaw (5)
obPlano.roll (5)
obCone.roll (5)
obCone.pitch (5)
obCylinder.roll	(-5)
obCylinder.pitch (5)
obCylinder.yaw (-5)
obSphere.yaw (-5)
obSphere.pitch (-5)
obCube.yaw (-5)
obCube.pitch (-5)

Código completo: main.as

package {
	//flash
	import flash.display.Sprite;
	import flash.events.Event;
	//papervision
	import org.papervision3d.scenes.Scene3D;
	import org.papervision3d.view.Viewport3D;
	import org.papervision3d.cameras.Camera3D;
	import org.papervision3d.render.BasicRenderEngine;
	//Material
	import org.papervision3d.materials.utils.MaterialsList;
	import org.papervision3d.materials.WireframeMaterial;
	// objeto
	import org.papervision3d.objects.primitives.Plane;
	import org.papervision3d.objects.primitives.Cone;
	import org.papervision3d.objects.primitives.Cylinder;
	import org.papervision3d.objects.primitives.Sphere;
	import org.papervision3d.objects.primitives.Cube;

	public class main extends Sprite {
		public var cena:Scene3D;
		public var viewport:Viewport3D;
		public var camera:Camera3D;
		public var renderer:BasicRenderEngine;
		//Material
		public var material:WireframeMaterial = new WireframeMaterial(0x00ff00, 1);
		//objetos Primitivos
		public var obPlano: Plane;
		public var obCone:Cone;
		public var obCylinder:Cylinder;
		public var obSphere:Sphere;
		public var obCube:Cube;

		public function main () {
			Set ();
			Objetos ();
		}
		public function Set ():void {
			viewport = new Viewport3D(400,300,true,false,true,true);
			addChild (viewport);
			cena = new Scene3D ;
			renderer = new BasicRenderEngine ;
			camera = new Camera3D ;
			camera.focus = 100;
			camera.zoom = 10;

		}
		public function Objetos ():void {

			//Plano
			obPlano = new Plane(null,50,50);
			obPlano.x = -150;
			obPlano.y = 75;
			cena.addChild (obPlano);

			//Cone
			obCone = new Cone(null,50,50);
			obCone.x = -50;
			obCone.y = 25;
			cena.addChild (obCone);

			//Cylinder
			obCylinder = new Cylinder(null,50,50);
			obCylinder.x = 60;
			obCylinder.y = 75;
			cena.addChild (obCylinder);

			//Sphere
			obSphere = new Sphere(null,50,50);
			obSphere.x = -125;
			obSphere.y = -75;
			cena.addChild (obSphere);

			//Cube
			obCube = new Cube(
				new MaterialsList(
				{front: material,
			      back: material,
			      left: material,
			      right: material,
			      top: material,
			      bottom: material}
				)
				,50,50,50);
			obCube.x = 100
			obCube.y = -75;
			cena.addChild (obCube);

			addEventListener (Event.ENTER_FRAME,Loop,false, 0, true);
		}
		public function Loop (e:Event):void {
			obPlano.yaw (5)
			obPlano.roll (5)

			obCone.roll (5)
			obCone.pitch (5)

			obCylinder.roll (-5)
			obCylinder.pitch (5)
			obCylinder.yaw (-5)

			obSphere.yaw (-5)
			obSphere.pitch (-5)

			obCube.yaw (-5)
			obCube.pitch (-5)

			renderer.renderScene (cena,camera,viewport);
		}
	}
}

Glow

outubro 16, 2008

今日は皆-さん. Hoje aprenderemos a fazer o efeito glow via actionscript. Este efeito é muito útil para aplicar dinamicamente auras em objetos, ressaltar um texto, criar bordas em objetos entre outras utilidades na qual vocês descobrirão usando a criatividade.

Este efeito possui parâmetros semelhantes ao DropShadaw, não será complicado você aprender a usar. Abaixo segue a lista de parâmetros.

Alpha (Number): Essa propriedade define a transparência do efeito. Podendo usar valores de 0 a 1 onde 0 é zero (ooooohhh) e 1 é 100%, para fazer porcentagem quebrada deve-se usar um ponto antes 80% igual (.8).

BlurX, BlurY (Number): Define o nível de embassamento vertical e horizontal do efeito.

Color (0×000000): Como o próprio nome já diz Color. Define a cor do efeito, para qual a cor deve ser utilizada seguindo o padrão (0xRRGGBB).

Inner (Boolean): Define se o efeito vai ser aplicado dentro do objeto (true) ou fora do objeto (false). Lembrando que se Não for definido essa propriedade o flash aplicará como default o efeito fora.

Knockout (Boolean): Esconde o objeto mantendo o efeito seguindo a borda do objeto como se ele ainda estivesse no local.

Quality (Number): O valor definido nessa propriedade atua anulando as propriedades Strength e Blur, quando menor o valor definido na qualidade maior é anulação do embassamento.

Strength (Number): Essa propriedade atua na intensidade da cor da sombra. Quanto menor o numero menor é a intensidade da cor

ActionScript

Se você teve paciência para ler os outros tutoriais de efeitos já estará ciente que ao iniciar você tem que fazer a importação da classe. E na construção do efeito existe diversas maneiras, mas eu opto sempre pela maneira mais organizada. Vamos analizar a imagem abaixo do Mario seguido de seu actionscript.

import flash.filters.GlowFilter;
var GlowFiltro:GlowFilter = new GlowFilter ();
GlowFiltro.color = 0xffff90;
GlowFiltro.alpha = 1;
GlowFiltro.blurX = 15;
GlowFiltro.blurY = 15;
GlowFiltro.strength = 10;
GlowFiltro.quality = 1;
GlowFiltro.inner = false;
GlowFiltro.knockout = false;
var GlowFiltro2:GlowFilter = new GlowFilter ();
GlowFiltro2.color = 0xff0090;
GlowFiltro2.alpha = 1;
GlowFiltro2.blurX = 30;
GlowFiltro2.blurY = 30;
GlowFiltro2.strength = 10;
GlowFiltro2.quality = 1;
GlowFiltro2.inner = false;
GlowFiltro2.knockout = false;
mario.filters = [GlowFiltro,GlowFiltro2];

Observe que o Mario possui 2 tons de auras, um rosa e outro amarelo. Isso foi possível porque a propriedade filter armazena um vetor possibilitando você adicionar mais de um objeto de filtro, podendo mesclar, dropshadow, glow, bevel etc.. No caso de nosso exemplo foi adicionado 2 objetos GlowFiltro e GlowFiltro2.

Agora usem a criatividade e façam bom proveito^^ até a próxima. Cya. また見てね.

Cthulhu in Rio + Tile System Player 2

julho 23, 2008

今日は皆-さん. Acho que nen preciso dizer de onde veio a inspiração para fazer esse novo desenho do Cthulhu (o nome dele está com erro na imagem, depois eu conserto). Com essa crise no país blá blá blá etc.. não vamos falar de politica aqui agora. vamos falar de criação.

Não sei se vocês notaram mais adicionei mais um tutorial tile system, essa é a segunda parte do turorial ensinando a criar um jogador no cenário tile e validar movimento. Ainda não tive tempo fazer upgrade nos meus jogos mas eu ando estudando coisas novas e to quase convenvendo o meu irmão a fazer o design dos jogos, e se ele me ajudar vai acelerar o processo de criação pacas^^ o link está situado no meu direito.

Bem pessoal o papo está bom mas eu preciso ir até o proximo post. CYA また見てね.

Tile System – Tutorial [Part 3][ActionScript]

maio 30, 2008

今日は皆-さん Olá pessoal dando continuidade ao nosso tutorial do tile system hoje vocês começaram a programar^^ Mas antes de começarmos a colocar o código vamos criar nosso movieclip base.

Tile Base

Abra o Flash crie um arquivo 200 x 200. Antes de criarmos o tile base vamos entender como funcionar. O movieclip Tile ele será a base da construção do cenário, cada frame desse movieclip representará um bloco colorido diferente. (vocês lembram na parte 2 que tínhamos 3 cores diferentes)

Vocês podem criar o tile de diversos tamanhos diferentes, eu optei por usar 20×20.

1.passo: vamos desenhar um quadrado 20×20 verde. Em qualquer parte do palco. Selecione–o e aperte F8 aparecerá essa tela.

Caso esteja aparecendo uma tela com menos opões clique no botão advanced. Coloque o nome do movieclip como “Tile” marque como movieclip. Em identifier coloque “Tile” marque as opções igual a imagem. Com essas opções poderemos criar um arquivo via actionscript puxando diretamente da biblioteca. Delete o quadrado do palco agora porque não iremos precisar dele ai só usaremos a da biblioteca

2.passo: Pressione F11 para aparecer a sua biblioteca.

De um duplo clique no tile para ele ser visualizado sozinho na tela. Crie mais 2 Keyframes. No segundo frame pinte o quadrado de branco e no terceiro frame pinte o quadrado de azul.

Crie um novo layer (ainda no movieclip Tile) nomeie como action. Pressione F9 para aparecer a caixa de Actions e digite:

stop();

Com isso sua tela deve ficar mais ou menos assim.

ActionScript da Parte 2

Observe a imagem acima a existência de um botão chamado Scene 1 clique nele para poder ir para o palco principal. No palco principal clique no primeiro frame e pressione F9 para abrir a janela de actions. Insira o código que aprendemos no tutorial anterior (esse código é referente ao posicionamento dos blocos).

stop();
arrayField = [
[ 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
[ 2, 0, 0, 0, 0, 0, 0, 0, 0, 2],
[ 2, 0, 1, 1, 1, 1, 1, 0, 0, 2],
[ 2, 0, 1, 0, 0, 0, 0, 1, 0, 2],
[ 2, 0, 1, 0, 0, 0, 0, 1, 0, 2],
[ 2, 0, 1, 1, 1, 1, 1, 0, 0, 2],
[ 2, 0, 1, 0, 0, 0, 0, 1, 0, 2],
[ 2, 0, 1, 0, 0, 0, 0, 1, 0, 2],
[ 2, 0, 0, 0, 0, 0, 0, 0, 0, 2],
[ 2, 2, 2, 2, 2, 2, 2, 2, 2, 2]
];

Funões actionScripts.

Para prosseguirmos vamos da uma pincelada rápida em 2 funções actionscripts que usaremos.

createEmpytClip(Nome,Deph); Essa função cria um movie clip vazio com o nome e índice que você definir.

_root.createEmptyMovieClip("Field", 1);

attachMovie(Link,nome, Deph);Essa função copia um movieclip da biblioteca para o palco, você se lembra quando agente criou o nosso movieclip Tile que nós definimos um nome para a propriedade Linkage, esse é o nome que usamos para o link. Resumindo se agente for chamar aquele nosso tile da biblioteca usamos assim:

_root.attachMovie("Tile","NovoTile",2);

gotoAndStop(posiçao): Envia animaçao para posição indicada. No nosso exemplo estamos enviando animçao para o frame 3

_root.gotoAndStop(3);

Loop

Vamos criar a estrutura do loop que irá gerar dinamicamente os movieclips em suas devidas posições. Recapitulando a estrutura da visualização da matriz:

arrayField[Linha][Coluna];

Então teremos que criar um loop que percorra cada linha e dentro desse loop montar um loop que percorra todas as colunas.

Loop percorrendo linha
.     loop percorrendo todas as colunas
.     .    Cria o movieclip
.     .    Posiciona o movie clip
.     .    Posiciona o frame na posição correta.
.     .
.     .fim do loop de colunas
.
.fim do loop de linhas

Essa é a nossa estrutura agora vamos converter para código Completo. (Todo código abaixo deve ser inserido no primeiro frame)

stop();
arrayField = [
[ 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
[ 2, 0, 0, 0, 0, 0, 0, 0, 0, 2],
[ 2, 0, 1, 1, 1, 1, 1, 0, 0, 2],
[ 2, 0, 1, 0, 0, 0, 0, 1, 0, 2],
[ 2, 0, 1, 0, 0, 0, 0, 1, 0, 2],
[ 2, 0, 1, 1, 1, 1, 1, 0, 0, 2],
[ 2, 0, 1, 0, 0, 0, 0, 1, 0, 2],
[ 2, 0, 1, 0, 0, 0, 0, 1, 0, 2],
[ 2, 0, 0, 0, 0, 0, 0, 0, 0, 2],
[ 2, 2, 2, 2, 2, 2, 2, 2, 2, 2]
];
_root.createEmptyMovieClip("Field", 1);
for (i = 0; i < arrayField.length; i++) {
    //percorre um loop de colunas
    for (j = 0; j < arrayField.length; j++) {
        newName = "Tile_" + j + "_" + i;
        _root["Field"].attachMovie("Tile", newName, i * 100 + j * 2);
        _root["Field"][newName]._x = j * 20;
        _root["Field"][newName]._y = i * 20;
        _root["Field"][newName].gotoAndStop(arrayField[i][j]+1);
    }
}

Recapitulando o funcionamento do código.

Definimos uma Matriz para podermos criar o cenário, Criamos um movieclip vazio para inserirmos nele os moviesclips tile que está na biblioteca, Fizemos um loop para criar 1 Tile para cada posicionamento da matriz, criamos uma variável chamada “newName” para podermos manipular melhor o nome de cada objeto novo criado. Usamos uma equação para definir o dephs (indice de posicionamento de layer) de cada objeto criado i * 100 + j * 2″ com isso todo objeto criado não corre o risco de ter o mesm dephs. E por ultimo jogamos o frame de cada objeto criado para o numero da matriz +1 (não existe frame 0 né^^).

No proximo tutorial nós aprenderemos a validadar quais locais o personagem poderá andar ou não, e vamos criar também nosso personagem no cenário.

Bem pessoal espero que estejam gostando do tutorial, como eu disse no anterior qualquer duvida postem ou me procurem no msn, eu ajudarei na boa. até a proxima pessal, CYA.また見てね.

Tile System – Tutorial [Part 2][Matriz Cenário]

maio 24, 2008

今日は皆-さん Dando continuidade ao nosso tutorial do Tile System. Nesse tutorial vamos finalmente por a mão na massa e entender como criamos um cenário tile system baseando em uma matriz.

Esse será o nosso cenário de estudo

Mas antes vamos entender como funciona uma matriz 2×2 para isso vamos montar uma matriz letras x números.

A = [A1, A2, A3];
B = [B1, B2, B3];
C = [C1, C2, C3];

Com isso nois temos as 3 vetores diferentes cada um representando uma linha diferente agora se agruparmos eles dessa forma:

Field = [A,B,C];

Eu prefiro desenhar a matriz desse jeito:

Field = [
[A1, A2, A3],
[B1, B2, B3],
[C1, C2, C3]
];

Para acessarmos cada valor do vetor acima devemos usar os index da seguinte forma:

Field[Linha][Coluna];

Analogamente para acessarmos cada valor da matriz faremos assim^^

Field[0][0] = A1
Field[0][1] = A2
Field[0][2] = A3
Field[1][0] = B1
Field[1][1] = B2
Field[1][2] = B3
Field[2][0] = C1
Field[2][1] = C2
Field[3][2] = C3

Bem isso é algo meio complexo de se entender de começo mas logo logo você pega o jeito. Agora vem a pergunta pra que eu tive que entender isso? o que isso vai ser útil para criar o cenário. Bem muito simples por que o código abaixo será o nosso cenário^^

arrayField = [
[ 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
[ 2, 0, 0, 0, 0, 0, 0, 0, 0, 2],
[ 2, 0, 1, 1, 1, 1, 1, 0, 0, 2],
[ 2, 0, 1, 0, 0, 0, 0, 1, 0, 2],
[ 2, 0, 1, 0, 0, 0, 0, 1, 0, 2],
[ 2, 0, 1, 1, 1, 1, 1, 0, 0, 2],
[ 2, 0, 1, 0, 0, 0, 0, 1, 0, 2],
[ 2, 0, 1, 0, 0, 0, 0, 1, 0, 2],
[ 2, 0, 0, 0, 0, 0, 0, 0, 0, 2],
[ 2, 2, 2, 2, 2, 2, 2, 2, 2, 2]
];

Se vocês prestarem atenção com calma nos números 1 espalhado pela matriz forma exatamente um R. ohhhhh agora vocês lembram que o nosso cenário tem um R branco exatamente aonde esta os 1 e uma borda azul que esta exatamente aonde você esta vendo o numero 2 e analogamente aonde o 0 esta verde nosso cenário. Para ficar mais claro vamos rever a figura do nosso cenário com a matriz por cima

Bem pessoal vou dar um tempo para vocês assimilarem o novo conhecimento adquirido com esse post e no próximo post nois finalizamos o nosso cenário com o desenvolvimento do actionsctipt que gerará o nosso cenário. Mas se vocês quiserem ir se adiantando vou dar a dica do que faremos no próximo post.

Próximo post:

• Criemos um movieclip aonde cada frame vai representar um quadrado de cor diferente.
• Faremos um loop que percorrera nossa matriz e no lugar de cada numero criará um movieclip diferente
• Depois mandaremos nossos movieclip exibirem a imagem correta baseado nos números da matriz

Espero que esteja sendo claro, pois eu nunca tinha escrevido nada antes para ensinar alguém^^ qualquer duvida postem aqui ou podem me procurar no msn (esta do lado direito junto o meu auto retrato^^) nos veremos no próximo post pessoal. Até mais, CYA, また見てね.