Arkanoid de pobre em Flash pt1

Defensores radicais do software livre, pulem o post pois esse blog está mergulhando no mundo imundo do software proprietário fechado barbudo e mal.

Disse em algum post atrás que estava me interessando cada vez mais pela produção de jogos, bobos e simples, e de preferência portateis… Já fiz um game ou outro, a maioria em BASIC pro antigo MSX 2.0 e um outro em C/SDL pro linux, mas game casual que é game casual tem que rodar em qualquer micro, em qualquer sistema, e nada melhor que Flash para isso.

A proposta é criar um clone do Arkanoid, sem todo seu glamour, coisa simples sem muita firula, nem mesmo som 😛

Eu sei que é possível desenvolver maravilhas com puro ActionScript+Javascript mas eu não tenho a manha, então vou de Flash CS3 mesmo. Alias, vou usar o Flash CS3 no OSX Leopard, se você usa windows os screenshots vão ser diferentes mais ainda assim parecidos.

Primeiro passo, abra um novo “Flash File (ActionScript 2.0)”, se quiser mude as propriedades do fundo da tela e seu tamanho em “Modify > Document…”.

Agora vamos desenhar a bola, use a ferramenta para criar circunferências e crie uma bola em algum canto da tela. Selecione a bola e converta para Símbolo em “Modify > Convert to Symbol” , marque a caixa “Type” como “Movie Clip”. Marque a caixa “Linkage to ActionScript” também:


tutorial flash

Agora clique com o botão direito em cima da bola e vá em “Actions”, e cole o seguinte código :


// Função carregada no início do jogo
onClipEvent(load) {

	// A cada loop incrementa em 10 a posição da bola 
	// na direção horizontal
	xspeed =10;
	// A cada loop incrementa em 10 a posição da bola 
	// na direção vertical
	yspeed =10;
	// Tamanho da tela horizontal (width) e vertical (height)
	stageWidth=400;
	stageHeight=300;
	
}
// Carregado quando o jogo entra nesse frame
onClipEvent(enterFrame) {
	//Incrementa as velocidades em x e em y a cada loop
	this._x += xspeed;
	this._y += yspeed;
	
	// Detecta se a bola atingiu a parede o teto e inverte sua velocidade
	if ((this._x <= 0) || (this._x >= stageWidth)) {
		xspeed = -xspeed;
	}
	if (this._y <= 0 || (_root.barra.hitTest(this))) {
		yspeed = -yspeed;
	}
	
	// Caso a bola caia no chão ela será restaurada no meio da tela
	if (this._y > stageHeight) {
		_x = stageWidth/2 ;
		_y = stageHeight/2;
		xspeed=10;
		yspeed=10;
	}
	
}

Agora vamos adicionar a “barra”, da mesma forma que adicionamos a bola, posicionando na tela convertendo para símbolo e identificando como “barra”. Clique em cima da barra, e vá em “Actions”, em seguida entre com o código :


onClipEvent(enterFrame) {

	// Tamanho da tela, usado para calcular os limites de movimento da barra	
	stageWidth=400;
	stageHeight=300;
	
	// Se pressionado o botão direito soma 10 na posição da barra
	if(Key.isDown(Key.RIGHT)) {
		// Verifica se  a barra já chegou a extremidade
		if(this._x <= stageWidth - this._width) {
			this._x += 10
		}
	}
	// Se pressionado o botão direito subtrai 10 na posição da barra

	if(Key.isDown(Key.LEFT)) {
	// Verifica se  a barra já chegou a extremidade

		if(this._x >= 0) {
			this._x -= 10;
		}
	}
}

Uma dica muito, mas muito importante é instancear os objetos que usamos, para isso selecione um dos objetos e na janela de propriedades dê o nome da instância do objeto, “bola” no caso da bola e “barra” no caso da barra. Sem isso a bola vai passar direto quando atingir a barra. Veja figura abaixo :


instancia no flash

Se você chegou até o fim do tutorial seu game deve ser parecido com o abaixo :




4 thoughts on “Arkanoid de pobre em Flash pt1

  1. Liz

    Hum… essa lentidão…

    Práticas de boa prgramação no Flash (by a newba):

    1. código no .fla não!
    2. AS3 is much better!
    3. Desenhar figuras simples através de código.

    Na verdade estou descobrindo Flash em Linux –> Desenvolvimento sem ser barbudo e mau!

  2. liquuid Post author

    Então … quando eu escrevi esse programa AS3 era novidade, sem documentações ou referências.
    Depois que li as boas práticas, e aprendi mais sobre AS3 decidi ficar longe do Flash , vou de javascript e Canvas nessa encarnação.

  3. liquuid Post author

    AS3 é flash, javascript + canvas + html5 já é embutido nos bons browsers. plugin flash come a bateria do meu note, trava abas do meu navegador e não roda no meu celular 😛
    Ai perdi o tesão…

Comments are closed.