O bilionário mercado de games em Redes Sociais

No final de 2010, segundo uma matéria da globo.com a Zynga, criadora de jogos e aplicativos para as plataformas Facebook / MySpace teve seu valor de mercado cotado maior do que a Eletronic Arts.

De um lado, a Eletronic Arts é a produtora da série Fifa Soccer, NHL, NFL, NBA, The Sims, SinCity, Medalha de Honra, Senhor dos Anéis, Need For Speedy, Nascar, Rock Band, etc…
Tem 6100 empregados, é cotada em U$5.15 bilhões segunda a Nasdaq e foi fundada em 1982.

De outro lado a Zynga cria jogos em flash ou html + javascript onde as pessoas clicam em botões escritos “Atacar gangue rival”… como Mafia Wars, FarmVille, Café World, etc
Tem 1500 empregados, é cotada em U$5.5 bilhões segunda a Nasdaq e foi fundada em 2007.

E depois de Farmville, Mafia Wars, vieram Castle Age, Pet Society, Restaurant City entre outros jogos para facebook, e já existem pesquisas dizendo que sites para facebook faturam mais do que para consoles.

O modelo de jogos free-to-play onde a pessoa joga gratuitamente e paga para ter ítens ou acessos especiais vem crescendo muito e cada vez mais se ouve falar de empresas que “liberaram o download” pra todo mundo jogar ao invés de vender o game e tiveram sua receita duplicada, triplicada, e por aí vai, como é o caso do Lotro ou ou doChampions Online, que revelou que as receitar aumentaram em 1000% depois que o jogo se tornou gratuito.

No Brasil, onde o Orkut ainda é muito forte (não sei até quando), veio o Colheita Feliz, Mini Fazenda, Joga Craque, etc. Todos free-to-play, e com muito lucro. Em fevereiro de 2011, uma estimativa da Folha de São Paulo disse que no Brasil games em Redes Sociais giram U$200 milhões ao ano.

E após o sucesso da Zynga era natural que jogos mais bem trabalhados fossem aparecer, até que hoje, foi anunciando um game novo no Brasil, chamado Milmo, 3d, funciona tanto para Facebook quanto para Orkut.

Talvez estamos vivendo uma bolha de jogos em redes sociais, talvez o mercado de games esteja mudando para sempre, mas o fato é que os jogos de facebook / orkut tem sido cases e investimentos excelentes, e a complexidade de criar um jogo desses é menor do que criar um portal ou um sistema grande.

Introdução ao <canvas> – um objeto girando

Acredito muito em <canvas> por ser uma tecnologia que já está no mercado a bastante tempo e boa parte dos browsers já aceita. O único browser que dá problema, vamos lá, adivinhem…. sim, é o Internet Explorer, nas versões  6, 7 e 8 porém eles tem o objeto deles (do famoso padrão Microsoft “me deu na telha criar isso”), chamado shape, esse objeto não é igual ao canvas, tem menos métodos, mas dá pra criar algo nele.

Mas existem frameworks, como o explorer canvas, que traduzem um código javascript que é feito em canvas, pra shape, ou seja, na teoria o Internet Explorer não é um problema pra desenvolvermos em canvas. Na teoria, já na prática alguns métodos não funcionam, como degradê radial e escrever texto em canvas também dá problemas.

copy of tidbitsMas, ainda assim, graças ao mercado de mobile e tablets que não tem suporte ainda direito a flash, o uso de canvas pra interfaces de navegação ou até mesmo jogos. No site Canvas Demos dá pra ver dezenas de aplicações em canvas que se pode se comparar muito facilmente com sites feitos em flash. Porém são mais acessíveis, muitas vezes até pro IE6.

Vamos programar um pouco:

HTML

Só adicionar no seu html

	<canvas id="canvas" width="300" height="300">
		Seu browser não suporta canvas
	</canvas>

Javascript


// função que move um objeto em circulos calculando x e y
var fx = function(centro_x, raio, incremento){ 
    return (centro_x + raio*Math.cos(incremento/20)) 
}
var fy = function(centro_y, raio, incremento){ 
    return (centro_y + raio*Math.sin(incremento/20)) 
}

// Contexto trata-se do estado objeto canvas
var contexto;

// O incremento é o que faz o objeto girar;
// se você calcular fx() com 0
// e depois calcular fx() com 1, 2, 3... etc
// a funcao retornará uma posição de X em forma de círculo
// e a mesma coisa com fy();
var incremento = 1; 

var Canvas = {
	// iniciando o objeto
	_init:function(){
		// Instanciando o contexto do canvas 
		// numa variavel global
		contexto = document.getElementById('canvas').getContext("2d");
		// aqui eu peço pra funçao que vai posicionar 
		// o canvas ser chamada a cada 30 milisegundos
		return setInterval(Canvas._preencher, 30);
	},
	_preencher:function(){
		// apagando o que tinha no canvas
		// não é possível desenhar um objeto no canvas 
		// e depois mover ele pra isso é necessário 
		// apagar o conteudo do canvas
		// e desenhar tudo novamente 

		contexto.clearRect(0,0,300,300);

		/* CRIANDO UM QUADRADO COM DEGRADÊ */
		// inicia o desenho
		contexto.beginPath();
		// cria um degradê
		var my_gradient = contexto.createLinearGradient(300, 0, 0, 300);
		// adiciona a cor de inicio
		my_gradient.addColorStop(0, '#ff5');
		// adiciona a cor final
		my_gradient.addColorStop(1, "#f60");
		// adiciona o degradê ao estilo do contexto
		contexto.fillStyle = my_gradient;
		// cria um quadrado 300x300 na posicao 0x0
		contexto.fillRect(0, 0, 300, 300);			
		// fecha o desenho
		contexto.closePath();
		
		
		// CALCULANDO X E Y DO OBJETO
		x = fx(150, 100, incremento);
		y = fy(150, 100, incremento);

		// acionando o incremento
		incremento++;		

		// o incremento não precisa ser maior 
		// do que PI * 2 * Numero de vezes 
		// que vc quer pra dar uma volta
		// assim fica mais facil e rapido pro js
		// trabalhar com 0 a 63
		// do que 0 a infinito
		if( incremento == Math.PI * 2 * 20 ) incremento = 0
		
		// CRIANDO O CIRCULO
		// redefinindo o estilo do canvas pra pretro
		contexto.fillStyle = "#000000";
		// inicia um novo desenho
		contexto.beginPath();
		//  criando o circulo
		contexto.arc(x, y, 10, 0, Math.PI * 2, true); 
		// preenchendo a cor dele
		contexto.fill();
		// fecha o desenho
		contexto.closePath();
	}
}	
// iniciando nosso js
window.onload = Canvas._init;

Resultado

E depois disso dá pra brincar, vejam outros exemplos que eu fiz, deu pra usar o explorer canvas, ou seja, é acessível pra todos os browsers, desde ie6 até iphone:

Com sombras

Estilo Vitrine

Quem se interessar, deixei todos os exemplos disponíveis pra download.

Winamp em HTML5 e Javascript

A alguns meses atrás eu fiz uma série de experimentos em HTML5, um deles foi um player de áudio simulando o bom e velho winamp.

Foto do player de winamp em HTML5 rodando no Opera

O que tem de HTML5?

Pouco, tem a tag audio, drag and drop eu comecei a fazer pra controlar o volume.

Pesa pouco, na verdade usei o jQuery, fora isso são 14kb de js.

O player aceita todos os atalhos do Winamp :

Z > Volta Música
X > Play
C > Pause
V > Stop
B > Avançar Música

-> (Seta para direita) > Avança 5 segundos
<- (Seta para esquerda) > Volta 5 segundos

Scroll do Mouse > Aumenta e diminui o volume

O player roda no Chrome 5.0+, Firefox 3.6+ (porém no Firefox, por segurança deles, só roda se tiver num servidor, não adianta tentar abrir o html), Opera 10.5+, Safari 5+.

Pra quem quiser dar uma olhada, ou contribuir com algo, deixei o player disponível para download aqui. Como tem músicas em ogg e em mp3 (por causa do Safari que não roda .ogg), são 16mb pra baixar.

Firefox 3.5 Beta 4 executa Javascript mais rápido ainda

Primeiro devo admitir, dei uma sumida, caiu o número de posts aqui, mas tá dificil conseguir tempo, ultimamente, além do trabalho, estou fazendo freela e estudando e meio sem criatividade pra postar, espero que seja breve.

No post de hoje vou falar sobre duas coisas que me ajudam muito na minha profissão, Firefox e Javascript.

Ontem ví uma notícia, que a versão 3.5 Beta 4 do Firefox (que está demorando um tantão pra ser lançada), tem um algoritmo que executa Javascript 19% mais rápido do que a versão Beta 3, esta que também já é mais rápida que a versão atual do Firefox. Isso é bom pra quem é programador de interface, e principalmente pro usuário.

Comecei a usar o Firefox em meados de 2005, achei legal porque “tinha abas”. Na época eu era programador back end, e como a maioria, pouco me importava se meus sites rodavam em outro browser ou não. De lá pra cá eu, as empresas, as agências, os clientes, os navegadores, os sites e até os usuários mudaram. Hoje temos (todos nós) o conceito de webstandards muito forte, e hoje os próprios usuários também são mais exigentes… normalmente temos diversas opções pra qualquer tipo de serviço web, então se um site não funcionou no navegador do usuário, ele não muda de navegador, muda de site… procura por outro serviço que faz a mesma coisa, é claro que não serve pra tudo (como sites de bancos, malditos).

Comecei a programar em Javascript pois detestava sites em flash, e comecei a ver que em algumas aplicações simples, dava pra fazer o mesmo efeito em Javascript.

E depois, quando “descobri” o firebug, ficou tudo mais fácil.

Mais uma vez o Firefox contribui diretamente e incentiva o uso de Firefox pra desenvolvimento de interação.

Além do mais, até nas extensões do Firefox (como GreaseMonkey e Ubiquity) é possível fazer coisas muito interessantes usando somente javascript.

Enfim, usem firefox… =)

[]s