Grupo de Desenvolvimento de Jogos

1 – Stencyl: deslocando um ator

Nivali — Mon, 30 Apr 2012 21:14:49 +0000

Esse guia considera que você possui alguma familiaridade com a Stencyl, pelo menos tendo feito o tutorial de 30 minutos disponível na própria ferramenta. O objetivo é focar na criação de códigos para a Stencyl. Sendo assim, mesmo que já existam behaviors prontos que façam alguma das funcionalidades, estas funcionalidades serão codificadas mesmo assim.

Programação com StencylWorks - deslocamento horizontal

Desenvolvendo jogos em HTML5 para o iOS

Nivali — Wed, 13 Jul 2011 12:54:49 +0000

Ok, HTML5 não é Flash, mesmo assim achei interessante abordar o tema. Ainda é mais fácil desenvolver os jogos em Flash, mas HTML5 vem crescido e está se destacando.

Um recurso que acho muito interessante é a possibilidade dos jogos desenvolvidos serem adicionados ao iOS e parecerem ser um aplicativo nativo. Sendo assim, não preciso abrir o navegador de internet para acessar o jogo, basta selecionar ele entre os outros aplicativos instalados. E não é apenas um link para a página e este link abre o navegador, fica parecendo um aplicativo instalado mesmo.

Diversos jogos são estão sendo desenvolvidos em HTML5 e alguns já voltados ao iOS. O site HTML5games é um agregador onde podem ser encontrados diversos jogos desenvolvidos.

Então vejamos o básico para desenvolver um jogo em HTML5 para o iPhone.

Preparação inicial

Primeiramente precisamos de um ícone, que será utilizado para representar o jogo no dashboard. O ícone deve ter 57x57 pixel e formato PNG ou JPG. Lembrando que os cantos do ícone serão arredondados automaticamente pelo iOS.

É recomendável também ter uma imagem de tela de inicialização (startup screen) que deve ter 320x460 pixel, nos formatos PNG ou JPG.

Um detalhe sobre a resolução é que somente depois de adiciona no dashboard é que ela terá a resolução de 320x460. Acessando o jogo no navegador, o tamanho da tela será de 320x356 pixel.

No navegador (pelo menos no Safari) são esperados sites com 980 pixel de largura, por isso é importante definir parametros de viewport. Isso é feito adicionando uma tag no cabeçalho (entre as tags e ). Adicione:

Além de definição do viewport, adicione também a tag abaixo, que colocará a página em full screen sem mostrar a barra de endereço (em cima) e de ferramentas (embaixo):

Cache do aplicativo

O recurso de cache permite o uso das aplicações mesmo sem conexão com a internet. Para saber mais sobre esse novo padrão, acesse a especificação na W3C (http://dev.w3.org/html5/spec/offline.html).

Para fazer a cache dos arquivos, devemos especificar quais arquivos devem ser armazenados, criando um arquivo "manifest". As imagens pode ser especificadas por seu caminho absoluto ou relativo e também podem ser informado o tipo de arquivo.

Para depurar o código no seu dispositivo, você precisa habilitar o debug console: vá em "Ajustes", selecione "Safari" e depois "Desenvolvimento".

...........................

E com isso finalizei o básico. No próximo artigo será feita a codificação de um jogo para demonstração.

Que jogos podem ser feitos com o Flash para o iOS

Nivali — Wed, 15 Jun 2011 21:51:38 +0000

Embora a performance dos jogos não seja muito boa, ou ainda não é muito boa, bons jogos já podem ser encontrados (principalmente a partir da versão 2.7 da Air SDK). Abaixo alguns links com vídeos desses aplicativos:

Além de jogos a nova versão da Air SDK oferece uma série de melhorias (http://blogs.adobe.com/flashruntimereleases/2011/06/14/air-2-7-runtimes-and-sdk-are-now-available/). Vídeos comparando a performance podem ser encontrados em: http://blogs.adobe.com/flashplayer/2011/06/adobe-air-2-7-now-available-ios-apps-4x-faster.html. A figura abaixo também mostra a melhoria na taxa de exibição das aplicações.

Como é possível o Flash no iPhone/iPad

Nivali — Thu, 02 Jun 2011 19:50:09 +0000

Quando vi pela primeira vez a possibilidade de desenvolver em Flash para iPhone/iPad achei estranho já que o iOS (sistema operacional do iPhone/iPad) não suporta Flash e a Apple deixa esse defeito por vontade própria, então como a Adobe fez para viabilizar isso?

A Adobe utilizou o Low Level Virtual Machine (LLVM) permitindo um aplicativo feito em Adobe AIR ser convertido para um aplicativo nativo do iOS. O modo de compilação foi alterado para que seu aplicativo pudesse rodar no iOS, do modo JIT (Just in Time) para o AOT (Ahead-of-Time).

O desempenho ainda não é muito bom, mas está melhorando e aplicações desenvolvidas com a versão 2.7 da SDK do Air (ainda experimental) mostram melhor desempenho.

Desenvolvimento para iPhone/iPad com Adobe Flash

Nivali — Sat, 02 Apr 2011 02:50:35 +0000

Primeiramente é importante dizer que meu guia inspiração para esse tutorial vem de Lee Brimelow, um desenvolvedor de games que mantem o site http://gotoandlearn.com, um site muito bom com vídeos tutoriais. O cara é bastante profissional nisso.

A própria Adobe merece créditos porque toda e explicação, sem contar a tecnologia, foi ela que gerou e os códigos que serão vistos foram tirados de seu help (http://help.adobe.com/en_US/as3/iphone/index.html) e labs (http://labs.adobe.com/technologies/packagerforiphone/).

Os primeiros passos para desenvolver para iPhone/iPad é o mais demorado e caro. Você precisa obrigatoriamente de um iPhone ou iPad para poder testar o que foi desenvolvido e também precisa de uma licença de desenvolvedor Apple que custa 99 dólares anuais.

Para obter a licença acesse o site de desenvolvedores da Apple (http://developer.apple.com) e depois a opção “Join the iOS Developer Program” (http://developer.apple.com/programs/ios/), por fim clique no botão “Enroll Now” que o conduzirá para http://developer.apple.com/programs/start/standard/. Você precisa fazer um cadastro que gerará um documento que precisa ser preenchido e enviado por fax para Apple. Eles recebendo o fax em poucas horas você já tem acesso ao conteúdo exclusivo para desenvolvedores (documentos e vídeos). Mais alguns dias (no meu caso foram 7 dias) se nenhum problema ocorrer você recebe a licença de desenvolvedor o/

Para prosseguir nesse tutorial você precisa ter passado pelos passos anteriores: ter comprado um dispositivo e adquirido a licença de desenvolvedor.

Estando logado no Member Center do site de desenvolvedores da Apple, você precisa acessar o "Provision & test your apps on your iPhone, iPad & iPod touch", que fornecerá os certificados necessários para compilar a aplicação.

Primeiramente é preciso adicionar o aparelho, ou aparelhos que serão utilizados para teste. Somente nos aparelhos adicionados será possível realizar os testes. Para isso, basta ir na opção "Devices" e depois em "Add Devices".

Cada desenvolvedor pode registrar até 100 aparelhos. Para o registro é preciso colocar um nome qualquer e o Device ID que é um identificador único do dispositivo.

A parte mais complicada é para gerar o certificado. Você precisará do OpenSSL, que é adquirido em http://www.slproweb.com/products/Win32OpenSSL.html. Baixe e instale o Win32 OpenSSL v1.0.0d Light. Se ocorrer algum problema para instalar o OpenSSL, instale o Visual C++ 2008 Redistributables e depois tente instalar o OpenSSL novamente.

[Artigo ainda não completo]

1 – Introdução a Realidade Aumentada

Nivali — Sun, 02 Jan 2011 01:50:50 +0000

A virtualidade aumentada é um conceito bastante interessante e que pode, como foi mostrado, se utilizada no desenvolvimento de diversos jogos. Mas, dentro da realidade misturada, o que possui maior empregabilidade é a realidade aumentada. São diversas técnicas disponíveis para uso como a identificação de movimento em uma área, identificar marcadores e identificação de objetos (o mais comum sendo o rosto humano).

A partir de agora serão mostradas todas essas técnicas, com uma explicação sobre o funcionamento básico e dicas de uso.

Introdução

Para utilização da realidade aumentada primeiro precisamos aprender a utilizar vídeos no Flash. Embora possam ser utilizados vídeos do computador, ou disponibilizados por um servidor, o interesse nesse livro é a utilização de vídeos capturados pela webcam do usuário, mas todo os recursos de vídeo são controlados pela classe vídeo.

O código abaixo captura a imagem da webcam e mostra a imagem no palco. Inicialmente é criada uma variável do tipo vídeo com uma instancia de vídeo e também uma variável do tipo câmera que já recebe, através do método Camera.getCamera(), a webcam do usuário. A câmera em seguida é anexada ao componente de vídeo e para finalizar é adicionado o componente de vídeo ao palco.

Como a classe Camera não estende a classe DisplayObject, não pode ser adicionada diretamente à lista de exibição usando o método addChild(). Para exibir o vídeo capturado da câmera, é preciso criar um novo objeto Video e chamar o método attachCamera() na ocorrência de Video (MANUAL DO AS3).

var video:Video = new Video();
var webcam:Camera = Camera.getCamera();
video.attachCamera(webcam);
addChild(video);

Ao executar o código, assim como no uso do microfone, será solicitada a permissão de acesso a webcam do usuário (conforme visto na Figura 1). Sendo permitido o acesso será mostrada a captura de imagem da webcam, caso contrário o palco ficará em branco.

O código abaixo também irá capturar uma imagem da webcam e mostrá-la no palco, mas ele é mais completo. Na linha 3 é feita uma verificação se a variável webcam é diferente de NULL o que significa que o usuário possui uma webcam no computador. Somente se existir é que será criado o componente de vídeo e anexada a imagem da webcam nele. Em seguida é adicionado um ouvinte de STATUS que aguarda a resposta do usuário quanto a permissão de uso da webcam. Somente quando o usuário responder a permissão é que função continua() será chamada.

A função continua() por sua vez, inicia verificando se o usuário permitiu o acesso a webcam. Se webcam.muted tiver valor TRUE significa que o usuário não permitiu o acesso por isso foi utilizado a negação (!) desse parâmetro. Somente se o usuário der permissão é que será adiciona do componente de vídeo ao palco (através do código da linha 10).

Por fim, na linha 12 é removido o ouvinte que esperava a resposta do usuário na caixa permissão, mesmo que ela seja recusada, ela já foi feita.

var video:Video;
var webcam:Camera=Camera.getCamera();
if (webcam!=null) {
	video = new Video();
	video.attachCamera(webcam);
          webcam.addEventListener(StatusEvent.STATUS, continua);
}
function continua(event:StatusEvent):void {
	if (! webcam.muted) {
		addChild(video);
	}
	webcam.removeEventListener(StatusEvent.STATUS, continua);
}

1.1 – Opções para quem não sabe Flash – não programadores

Nivali — Sun, 02 Jan 2011 01:49:51 +0000

Fazer uso da Realidade Aumentada para fins pessoais é algo hoje bastante fácil com a utilização de algumas ferramentas. Duas delas me chamam especial atenção, a ZooBurst e a EZFlar.

O ZooBurst é um serviço que permite que você desenvolva livros virtuais utilizando técnica 3D.
EZFlar é a biblioteca oficial desenvolvida pelo jornal O Estado de São Paulo para desenvolver um sistema de realidade aumentada.

ZooBurst

O ZooBurst é um serviço para criar livros pop-up (aqueles que quando se abre a página do livro figuras "pulam" da página). Para criar um livro basta ir adicionando imagens e textos a cada página do livro. Na criação do livro pode ser utilizada a Virtualidade Aumentada já que é permitido fazer uma gravação de voz em vez do texto (apenas na versão paga do serviço).

Para visualizar o livro criado basta possuir o plugin do Adobe Flash e ir folheando as páginas. Outra opção é liberar o acesso para a webcam e imprimir uma imagem de marcador. Quando você mostrar esse marcador para a webcam, o livro será mostrado no lugar desse marcador. Se você gerar o marcador o livro gira também acompanhando, assim como aproximando o marcador da webcam faz o livro parecer mais próximo.

Alguns livros prontos podem ser vistos em uma galeria disponível no site do serviço, mas recomendo criar uma conta uma conta gratuita e testar o serviço.

EZFlar

O EZFlar é um serviço mais simples, mas bastante interessante para a Realidade Aumentada. Ele se baseia em mostrar um material multimídia quando for identificado um marcador na captura da webcam.

Os materiais podem ser imagens nos formatos JPG, GIF ou PNG; elementos 3D no formado DAE e MD2, sons no fomato MP3 e também arquivos nos formatos SWF ou FLV. Além vincular esses formatos de arquivo, podem ser vinculados textos, endereço de Twitter, ou qualquer outra URL.

Você pode utilizar até 5 elementos com 5 marcadores diferentes e deixar publicado para acesso via um link que pode ser disponibilizado para quem você quiser enviar para curtir a aplicação gerada por você.

2 – Técnicas de RA

Nivali — Sun, 02 Jan 2011 01:40:14 +0000

São diversas técnicas da RA que podem ser desenvolvidas utilizando o Flash e elas envolvem: detecção de movimento, detecção de objetos e detecção de cor. Além de detectar esses elementos e preciso acompanhar seu deslocamento (tracking) de modo a seguir seu movimento.

Detecção de movimento

A detecção de movimento consiste não apenas saber se existe ou não movimentação nas imagens capturadas pela webcam, mas também saber onde esse movimento ocorre.

2.1 – Detecção de movimento geral

Nivali — Sun, 02 Jan 2011 01:30:06 +0000

O Flash possui instruções que verificam a ocorrência de movimento na captura da webcam, dentro de um limiar, e um indicador de quantidade de movimento, similar ao nível de atividade do microfone. Para detectar movimento é necessário entender o uso da função setMotionLevel() e do parâmetro do ouvinte ActivityEvent.ACTIVITY.

A função setMotionLevel() espera dois parâmetros, o primeiro é a sensibilidade que especifica quanto de movimento é preciso para ser considerado um movimento, enquanto o segundo parâmetro especifica um total de milissegundos sem movimento necessário para considerar a captura realmente como sem movimento. Deve ficar mais fácil entender esses conceitos experimentando o código a seguir.

Boa parte desse código já foi explicada, atente apenas para a linha 14 onde foi adicionado um ouvinte para a webcam. Esse ouvinte vai ser executado toda vez que uma modificação no movimento da webcam ocorrer, chamando a função testaAtividade(). Essa função testaAtividade() verifica se o retorno do evento com relação a atividade (evento.activating) foi verdadeiro ou falso. Caso for falso ela simplesmente irá escrever através do trace informando que não existe movimento. Se for verdade, além de escrever que existe movimento, também informa o nível de movimento detectado.

var video:Video;
var webcam:Camera=Camera.getCamera();
webcam.setMotionLevel(50,1000);

if (webcam!=null) {
	webcam.addEventListener(StatusEvent.STATUS, continua);
	video = new Video();
	video.attachCamera(webcam);
}

function continua(event:StatusEvent):void {
	if (!webcam.muted) {
		addChild(video);
		webcam.addEventListener(ActivityEvent.ACTIVITY, testaAtividade);
	}
	webcam.removeEventListener(StatusEvent.STATUS, continua);
}

function testaAtividade(evento:ActivityEvent) {
	if (evento.activating == true) {
		trace("existe movimento com intensidade " + webcam.activityLevel);
	}
	if (evento.activating == false) {
		trace("não existe movimento");
	}
}

Se alterarmos os valores da função setMotionLevel() iremos ver modificações no funcionamento da captura. Primeiro atente para a sensibilidade, ela aceita valores entre zero e 100, sendo 50 o valor padrão. Se modificarmos o valor para 90 ter uma grande movimentação detectada para considerar um movimento, enquanto um valor 10 torna mais sensível essa movimentação.

Evite valores de sensibilidade muito baixo. Se houver mudança na luz ambiente, isso será identificado como movimento. Então, em ambientes abertos, mesmo que a pessoa esteja parada, um modificação na iluminação ir ser considerada movimento. Valores muito baixo também podem, dependendo da qualidade de captura da webcam, considerar a poeira voando no ambiente como movimento. Você pode verificar como fazer um ajuste de ambiente através do webvideo disponível nos materiais complementares.

O segundo parâmetro do método setMotionLevel() especifica quantos milissegundos é preciso ficar sem movimento para ser considerado tal. O padrão é 2000 (2 segundos).

O código a seguir busca identificar o ruído existente no ambiente e, a partir dele, configurar a sensibilidade da função setMotionLevel(). Os 10 primeiros segundos são utilizados para verificar a atividade na captura e com isso gerar uma média de movimentação. Entre as linhas 9 e 12 são instruções para posicionar uma caixa de texto no palco para mostrar mensagens e entre as linhas 14 e 27 são instruções já conhecidas.

var video:Video;			//cria componente de vídeo
var webcam:Camera=Camera.getCamera();	//captura a webcam
webcam.setMotionLevel(10,1000);		//configura a sensibilidade para capturar pequenos movimentos
var segundos:int = 10;			//tempo para analisar inicialmente a atividade na captura
var somaatividade:int = 0;			//somatório da atividade no tempo inicial
var tempo1 = new Timer(1000);		//temporizador para o tempo de análise inicial
var tempo2 = new Timer(100);		//temporizador para mostrar a atividade depois da análise
var tf:TextField = new TextField();		//cria um campo de texto no palco para mostrar mensagens
tf.x = 100;
tf.y = 300;
tf.autoSize = TextFieldAutoSize.LEFT;
addChild(tf);

if (webcam!=null) {
	webcam.addEventListener(StatusEvent.STATUS, continua);
	video = new Video();
	video.attachCamera(webcam);
}

function testaAtividade(evento:ActivityEvent) {
	if (evento.activating == true) {
		trace("existe movimento com intensidade " + webcam.activityLevel);
	}
	if (evento.activating == false) {
		trace("não existe movimento");
	}
}

A função continua(), também já conhecida, foram adicionadas as linhas 32 e 33 adicionando um ouvinte ao primeiro temporizador (de 1000 milissegundos – 1 segundo) que irá chamar a função nivelAtividade() a cada segundo. Esse temporizador é utilizado para contar os 10 segundos iniciais.

function continua(event:StatusEvent):void {
	if (!webcam.muted) {
		addChild(video);
		webcam.addEventListener(ActivityEvent.ACTIVITY, testaAtividade);
		tempo1.addEventListener(TimerEvent.TIMER, nivelAtividade);
		tempo1.start();
	}
	webcam.removeEventListener(StatusEvent.STATUS, continua);
}

Na função nivelAtividade, incialmente são mostradas informações na caixa de texto do palco, somada a quantidade de atividade identificada naquele segundo e decrementado o número de segundos faltantes. Na linha 43 é comparado se o número de segundos faltantes se encerraram, parando o primeiro temporizador e consequentemente parando a chamada para a função nivelAtividade() e configurando a sensibilidade com a média da atividade (soma da atividade dividido pelo número de segundos – pois foi capturada uma atividade para cada segundo). Em seguida, é inicializado um novo temporizador que irá chamar a função mostraNivelAtividade() que irá mostrar na caixa de texto no palco, o nível de atividade capturado a cada 100 milissegundos (10 vezes por segundo).

function nivelAtividade(event:TimerEvent) {
	tf.text = "";
	tf.appendText("Segundos para começar: " + segundos + "\n");
	tf.appendText("Atividade: " + webcam.activityLevel + "\n");
	somaatividade += webcam.activityLevel;
	segundos-=1;
	if (segundos <= 0) {
		trace ("Média da atividade: " + somaatividade/ segundos + "\n");
		tempo1.stop();
		webcam.setMotionLevel(somaatividade/ segundos);
		tempo2.addEventListener(TimerEvent.TIMER, mostraNivelAtividade);
		tempo2.start();
	}
}

function mostraNivelAtividade(event:TimerEvent) {
	tf.text = "Atividade: " + webcam.activityLevel + "\n";
}

Na prática esse último código não é muito funcional já que o nível de captura pode variar muito a cada segundo em ambientes com muito ruído, mas ele pode ser adaptado para verificar uma quantidade máxima de ruído aceitável para a aplicação.

Veja também como fazer esse exemplo utilizando o Flash Builder em Detecção de movimento utilizando o Flash Builder.

2.1.1 – Detecção de movimento utilizando o Flash Builder

Nivali — Sun, 02 Jan 2011 01:25:15 +0000

Abro agora uma questão de ferramenta de desenvolvimento. Para criar aplicações Flash, a Adobe possui uma outra ferramenta que é o Flash Builder. Uma diferença importante está na questão do Flash Builder não possuir o editor gráfico dos elementos. Para criar um quadrado, no Flash basta selecionar a ferramenta de desenho de quadrado e posicionar onde se quer o quadrado e seu tamanho. No Flash Builder é preciso informar esses parâmetros via linha de código.

Trabalhar com virtualidade aumentada, onde o foco é o virtual, é sem dúvida melhor de ser feito no Flash, mas para a realidade aumentada vejo no Flash Builder uma ferramenta mais adequada já que ele facilita a codificação. Existe, era de se esperar, diferenças, mas ainda se mantem o uso do AS3.

Para mostrar as diferenças, a aplicação que detecta movimento é apresentada em Flash Builder. Ela faz exatamente a mesma coisa da versão em Flash. Para isso foi criado um projeto de AS chamado “movimento ”. O código e explicação são mostrados a seguir.

Todo projeto no FB forma um pacote. Os códigos que compõe um pacote básico são inseridos automaticamente pela ferramenta. Nas linhas de 3 até 8 são os pacotes importados necessários para a aplicação. Eles são inseridos também automaticamente enquanto codificamos, conforme forem necessários.

Na linha 10 é especificada a classe. Nela foi adicionado um extend do objeto Sprite. Isso é necessário para posteriormente inserir elementos na tela através da função addChild(). Poderíamos ter utilizado uma extensão do elementos MovieClip também. Em seguida são criadas as variáveis de acesso público para a área de vídeo e para representar a webcam. Aqui existe uma diferença que é a criação de uma área de texto. Ela se faz necessária já que no FB não poderemos utilizar o trace, então criamos uma área de texto que será mostrada na tela e nela escrevermos o que antes era mostrado no trace.

package
{
	import flash.display.Sprite;
	import flash.events.ActivityEvent;
	import flash.events.StatusEvent;
	import flash.media.Camera;
	import flash.media.Video;
	import flash.text.TextField;

	public class movimento  extends Sprite
	{
		public var video:Video;
		public var webcam:Camera=Camera.getCamera();
		public var texto:TextField = new TextField();

Em seguida é criado o método construtor da classe. Nele fazemos o teste se o usuário possui uma webcam (igual na versão em Flash), também colocamos aqui a configuração da sensibilidade da captura e especificamos a visualização e inclusão de nossa área de texto (entre as linhas 10 e 14).

public function movimento  ()
		{
			if (webcam!=null) {
				webcam.addEventListener(StatusEvent.STATUS, continua);
				video = new Video();
				video.attachCamera(webcam);

				webcam.setMotionLevel(50,1000);

				texto.text = "Iniciando...";
				texto.width = 400;
				texto.height = 50;
				texto.y = 305;
				addChild(texto);
			}
		}

As funções continua() ficou praticamente inalterada. Apenas foi definido que ela é privada e especificado o retorno como void (já que ela não retorna nada). Na função testaAtividade, uma mudança significativa é feita, onde em vez de mostrar as mensagens via trace, escrevemos na caixa de texto.

private function continua(event:StatusEvent):void {
			if (!webcam.muted) {
				addChild(video);
				webcam.addEventListener(ActivityEvent.ACTIVITY, testaAtividade);
			}
			webcam.removeEventListener(StatusEvent.STATUS, continua);
		}

		private function testaAtividade(evento:ActivityEvent):void {
			if (evento.activating == true) {
				texto.text = "existe movimento com intensidade " + webcam.activityLevel;
			}
			if (evento.activating == false) {
				texto.text = "não existe movimento";
			}
		}
	}
}

A lógica de criação das aplicações é a mesma nas duas ferramentas, sendo apenas necessários se adaptar as diferenças. No restante do livro será mostrada a codificação alternando entre o Flash e o FB.