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:

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 :

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