O truque é simples: basta adicionar um listener de clique ao elemento Canvas, e, baseando-se nas coordenadas X e Y do clique, buscar se os valores estão “dentro” de um desenho, aferindo através dos valores da posição (X e Y do desenho) e sua largura. Se não quiser acompanhar o texto, você pode ir até o final do post, que lá há link com o arquivo HTML para download contendo o código comentado.

Primeiro, adiciona-se o elemento com o atributo id:

<!-- cabeçalho do arquivo html ocultado-->

<canvas id="canvas-element" width="350" height="300" style="border: solid 1px; cursor: pointer;">
</canvas>

<!-- onde vai o Script JS -->

No exemplo abaixo, para facilitar, criei uma “classe”** no Javascript chamada Rectangle, que vai encapsular toda a tarefa de armazenar esses valores e desenhar um retângulo vermelho.

function Rectangle(x,y,width,height)
{
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;

    // responsável por desenhar o retângulo
    this.draw = function(ctx)
    {
        ctx.rect(this.x, this.y, this.width, this.height);
        ctx.fillStyle = "#F00";
        ctx.fill();
        ctx.stroke();
    }
}

Em seguida, criamos objetos que irão desenhar o retângulo, e adicionamos o listener para o momento do clique (mais precisamente, um evento “mousedown”). Ele chamará a função que irá verificar se o clique foi sobre o retângulo:

var r = new Rectangle(20, 50, 150, 100);
var el = document.getElementById("canvas-element");
var ctx = el.getContext("2d");

r.draw(ctx);

el.addEventListener("mousedown", onMouseClick);

// event listener
function onMouseClick(evt)
{
    // o valor do X e Y do mouse no momento do clique
    var mouseX = evt.offsetX;
    var mouseY = evt.offsetY;

    // valor booleano de retorno
    var was_clicked = detectTarget(mouseX, mouseY);

    // se "true", exibe a mensagem
    if (was_clicked)
        alert("Clicou no retângulo!");
}

Depois de adicionar o listener para o clique no elemento Canvas em questão, ele chamará um método (no caso, detectTarget) que irá descobrir se a posição do mouse no instante do clique foi dentro do tal retângulo vermelho. Quando o retângulo for clicado, será exibida uma mensagem. O código Javascript correspondente:

function detectTarget(mouseX, mouseY)
{
    /*
    outros objetos booleanos.
    No caso do horizontal, se a posição X do clique for maior ou igual
    ao X do retângulo, e também menor ou igual à sua posição X mais a largura,
    é porque o clique foi dentro do retângulo. O mesmo procedimento
    é adotado no limite vertical.
    */
    var horizontal_limit = mouseX >= r.x && mouseX <= (r.x + r.width);
    var vertical_limit = mouseY >= r.y && mouseY <= (r.y + r.height);

    /*
    se o clique for dentro do espaço que compreende o retângulo
    tanto na horizontal quanto na vertical, retorna verdadeiro
    */
    if (horizontal_limit && vertical_limit)
        return true;
    else
        return false;
}

Aqui segue o resultado final:

Clique aqui para fazer o download.

Estava com dúvida de como implementar de forma esse esquema de interação no Canvas e por isso resolvi criar esse exemplo e publicar aqui. Pode-se ver que o código não está aquelas maravilhas pelo simples motivo de rapidez e de tentar deixar bem claro como funciona – afinal, uma solução completa seria criar classes, mais métodos e atributos, entre outros. Enfim, é isso!

* É verdade, já falei de SVG por aqui, mas ao contrário do que muitos dizem SVG não pertence ao arco do HTML 5 – é um padrão diferente.

** Não existe, na realidade, classes em Javascript, com suporte a herança, interfaces, etc. A Orientação a Objetos é tratada de maneira diferente, com base em protótipos. No entanto, é possível “imitar” classes através de function, como foi o caso. Para saber mais, ver: https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript

Pretendo fazer uma série de posts, pois colocar todo o conteúdo numa só postagem além de excessivo fica maçante. Vou começar discutindo sobre a ideia do jogo – onde me sinto mais à vontade, por ter formação em publicidade também.

O conceito

Penso que para criar um jogo, se você é programador, é, primeiro, definir BEM o que será o jogo. É péssimo ter um estalo (o tal do insight – detesto esse termo) e querer sair programando. Aí corre-se o risco de se desiludir com a tal ideia até então genial e ficar frustado, ou então tentar adaptar uma nova ideia ao código já feito – o que tornará o código uma maçaroca e de infindáveis dores de cabeça.

Sendo assim, é interessante conversar. Apresente e pergunte às pessoas sobre a ideia. Elas podem colaborar ou advertir sobre o conceito, erros e acertos. Existe aquela máxima do Steve Jobs sobre inovação, em que se Henry Ford perguntasse aos clientes o que eles queriam, eles diriam “um cavalo mais rápido”. No entanto, se você não tem a intenção de fazer games de vanguarda ( ) seria interessante, também, fazer uma versão alpha/beta do jogo para demonstração da ideia, e assim esperar o feedback, como fizeram, de maneira extremamente bem-sucedida, os criadores do Minecraft.

No caso de games casuais e sociais em Flash um lugar bom para isso é o site americano Newgrouds. É um portal que nasceu como fanzine e reúne pessoal que faz música (muitas vezes disponibilizando elas para uso em games de maneira gratuita), ilustrações e, principalmente, games e animações em Flash. É nele também em que muitos outros portais pegam novos jogos, ajudando na distribuição.

Entre outros sites para isso temos os fóruns do Kongregate, do ArmorGames, ambos em inglês, e do PDJ (este, nacional). Pessoalmente, prefiro ir em fóruns estrangeiros, pois o feedback tende a ser mais rápido.

–X–

Enfim, é isso, sem muitas delongas. Espero ter ajudado e, ah, não percam às próximas partes. Antes de mais nada, se quiser mais sobre assunto:

• “Lançamento do Minecraft e Alphafunding“, do blog Abrindo o Jogo.

Ver também: Parte 2 da série.

Algumas bibliotecas oferecem esse recurso, como o CASALib. No entanto basta um código simples para isso. A seguir, segue um exemplo em que são mostradas num campo de texto as teclas que estão sendo pressionadas num momento. No campo de texto será exibido os valores keyCode (a representação da tecla em número da tabela ASCII) das teclas.

// campo de texto informativo
var output:TextField = new TextField();

// as teclas pressionadas
var arr_teclas:Array = new Array();

// listeners que detectarão o pressionamento de teclas
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDown);
stage.addEventListener(KeyboardEvent.KEY_UP, keyUp);

// tamanho do texto e adicionando ao stage
output.text = "Teclas pressionadas: ";
output.scaleY = output.scaleX = 2;
output.width = 300;
addChild(output);

function keyDown(evt:KeyboardEvent):void {
	/* se não houver nenhuma tecla na array que
	 * corresponda à tecla pressionada,
	 * adiciona a atual à array */

	if (arr_teclas.indexOf(evt.keyCode) < 0) {
		arr_teclas.push(evt.keyCode);
	}

	// exibe as teclas pressionadas atualmente
	output.text = "Teclas pressionadas: " + arr_teclas.join();
}

function keyUp(evt:KeyboardEvent):void {
	/* Se a tecla deixou de ser pressionada,
	 * busca ela na array e a remove */

	if (arr_teclas.indexOf(evt.keyCode) >= 0) {
		arr_teclas = arr_teclas.splice(0, arr_teclas.indexOf(evt.keyCode));
	}

	// exibe as teclas pressionadas atualmente
	output.text = "Teclas pressionadas: " + arr_teclas.join();
}

Veja o resultado a seguir, pressionando teclas (dê foco ao SWF clicando no quadro abaixo):

No entanto, até que não é muito complicado criar efeitos simples usando bibliotecas como a TweenMax. Com uma quantidade enxuta de linhas é possível fazer efeitos interessantes.

A seguir, posto um exemplo bem simples, mas que serve para ilustrar que usar métodos e métodos para controle de tempo e criação de efeitos são desnecessários usando TweenMax:

package
{
	import flash.display.*;
	import flash.events.*;
	import com.greensock.*; 

	/**
	 * ...
	 * @author Francisco Prado
	 */
	public class Main extends MovieClip
	{
		private var volume:int = 0;
		private var particulas:Array = new Array();

		public function Main():void
		{
			// inicia (ou desenha mais) "partículas"
			desenharParticula();
		}

		private function desenharParticula():void {
			var mc:MovieClip = new MovieClip();
			mc.graphics.beginFill(Math.round(Math.random()*0x6666ff));
			mc.graphics.drawCircle(0, 0, 5);
			mc.graphics.endFill();

			mc.x = 200;
			mc.y = 300;

			addChild(mc);

			// fazendo as "partículas" subirem e desaparecerem
			TweenMax.to(mc, Math.random() + 1,
			{ bezier: [
			{ x: mc.x, y: mc.y },
			{ x: (Math.random() * 50) + mc.x, y: 250 },
			{ x: (Math.random() * -50) + mc.x, y: 180 },
			{ x: mc.x, y: 80 }],
			orientToBezier:true, blurFilter: { blurX: 10, blurY: 10 }, alpha: 0, motionBlur:true,
			onComplete: function removendo():void {
					removeChild(mc);
					mc = null;
				}
			});

			// chama o método para adicionar novas partículas à cena
			TweenMax.to(this, 0, { delay: 0.05, onComplete: desenharParticula } );
		}
	}
}

O código fará o efeito seguinte:

A ideia aqui não é mostrar necessariamente como fazer um sistema bonitinho de particulas, mas sim demonstrar que com uma linha do TweenMax é possível fazer um método para tempo e efeitos de cores e luz.

Usando ActionScript “puro” seria necessário apelar para uma variável Timer, uma outra linha para iniciar a contagem e uma função para manipular eventos no AS (TimerEvent).

Já com uma linha (no caso, a 48 do exemplo anterior) do TweenMax é possível fazer uma contagem (usando a propriedade de atraso delay) é possível fazer todas as coisas: o tempo e a chamada da função (no atributo onComplete é chamado o método que adicionará mais partículas).

A mesma situação na linha que fazem as partículas subirem e sumirem. Com o parâmetro bezier da TweenMax é possível fazer animações em curvas. Você pode conhecer mais efeitos testando nesta página, na seção Plugins.

Enfim, com um punhado de linhas é possível fazer efeitos bem interessantes, dispensando assim volumosos códigos chatos para caramba.

Acredito que, em se trantando de Flash – largamente utilizado na publicidade -, quanto menos linhas de código melhor, pois os prazos nem sempre são generosos (geralmente tudo é “pra ontem” ) e eficiência é sempre fundamental.

A maioria funciona de modos parecidos: basta você adicionar uma área de texto em HTML (<textarea></textarea>), ligar o arquivo JavaScript da biblioteca – podendo definir algumas características – e pronto.

Via Google são fáceis de encontrar, mas aqui vou aproveitar para falar a respeito de dois deles com quem já lidei: o TinyMCE e o NicEdit.

TinyMCE – provavelmente o mais popular, utilizado inclusive pelo WordPress, Joomla, entre outros. Talvez seja o que conheça melhor, não por ter usado em algum trabalho, mas por curiosidade (fucei sua documentação e experimentei criar plugin, entre outros). Gostei muito: bem completo, integrado com jQuery (permite usar código desta biblioteca sem grande conflito), fácil de usar, boa documentação, entre outros.

CKEditor – nunca usei, mas parece ser tão bom quanto o TinyMCE. A barra de ferramentas é bem completa, a interface é linda, além de já vir com versão em português. Só tenho dúvidas com relação à documentação: procurei e não encontrei. Além de tudo, ao que parece, vários recursos são pagos (?). Enfim, vale ficar de olho.

NicEdit – já usei este, na seção de comentários deste blog, até um tempo atrás. Retirei ele por “comer” as quebras de linha (as tags <br /> – o texto do comentarista ficava todo colado). Acho-o muito limitado, mas talvez seja o mais simples de se integrar. Para quem não quer lidar com muito código, talvez seja a melhor solução.

Enfim, acredito que podemos resumir assim: caso queira um editor completo e precise personalizá-lo, o TinyMCE é para você. Se você quer um editor bonitão, vá de CKEditor. Agora, se você não entende muito de Javascript nem de HTML, experimente o NicEdit.

E este é o fim da postagem. E caso queira sair, aperte o botão de “Fechar” do seu navegador!

Por isso muitas vezes o jeito é se utilizar de ferramentas e recursos “pré-fabricados”. Não costumo usar o Photoshop para criação de layouts (para isso prefiro o Adobe Fireworks), mas como há muitos brushes (tipos de pincéis) disponíveis na Web para download, uso para criação de algumas partes, como efeitos de plano de fundo.

Deixo então nesta postagem uma seleção de links bacanas dos inúmeros que tenho favoritado no meu Delicious.

Brushes de aquarela – quer criar um efeito rápido de pintura? Aí estão 20 brushes ótimos para isso.

40 brushes estilo grunge (“sujo”) – uma postagem com um pacotão de brushes para criação de efeitos bem punks, em diversos estilos. Recomendo.

20 brushes para efeitos de tinta espirrada – outra boa série. Lembra muito a série de brushes do link anterior.

350 efeitos de mancha – também segue a mesma linha.

24 tutoriais para criação de brushes de Photoshop – aí segue uma coleção de tutoriais para você criar seus próprios pincéis.

50 brushes com efeitos de luz/estrela – talvez seja mais fácil usar o efeito de luz nativo do Photoshop para isso. Mas caso queira uma coisa diferente, segue aí um pacote.

Confesso que não testei todos os links que passei aqui. Mas os que baixei funcionaram bem. Para instalar os brushes basta você copiar o arquivo do download (deverá ser um arquivo com extensão .abr) para a pasta Presets>>Brushes da sua instalação do Adobe Photoshop (exemplo: “C:/Arquivos de programas/Adobe/Adobe Photoshop CS4/Presets/Brushes”), daí é iniciar o programa e correr para o abraço.

Linkando a biblioteca a um arquivo ela substituirá a parte em SVG (que é suportada pelos outros navegadores populares, como Firefox, Chrome e Opera) por um arquivo em Flash, que irá exibir praticamente a mesma coisa. Em outras palavras: se a biblioteca reconhecer que o navegador suporta SVG, ela não fará nada, apenas deixa o SVG ser exibido normalmente; se ele perceber que é o IE 8 e anteriores (que não suportam SVG) que o usuário está usando ele irá substituir por um arquivo em Flash que exibirá o arquivo SVG, com todos as suas configurações, como animação e interatividade.

Testei alguns exemplos e achei bem interessante. Ainda não testei na minha máquina, e sim apenas os exemplos fornecidos no site do projeto, e cumpriu bem a tarefa.

Trata-se de uma solução interessante. O iPad, por exemplo, suporta SVG, mas não animações em Flash; já o IE é o contrário. Usando essa biblioteca podemos programar apenas uma vez (SVG com JavaScript) e rodar em qualquer navegador.

Fica a dica.

Utilizar este plugin, em detrimento de uma biblioteca mais específica, pode ser útil quando se está habituado a usar jQuery. No site oficial do projeto jQuery SVG você encontra diversos exemplos úteis.

Existe a documentação da biblioteca, no site, onde você encontra, bem organizadamente, métodos e atributos para utilizar a biblioteca.

Experimentei um pouco a biblioteca. Para testes, você deve baixar os arquivos Javascript específicos e direcionar corretamente a localização nas pastas de acordo com o seu computador. A seguir, um exemplo, em que baixei do site e modifiquei, adicionando um retângulo que responde aos cliques do mouse (repare nos parâmetros – entre chaves – a chamada do método alert).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery SVG - o Básico</title>
<style type="text/css">
@import "css/jquery.svg.css";

#svgbasics { width: 400px; height: 300px; border: 1px solid #484; }
</style>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.svg.js"></script>
<script type="text/javascript">
 $(function() {
 // Ao ser carregado, chamará a função draw...
 $('#svgbasics').svg({onLoad: draw});
 });

 function draw (svg) {
 // Desenhando um círculo...
 svg.circle(75, 75, 50, {fill: 'none', stroke: 'red', 'stroke-width': 3});

 // Criando um grupo com duas linhas...
 var g = svg.group({stroke: 'black', 'stroke-width': 2});
 svg.line(g, 15, 75, 135, 75);
 svg.line(g, 75, 15, 75, 135);

 // Desenhando um retângulo que, quando clicado, chama o método alert
 svg.rect(g, 150, 100, 200, 100, 10, 10,
 {fill: 'yellow', stroke: 'navy', strokeWidth: 5, onclick:"alert('Você clicou!')"});
 }

</script>
</head>
<body>
 <h1>jQuery SVG - O Básico</h1>
 <p>Página de exemplo</p>
 <div id="svgbasics"></div>
</body>
</html>

A biblioteca AS3 SVG Renderer suporta boa parte dos recursos oferecidos pela linguagem SVG. Criada por um brasileiro (veja o blog), ela ainda não suporta o carregamento de arquivos de imagem (como JPEG, PNG, etc., um recurso disponível no SVG), o que não chega a atrapalhar em nada (haja vista que é possível carregar Bitmaps usando classes nativas do ActionScript). Muitos outros recursos estão disponíveis (desenhos de formas, linhas, transformações como rotação e inclinação, entre outros).

O uso da biblioteca é muito simples: basta carregar o arquivo como se fosse um XML, usando o package do ActionScript. O programa Adobe Flash torna-se dispensável.

O exemplo a seguir carrega e exibe um SVG carregado a partir de uma URL qualquer.

[actionscript3]
package
{
import flash.display.MovieClip;
import flash.display.Sprite;

// A biblioteca AS3 SVG RENDERER
import com.lorentz.SVG.*;

import flash.events.Event;

import flash.net.URLLoader;
import flash.net.URLRequest;

/**
* …
* @author FRANCISCO PRADO
*/
public class Main extends Sprite
{
public var mc:MovieClip = new MovieClip();

public function Main() {
// Carregador da figura
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onComplete);

// Iniciando o carregamento
loader.load(new URLRequest("URL do arquivo.svg"));

addChild(mc);
}

public function onComplete(evt:Event):void {
var shp:Sprite;
var svg:XML = new XML(evt.target.data);

// Renderizará o arquivo SVG
shp = new SVGRenderer(svg);

// Adiciona ao movieclip
mc.addChild(shp);
}
}
}
[/actionscript3]

Para usar esta biblioteca, é necessário que você baixe o arquivo Javascript no site oficial do projeto. Há um plugin para esta biblioteca destinado à geração de gráficos. A documentação é bem direta e completa, o que facilita muito o aprendizado, contendo a explicação dos seus métodos.

Veja o exemplo a seguir. Repare que o arquivo Javascript de Raphaël está no mesmo local do arquivo HTML e que não usamos nada de HTML e CSS na geração dos gráficos – apesar do SVG permitir formatação via folha de estilos.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Raphaël - Modo de usar</title>
    <script src="raphael.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        window.onload = function () {
			// Cria um painel do tamanho 800x600, na posição x=50 e y=50
			var paper = Raphael(50, 50, 800, 600);

			// Círculo na posição x=50, y=40 e com 10 de raio
			var circle = paper.circle(50, 40, 10);
			// Define o preenchimento do círculo em vermelho
			circle.attr("fill", "#f00");

			// Define a linha de contorno como branca
			circle.attr("stroke", "#fff");

			// -------------------------

			// Criação de um retângulo
			var rectangle = paper.rect(100,50,100,100,0);

			// Definindo vários atributos de uma só vez
			rectangle.attr({
				"fill": "#00f",
				"stroke": "#0f0"
			});

			// Rotacioando o objeto
			rectangle.rotate(45);

	};
    </script>
</head>
<body>

</body>
</html>

Este código irá gerar um painel SVG (paper), criará um círculo vermelho (circle) e um retângulo azul rotacionado em 45 graus (rectangle).

Resultado do exemplo.

Espero ter ajudado. Até a próxima!