Desenvolvimento de Front End

Mar 2

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.

Jan 6

Ambientes 3D usando HTML5 e Javascript com Canvas

Já ouvi dezenas e dezenas de programadores de interface dizendo que Flash vai morrer com o html5, do mesmo jeito que flash ía morrer quando jQuery se tornou popular. Entretanto, a intenção da W3C, é sim tanto Flash quanto Silverlight e Unity serem “desnecessários”. Segundo eles, um browser deve ser auto-suficiente e não é correto este cenário de hoje onde precisamos de algum plugin pra ter uma funcionalidade extra no navegador. Todas as funcionalidades deveriam estar incorporadas no browser. Com o HTML5, CSS3 e Javascript V8 podemos (ou poderemos) trabalhar com áudio, vídeo, webcam, aceleração por hardware, armazenamento offline, etc… talvez esse cenário de “flash morrer” vire realidade um dia daqui uns 10 anos, quem sabe? Porém, até isso acontecer, temos que evoluir muito em Javascript, MUITO! Frameworks 3D em javascript estão começando a aparecer. E com o “apoio” da apple ao HTML5 simplesmente bloqueando o flash nos Ipads / Iphones, parece que agora é o momento ideal para o “Programador HTML” se tornar uma profissional respeitado e bem pago no Brasil, assim como já é nos Estados Unidos e na Europa, ou será que vão “botar o estágiário que faz mail marketing” pra fazer uma aplicação 3D usando o Notepad++ ?

No post de hoje, não vou falar de código, só quero mostrar parte do que temos atualmente de mais avançado em html5 / javascript. Vou mostrar alguns cases de ambientes 3D programados em javascript com o auxilio de Canvas:

3DTim

Impressiona! Feito em canvas, a aplicação permite desenhar objetos 3D e manipular tanto o objeto quanto a câmera, visualizando o objeto criado em qualquer ângulo. Além de Canvas, o case explora outras propriedades de html5 como armazenamento offline e as novas propriedade / métodos de Javascript.

Canvas 3D

Usando canvas, a aplicação mostra uma espécie de exposição de fotos em 3D e roda bem. Na minha máquina com Firefox com 20 extensões, batia em média 28 frames por segundo. No chrome 8 / IE9 batia 44 frames por segundo, navegando e andando em 3D.

Wolfenstein 3D com DOM

O primeiro foi feito por programadores do Opera, é uma simulação do Wolfenstein 3D feito com Javascript manipulando objetos em DOM e em Canvas, eles fizeram um tutorial passo a passo de como desenvolveram o jogo. O game roda bem, porém como foi feito em DOM, o processamento dele é meio pesado. Manipular tantos objetos ao mesmo tempo é complicado. Se fosse feito em canvas rodaria muito melhor, em compensação roda (lento e sem o mapa) até em IE6!

Mandatory upgrade (Parallax 3D)

Outro case no dhteumeuleu, o que mais impressiona é que foi feito em abril de 2008! Quando html5 engatinhava, já tinha gente em jobs complexos usando canvas.

Wolfenstein 3D com 1kb de Javscript

Este foi um case para o JS1K, um concurso que desafiava criar coisas mais interessantes usando apenas 1kb de js. E conseguiram fazer um ambiente 3D em Javascript. É tosco, ok, mas tem 1kb!

Canvas 3D engine

Um experimento feito com uma lib para aplicações 3D em javascript chamado Clay3D, é simples a lib e fornece diversos métodos para criar e manipular objetos de diversas formas geométricas além de permitir rotacionar a câmera em qualquer ângulo / zoom.

Se alguém lembrar de algum case do tipo que eu não mostrei, deixe comentário. =)
[]s,

Nov 10

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 tidbits Mas, 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: