Colorindo console - Stress dá nisso

Em um estado de stress meu cérebro travou, concordo que eu deveria me afastar da máquina, mas como não consigo fiquei jogando Assassins Creed, até matar todo mundo da cidade, e me distrai com coisas totalmente inúteis pra não esquecer que programação é divertida.

Basicamente peguei alguns informativos em blogs e artigos sobre as cores em console. Mais uma vez deu vontade de matar a "anta" que projetou a WinAPI.

Usando o GIMP você pode pegar qualquer imagem em torno de 78x20 pixels e converte-la em algo para aparecer no console.

Tutorial
  1. Primeiro instale a palete com as cores de console no GIMP. Tem um tutorial aqui para você fazer isso.
  2. Pegue a imagem no GIMP, imagem/modo/cores indexadas e selecione esta palete (download).

  3. Feito isso vá em  imagem/modo/rgb isso volta ao padrão RGB necessário para salvar o HTML.
  4. Agora vá em salvar como e salve com a extensão HTML.

  5. Abra o arquivo no bloco-de-notas e vá no topo de tudo, antes do HTML você vai colar este script que vai converter a tabela gerada no GIMP em código multi-plataforma.
  6. Abra o arquivo no navegador, ele irá gerar código C/C++,  um array de const char para o Linux e um array de int pro Windows.
  7. Em seguida abra a IDE de programação C++
  8. Crie um novo projeto do tipo console
  9. Copie e cole este arquivo download.
  10. Basta você substituir as linhas 25 e 50 com as linhas geradas para Linux ou Windows.
Enjoy ^_~

O poder da insônia - Danos na Armadura


Natal meus gatos brincando no lado os cachorros com um papo chato e sem a mínima vontade de tentar lembrar como funciona essa tal de televisão.

Duas horas de desenho no MyPaint e umas linhas no Flex e rascunhei a primeira ideia doida que me veio na mente.

Ao receber dano um conjunto de texturas deve dar conta de deixar a aparência da personagem bem detonada no melhor estilo anime.

Tenho que dar um outro nome para a caracteristica de "vida" da armadura/roupa para não ficar muito idêntico aos RPGs mais conhecidos. Infelizmente não tem como não seguir a mesma ideia que eles seguem, é tudo baseado na realidade.

Mas uma coisa o meu sistema tem que os outros não tem:
Ao diminuir o poder da armadura o carisma da personagem aumenta em bónus XP

Estudo de dados em HTML5

Normatizando a estrutura de dados para o sistema de atualização.

Para quem chegou agora, este é um blog de projeto, ele contém relatórios sobre o desenvolvimento do jogo bem como os estudos dos personagens e tecnologias envolvidas.e a documentação em sí, como é o caso agora.

Sim eu sei, nem tem demo, mas quando tiver ele já vai estar preparado para ser "legal". Na verdade fiz isso por estudo e para distrair a cabeça.

As Informações
São preciso apenas 3 dados para se ter uma informação de update: o endereço, a data e o tamanho do download.
Lógico acrescentamos a descrição, assim temos 4 dados passando uma informação concreta.

Como passar as informações?
A forma mais comum de dados na web é o HTML.
O problema é como passar as informações junto com a página HTML.

Resolver foi muito mais complicado doque achei de inicio, mas deu para manter o padrão webstandard.

Um usuário comum estaria satisfeito com isso como sua página de downloads:
Isto não esta errado já que o a HTML também se destina a usuário final e foi criada com a finalidade principal de passar infomação e ser fácil de usar mesmo sem grandes conhecimentos  (sim padawan a web não é criação exclusiva de empresas e designers).


Mas se perde muitos dos recursos valiosos como facilidade de ser encontrado em buscadores (Google), boa aparência nos navegadores e esteticamente não fica grande coisa mesmo para quem não vê o código.

Então quando se fala em padrão webstandards nós praticamente nos limitamos ao uso profissional, e como este é o meu caso vou partilhar com vocês o sofrimento:


O código ficou assim:
Veja o código na integra no pastebim

Este é o conteúdo do widget.
Com um mínimo de esforço uma pessoa que não conhece HTML já deve ter começado a entender o código. A marcação HTML5 deixa o significado das tags mais simples, mas vamos começar a explicar a estrutura por traz da simplicidade passo a passo.


O STYLE como você percebeu é onde fica todo nossa definição de visual, cor e tipo de letra por exemplo. Aqui esta esta uma área separada, o STYLE é onde se agrega o CSS, uma linguagem de configuração separada da HTML. Também chamada de folha de estilo.
Antigamente a formatação era incluída junto da HTML, mas isso dava um trabalho absurdo para manutenção das páginas então se criou uma segunda linguagem.
Aos que estão acostumados com HTML notem que há um atributo a mais na tag STYLE SCOPED. Isto isola o estilo dentro da tag pai, no caso ASIDE.
Evitaria usar tanto a repetição de #CabecalhoDeAtualizacaoWWP mas preferi manter uma compatibilidade com a HTML4.
Aqui também eu poderia comprimir a imagem de fundo em um formato textual e inseri-la no código sem precisar carregar a imagem separado!

HEADER é uma seção de cabeçalho, aqui indico informações relevantes sobre a peça.
Escolhi que ele passaria o título e a descrição da atualização, tudo ficando bem avista para o usuário.
Aproveitei-me da tag TIME que pode inserir datas dentro do texto. Obviamente não existe nenhuma informação visual além do texto, esta tag apenas serve para um mecanismo de busca ou indexação ter uma referência.
Os espertos notaram umas tags de META, a rigor uma tag dessas deve ser introduzida no cabeçalho da pagina principal e não num elemento. Mas ficou omisso o caso dos widgets na descrição oficial, o próprio www.data-vocabulary.org apenas traz uma indicação de usar estes dados no texto bruto do documento. Então esses metadados estão fora do padrão e aparecem aqui apenas para mostrar algumas coisas que eu acho que tem "pano pra manga" no padrão web.

Em seguida o link de download num paragrafo normal P. Exencial, pode parecer redundância de dados com o widget na mesma pagina do projeto, mas a proposta é uma unidade independente.

DETAILS esta tag provém detalhes para a página principal ou de elementos desta. No caso serão passados nossos detalhes de update.
Inseri um par de comentários, antes e depois de details para facilitar a identificação da área dentro do código HTML.
Os comentários na HTML tem a exata função de delimitar áreas de código com algum comentário que facilite sua identificação para o scripter e no caso para meu interpretador em C++.

ADDRESS como o nome diz, meus dados de contato.
Não há uma obrigatoriedade de dados físicos, até porque na verdade GEOTAGS são inseridas usando METADADOS, os mesmos que como citado acima não podem ser incluídos fora do cabeçalho da página principal.


Os dados de atualização em si
Escolhi demarcar os dados dentro da tag
, inicialmente pensei em mandar os dados em forma de seção CDATA, assim eu passaria um XML simples, que é muito mais simples de ser analisado, mas a HTML5 tem uma série a mais de tags que facilitou meu trabalho.


A HTML prove 2 tags que comportão esses dados: A e TIME sendo que A já guarda o endereço inplicitamente em forma de parâmetro.

Eu devo passar uma lista com as ultimas atualizações válidas, inclusive para o jogador fazer um downgrade. Então os dados serão passados em dentro da estrutura UL.

Na tag A além do atributo href usei também um atributo personalizado conforme descrito aqui para passar o tamanho do download.

Nota: Toda a definição de TAGs descrita aqui pode ser encontrada neste endereço http://www.w3.org/TR/html5/

O Visual
Aqui deixamos as informações definidas acima com uma aparência  mais humana.
Escolhi o background uma imagem que irá ter o tema de RPG como convém ao jogo.
Dai bastou manter um pequeno valor de contraste das cores para permitir leitura.

Como não é tão interessante que o usuário use os links, alterei os links das revisões para que aparecem sem destaque. Já os do link de download mantive o padrão de destaque com uma cor viva contrastante e o sublinhado. Aproveitei um efeitinho da CSS3 o text-shadown.

Nada muito maior é necessário.

Os textos
As informações passadas ao usuário são poucas e se limitam ao relevante.
No caso do widget apenas tem relevância o link de download.

As descrições nos updates serão coisa de no máximo 2 linhas, se possível uma lauda de tamanho de texto.

Também será informado o tamanho da atualização.

Ex.s:
Nova fase disponível. Fase da Aracne (2MB)
Corrigido: problema na textura tal (0.4MB)

Aqui uma referência que tirei do site do Soul Order.

Opinião pessoal
Este já é o terceiro projeto independente sério em HTML5 que faço (sendo 1 freela) em todos fiz uma árdua pesquisa e procurei conselhos de outros profissionais.
A ideia por trás dela é a websemantica, por isso as tags tem nomes sugestivos à seções comuns encontradas em páginas atualmente. Talvez numa HTML6 isto provavelmente vai mudar também de acordo com um novo contexto.

Sistematicamente todos os blogs em português e a maioria dos estrangeiros se limita a passar informações relativa a multimédia e afins chamando tudo de revolução sem se dar conta de como e para que a tecnologia (na verdade cheguei a ver demos de HTML5 sem uma linha sequer de HTML5). Então se você esta procurando informação não-poluída sobre HTML 5 a melhor fonte é a W3C mesmo.

Vamos agora finalmente falar de programação (Welcome to the Hell C++)
HTML é lindona o conceito de dados estruturados com semântica é show, mas obviamente conceito e nada é a mesma coisa se você não tem onde visualizar os dados.

Não vou descrever a parte da programação a fundo, basta saber que é nela que pegamos os dados e fazemos alguma coisa com eles.
Quem quiser ver um pouco de programação mais explicada pode olhar meu tutorial de Away3D e Blender.

Usei as seguintes bibliotecas:
CURL é uma excelente biblioteca, já implementa os mecanismos de conexão com servidor e recebimento de dados facilmente.
TinyXML é ainda mais fácil de instalar e bastante prática. Não é a mais fundida biblioteca de análise XML mas é a que me responde bem e rápido.
POSIX Threads a terceira cabeça do cão do inferno, sem comentários, mas sem ela não tem como fazer um mecanismo de checagem de atualização que não TRAVE o jogo.

Criei uma classe auto-suficiente para fazer a checagem de dados e o aviso ao sistema principal.

Automaticamente a classe procura por um endereço principal e caso seja preciso em endereços redundantes.

Ela pega os dados que estão delimitados entre ini: wwp_update_details e end: wwp_update_details. E joga eles num analizador XML simples.
Infelizmente tive que usar uma marcação de comentário, uma solução não muito elegante, mas pratica.
A TinyXML não conseguiria analizar os dados HTML já que a HTML ao contrário da XML prevê dados mau formatados.

Com a POSIX eu rodo ela em um processo separado de baixa prioridade (assim espero que ocorra).
Assim a classe faz seu trabalho da forma mais silenciosa possível.

Os arquivos para quem quizer ver melhor estão aqui:
main.cpp
WWP::WWP_UpdateChecker.h
WWP::WWP_UpdateChecker.cpp
WWP::WWP_UpdateInfo.h
WWP::WWP_UpdateInfo.cpp

Exploração urbana 02

As chuvas mortais que caíram no estado fizeram alguns estragos e não foi só a minha Internet que caiu.
Aproveitei para tirar umas fotos diversas de texturas e de exemplos de terreno.
 Este é um riozinho passando pela cidade, depois de transbordar a parede e parte de uma casa caiu.
 Estes detalhes de entulho em corregos são realmente interessantes, sempre que passo por eles fico imaginando a sensação de explorar entre eles como se fossem cavernas ou vales hostis (se não fosse o fato do esgoto acho que até exploraria).
 Geralmente eles tem TODOS os elementos necessários para você por num game, vários obstáculos e pontos de apoio para fazer caminhos alternativos e lugares para esconder itens.
 Também oferecem ótimas texturas.
 Fico olhando para os canos e imagino que Cibele pode usa-los facilmente para escalar e chegar em obstáculos. Parkour de pobre!
 Muros fudidos e muito fungo.
 Invadir quintais parece fácil.
Preciso me segurar para não abrir o Blender e sair modelando.

Estas fotos foram tiradas aqui (google maps).

Fazendo upgrade

Em nome de Thundera estamos em reformas, não reparem na zona.
Esperamos estar com um visual novo em poucos dias, ou antes do próximo FDS. Ou sigam nossos outros feeds