Como criar seus mapas!

[|N|NjA|]

Esse tópico servirá para ensinar e facilitar a vida das pessoas na hora de criar seus mapas, ensinando como você deve fazer passo a passo um mapa para o googlemaps.

Passo 1- Tenha um mapa de todo o lugar que você quer mapear.

Passo 2- Edite o mapa, retirando quaisquer coisas que você não queira, como itens, vidas, passagens secretas, etc (isso será feito no sistema de mapas, não na imagem).

Passo 3- Verifique o tamanho da imagem. Para isso, basta olhar as propriedades da imagem.

Passo 4- Ajustar a imagem para um tamanho quadrado, sempre aproximando para cima o valor de acordo com a tabela abaixo.
256 - zoom 0 - 2^8
512 - zoom 1 - 2^9
1024 - zoom 2 - 2^10
2048 - zoom 3 - 2^11
4096 - zoom 4 - 2^12
8192 - zoom 5 - 2^13
16384 - zoom 6 - 2^14
32768 - zoom 7 - 2^15
65536 - zoom 8 - 2^16

Exemplo: Digamos que temos uma imagem de 3584x1408. Nesse caso, escolhemos a maior dimensão (3584) e olhamos a tabela... O valor mais alto próximo é 4096. Então, a imagem deverá ter 4096x4096 de dimensões.

Para fazer isso no photoshop: Imagem, Tamanho da tela de pintura... Desmarque o relativo e, na largura e altura, coloque o mesmo valor (no nosso caso, 4096). Isso irá gerar um mapa com 4 níveis de zoom!

Nota: Não use ancoramento nesse redimensionamento. A ideia é que o mapa fique centralizado no meio do quadrado.

Passo 5: Adicionar mais zoom:
Caso você queira que aproxime mais, você pode redimensionar a imagem seguindo a tabela do passo anterior. Digamos que eu queira adicionar mais dois níveis de zoom. Então eu vou Imagem, Tamanho da Imagem e coloco Largura e Altura com 16384 pixels. Isso irá gerar um mapa com 6 níveis de zoom.

Importante: Mapas que contém pixelart devem usar o algoritmo de Nearest Neighbor (Pelo mais próximo) em vez de bicubic para manter o pixel art no máximo zoom!

Passo 6: Rodar o script indo em Arquivo, Scripts, Procurar, arquivos .js (embaixo) e selecione o script.
Script do photoshop: http://maps.zelda.com.br/tiles/tileCreator.js

O script fará algumas perguntas... No zoom, coloque o zoom escolhido e ele fará todo o processamento para você.

Passo 7: Ao final do trabalho, confira a imagem 0_0_0.png . Ela deverá conter o seu mapa bem pequeno, centralizado. Se não estiver, algum ancoramento você fez na hora de redimensionar a imagem ou a tela de pintura!

Passo 8: Rode o programa PNGGauntlet para reduzir ao máximo o tamanho das imagens!

Passo 9: Zip, torne o mapa disponível para mim, e eu o publico!

[enriquemessias]

valeu eu vou temtar fazer isso



enrique

[Murtnowski]

Muito legal. Eu vim com uma forma de fazê-lo sem qualquer telha pré-corte.

https://github.com/Murtnowski/GMap-JSlicer

Ele só tem uma única imagem e corta-lo em tempo real tudo sobre o front-end. Super fácil de implementar

Código: Selecionar todos

slicer = new JSlicer (document.getElementById ('map'), 'myImage.png');
slicer.init ();

Você pode ver uma demonstração em http://gvgmaps.com/linktothepast/

[|N|NjA|]

Então, tá a fim de me adicionar no skype e batermos um papo?

Sobre o uso do JSlicer... Basicamente, com o JSlicer é preciso que você faça o download de todo o mapa da imagem antes de renderizá-lo, o que pode levar muito tempo dependendo da conexão da pessoa. Um mapa do OoT pode ter 11MB, 3MB, etc. Com mapas em pixel art, o tempo de carregamento é pequeno, mas imagens mais elaboradas o peso não compensa.

Ainda, usando tiles, num monitor com resolução 720P, vc tem, no pior caso, 6 tiles 256x256 de largura e 4 de altura... cada tile tem de 3kb a 15kb ... o que é ainda mais rápido. O único problema de fazer dessa forma é que é necessário fazer o retalho por um script. Há um overhead, mas o mesmo é tão pequeno que compensa o ganho de perfomance e uso de banda. Como usamos um servidor próprio, não transferir mapas grandes a cada mudança de mapa é uma puta economia

Outro problema do JSlicer, que não vi se tinha jeito, é que no zoom máximo você perde o pixel art devido ao resize, coisa que nos tiles eu não tenho problema pois faço o render antes de forma correta. Se tivesse uma forma de falar para o script que você não quer um método bicubic e sim um como nearest neightbor no método de resize, ficaria massa.

Mas, você está certo na sua página, q é preciso fazer um 2^n para fazer o retalhos e tudo mais. Na minha opinião, sem ter estudado o código do JSlicer, ele facilita a vida bastante em mapas pequenos, mas perde pixel art em mapas antigos, e é inviável para mapas novos texturizados caso você não queira abrir da qualidade do png.

Não entenda como crítica ou que estou defendendo meu projeto ou atacando o seu Na verdade, gostei bastante da iniciativa, então me add e a gente bate-papo. Estou sempre procurando entusiastas em mapas e jogos

[Murtnowski]

I don't speak Portuguese or Spanish so it is difficult for me to understand and I am relying on Google Translate. Sorry.
Eu não falo Português ou Espanhol, por isso é difícil para mim entender e eu estou contando com o Google Translate. Desculpe.

Sim, existem muitas limitações técnicas de JSlicer que nunca pode ser superado. No entanto, também existem algumas vantagens de se utilizar JSlicer. JSlicer é muito fácil começar a usar. Meus próprios servidores foram limitados em recursos, então eu não tinha espaço para peças pré-cortadas ou o poder de CPU para cortar as telhas. Então, eu criei JSlicer como uma maneira muito simples e rápido para criar um mapa do Google e usar os recursos do cliente em vez do meu.

Os mapas que você criou são de altíssima qualidade e eu gosto muito deles. Foi simplesmente oferecendo uma alternativa leve e rápida. Eu também queria chamar a sua atenção e compartilhar uma nova abordagem para a geração de Google Maps.

[|N|NjA|]

Murtnowski, you can talk in english

What I liked about your solution is that we can set up maps really easy, like the GTA5 leaked for example.

I sent you an email so we can talk and share experiences about this. I always wanted to create a gamemap site like the one we did with zelda... in fact, i'm working on a new version that uses another api that is faster than gmaps.


Meanwhile, you can check the script for photoshop in the topic ( http://maps.zelda.com.br/tiles/tileCreator.js ) ... this one, along with PNG Gauntlet, makes the best result in terms of speed of cutting and size.

Anyway, let's talk some more