[ Tutorial ] Personalização simples para sua página do jogo

Obs. Como não há seção adequada pra esse tipo de material ainda estou postando aqui mesmo, favor mover pro local adequando posteriormente.

Personalização simples para sua página do jogo

Como vcs sabem o Monkey cria uma estrutura mínima de html/css para a página de jogo exportada, deixando o canvas não centralizado em um fundo branco, sem título na aba do navegador e etc.

Esse material foi criado visando ajudar os usuários que não possuem conhecimento em desenvolvimento web a formatarem a exibição de seu jogo de forma simples, porém mais agradável.

O resultado poder ser visto neste modelo:

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

(Atenção: Melhor visualizado no Firefox ou Chrome, demais navegadores (principalmente o Internet Explorer) podem não exibir corretamente.)

Ferramentas e arquivos necessários

- Editor de texto

Para edição do arquivo html e css pode-se usar o próprio Bloco de notas do Windows, porém eu não recomendo caso vc não tenha um conhecimento mínimo na área, já que o programa não dispõe de nenhum recurso que facilite a leitura e interpretação do código.

Sugestão: Utilizem o Notepad++ que é um tipo de "super Bloco de notas" (gratuito) e possui realce de sintaxe, marcação de tabulações, identação, etc, etc.

Download - [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

- Arquivos exportados pelo Monkey

Tenha em mãos o conteúdo da pasta "nomedoseujogo.build > html5".

- Favicon

Iremos adicionar também um ícone para a aba do navegador, que pode ser qualquer imagem em tamanho exato de 16x16px.

Quem não quiser fazer seu próprio favicon pode baixar de sites especializados em ícones como o [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Editando o HTML

A primeira coisa a fazer é renomear o arquivo "MonkeyGame.html" com o nome de seu projeto, ex: space_invaders.html (procure utilizar letras minúsculas e jamais deixe espaços em branco, utilize underline!).

Com seu editor de texto a postos, abra o arquivo que vc acaba de renomear. Ele possui uma pequena estrutura html e css embutido, o qual passaremos para um arquivo externo para que possa ser reaproveitado em múltiplas páginas independentes.

Primeiramente, copiem e colem o código abaixo em seu arquivo (não há problema em sobrescrever pois não há nenhuma informação específica para cada jogo nesse arquivo)

Código:: 
<html>


<head>

   
   <meta http-equiv="content-type" content="text/html;charset=utf-8"/>

   
   <script language="javascript" src="main.js">Javascript not supported!</script>

   
   <link rel="stylesheet" type="text/css" href="./style.css"/>
   <link rel="shortcut icon" type="image/x-icon" href="./favicon.png"/>

   
   <title>Monkey Asteroids</title>


</head>


<body>

   
   <table>

      
      <tr>

         
         <td></td>

         
         <td width="640px;">

            
            <canvas id="GameCanvas" onclick="javascript:this.focus();" width=640 height=480 tabindex=1></canvas>

            
            <br/>

            
            <div class="gameInfo">### Monkey Asteroids v1.0 - Carlos Mahnke 2011 ###     [ Controles ] Setas = Movimento | ??? = Tiro<br/>
            <a class="forum" href="http://monkeybrasil.forumeiros.com" target="_blank">monkeybrasil.forumeiros.com</a></div>

         
         </td>

         
         <td></td>

      
      </tr>

   
   </table>


</body>


</html>

Ele está comentado linha a linha pra melhor compreensão, mas irei ainda explicar aqui a lógica básica dessa página. Reparem que há uma "tabela" sendo utilizada como paginador, mas qual a finalidade disso?

Imaginem que sua tela do navegador é uma planilha do Excel, é fácil mesclar algumas linhas e colunas pra criar divisões. Pois bem, a tabela no html tem a mesma função, fornecer algumas áreas divididas pra que possamos alocar nosso canvas, caixa de informações, etc.

O uso da tabela como paginação é algo um tanto arcaico e não é a forma mais avançada de se fazer, porém é totalmente funcional e muito prática, além de atender perfeitamente nossa necessidade.

Abaixo um exemplo de como linhas e colunas de uma tabela podem formar divisões para paginação:

[ Tutorial ] Personalização simples para sua página do jogo Exemplotabela

Editando o CSS

Agora é hora de criarmos nossa folha de estilos que irá definir a formatação das nossas tags html. Em seu editor de textos crie um novo arquivo chamado "style.css" na mesma pasta onde está o html.

Caso esteja usando o Bloco de notas vá em "salvar como" e na caixa "tipo" selecione "todos os arquivos", do contrário ele irá salvar em formato txt obrigatoriamente.

Feito isso, copiem e colem o código abaixo em seu arquivo css:

Código:: /* definições do corpo da página */
body {
background-color: #000; /* cor de fundo da página - utilize valor hexadecimal após o # */
}

/* definições da tabela para paginação simples dos elementos */
table {
width: 100%;
height: 100%;
text-align: center;
}

/* definições do canvas html5 nativo do monkey */
canvas {
border-width: 20px; /* largura da moldura do jogo */
border-style: solid;
border-color: #444; /* cor da moldura do jogo - utilize valor hexadecimal após o # */
border-collapse: collapse;
}

/* atributo focus do canvas nativo do monkey */
canvas:focus {
outline: none;
}

/* definições do campo para informções do jogo */
.gameInfo {
padding: 10px;
background-color: #444; /* cor de fundo - utilize o mesmo valor do canvas */
font-family: arial; /* fonte do texto */
font-size: 11px; /* tamanho do texto */
font-weight: bold; /* estilo do texto */
color: #999; /* cor do texto - utilize valor hexadecimal após o # */
}

/* definições de links */
a.forum:link, a.forum:visited, a.forum:active {
text-decoration: none;
color: #999; /* cor do link - utilize valor hexadecimal após o # */
}

a.forum:hover {
text-decoration: underline;
color: #999; /* cor do link apontado pelo mouse - utilize valor hexadecimal após o # */
}

O código novamente está comentado pra melhor compreensão. Como podem ver o css possui algumas definições pra determinadas tags html da nossa página, conforme a necessidade.

Neste caso temos definições para a cor de fundo da página, alinhamento da tabela, "moldura" ao redor do canvas, caixa de informações, etc.

Não há nenhum segredo em alterar algumas dessas definições, como cores, tamanho e tipo da fonte, conforme comentado no código. Pro caso de cores, caso não tenham nenhum programa editor de imagem que mostre o valor hexadecimal, utilizem tabelas online como esta: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Obs. O valor hex de uma cor é composto por 6 dígitos, sendo que cores que possuem os 6 digitos iguais podem ser escritas com apenas os primeiros 3, ex: CCCCCC pode ser descrito apenas como CCC.

Colocando seu jogo na Internet

Certo, já temos nossa página personalizada, agora é hora de compartilhar com o pessoal! Pra isso é necessário possuir uma hospedagem online, mas isto custa dinheiro e mesmo que usemos um serviço gratuito é necessário ter conhecimento em transferência de arquivos por FTP, além de outros detalhes.

Entretanto, hoje existem serviços de compartilhamento e backup de arquivos na nuvem que nos permitem hospedar esses arquivos sem qualquer dificuldade! Talvez o mais famoso nesse setor seja o Dropbox.

O Dropbox funciona como um HD online, permitindo que vc faça upload de seus arquivos, compartilhe através de links diretos ou mesmo crie pastas compartilhadas entre usuários.

Pra começar, crie sua conta gratuita no serviço:

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Em seguida vc receberá o download do client (interface local com o serviço), basta aguardar o término e instalar normalmente. Não se esqueçam de utilizar o mesmo email/senha cadastrados na hora de preencher os dados da instalação, e obviamente, escolham a opção free de espaço em disco (2GB).

Após a instalação vc será levado a sua pasta local do Dropbox. Tudo que vc colocar aqui será enviado para sua conta online automaticamente, e vice-versa.

Estrutura das pastas

Como podem ver o Dropbox possui 2 pastas nativas, "photos" e "public". A pasta photos (fotos) é usada pra criação de álbuns de fotografia/slides e não nos importa agora, nosso foco é a pasta public (público).

Basicamente, qualquer pasta que vc criar na sua pasta Dropbox funcionará normalmente e vc pode organizar seus arquivos como bem entender, porém, apenas a pasta public retorna um link direto pros seus arquivos online, ou seja, tudo que vc quiser compartilhar com alguém ou postar na Internet precisa estar necessariamente dentro de public (vc pode criar pastas dentro de public também sem problemas).

Nosso jogo é composto pelo conteúdo daquela pasta chamada html5, onde (feitas as alterações deste tutorial) temos:

html5
- data
- - - mojo_font
- - - <demais sprites e etc utilizados>
- main.js
- style.css
- nomedoseujogo.html
- favicon.pgn

Faça uma cópia desse conteúdo e coloque em uma pasta com o nome do seu projeto dentro da pasta public, ex:

public
- space_invaders
- - - data
- - - - - - mojo_font
- - - - - - <demais sprites e etc utilizados>
- - - main.js
- - - style.css
- - - nomedoseujogo.html
- - - favicon.pgn

Por fim navegue até seu arquivo html dentro de public e clique com o botão direito > Dropbox > Copy public link. Pronto, agora é só utilizar esse link pra enviar o jogo pros seus amigos, postar aqui na Monkey Brasil ou fazer o que vc desejar =]

Espero que tenham gostado do material.
Abraço.

Excelente tutorial! Realmente o HTML/CSS gerado pelo Monkey é bem simplesinho, com esse tutorial poderemos melhorar muito a apresentação de nosso jogo quando exportado para HTML5. Parabéns!

Obs. Como ainda não temos seção de tutoriais, vou movê-lo para a seção Iniciante.

» Por que a página fica vazia?
» A pagina fica sempre em branco.
» Tudo que precisa para começar
» Problema para criar instâncias

[ Tutorial ] Personalização simples para sua página do jogo

[ Tutorial ] Personalização simples para sua página do jogo

Tópicos semelhantes

Tópicos semelhantes