Jogos HTML5 no fórum

[PedroGabriel]

Oi, esse é meu primeiro tutorial de qualquer coisa aqui na gmbr, mas me disseram que muitos tem duvida de como fazer para colocar os jogos feitos no GM:HTML5/Studio na internet ou até mesmo no fórum. Então vou ensinar da maneira mais fácil como é possível fazer isso usando o "Dropbox" que muitos já devem ter visto na assinatura do Jiraya.

O dropbox é um host de arquivos assim como o RapidShare, MediaFire e outros. Mas a principal diferença é que ele não te faz esperar nenhum tempo para baixar o arquivo, te da link direto ao arquivo sem precisar clicar em nada mais ao ir ao devido url e executa .html direto sem precisar baixar. E é claro, é só você arrastar seu arquivo ou pasta sua pasta do Dropbox que ele faz upload automaticamente. também te possibilitando a fazer pastas compartilhadas com amigos.

Ao criar uma conta no Dropbox se eu não me engano você vem com 2GB para usar, é possível conseguir mais espaço por referrel, seguindo passos ou até eventos organizados pelo Dropbox.

Para baixar é só ir no seguinte endereço ou no próximo:
http://dropbox.com/

Se quiser ganhar 500mb e me dar 500mb baixe pelo seguinte endereço:
http://db.tt/QkzYzBS

Depois de baixar se quiser mais 750mb é só ir no seguinte url e seguir os passos
http://dropbox.com/free

E por fim para ganhar mais 250mb é só ir neste ultimo url e seguir os passos
http://dropbox.com/gs

(O máximo atual de espaço que tem como ter sem pagar é 16GB)


Agora chega de falar de Dropbox e espaços, depois de se registrar, baixar e instalar o dropbox:

Quando você compila um jogo em HTML5 no Game Maker ele gera uma pasta que tem um "index.html" dentro (não tenho certeza já que o Beta não compila e eu estou no beta) mas imagino que seja isso.

Você deve colocar essa pasta em sua pasta "Public" do dropbox, já que é lá onde é possível ver os arquivos online.

Depois que o upload de todos esses arquivos acabarem é só ir dentro dessa pasta que você acabou de colocar na public -> clicar com o lado direito no "index.html" ir na parte "Dropbox" e "Copy public link"

Agora se você colar no navegador e ir até ele vai ver que seu jogo carrega e para qualquer um que você passar esse link vai funcionar, mas como você pode colocar seu jogo no fórum?

É mais fácil ainda, basta usar um iFrame:

Código:

<iframe src="COLE AQUI SEU LINK COPIADO.html" style="border:none;width:640px;height:480px;"></iframe>

Mas se você quer usar seu jogo dentro de um iframe você não pode ativar a opção de centralizar o jogo na tela, deve deixar ele no canto exatamente como vem no padrão do GM:Studio
no "style" tem width:640px; e height:480px; (largura X altura) você deve mudar esses valores pelo tamanho da tela de seu jogo (mantendo o px na frente de cada um já que são pixels)

Enquanto o fórum estiver aceitando HTML vai ter como postar seu jogo nele, caso desativem eles param de funcionar :<
Mas eu imagino que não vai mais ser desativado.

Spoiler:

** Percebi que se você segura para baixo ou para cima a janela do fórum anda junto
** Dependendo do seu navegador o fórum anda junto ao segurar para cima ou para baixo.
** A janela do Demo que vem é de 640x480 então coloquei 640px e 460px já que menor aparece um scroll na janela do jogo.
** Dependendo o navegador o tamanho do iFrame varia também, percebi que no chrome fica horrivel e no Opera fica bom.
** Veja se suas preferencias estão certas:
http://dl.dropbox.com/u/9636553/preferencias.PNG

Se alguém quiser o GM:Studio beta:
http://www.yoyogames.com/studio_beta

*Update*
Para poder deixar o jogo do tamanho certo sem essas bordas feias (que seria fora da tela do jogo) é só por o seguinte código dentro do index.html (você deve editar com o bloco de notas ou algo de sua preferencia)
Logo após o <­/body> que fica no final do arquivo

Código:

<script>
document.body.style.overflowX = 'hidden';
document.body.style.overflowY = 'hidden';
</script>

Assim:

Se você modificar e compilar o jogo de novo, vai precisar colocar isso no index.html de novo também.
***

[Super Maker]

É como eu pensava, mas me diz uma coisa.
Esse beta do GMS fica o logo da empresa no jogo? Tem como tirar?

[PedroGabriel]

Onde fica o logo da empresa no jogo?
aparece no "loading" mas nele mesmo vem um tutorial de como alterar a barra de loading.

[Golpe Baixo]

Hehe, gostei. =)

Não é difícil de se fazer isso, mas uma ajuda é sempre bem-vinda. =)

** Percebi que se você segura para baixo ou para cima a janela do fórum anda junto, vou ver se consigo pensar um jeito de arrumar isso

Aqui isso não acontece, funcionou normal.

[Arkd]

o beta do gms nao compila

[PedroGabriel]

Hehe, gostei. =)

Não é difícil de se fazer isso, mas uma ajuda é sempre bem-vinda. =)

** Percebi que se você segura para baixo ou para cima a janela do fórum anda junto, vou ver se consigo pensar um jeito de arrumar isso

Aqui isso não acontece, funcionou normal.

Talvez seja só no Opera esse problema.
____
Arkades Games:
Ele não compila, mas em HTML5 se você testa o jogo ele já cria os arquivos, é só ir até a pasta que ele gera para fazer o debug e copiar os arquivos, são a mesma coisa que compilar, você só precisa deletar o "nginx.conf" e "mime.types".

[Super Maker]

Ele fica como se fosse um background mas por cima de todas as imagens pelo que eu ví aqui e por isso não vale a pena ter ele.
Tem algum beta que não tenha isso?

[PedroGabriel]

Pode mandar um print? no meu beta não tem isso e fiz update nele ontem

Acho que print não vai mudar nada, mas como o seu pode ter marca d'água se nunca vi nenhum beta que tenha, o meu tenho baixando dês de quando saiu o primeiro beta e só fui fazer update ontem, mas nunca nem ouvi falar sobre isso no Gm:Studio Beta.

[PedroX]

Muito útil o tutorial.
Vale a pena colocar jogos no fórum, evitando downloads.
Além disso, o fórum não vai hospedar mesmo.


Até mais!

[Arkd]

pra mim nao importa, eu uso o gmhtml5, nao beta, o q me interessa no gm studio eh ele compilar para android e ios, tem como fazer isso ai compilando para ios ou apk?

[PedroGabriel]

ele não compila, ele cria o .apk para teste no android, mas é só ir na pasta e pegar durante o debug e por no android
Já o ios ele cria um arquivo diferente que você precisa ir em algum Mac e passar por um programa e ai sim vira o formato que o iPhone/iPad/Ipod consegue ler.

No caso do android para poder compilar você precisa baixar o sdk d android (o api 8, 9 e 11 se não me engano)

[Arkd]

hmm, legal, eu tenho o sdk, mas no caso, o apk fica na pasta de instalacao do gmsbeta? ond eu pego ele?

[PedroGabriel]

Assim que você aperta pra testar (F5) ou debug (F6) ali em baixo no log que ele vai criando mostra o diretório onde o arquivo fica, no caso do HTML5 você pode escolher o diretório nas preferencias.

[moisesBR]

Interessante... mas... e pc com net lenta, 3G por exemplo? Vai funcionar? Aqui até videos do youtube nao pega legal...

[PedroGabriel]

Acho que vai ser quase a mesma que carregar um jogo em Flash, não sei exatamente dizer já que nunca usei 3G antes, mas deve demorar e carregar sim.

[Arkd]

vlw vai ser util

[moisesBR]

Ops! Carregou! Beleza! Demorou mas carregou.
A janela deveria ter um limite de tamanho padrao no caso desse exemplo a janela quase nao cabe mesmo em navegador full(minha def: 800x600)! E algo que parasse/pause o game caso perdesse o foco enquanto lemos algo no forum.

[Super Maker]

Eita agora ta lindo rsrs
Fui atualizar e ele não quer mais nem criar o HTML. Eu queria mostrar a marca d'água, agora ta impossível.
Eu baixei usando meu login e recebi a chave e tudo mais e ta dando esse erro.
Alguém aí me passa o link do beta que funcione como vocês dizem?

**Editado**
Opa! Acho que achei aqui no Global Game Settings

[PedroGabriel]

Ops! Carregou! Beleza! Demorou mas carregou.
A janela deveria ter um limite de tamanho padrao no caso desse exemplo a janela quase nao cabe mesmo em navegador full(minha def: 800x600)! E algo que parasse/pause o game caso perdesse o foco enquanto lemos algo no forum.

Não tem como definir se existe foco no iFrame, e hoje em dia quase não se vê mais 800x600... Talvez sobre o foco no jogo seja no próprio jogo mesmo, se perder o foco do canvas o jogo pausa, mas isso ficaria a critério do jogo e não do fórum em si.

[Super Maker]

Será que da pra fazer esse focu usando CSS no index do jogo assim como é feito nas caixas de texto?

[Conteúdo patrocinado]