Update and Draw

Componente "Text"

2013-04-24T09:17:00.001-03:00

Text é o componente que é usado para criar textos. Ele é bem simples e bem útil.

Vamos direto ao exemplo. Veja:

Para criar um texto basta apenas você criar uma entidade com o componente "Text". Clique em "Result" no jsfiddle acima e veja.

Importante: Uma entidade usada para ser um texto, deve ser apenas um texto. Não use-a para ser outras coisas também, como uma imagem. Pois não irá funcionar.

Um entidade de texto possui os seguintes métodos:

.text(String txt)
Define qual texto ela irá conter.

.textColor(String hexColor)
Define a cor do texto. Só aceita cores em hexadecimal.

.textFont(Object font)
Define as propriedades da fonte do texto. As propriedades aceitas são family, size, weigth e type. É importante saber que você sempre tem que definir a familía da fonte pelo menos 1 vez. Isso é um pequeno bug do Crafty, que futuramente será corrigido.

Para mais informações sobre o componente "Text" acessa a API do Crafty.

Qualquer dúvida post no fórum.

Até a próxima o/

Configurando spritesheets

2013-01-14T12:40:00.000-02:00

Para quem não sabe, spritesheets são aquelas imagens com várias imagens. Geralmente mostrando várias animações de um personagem. Nesse post irei explicar como usa-las no Crafty.

Como usar um sprite?

O crafty possui um componente nativo chamado Sprite. Mas ao invés dele iremos usar o método Crafty.sprite, que serve para configurar com mais facilidade o componente Sprite. Ele possui a seguinte sintaxe:

Crafty.sprite( largura , altura , endereço_da_imagem , objeto_mapa);

Os argumentos "largura" e "altura" são a largura e altura de "cada sprite". O endereço é nada mais do que aonde a imagem está. E o "objecto_mapa" é um objeto onde cada membro será o nome do sprite com uma Array com dois numeros representando o X e Y relativos do sprite na imagem. Antes que você pense que é complicado, vamos ao exemplo:

A imagem acima possui largura de 256 pixels e uma altura de 256 pixels também. Vamos agora dividir ela em vários quadradinhos de 32x32 pixels:

Notamos agora que podemos ver cada sprite em seu espaço de 32x32 pixels. Isso que está vendo é um spritesheet ou mapa de sprites. Agora vamos montar um sistema de 2 coordenadas (colunas x e linhas y), veja:

Agora com nosso sistema de coordenadas podemos facilmente localizar qualquer sprite apenas sabendo o X e Y dele. Por exemplo:
- No X0 e Y0 temos uma "poção com liquido verde".
- No X3 e Y6 temos uma "cruz vermelha".
- No X5 e Y0 temos "chave dourada".

No crafty podemos usar esse mesmo sistema para configurar nossos sprites.

Sprites no Crafty

Agora vamos usar na prática o Crafty.sprite. Veja o código:

No codigo acima montei um mapa de sprites na váriavel "mapa". Cada membro do objeto possui uma Array com dois números o X e Y de coordenas. Veja que a chave dourada ficava no X5 e Y0, então criei uma Array com os números 5 e 0. Note que a nossa imagem possuía vários sprites, mas configurei apenas 3 deles. Depois que uso o Crafty.sprite os 3 sprites escolhidos agora são "componentes" do jogo. Então para usar eles você precisa apenas adiciona-los numa entidade desejada, como fiz no código. Para visualizar o resultado do código acima, clique em RESULT no canto superior direito do JSFiddle. Assim você verá os 3 sprites que escolhi. Aconselho você clicar no "+" perto do result e modificar o mapa de sprite para tentar colocar outros sprites da imagem. Tente, é fácil!

Caso você tenha ficado com alguma dúvida, por favor fale sobre ela no fórum. Irei te ajudar com maior prazer. O tópico para esse post é:
https://groups.google.com/forum/#!topic/upanddraw/IpnkdRqZEuE

Até a próxima!

Manipulando Cenas com Crafty.scene

2012-11-24T11:10:00.001-02:00

Todo jogo é dividido em várias cenas. Pode começar a reparar de hoje em diante. Um jogo comum de video game sempre começava mostrando um monte de letrinhas na tela, depois geralmente mostrava algumas imagens que era os logos da empresas que participaram do desenvolvimento do jogo e logo em seguida vinha a tela de inicio, onde iniciávamos o jogo ou configurávamos ele. Pois bem, vou mostrar como manipular as cenas de um um jogo com o Crafty.

O que é uma Cena?

Eu admito que não sei explicar muito bem o que é uma cena. Porém posso mostrar na prática que você já viu várias cenas. Você já jogou aqueles clássicos pokemon de game boy? Provavelmente sim. No jogo, uma hora você está andando tranquilamente no mundo pokemon e derrepente, quando passa por uma graminha, a tela pisca e o jogo muda completamente, um pokemon selvagem surge ~~para te matar~~.

À esquerda o jogo no modo navegação. À direita o jogo no modo batalha. Imagens do jogo Pokemon Leaf Green.

Isso é um exemplo de mudança de cena. Trocar de cena não significa que o jogo também mudará. Em pokemon mesmo podemos notar que trocamos de mapa constantemente. Cada mapas com seus npcs e pokemons diferentes. Isso também é trocar de cena. Separar seu jogo por cenas ajuda a organiza-lo muito.

Crafty.scene

Crafty.scene é o método que trata as cenas no Crafty. Ele serve para declarar e chamar a cena. Vamos primeiro aprender como declarar uma cena. Crafty.scene quando está sendo chamado para declarar uma cena, deve receber 2 argumentos. O primeiro é o nome da cena e o segundo é uma função que será executada quando a cena for iniciada. Veja um exemplo:

Crafty.scene("FundoVermelho", function() {
Crafty.background("red");
});

No código acima foi criada uma cena chamada FundoVermelho que ao ser iniciada troca o background do jogo para a cor vermelha usando Crafty.background. Porém como eu disse, isso é apenas a declaração da cena. Para usa-la você ainda vai precisar chamar ela. Para chama-la você usa o Crafty.scene também, mas agora você chama ele apenas com 1 argumento, no caso o nome da cena. Veja:

Crafty.scene("FundoVermelho");

Quando uma cena é chamada todas as entidades com o componente "2D" que existirem no jogo serão destruídas. Geralmente quando trocamos de cena é para ir para uma outra parte do jogo, seja um menu ou algum outro mapa. E precisamos reorganizar as entidades do jogo novamente. Por isso destruímos elas. Para evitar que nós precisemos lembrar de destruir todas as entidades que não precisamos na nova cena, o Crafty faz isso para nós. Mas existem ocasiões que não precisamos destruir certas entidades. Então apenas adicione o component "Persist" (Persista, em português) nessas entidades expecíficas que queremos que não sejão destruídas.

Exemplo de Cenas: http://www.craftybuilder.com/?version=0&id=CFY5HTXZNZA0HVGY

No exemplo acima, eu crio duas cenas. Uma que troca o fundo para vermelho e outra que troca pra verde. Toda vez que a cena é mudada, novas entidades são criadas e as antigas são destruídas. Os dois botões que são usados para trocar a cena são entidades do jogo também, porém eles não são destituídos pois possuem o componente "Persist".

Obrigado por ler mais esse tutorial sobre Crafty em meu blog. Por favor, qualquer dúvida ou talvez você queira apenas comentar, venha em nosso fórum:

https://groups.google.com/d/topic/upanddraw/JP9uhXC6UA0/discussion

Até mais!

Paradigma de Entidades e Componentes

2012-11-21T11:49:00.000-02:00

A maneira que o crafty trata os objetos do jogo é um pouco diferente, pelo menos quando vi pela primeira vez achei bem diferente e muito interessante.

Introdução

Crafty usa o paradigma Sistema de Entidades e Componentes. Tudo em Crafty são entidades e essas entidades, por sua vez, podem possuir vários componentes.

Entidades

Entidades são os objetos que existe no mundo do jogo, geralmente esses objetos são visíveis e até se movem. Alguns exemplos de entidade:

um soldado;
uma granada;
um carro;
uma pedra;
uma mesa.

Entidades geralmente podem podem realizar várias ações. Por exemplo:

Mover;
Pular;
Explodir;
Voar;
Reagir com outras entidades;
Dançar.

Componentes

E os componentes? O que são? Para que servem? São importantes? ~~Isso e muito mais você verá sexta-feira, no Globo Reporter~~. Componente é o que permite uma entidade realizar várias ações. Uma entidade pode ter vários componentes, cada um dando à ela várias funcionalidades.

Imagine um componente "Movimento", ele permite que a entidade mova-se. Então todas as entidades do seu jogo que podem mover iriam ter esse componente. Já aquelas entidades que não se movem (uma árvore, por exemplo) não iriam ter esse componente.

Componentes permite que as entidades só tenha as funcionalidades que elas precisam ter.

Como isso funciona no Crafty?

No Crafty quando queremos criar uma entidade usamos o método .e(). Os argumentos desse método são os nomes dos componentes que você quer que ela tenha inicialmente. Você pode passa-los todos juntos, separados por virgula, ou separadas, como argumentos individuais. Veja:

var minhaEntidade1 = Crafty.e("Component1, Component2, Component3");
// ou
var minhaEntidade2 = Crafty.e("Component1", "Component2", "Component3");

Aqueles argumentos serão apenas os componentes que a entidade terá ao ser criada. Você pode adicionar mais outros componentes usando .addComponent() e pode remover componentes com o .removeComponente(). Remover? Sim, remover. Caso você não veja utilidade nisso, imagine uma entidade paralisada. Seria legal que entidades paralisadas não possam se mover, então apenas remova o componente "Movimento" dela. E se precisar, depois de um tempo você adiciona ele novamente.

Como crio componentes?

Agora vem a parte legal. Para criar componentes usamos o método .c(). Esse método recebe dois argumentos. O primeiro argumento é uma string que será o nome do Componente, essa string é case-sensitive, ou seja, maiúsculas e minúsculas fazem diferença. Um componente "Movimento" seria diferente de um outro componente chamado "movimento", apenas por que a primeira letra é diferente. Vamos continuar... Já o segundo argumento é um objeto com as funcionalidades que o componente adicionará à entidade. Vejamos um exemplo bem simples:

Crafty.c("MeuComponente", {
_mensagem : "Meu componente é incrível",

// o método init é sempre executado quando o componente é adicionado
init : function() {
alert("Meu Componente foi adicionado");
},

msg: function() {
alert(this._mensagem);
}
});

O componente acima está apenas escrito, ele ainda não faria nada. Na verdade nenhum componente faz nada, quem faz é a entidade. Componente apenas faz parte da entidade. Imagine que criamos uma entidade sem nenhum componente. Chega em uma parte do jogo e precisamos que ela tenha o componente "MeuComponente", esse que acabamos de criar. Então adicionamos ele na entidade. Assim que ele é adicionado aparece uma messagem na tela "Meu Componente foi adicionado", pois o método init é sempre chamado quando um componente é adicionado em uma entidade. Nossa entidade agora terá o método .msg(). Esse método faria ser mostrado na tela o conteúdo da váriavel _mensagem, que também faz parte de nossa entidade agora.

Conheça o CraftyBuilder

CraftyBuilder é um site para desenvolvimento de jogos em Crafty. Eu vou usa-lo muito daqui por diante para mostrar exemplos. A vantagem dele que ele é feito especialmente para Crafty, assim não precisamos de adicionar o script na página, pois já está lá. Para demonstrá-lo fiz um exemplo:

http://www.craftybuilder.com/?version=0&id=1DTUDS4T0APPJLIR

Nesse Exemplo apenas criei uma entidade (um quadrado), colori e mudei ela de lugar. Aconselho explorar melhor esse exemplo, dando novos valores para nossa entidade, como uma cor ou tamanho diferentes.

Finalizo aqui minha explicação sobre Entidades e Componentes. Recomendo a leitura da documentação do Crafty, juntamente com o CraftyBuilder. Teste e explore tudo que você for aprendendo. Veja também alguns jogos criados em Crafty:

http://craftyjs.com/ (no final da página)
https://groups.google.com/forum/#!topic/craftyjs/AIsnKKwQ2ow/discussion (no fórum oficial do Crafty)

Muito Obrigado por ter lido. Por favor, se não for incomodar, comente em nosso fórum:
https://groups.google.com/d/topic/upanddraw/5cG6g5EHC7U/discussion

Nosso Fórum!

2012-11-20T19:06:00.004-02:00

Nosso fórum está pronto. O que está esperando? Venha participar dele. Você só vai precisar de uma conta no Google

Venha logo pro nosso fórum: https://groups.google.com/forum/#!forum/upanddraw

Te espero lá!

Conheça o Crafty!

2012-11-17T14:04:00.001-02:00

Quer aprender a criar jogos de navegador de maneira rápida, sem precisar ficar criando códigos enormes? Conheça o Crafty, com ele você poderá fazer isso fácil fácil...

Introdução

Para quem nunca ouviu falar do Crafty. Simplesmente saiba que ele é uma biblioteca para desenvolvimento de jogos de navegador. Crafty é inteiramente em javascript e a única coisa que você precisa para usa-lo é o seu código-fonte, que pode ser encontrado nesse link.

Por que usar o Crafty?

Jogos de navegador

Crafty é usado para criar jogos de navegador. Para começar um jogo você precisar apenas ter um navegador e um conhecimento básico em html e javascript. Além dessas vantagens, perceba também que seu jogo será independente de plataforma, ou seja, para alguém jogar seu jogo só precisará de um navegador.

Leve

Crafty, comprimido, pesa apenas 100kB.

Larga Compatibilidade

Crafty funciona em todos os navegadores modernos: IE9, Firefox, Chrome, Opera.

Vários Recursos

Crafty dispõe de vários sistemas nativos:

Suporta Sprite Map.
Colisão
Gravidade
Carregador de assets

E muito mais...

Futuramente Crafty também terá suporte a Node.js, para ajudar no desenvolvimento de jogos onlines.

Por onde começar?

Para quem nunca teve contato com HTML e/ou Javascript

Comece aprendendo o básico sobre HTML.
Recomendo:

http://www.w3schools.com/html/ (em inglês)
http://pt-br.html.net/tutorials/html/ (em português)

Assim que já se sentir seguro sobre HTML, comece com o Javascript:

http://www.w3schools.com/js/ (em inglês)
http://www2.icmc.usp.br/~biblio/BIBLIOTECA/not_did/ND_072.pdf (em português)

Também é legal saber pelo menos um pouco sobre CSS: http://www.w3schools.com/css/

Para quem já entende sobre web design

Leia a documentação do Crafty: http://craftyjs.com/api/Crafty.html

Em breve começo a mostrar os conceitos básicos do Crafty aqui no blog.
Obrigado por ter lido.

Quer comentar? Visite o nosso fórum:
https://groups.google.com/forum/#!category-topic/upanddraw/tutoriais/KgFe2PO_GPw

Boas vindas!

2012-11-17T13:10:00.002-02:00

Olá galera,

Sou o Bills e pretendo publicar para vocês sobre desenvolvimento de jogos. Minha meta é que o blog "futuramente" tenha publicações sobre diversos assuntos e plataformas. Mas por enquanto meu foco será Crafty, uma biblioteca para desenvolvimento de jogos de navegador (browser games) usando javascript.
Há alguns meses atrás me interessei muito pelo novos recursos do HTML5, acabei descobrindo que não precisamos mais de java, flash ou outros recursos para produzir um jogo de navegador. Agora com apenas html e javascript podemos criar um jogo.
Sempre fui muito fã de jogos de navegador, meu primeiro contato com eles foi ao descobrir Runescape. Mas meu primeiro contato com desenvolvimento de jogos foi ao descobrir o Warcarft World Editor. Foi ele que me iniciou no mundo do Game Design e da Programação.

Bom... curtam o blog =)
Para quem é interessado, e também para quem não é, recomendo ler meu tutorial sobre o Crafty:
http://updateanddraw.blogspot.com/2012/11/conheca-o-crafty.html

Até a próxima, galera.