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

Divulgando

Apesar do que pode parecer, difundir o game na Web não é assim tão complicado. Você pode colocar o seu jogo em portais como o Newgrounds (onde outros sites de games “pegam” os jogos inseridos lá, ajudando a viralizar o game). Além disso, um site popular é o Kongregate, onde publicar um jogo é fácil (há um sistema, inclusive, que paga ao desenvolvedor o valor referente ao número de views que o jogo obtém).

Um serviço específico para distribuição é o FlashGameDistribuiton, que pertence ao FlashGameLicense (este último voltado a obtenção de patrocinadores).

Nesta página do blog da Mochimedia você encontra uma lista com vários portais para publicação.

Para obter grande visibilidade, no entanto, um grande negócio é enviar o jogo para o site ArmorGames. Além de contar com o sistema de patrocínios próprio o jogo obtém larga visibilidade, uma vez que o portal é um dos mais acessados nesse quesito (games Flash). Em um dia é possível obter milhares e milhares de visualizações. Um dado contra é que nem todo o jogo entra no portal: é preciso que eles considerem o jogo muuuito bom para isso.

–x–

Fim de mais uma parte. Distribuir o game é bem simples. Muito mais difícil, no entanto, é desenvolver um jogo que atraia muita atenção (aka: game ótimo, bem desenhado e muito legal )

Abraços e até a próxima!

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.

Bem, continuando os textos falando sobre os novos planos, segue aí o link do site onde pretendo hospedar meus games: http://neoludo.net/

Nele já tem um exposto: o BluZone, um jogo de tiro (shooting) que combina um pouco de puzzle e memória (!). Está em fase de avaliação na MochiMedia e pretendo hospedar em sites maiores de games, como o Newgrounds, entre outros.

É o meu primeiro jogo, teve um propósito de estudo também, por isso, e pretendo fazer melhores e mais elaborados, claro.

Abraços!

PS: e a página no Facebook é www.facebook.com/neoludo.web

Sim, os posts estão ruins, desinteressantes, e tudo mais. Razão: não tenho tido o velho interesse em escrever que tinha antigamente (não à toa esse texto provavelmente ficará cheio de erros, inconsistências e redundâncias, devido justamente à falta de interesse). Tenho me acostumado mais a ler blogs com textos bacanas do que eu mesmo tentar produzir algo bacana.

Além do que tenho focado em outras coisas. Tenho produzido, estudado programação, lendo, e estou focado em começar um projeto novo (já abordei o assunto ano passado). Também pretendo continuar a faculdade de análise de sistemas que interrompi ano passado.

Sempre que me sobra tempo ou fico no Facebook Twitter Grooveshark etc na internet navegando ou então “desplugo”. Nem me passa na cabeça escrever aqui. Já pensei em mudar o site para um portfólio ou coisa assim, mas isso dá trabalho que a má vontade não deixa.  É dose.

Por hora, é isso.

- Como assim? Ele não quer ter uma vida comum, num emprego, fazendo como todos? Ele quer fazer o que mais gosta, é isso. Oh não…

- Exato. E deu para perceber, ele é desapegado, não gosta de bens materiais, não olha para isso, que louco.

- Já o prendemos demais, mas parece que não foi o suficiente. Vamos proibir mais, fazer a cabeça.

- Isso, isso. Já sei, vamos comparar o estilo de vida dele com os dos outros. “Olha, fulano tem e ele não, beltrano conseguiu isso e ele não consegue”, vamos fazer a cabeça dele para fazê-lo “voltar à Matrix”.

- É, deve dar certo, boa ideia. É isso mesmo… vamos apontar que ele está no caminho errado, também. Deve ajudar. Apontar que as ideias dele estão erradas, que não vai dar certo…

- OK, boooa. Vamos.

—X—

Eu desejo o melhor para você no próximo ano. Boas festas.

Este texto foi quem me inspirou a começar isso. Tenho conseguido diminuir a frequência de tuítes, atualizações e, principalmente, o acesso a redes sociais, feeds RSS, sites de notícias em geral e etc. etc.

Redes sociais, tudo bem, mas por que notícias? Radicalismo? Não. Só penso que esta ideia de que se deve estar informado a todo tempo a respeito de tudo não passa de uma grande paranoia. Afinal, saber das “notícias”, inclusive das mais irrelevantes – disfarçadas de relevantes -, não acrescenta em nada.

Enfim, é isso. Vamos ver se consigo “desplugar” das redes de uma vez.

Na última semana vimos uma enxurrada de notícias e comentários (uns relevantes, outros sem total embasamento) sobre do anúncio da Adobe em por fim ao desenvolvimento do plugin Flash para dispositivos móveis (apenas dispositivos móveis, e não no geral). Realmente, acredito que a Adobe foi sensata na decisão e deva ter seus motivos para isso. Enfim, não vou falar mais acerca disso pois há muitos posts bons que tratam sobre o futuro da plataforma – recomendo este do ASDevs, que é imparcial realista sobre este assunto.

No entanto, quero me ater nesta postagem sobre o hype em torno do HTML5. De uma hora para outra começou a se anunciar que o futuro seria esse padrão aberto, e o Flash, de repente, virou uma coisa imprestável, um lixo, “lento”, “pesado”, uma tecnologia paga (é possível desenvolver usando Flex SDK sem precisar pagar pedágio para Adobe, mas enfim…), entre outras. O Flash virou um novo IE: algo que deveria ser combatido e eliminado, para dar lugar ao futuro maravilhoso e aberto proporcionado pelo HTML5…

Pois bem. É lamentável que muitas críticas, muitas vezes infundadas, tenham ganho espaço. Mas o que se é de lamentar mesmo é que muitos só tenham se prestado a criticar a tecnologia de maneira oportunista, apenas querendo se aproveitar do momento. Cursos, livros e eventos em torno do HTML5 começaram a surgir do nada tratando o padrão como salvação para tudo, em que se pode usar ele em sua plenitude substituindo o Flash (inclusive no IE 8, né?…). Para entender como essa visão é equivocada recomendo este post do blog Mochila Binária.

Não há dúvida de que o HTML5 veio para ficar, mas o que não se pode dizer é que ele está pronto em definitivo para substituir o Flash, como muitos dizem por aí. Só fico chateado de que muitos prefiram especular e acabem difundindo informações errôneas sobre o assunto, fazendo com que muitos que não são da área de Web acabem mal informados, como usuários comuns e pessoas que desejam ter um site – aliás, o que já vem ocorrendo.

Começa o trajeto. Cliente E-mail aberto, MSN, Facebook, Twitter. Dou uma olhada rápida. No e-mail tem spam. Removido. Facebook, nada de novidades interessantes. Twitter idem. Passo o olho nas timelines. Atualizações, Trending Topics, Mentions. Fecho o Tweetdeck.

Login no Reader. Peneirando acho coisas relevantes. Resto, “marcar tudo como lido”. Comento ali, leio outro post ali. Já são quase 9h. E eu nem abri meu projeto que estava fazendo.

Lá vou eu ao Grooveshark. Lembrei de uma música. Ponho fones e ouço. Favorito. Já devem ser uma 9h30. Abri o projeto. Beleza.

Dou uma adicionadas no código. Mexo aqui, ali. Gostei. Dou uma parada e vou ao Twitter. Escrevo algumas coisas, retuíto. Abro o email. Nada de novo. Vejo uma tirinhas nova num blog. Leio os comentários. Já se vão uns 30 minutos. Tempo passando e eu não fazendo o que devia…

E 11h30, saio do computador. É hora de fazer outras coisas. Volto depois de duas horas.

E volto. Vou fazer o que deveria fazer. Mas antes, abrir e-mail, MSN, Twitter, Facebook… E lá se vai mais umas horas nisso e ouvindo música, jogando um gamezinho, conversando no Twitter, e outras coisas.

São 15h da tarde. Estou rachando a cabeça no projeto. Um velho problema que estou penando para resolver e não estou tendo sucesso. Desligo o computador. Vou no quintal pegar um coco.

Na esperança de que, quando voltar ao computador, conseguirei me concentrar no que deveria fazer.

Quando trabalhava em uma empresa conseguia ter foco. Mas mesmo assim penava um pouco perdendo a concentração na internet. Hoje, em casa, sem pressões e prazos apertados, minha concentração se esvaiu. Estou lutando para buscá-la de volta.

A internet é muito legal. Mas desconectar-se dá uma sensação de prazer indiscutível, por ser difícil de obtê-la.

Pois é, voltei a condição de desempregado, só que desta vez por opção.

Foram vários os motivos pelo qual fiz isso. O principal foi de “instalação”. Como se sabe, sou de Guarujá, e apesar de meus pais serem de São Paulo, eles não tinham uma casa para eu morar. Eu morava num quarto da casa da minha vó que, claro, não gostava totalmente disso. Eu estava incomodando. E precisava sair.

Além do mais, estava cansado de sempre fazer os mesmos trabalhos. Para quem não sabe eu trabalhava como programador Web numa agência de São Paulo, e rotineiramente cuidava sempre dos mesmos serviços (ou seja, fazer sites em Flash quase sempre da mesma maneira). Não que exista um problema nisso – pelo contrário, nada mais normal. Mas eu tenho um problema de simplesmente ficar aborrecido de fazer as mesmas coisas e ter que variar de tempos em tempos.

Tinha projetos que queria tirar do papel e, lógico, precisava de mais tempo para isso (eu perdia quase três horas indo e vindo do trabalho, além de trânsito, por exemplo).

Poderia alugar uma casa, ou um quarto numa “república” na pior das hipóteses, porém meus ganhos não justificavam isso. Eu adorava São Paulo e o ambiente de trabalho, fiz vários amigos lá, mas essas razões que citei mais a vontade de tocar a vida de maneira mais independentemente (e menos estressante) falaram mais alto.

Voltar para o Guarujá foi duro. Afinal, as pessoas sabem que eu odeio essa droga não vejo futuro aqui e sinto falta da vida que levava em Sampa, que até era simples, contudo bem mais legal do que na chuvosa Guarujá.

A fase de transição

Bem, atualmente estou dando uma refrescada na cabeça, ainda estando um pouco bobo com essas mudanças. Tenho recebido contatos de pessoas querendo fazer sites na região, mas não pretendo continuar como freelancer (pois se for assim é preferível ter um emprego). Minha ideia era lançar sites e escrever games e/ou aplicativos, hospedar na Web e conseguir ganhos com patrocínios e publicidade. Sei das dificuldades disso, o início é complicado, porém, diferentemente de antes, desta vez acredito ter foco e disciplina para começar e terminar algo.

Também pretendo continuar a faculdade de análise de sistemas (que interrompi) por aqui, além de estudar desenvolvimento de apps para mobile, mas este último fica em segundo plano.

É isso. O primeiro capítulo está escrito. Aguardem para saber dos próximos!