Posts com a tag “JavaScript”

Segunda Firefox Games Hackathon da Telefônica

Postado por Andre Alves Garzia

todo mundo

Aconteceu entre os dias 26 e 27 de Abril de 2014 a segunda Firefox OS Games Hackathon da Telefônica. Esse evento conta uma série de palestras no início do primeiro dia e então com 24 horas de competição. O mais legal deste tipo de evento não é competir pelos prêmios mas sim ter um jogo pronto ou um experimento funcionando com algumas horas de trabalho.

Assim como no ano passado a maior parte do público era composta de estudantes universitários relacionados aos diversos cursos de games oferecidos pelas universidades de São Paulo. Queria eu que o Rio de Janeiro estivesse tão bem servido de cursos assim. Tinhamos desde formados em game design à alunos do primeiro período. Apesar de contarmos com um público menor que no ano anterior, os times que estiveram lá aproveitaram bastante.

Selfie

Palestras

Empreendedorismo em Jogos Digitais no Brasil

Nesta palestra Mauricio Alegretti da Smyowl mostrou um pouco de história e passos a serem seguidos para quem deseja se tornar empreendedor no mundo dos games.

A Smyowl foi a primeira empresa Brasileira a ter jogos na lojinha do Windows 8! :-D

Desenvolvendo Jogos HTML5 com a Cocos2D

O Pedro Kayatt apresentou todo o poder do Cocos2D-HTML que é uma plataforma para desenvolvimento de jogos muito utilizada na industria. Ele apresentou os prós e contras do Cocos2D e por que ele deve ser considerado uma boa opção pelos devs.

Game Design para o Mundo Real

Nesta palestra aprendemos a teoria e a prática do bom game designer com o Alvaro Gabriele Rodrigues que é Coordenador e Professor do Curso Superior de Jogos Digitais da FATEC. Em todos os eventos desse tipo, as palestras que eu mais gosto são as de Game Design. Sempre aprendo alguma coisa nova!

Programando jogos para Firefox OS

Eo!

Essa foi a minha palestra mas eu tive uns problemas. Eu esqueci o dongle de video do mac para ligar no projetor. Então eu tive que improvisar usando um PC velho com Windows. Quem me conhece sabe que eu não sei usar Windows, fico super nervoso rsrsrs. Em vez de uma palestra expositiva foi mais uma conversa e eu demonstrei um jogo que havia sido criado duas horas antes.

O código do app pode ser visto no repositório do Github do jogo. É um daqueles clássicos joguinhos onde caem frutas do céu e você tem uma cestinha para pegar. Tocando de um lado da tela você se move para a quele lado. Eu devo terminar esse jogo e colocar no Firefox Marketplace em breve. Esse jogo foi desenvolvido utilizando a framework Phaser que é código livre e aberto e super popular no meio de gamedev.

Fruit Catcher

Jogos

Tivemos pouca gente no evento porém tivemos alguns jogos muito bacanas no final. Como eu imaginava, ferramentas de criação de jogos são a forma mais popular de construção de jogos em hackathons. A maioria dos grupos utilizou o Construct 2 e alguns construiram no braço ou utilizando frameworks como o Phaser.

Alguns jogos que eu gostei muito foram:

Mad Blast

Mad Blast

Jogo super divertido onde o objetivo é prender explosivos em prédios e explodir tudo.

Baixe Mad Blast no Firefox Marketplace.

Box It

Box It

Jogo com a arte fantástica! O objetivo é colocar os brinquedos no local correto.

Baixe Box It no Firefox Marketplace

Run Fox Run

Run Fox Run

Esse jogo é um infinite run com uma raposa. Tem como não gostar rsrsrsrs.

Campeonato de I Wanna Be The Guy: Gaiden

I wanna be the guy

Para animarmos o pessoal durante a noite fizemos um campeonato de I wanna be the guy: gaiden

Teve até prêmio rsrsrs.

Conclusão

Gente feliz

O evento contou com um público menor que o anterior e eu tive uns problemas com a minha palestra porém mesmo assim foi sensacional. Eu gosto muito de eventos tipo Hackathon pois é impressionante ver as pessoas sairem de um conceito para algo que funciona em 24 horas.

Espero que ano que vem a gente venha a fazer esse evento novamente e consiga fazer uma divulgação melhor. Ano que vem já teremos novos telefones e tablets no mercado. O mundo do Firefox OS e do HTML5 só tem a crescer e quem estiver fazendo jogos com essa tecnologia estará na vanguarda sendo capaz de entregar suas criações em todas as plataformas móveis, em SmartTVs e videogames também.

O futuro promete ser muito divertido!

Continue lendo

Referências para programação de Jogos no FirefoxOS/HTML5

Postado por Andre Alves Garzia

Esta acontecendo agora a hackathon de desenvolvimento de jogos para Firefox OS organizada pela Telefônica VIVO junto com
a Qualcomm. Voce pode assistir a hackathon ao vivo clicando nesse link.

Para facilitar a vida dos participantes do evento, estou disponibilizando alguns links aqui que são do interesse de quem
quer desenvolver jogos em HTML5 e mais especificamente para o Firefox OS.

Introdução

Os apps para Firefox OS são compostos de uma coleção de HTML5/CSS/JS que podem tanto ser hospedados no seu próprio servidor
ou empacotado. Para entender um pouco mais sobre o básico de desenvolvimento de apps para Firefox OS, olhe os seguintes links:

Se você optar por criar um jogo hosted vale a pena aprender mais sobre appcache para disponibilizar o seu jogo offline.

Para validar o seu app manifest utilize o validador neste link.

Testando seu jogo

Utilize primeiro o simulador disponível nos complementos do Firefox aqui. Esse
complemento deve ser instalado em uma versão atual do Firefox.

Para testar nos telefones, procure um de nós pelo evento.

Regulamentação do governo

O Governo Brasileiro exige que os jogos comercializados no país passem por uma classificação de faixa etária. Mais
informações sobre o processo neste link do DEJUS.
Mais especificamente, a ficha técnica de classificação indicativa para jogos eletrônicos.
O procedimento é gratuíto e em teoria fica pronto em 20 dias (aka 45 dias).

APIs interessantes para jogos

Ao contrário dos apps comuns, jogos possuem necessidades bem especificas em termos de APIs.

Canvas

Para o Firefox OS quando se
trata da construção de jogos com gráficos 2D, recomendamos a utilização da API canvas.

Entrada de dados

Além de mostrar coisas na tela do aparelho, é necessário lidar com a entrada de dados. O jeito mais comum é utilizando os
touch events que estão documentados em Touch Events na MDN.
Outra possibilidade são jogos controlados via acelerometro cuja a API esta neste artigo na MDN.
Aviso, não testei essa API no Firefox OS não.

localStorage

Para salvar dados tais como high score, achievements você pode utilizar localStorage
sendo que localStorage é uma API blocking, seu jogo vai parar de processar enquanto os dados são escritos ou lidos do
storage. Para uma melhor performance, utilize uma API assíncrona como o IndexedDB.

Existe uma biblioteca para Firefox OS que é uma versão de API semelhante ao localStorage porém é assíncrona e construida em cima
do IndexedDB, essa lib esta disponível aqui no Github.

Bibliotecas

Para jogos simples, você não precisa de nada além das APIs que já estão disponíveis no Firefox OS. Para projetos mais
ambiciosos vale a pena utilizar uma biblioteca para evitar ficar reinventando a roda. Claro que se você é uma empresa
produzindo vários jogos com uma equipe especializada você vai preferir construir sua própria biblioteca especifica para
as suas necessidades mas para as outras pessoas que estão interessadas em conhecer as bibliotecas mais famosas para a
criação de jogos com HTML5 eu vou colocar uma lista abaixo. A única biblioteca dessas que eu testei no Firefox OS e mesmo
assim testei pouco é a CreateJS (mais especificamente a EaselJS que faz parte da CreateJS).

A utilização dessas bibliotecas fica por conta e risco dos participantes, eu não testei, so fiz a lista.

Ferramentas

Existem ferramentas muito legais para criação de games.

  • Texture Packer uma ferramenta ótima para criação de spritesheets/texture atlas.
  • bfxr ferramenta para criação de efeitos sonoros pros jogos.

Conclusão

Boa Hackathon! Se precisarem de alguma coisa, procurem a gente!

Continue lendo

Mais referências para programação de Jogos no FirefoxOS/HTML5

Postado por Andre Alves Garzia

Esta acontecendo agora a segunda hackathon de desenvolvimento de jogos para Firefox OS organizada pela Telefônica VIVO.

Para facilitar a vida dos participantes do evento, estou disponibilizando alguns links aqui que são do interesse de quem
quer desenvolver jogos em HTML5 e mais especificamente para o Firefox OS.

Introdução

Os apps para Firefox OS são compostos de uma coleção de HTML5/CSS/JS que podem tanto ser hospedados no seu próprio servidor
ou empacotado. Para entender um pouco mais sobre o básico de desenvolvimento de apps para Firefox OS, olhe os seguintes links:

Se você optar por criar um jogo hosted vale a pena aprender mais sobre appcache para disponibilizar o seu jogo offline.

Para validar o seu app manifest utilize o validador neste link.

Testando seu jogo

Utilize primeiro o simulador disponível nos complementos do Firefox aqui. Esse
complemento deve ser instalado em uma versão atual do Firefox.

Para testar nos telefones, procure um de nós pelo evento.

Livro sobre criação de Apps para Firefox OS

Para saber mais sobre programação para Firefox OS você pode baixar o Guia Rápido para Desenvolvimento para FirefoxOS.

Regulamentação do governo

O Governo Brasileiro exige que os jogos comercializados no país passem por uma classificação de faixa etária. Mais
informações sobre o processo neste link do DEJUS.
Mais especificamente, a ficha técnica de classificação indicativa para jogos eletrônicos.
O procedimento é gratuíto e em teoria fica pronto em 20 dias (aka 45 dias).

O Firefox Marketplace possui um sistema integrado para calcular essa classificação de faixa etária para você. Muito mais fácil.

APIs interessantes para jogos

Ao contrário dos apps comuns, jogos possuem necessidades bem especificas em termos de APIs.

Canvas

Para o Firefox OS quando se
trata da construção de jogos com gráficos 2D, recomendamos a utilização da API canvas.

Entrada de dados

Além de mostrar coisas na tela do aparelho, é necessário lidar com a entrada de dados. O jeito mais comum é utilizando os
touch events que estão documentados em Touch Events na MDN.
Outra possibilidade são jogos controlados via acelerometro cuja a API esta neste artigo na MDN.
Aviso, não testei essa API no Firefox OS não.

localStorage

Para salvar dados tais como high score, achievements você pode utilizar localStorage
sendo que localStorage é uma API blocking, seu jogo vai parar de processar enquanto os dados são escritos ou lidos do
storage. Para uma melhor performance, utilize uma API assíncrona como o IndexedDB.

Existe uma biblioteca para Firefox OS que é uma versão de API semelhante ao localStorage porém é assíncrona e construida em cima
do IndexedDB, essa lib esta disponível aqui no Github.

Bibliotecas

Para jogos simples, você não precisa de nada além das APIs que já estão disponíveis no Firefox OS. Para projetos mais
ambiciosos vale a pena utilizar uma biblioteca para evitar ficar reinventando a roda. Claro que se você é uma empresa
produzindo vários jogos com uma equipe especializada você vai preferir construir sua própria biblioteca especifica para
as suas necessidades mas para as outras pessoas que estão interessadas em conhecer as bibliotecas mais famosas para a
criação de jogos com HTML5 eu vou colocar uma lista abaixo.

Eu recomendo utilizar a Phaser pois é open source e funciona bem.

A utilização dessas bibliotecas fica por conta e risco dos participantes, eu não testei, so fiz a lista.

  • Phaser é a framework do momento. É open source e possui muita gente contribuindo e muitos jogos feitos nela.
  • CreateJS uma coleção de bibliotecas muito completa composta por libs independentes. O demo da
    EaselJS rodou no Firefox OS.
  • Impact JS essa é uma biblioteca super completa porém é comercial, existe um livro da O’Reilly
    sobre a mesma
    que é super bacana.
  • Crafty JS
  • Pixi JS

Ferramentas

Existem ferramentas muito legais para criação de games.

  • Texture Packer uma ferramenta ótima para criação de spritesheets/texture atlas.
  • bfxr ferramenta para criação de efeitos sonoros pros jogos.

Conclusão

Boa Hackathon! Se precisarem de alguma coisa, procurem a gente!

Continue lendo

Conhecendo o novo Nitrous.IO

Postado por Andre Alves Garzia

O Nitrous.io é um novo PaaS para desenvolvimento de aplicativos web em Node, Django, Rails e Go. Ele é diferente de um
Heroku da vida pois não fornece somente o servidor mas sim um ambiente integrado online de desenvolvimento que é
especialmente útil para quem esta trabalhando com colaboradores.

O foco do Nitrous.io é ser um ambiente colaborativo de desenvolvimento web, ou seja, não é para um ambiente para o
deploy final do seu projeto, para isso continue utilizando os Linodes e Herokus. Acredito que para um projeto pequeno
desses que é utilizado pelos seus amigos ou pelo seu departamento na empresa, o deploy do nitrous.io atende sim.

Diferente da maioria dos PaaS, o Nitrous.io funciona com o conceito de pontos N2O. Cada novo usuário começa com 150
pontos N2O e pode utilizar esses pontos para montar sua máquina virtual (eles chamam de box). Como o esperado, os 150
pontos são o minímo necessário para montar um box com 384 mb de RAM e 750 GB de HD. Esses valores podem parecer modestos
mas lembrem-se, o foco é o desenvolvimento. Para aumentar os specs da sua máquina você precisa gastar mais pontos N2O e
para conseguir mais pontos você pode cumprir umas tarefas tais como tweetar e dar like no Facebook e você também tem um
link de afiliado que você pode espalhar por ai e cada pessoa que entrar no sistema via o seu link lhe da um bonus de
N2O. Por exemplo, neste artigo eu estou utilizando o meu link de afiliado, se vocês assinarem o Nitrous.io por esse
link, eu ganho uns N2O para utilizar no meu box.

Como foi dito acima, os boxes ja vem preparados para desenvolvimento com Node, Django, Rails ou Go. Como eu não entendo
nada de Django ou Rails, vou mostrar como utilizar o Nitrous.io para desenvolvimento com node mesmo visto que meu
conhecimento de Go ainda é bem básico (Go é lindo).

Quem quiser acompanhar o artigo pode se registrar no Nitrous.IO com
esse link aqui Nitrous.io.

Vamos ao primeiro passo agora, a criação do box…

Criação do ambiente de desenvolvimento

Criação de novo box

Vamos começar criando um novo box para desenvolvimento de apps com Node.js

Novo box para Node JS

Podemos escolher a região onde nosso servidor vai ficar e aumentar as especificações do mesmo utilizando os nossos
pontos N2O extras. Eu tenho 15 pontos extras nesse shot pois fiz o tweet e o like. Após clicar para criar o box, vamos
para a tela mais bonita de criação de servidor que eu ja vi. Resolvi postar um shot so para mostrar o cuidado que eles
tiveram.

Criando o novo servidor

Quando o medidor completar, vamos para a IDE web de desenvolvimento

Desenvolvendo com o Nitrous.IO

O ambiente de desenvolvimento do Nitrous.io é muito bacana. Possui um terminal de verdade, um editor colaborativo, um
chat para os colaboradores e uma arvore de arquivos.

IDE do Nitrous.io

Nesse exemplo, em vez de construir um app do zero, estou utilizando o terminal para clonar um repositório do git. Após
mais umas mudanças nesse código fonte (que eu não tocava a eras, foi feito para uma Hackathon) estou pronto para rodar o
app. O Nitrous.IO, podemos iniciar o app com o comando:

node app.js --boundHost 0.0.0.0

Como visto em http://help.nitrous.io/preview/. Depois no menu preview podemos selecionar a porta que estamos rodando
e o app abre em outra janela. Abaixo posto mais um shot do ambiente de desenvolvimento para vocês terem idéia de como ele
se parece depois de um pouquinho de dev.

Web IDE rodando no Nitrous.ioWeb IDE rodando no Nitrous.io

O app esta rodando em outra aba tranquilamente porém se fecharmos a Web IDE, o app fecha também. O jeito de não ter esse
tipo de inconveniência é utilizando algo como o forever ou o PM2. Eu pessoalmente acho o PM2 mais interessante e
é esse que eu vou utilizar. Quem quiser saber mais sobre o PM2 pode seguir este link aqui: Goodbye Forever, Hello PM2.
O PM2 faz clustering, monitoramento e agregamento de logs sozinho. Vale muito a pena conhecer. Para ligar o meu app com
o PM2, eu utilizo:

pm2 start app.js -i max

Caso o server tivesse mais de um core, o -i max faria o clustering de acordo com o número de cores, no caso do Nitrous.io
é um só mesmo. Outros comandos legais são o pm2 monit para monitorar o uso de recursos como um HTOP e o pm2 logs para
ver os logs agregados. No shot abaixo eu mostro os dois rodando na Web IDE do Nitrous.io com o terminal maximizado.

O PM2 é tudo de bomO PM2 é tudo de bom

Agora com o app rodando via PM2, eu posso fechar a Web IDE sem medo e meu app continuará rodando sem problemas.

Conclusão

O Nitrous.io surge como uma alternativa muito interessante para desenvolvimento colaborativo. É uma ótima opção para quem
utiliza Chromebooks ou tablets e quer desenvolver on the go (com auxílio de um teclado óbvio). O mecanismo de pontos
N2O é uma novidade legal e adiciona uma maneira legal de utilizar somente os recursos que você precisa.

Eu não testei o desenvolvimento em Go, Rails e Django mas eu imagino que seja igualmente fácil. Quem quiser testar o
Nitrous.io basta se registrar la gratuítamente. Se você for fazer isso, considere utilizar o meu link afiliado aqui
pois assim eu ganho mais uns pontinhos para brincar.

Lembrando sempre que o Nitrous.io é focado em desenvolvimento e testes de web apps. Quando seu app estiver pronto, é mais
prudente fazer o deploy em um Heroku ou outro PaaS ou VPS da vida.

Continue lendo

Firefox 5 lançado – Baixe agora!!

Postado por Rodrigo Padula

A Mozilla, organização global sem fins lucrativos dedicada a tornar a web melhor, lançou hoje a nova versão do Mozilla Firefox para Windows, Mac, Linux (http://www.mozilla.com/firefox/new/) e Android ( https://market.android.com/details?id=org.mozilla.firefox). A nova versão do Firefox vem na trilha da grandiosa versão 4 do navegador, a qual teve mais de 200 milhões de downloads para Windows, [...] Continue lendo

Processing.js

Postado por felipe

Oh, this was a long night! As I was about to go to sleep yesterday, I was just checking my blogroll on Bloglines the last time, when I saw John Resig‘s brand new blog post, announcing that he had ported the wonderful Processing.org to JavaScript. This is absolutely great news. Some time ago I read [...] Continue lendo