Este blog esta em reforma no momento.

Criando personagens NPC

Este documento acabou se tornando um ensaio para um projeto dentro do RPGVale.
Vou tratar aqui da criação de um NPC, de como introduzir um na história e como dar "vida" para ele.
Vamos ao que interessa como ele surgiu?

Eu precisava fazer a cena da personagem morrendo, assim poderia por o clássico menu de Continue.

Um NPC nem sempre serve só para vender coisas ou dar XP, mas pode ser usado para dar pistas, indicar caminhos ou até mudar o rumo da história.

Conceito ou visão geral
Um representante da morte, que orientasse a personagem quando morresse sobre onde ela pode voltar e outras informações.

A primeira ideia que me veio na cabeça
E uma vez achei na Internet uma imagem de um grafite que o cara trocou a caveira da morte por esse rostinho feliz.
Feito! Além do "continue" simples, eu  tinha um cenário rico com um NPC de fundo.

Ótimo agora vem o pulo do gato, com o personagem em mãos eu posso pensar em usar ele na história.

Objetivos primeiro
Com o que eu tinha de antemão da personagem: o momento de encontro, quando o jogador morre.
Eu teci uma ligação dele com a história, ele vai ressuscitar e dar dicas de como o jogador vai proceder (newbies guide). E também vai dar uma quebra na tensão com diálogos de bom humor.

Agora que enriqueci a personagem explorando o potencial de seu papel posso dar o golpe final.

Carisma, personalidade
A ideia da personagem pede que ela seja de idade avançada (talvez do inicio do tempo) e que seja séria e centrada. Obviamente o sério "já mandei pras cucuias".

Nomes reais não tem isso, mas em uma campanha é ótimo você ter um nome que ajude o jogador a se lembrar da personagem, objeto ou lugar. Então:

Obtuarius Necrofantis

E invento uma história para ele, rápida para uma introdução dinâmica:

Nas filas de soldados romanos o jovem Obtuarius Necrofantis era conhecido pelo seu jeito tranquilo. Era o tipo de cara que podia acordar com a cama em chamas que não se abalava e primeiro consultava o relógio para ver se pode dormir mais 5 minutos.


Foi numa noite de batalha onde seus companheiros foram massacrados ao invadir uma fortificação dos "barbados" do norte que ele escorregou numa possa de sangue e ao limpar os olhos viu um homem de barbas longas  e rosto cansado fumando um cachimbo que lhe falou:


- Olá, tenho te observado há tempos e vou fazer uma proposta para você. A chefia abriu novas vagas. Salário bom, hora extra bem remunerada e plano de saúde.


Obtuarius não pensou muito, fez uma pequena entrevista, uma reunião de integração rápida, vestiu a capa preta e saiu com sua lista

A salada de ideias vai de acordo com o freguês, pode ser mista ou até acrescentar feijão e repolho se você não se importar com as conseqüências.
Vamos analisar o texto com calma para vocês compreenderem melhor (analisando o meu próprio texto, até parece que sei escrever).

"Quem era", "onde está" e "para onde vai" são conceitos que costumo usar para posicionar o leitor.
O elemento "conflito" é a base para TODAS as grandes histórias (lições de "Diário de Teatro"); O conflito é o elemento que motiva a ação. Eu poderia fechar a descrição com um:

... vestiu sua capa preta e saiu com sua lista. E vem fazendo seu trabalho a anos, anos, anos e mais anos... sem parar para uma cervejinha que seja!

Isso seria um "gancho" que puxa para a ideia que o personagem está cansado do trabalho e vai querer fazer alguma proposta ou estar aberto a ideias.
Outras formas mais brutas e diretas: "Aquele cara matou minha família", "Preciso que você consiga esse item para mim."

No caso deixei a construção sem detonar que o personagem vai realizar alguma ação pelos motivos que veremos aseguir.

Decupagem
Você já deve ter ouvido aquele dito popular "menos é mais", certo? Bom eu não concordo com ele.
Sou do tipo que não tem paciência para um conceito vago assim, pois eu prefiro a decupagem, essa palavra remete à um contexto mais amplo que na verdade significa que você tem que ter "bom senso".

É super natural você se empolgar e criar um universo muito extenso para um personagem e pode perder o equilirio dos outros personagens e criar um desvio da história corrente. Então oque fazemos é "cortar", "lapidar" ou "reposicionar" os elementos.
Eliminamos inicialmente os "excessos" da construção que não são necessários à história principal.
Eliminar não quer dizer simplesmente que você vai excluir aquilo, mas um elemento pode ficar simplesmente inplicito, como "onde aquela elfa conseguiu aquele bastão mágico?".

Ao decupar o personagem para o jogo em si, temos que nos focar em questões:
No cenário em curso, de forma que ele não interfira na história;
Na digestão, isto é, tanto o tempo que ele demora a ser apresentado como a forma e o momento que ele vai aparecer pois por melhor que seja o personagem se ele atrapalhar o ritmo dos jogadores eles não vão simpatizar com ele;
Tirar os excessos, lembrem-se "apenas Chuck Norriz pode cortar Chuck Norriz", um personagem muito forte não encontra dificuldades então nada de dar super poderes.
Especificamente em games devemos ter em mente os limites técnicos, o personagem pode pedir efeitos especiais, ou mesmo artifícios especiais  que nem sempre são condizentes com a tecnologia envolvida. Explico adiante.

É óbvio que derrepente quando criamos um personagem as vezes nos pegamos de surpresa e descobrimos que ele tem um potencial imenso.
Anote os detalhes e deixe de lado.

Dica:
Observem os personagens de Naruto, são ricos, mas não foram empurrados com tudo de uma vez só. Mas impactaram direto na primeira vista porque se nota que são muito bem trabalhados.

Limites técnicos
Um personagem que usa teleporte pode parecer simples na hora de você pensar, mas se você for utiliza-lo em um mapa isso vai dificultar a vida dos programadores.
Isso porque o personagem se move por I.A. e já temos de sobra formulas  prontas para isso, no entanto as formulas não entendem o teleporte como um elemento de cenário ou obstáculo.

Um que possui uma roupa muito cheia de detalhes por exemplo, torna mais trabalhosa a modelagem ou redesenho pelo artista e vai consumir recursos para ser desenhado pelos processador.

Sempre converse com a equipe técnica para ajudar nessa hora.

Visual
Até agora só falamos do conceito, mas um bom conceito morre se não tiver uma boa execução. No caso a aparência.
Nesta hora sempre contamos com o Google, uma rápida pesquisa sobre "símbolos da morte" obtive umas informações gerais.

  • A ampulheta, eu nem me lembrava, mas muitos filmes e séries ela aparece indicando o tempo de vida de alguém.
  • Descobri novos símbolos, como esse da alquimia onde o circulo com três pontos representa uma caveira!
  • A morte também é descrita com "anjo da morte", então se ele serve á uma força superior, uma roupa de clérigo pode dar mais beleza e elegância.
  • Lembram de Yu Yu Hakusho? A pequena Botan é uma menina de cabelo azul. O azul também tem conotações de frio, amizade, amor.
  • A Morte de Neil Gaiman.
  • Os clássicos capuz e foice, influencia da Europa e da Igreja, onde temos o capuz do carrasco e a foice ceifador de trigo(*).


Junto isso tudo e tenho então a minha salada.

"Tunning" do visual da foice
Um exemplo de como uma boa construção pode render frutos.
Lógico no contexto do game foi algo bom, numa campanha de RPG você estaria perdendo tempo ao invés de jogar.

A foice ficou tão bem conceituada, que acabou virando item especial.
Ficou assim:

Os elementos estão separados e unidos por uma força invisível(**).

A lâmina em forma de meia-lua beeem grande, o exagero é uma técnica muito comum e bem eficiente XP

A ampulheta é representada nela, indicando a ligação com o tempo. E na animação a areia corre ao contrário (de baixo para cima) para indicar o tempo restante.

Entre os dois cones da ampulheta coloquei uma esfera com 3 furos (símbolo da alquimia)

E o bastão é de aparência rústica, na verdade um galho da Árvore da Vida!

Em combate além de ser uma foice normal (+14, indestrutível) ela pode ser usada para evocar guerreiros já falecidos. Com a "tendência" do portador da foice.

(*) - A dualidade no ceifador que mata as plantas em grande quantidade, mas que também prove alimento, o pão da mesa, vida/recriação/ressusreição. Isso seria uma interpretação livre, mas temos essa ideia muito mais evidente em outras culturas. Mas na nossa que recebeu influencia da europeia o medo é a caracteristica predominante.


(**) - A idéia dos elementos soltos no ar vem de um livro com imagens muito insanas "A rebelião de Lúcifer" de J. J. Benítez, que conta a história de um planeta artificial que chega no nosso sistema solar e os seres celestiais de lá escolhem um homem e uma mulher para representar a humanidade no julgamento de Lúcifer que estava preso após a derrota da rebelião.
No livro o conceito de física vai pro lixo, já que o autor imagina os protagonista em vários universos diferentes. Oque curti é que alguns elementos nem sempre são conectados por matéria visível ou palpável.

Morte do personagem, Continue or Exit ?

 Clássico mas resolvi apimentar um pouco.
Ao morrer quem recebe Cibele é um NPC, eles batem um papo, tomam um chá ou ela sai vazada para a fase.
Uma coisa que estou pensando em fazer é inserir "conselhos" neste personagem. Assim, além das tiradas que um dá no outro ele também mostra uma interação com o enredo e com o jogador.
Pra deixar a coisa mais sem noção, em uma das fases pensei na hipótese dela ser teleportada para outra fase, como se estivesse em outro mundo acessado apenas pelo limbo.
Penso em fazer isso aleatóriamente, mas ai surge o problema da quebra da jogabilidade. No entanto deixa a história mais realista.

Demom Miau

Um demônio muito peculiar e raro.


Diz a lenda que o senhor negro que o criou, feliz com a capacidade de sua criação, o incumbiu de guardar um tesouro fantástico o Periquito de Ouro Sagrado.  A tarefa não  deu muito certo...


Abandonado por qualquer mestre negro pela sua incapacidade de cumprir ordens.
Ele não faz parte de nenhuma legião e não participa de nenhuma guerra entre céu e inferno.


O Homem da Roupa Velha

Bem dito o provérbio do sábio: Deus ajuda quem cedo Madruga!
Fim de semana, estressado queria pensar em coisas felizes. Não sei porque uma imagem de um cara carrancudo provoca tanta sensação de riso.
Lógico irei desfigurar a figura para não configurar plágio, e sim uma homenagem.

Ele vai aparecer do nada com um saco de roupas velhas e outras bugigangas, comprando tudo e vendendo tudo.
Me parece insano, mas a imagem dele aparecendo do nada de um cofre aberto, de um vaso sanitário, de dentro de um vulção em chamas com uma cara de quem chupou limão vendendo qualquer coisa pra Cibele me veio na cabeça.

Em uma situação idêntica tem o Stranger do Resident Evil... fica estranho você matar o chefão de uma seita secreta e o mesmo cara estar lá como se fosse via pública!
Depois de uma modelage low-poly não lá essas coisas, mas dando pro gasto, preparei a malha para o sculpt.





Eu pensei em descaracterizar as cores... mas não dá!
Eu vou pensar em algo para não deixar a homenagem não ficar apenas no blog.

Clarisse

Hoje vou prestar homenagem à uma companheira que esteve junto desde os primeiros passos da publicação desse projeto.

Ela me acompanhava nas madrugadas as vezes no meu colo ou quase sempre entre o vão do teclado e monitor.

Na verdade ela achava que a máquina era a casa dela.

Ela me mostrou que muito doque eu conhecia sobre gatos era pura lenda. E nela vi amizade e companheirismo.

Nem sempre nos entendíamos, o que rendeu até um acréscimo num personagem do jogo inspirado em um dos seus momentos de crise.

Outras vezes era apegada demais, como em tantas que tive que correr para lavar roupa de cama por ela ter "me" demarcado.

Ela chegou de um jeito inesperado e misterioso. Ouvi um miado na porta abri e ela entrou.

E como num estranho círculo ela se foi, sem explicação e da mesma forma que eu fui o primeiro da família a lhe ver também fui o ultimo.

Clarisse morreu 9:00 da manhã de uma quinta (26/01/2011) com uns 2 anos. De causas desconhecidas após passar por um procedimento rotineiro numa clinica veterinária.

De cada 100 que passam por uma castração 1 tem complicações e minha filinha foi sorteada.

Ela deixou dois filhos que vão ficar comigo e muita saudade.

Fazendo Shaders

Hoje fiquei lembrando de um método de aprendizado que uso desde meus cinco anos: "Se não entende, pega o bagulho e desmonta!"
Nem todos os brinquedos daquela época sobreviveram. Mas hoje em dia temos esse processo mais formalizado.

De fato cansei mesmo de tentar pegar código pronto e tentar juntar os pedaços para um resultado. A maioria dos projetos hoje em dia faz isso.
Mas não estava dando um resultado muito bom, tendo conflitos, dor-de-cabeça pra entender o shader, conflitos de linguagens, de perfis e minúsculos fatores. As vezes eu simplesmente esquecia os drivers de vídeo desconfigurados e não compilava!
Além doque a maioria dos exemplos que vi era de gente pegando os códigos existentes e adaptando.

Procurando tutorial ?
Eu escrevi o texto acima para os que vieram atrás de código para seus projetos, mas deixei os links que vocês procuram no final do post.
Fica esse alerta, a programação de shaders é de baixo nível, mas muito recompensador.

Os passos
 Quando o assunto é shader você tem quase nenhum material em português e muito falatório sobre o assunto em inglês. E nenhuma referência para newbie para aquilo que você quer fazer.

Comecei com um esdrúxulo void main(void) pegando a componente de cor e uns 3 ou 4 exemplos de toon shader.

O algoritmo do toon é fácil, você pega a intensidade do brilho e joga numa sequência de ifs. Simplesmente a coisa a parte mais babaca de programação. Outra vantagem de eu estar fazendo o shader  é que eu posso customizar ainda mais o sistema, ou eu faço uma textura linear de entrada ou uma array.
 A iluminação "per pixel" que começou a dar trabalho. Não tanto o de copiar e colar, mas ir lendo os comandos passo a passo.
Do exemplo acima eu fui sondando, essa parte de programação é muito voltada a matemática, não aquela chata que agente fazia decorando formulas estranhas, mas exige bastante conceito que eu não aprendi na escola. E a capacidade de "visualizar" a equação funcionando, "ver" a equação sempre foi a melhor maneira de aprender pra mim doque decorar a formula.
 Me acalmei e vi que era só eliminar todo o calculo correspondente a cor na equação. E pronto, tinha um valor para ser analisado e dividido no degrade.
Tem uma hora que me confundo entre usar um + (adição) e um *(multiplicação) na equação, mas é só fazer uma "tentativa e erro" que acerto.

A luz foi resolvida de forma mais simples, eu entro com os valores na mão ao invés de usar os definidos dentro da OpenGL, isso vai ser bom para controlar os pontos de luz de entrada. No caso do toon shading é uma escolha melhor já que a luz nem sempre fica boa se for muito realista, então se eu controlar manualmente por script deve dar um resultado melhor.
Agora o passo do normalmap, acabou virando uma técnica vital e me surpreendeu a facilidade que foi inserir ele.
A única coisa problemática foi computar a exata direção do vetor da luz e o vetor da normal na posição correta.
O shader esta quase pronto, eu deixei de lado coisas como os dados de cor do vértice, oque limita o sistema a sempre precisar de texturas para todos os modelos.
Não creio que vai ser preciso uma versão mais simples desse shader, eu poderia usar os dados de cor dos vértices por exemplo mas se o sistema não suportar texturas eu deixo a cargo da OGRE escolher a técnica mais correta.

Mas uma mais complexa com o efeito paralax sim tem que sair, no entanto esse me dá medo! Mas é o desafio para a próxima semana.

Links:
Código fonte do shader *
Tutorial de Toon Shading e GLSL
Tutorial no NeHe
Referência da Blender Game Engine para o 2.5x
Realmente grande site de tutoriais de Blender
www.khronos.org

Discussões e fóruns que pesquisei:
link1 link2 link3 link4  link5 (++) link6 e mais....

* o código está conforme oque se vê aqui, não esta pronto mas funciona com duas texturas em um material. Fica como contribuição para novos projetistas.

Pensando em RPG de novo

Já perdi a conta de quantas vezes falei de lógica de RPG aqui, e acho que ainda tem “pano pra manga”, quanto mais eu analiso mais eu vejo que um RPG, mesmo o mais simples, é composto de minúsculas regras que se amontoam para interagir.
Minha técnica é fazer um simulado mental de uma ação e tentar juntar os recursos que preciso, em vários momentos isso se mostrou monstruoso, dado que vários fatores interferem juntos no resultado.

“No começo do jogo Cibele ganha do mega-arqui-mago-fodão o Anel do Senhor da Guerra que lhe permite empunhar qualquer arma do jogo”

Um simples paragrafo muito comum que vai ajudar o herói de uma campanha épica, mas que implica em ser transformado em realidade, oque me faz pensar que o anel possui uma função que interfere nos testes quando Cibele tenta carregar qualquer arma só pra dizer: -sim ela pode carregar.
Como eu faço isso? Digo pra sistema que o “não pode” deve mudar para “sim”? Ou na hora do teste digo que a força dela é “infinita”, se digo isso quando devo dizer?
Me veio uma solução na cabeça, de atribuir propriedades à um elemento dessa forma um teste caça nelas a que lhe convém.

Proposta:
Atos
+ e - = Transação
< e > = Ação

ato( Cibele > Cobra )  =  Ataque normal
ato( Cibele.magias.fireball  > cobra ) = Ataque mágico, a função ato() recebe nulo se ela não puder usar a magia.
ato( Cibele < veneno )
ato( Cibele < Cobra )
ato( Cibele < Cobra.veneno )

Os atos operam entre atributos e modificadores.
De um modo geral quando dois personagens interagem é um ataque.
Cibele > cobra = chama a rotina de ataque. A rotina padrão faz com que a cobra receba os dados de dano. O dano nada mais é que um modificador de efeito imediato ou não.
Exemplo: se Cibele ataca normalmente o dano é físico (atributo força da personagem + força da arma de mão) cria-se um Modificador chamado dano e passa-se ele para cobra que faz os testes em sua função de receber dano. assim: cobra.recebeDano( dano )
Como dano é um modificador, ele pode alterar os atributos, geralmente “vida” diminuindo-a.
Aqui começa o problema do RPG, diminuir a vida implica em fazer um teste se você pode diminuir esse atributo.

Um cenário tipico:
Cibele.modificadores + ResistenciaAVeneno(+5)
Cibele.equipamento + CotaDeMeiasVivarina
Cibele.equipamento + AnelAntiCobra
Cobra > Cibele -- ou Cibele < Cobra

Na primeira linha Cibele recebe direto um modificador na sua tabela de modificadores. Assim dizemos ao sistema que ela é naturalmente resistente ao veneno (+5).
Na segunda linha ela recebe uma Cota de Meias Vivarina, que suportam perfuração de faca, flecha e bala (exceto as facas Guinsu). (armadura/resistência +20)
Na terceira ela ganha um Anel Anti Cobra, que dá 30 de dano no ofidio que tocar na pele dela.
A ultima linha a cobra ataca Cibele >. Essa função > desencadeia o mecanismo de teste do de ataque do personagem.
A função de ação passa primeiro pelos testes básicos como esquiva e defesa que diminuem um pouco ou todo o dando.
Depois pelos modificadores da personagem, depois pelo equipamento em uso e executa suas funções de comparação. Se o modificador ResistenciaAVeneno achar o valor “veneno” nas informações de ataque ele tira os 5 do valor que foi infligido.
Por ultimo o equipamento MeiasVivarina fazerem um teste e verem que o valor “perfuracao” deve ser ignorado e que o objeto também tem um “cobra” no meio e aplicam a função AnelAntiCobra > Cobra.

Note que a primeira parte do teste usa-se os valores constituintes dos próprios personagens e depois os testes secundários com os modificadores.
O grande problema é que um modificador também interfere em um atributo! Em outras palavras o atributo também é uma classe que faz testes e seus objetos precisão conhecer o seu contéiner.

E ainda tenho que optimizar isto para que não ocorra um teste desnecessário a cada frame (uma placa hi-end ultimamente dá em torno de 500 a 1000 frames por segundo), seria um esforço inútil calcular toda a lógica para isso, por isso as classes contém um mecanismo de cache.

Por ultimo uma modificação a informar no framework descrito acima é a substituição da biblioteca de classes que não estava mais sendo atualizada pelo autor.
Agora estou usando a LOOP. Muito prática.

Postagens relacionadas
Incorporando banco de dados
Progeto de I.A.

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).