3

Tem um game browser na internet ele tem um recurso que eu achei interessante e gostaria de saber como se faz.

inserir a descrição da imagem aqui

Como pode-se ver na figura, existem alguns prédios, alguns objetos e algumas pessoas! Olhando assim parece uma imagem pronta, porém qualquer item dessa imagem tem interação! Acaba se tornando uma imagem "interativa" (não aparece, mas o mouse está sobre o "Escritório" e como pode se observar o escritório em questão fica destacado!), como se faz isso?

Sendo mais especifico, gostaria de saber como se faz essa manipulação de imagens, lendo o código fonte do site da a entender que tudo é feito com uma simples manipulação de varias imagens "construindo" uma só, porém não tenho certeza que seja isso, e mesmo que seja como se faz? Porque é como se estivesse especificando "altitude e longitude" para cada imagem. O que eu teria que fazer então para reproduzir tal pratica, seja com as mesmas imagens ou outras!

Gostaria de aprender tal prática pra montar um mini-mapa, parecido com esse, só que com minhas próprias imagens!

inserir a descrição da imagem aqui

4
  • Provavelmente cada prédio é uma imagem diferente e ao passar o mouse é aplicado um efeito. Em HTML você poderia fazer isto fazer cada prédio um <img> com z-index e ao passar o mouse trocar o sprite do prédio ou aplicar um efeito de CSS. Também pode-se fazer isto com canvas. Realmente acho melhor você reformular a questão para ter certeza de qual é o seu "foco". :)
    – Syzoth
    Commented 16/02/2015 às 1:43
  • meu "foco" é basicamente só intender mesmo como funciona, é mais curiosidade. Gosto de ver coisas do tipo na net e tentar entender como funciona! O que você disse por exemplo, já me deu um "caminho" para que eu possa pesquisar mais sobre isso! Commented 16/02/2015 às 1:51
  • 2
    Me desculpe a insistência Ivan, somos uma comunidade de perguntas e respostas. Você deve formular uma pergunta de maneira clara e tentar explicar a sua necessidade (até da para entender). O problema da sua questão/pergunta é que não da para entender aonde você quer usar, ou se você quer montar um jogo com HTML+Javascript. Comentar não torna isto parte da sua questão. Você deve deixar tudo explicado NA QUESTÃO. Obrigado por entender, por favor leia: pt.stackoverflow.com/help/how-to-ask
    – Syzoth
    Commented 16/02/2015 às 1:54
  • 2
    Boa noite (madrugada) Ivan, eu entendi agora a sua duvida é que a questão não está tão bem escrita o quanto poderia estar (Não fui quem negativou), mas agora está um pouco compreensível. Realmente é um pouco complexo dizer "como fazer", seria o que eu disse no primeiro comentário. Porém devem existir caminhos mais fáceis. Se eu encontrar uma API legal e tiver um tempo eu irei responder. Até outro dia.
    – Syzoth
    Commented 16/02/2015 às 3:14

1 Resposta 1

7

Você pode usar API Canvas para alterar as imagens dando a impressão de movimento,construir mapas, e usar todos os recursos do javascript/html5 para dar interatividade a suas imagens

Veja esse exemplo, uma moeda girando a partir de uma unica imagem dividida em frames, comentei as linhas que dão vida ao código ! Frames

// Copyright 2013 William Malone (www.williammalone.com)
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//   http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

(function() {
  // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
  // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
  // requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
  // MIT license

  var lastTime = 0;
  var vendors = ['ms', 'moz', 'webkit', 'o'];
  for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
    window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
  }

  if (!window.requestAnimationFrame)
    window.requestAnimationFrame = function(callback, element) {
      var currTime = new Date().getTime();
      var timeToCall = Math.max(0, 16 - (currTime - lastTime));
      var id = window.setTimeout(function() {
          callback(currTime + timeToCall);
        },
        timeToCall);
      lastTime = currTime + timeToCall;
      return id;
    };

  if (!window.cancelAnimationFrame)
    window.cancelAnimationFrame = function(id) {
      clearTimeout(id);
    };
}());

(function() {

  var coin,
    coinImage,
    canvas;

  function gameLoop() {

    window.requestAnimationFrame(gameLoop);

    coin.update();
    coin.render();
  }

  // Função prepara
  function sprite(options) {

    // inicializando configuração
    var that = {},
      frameIndex = 0,
      tickCount = 0,
      ticksPerFrame = options.ticksPerFrame || 0,
      numberOfFrames = options.numberOfFrames || 1;

    // onde objeto vai ser desenhado 
    that.context = options.context;
    // Largura
    that.width = options.width;
    // altura
    that.height = options.height;
    // objeto que recebe a imagem
    that.image = options.image;

    that.update = function() {

      tickCount += 1;

      if (tickCount > ticksPerFrame) {

        tickCount = 0;

        //verifica se é chegou a ultima imagem
        if (frameIndex < numberOfFrames - 1) {
          // avança proxima imagem
          frameIndex += 1;
        } else {
          // retorna a posição inicial
          frameIndex = 0;
        }
      }
    };

    that.render = function() {

      // Clear the canvas
      that.context.clearRect(0, 0, that.width, that.height);

      // Draw the animation
      that.context.drawImage(
        that.image,
        frameIndex * that.width / numberOfFrames,
        0,
        that.width / numberOfFrames,
        that.height,
        0,
        0,
        that.width / numberOfFrames,
        that.height);
    };

    return that;
  }

  // pega o elemento que vamos tornar um obj canvas
  canvas = document.getElementById("coinAnimation");
  canvas.width = 100;
  canvas.height = 100;

  // cria um um objeto para receber as imagem
  coinImage = new Image();

  // Inicializa um objeto canvas
  coin = sprite({
    context: canvas.getContext("2d"),
    width: 1000,
    height: 100,
    image: coinImage,
    numberOfFrames: 10,
    ticksPerFrame: 4
  });

  // Carrega Roteiro da imagem
  coinImage.addEventListener("load", gameLoop);
  coinImage.src = "http://www.williammalone.com/articles/create-html5-canvas-javascript-sprite-animation/downloads/sprite-animation-demo/images/coin-sprite-animation.png";

}());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>

<head>
  <title>Sprite Animation Demo</title>
</head>

<body>
  <canvas id="coinAnimation"></canvas>
  <script src="sprite-animation-demo.js"></script>
</body>

</html>

(Veja/Execute o código !!)

Veja o artigo completo, O artigo vai mostrar como fazer um jogo utilizando essa moeda.

Sua pergunta era como desenhar um mini-mapa parecido com o que você mostrou, Nesse próximo exemplo você vai poder ter N elementos organizados em mapa vetorizado usando canvas

// Define variables
var tilesetImage = new Image();
tilesetImage.src = 'http://sklambert.com/php/phpThumb/phpThumb.php?src=background.png&w=512';
tilesetImage.onload = drawImage;

var canvas = document.getElementById('main');
var ctx = canvas.getContext('2d');
var tileSize = 32; // The size of a tile (32x32)
var rowTileCount = 20; // The number of tiles in a row of our background
var colTileCount = 32; // The number of tiles in a column of our background
var imageNumTiles = 16; // The number of tiles per row in the tileset image

// The tileset arrays
var ground = [
  [172, 172, 172, 79, 34, 34, 34, 34, 34, 34, 34, 34, 56, 57, 54, 55, 56, 147, 67, 67, 68, 79, 79, 171, 172, 172, 173, 79, 79, 55, 55, 55],
  [172, 172, 172, 79, 34, 34, 34, 34, 34, 34, 146, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 155, 142, 172, 159, 189, 79, 79, 55, 55, 55],
  [172, 172, 172, 79, 79, 34, 34, 34, 34, 34, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 172, 159, 189, 79, 79, 79, 55, 55, 55],
  [188, 188, 188, 79, 79, 79, 79, 34, 34, 34, 36, 172, 172, 143, 142, 157, 79, 79, 79, 79, 79, 79, 187, 159, 189, 79, 79, 79, 55, 55, 55, 55],
  [79, 79, 79, 79, 79, 79, 79, 79, 34, 34, 36, 172, 159, 158, 172, 143, 157, 79, 79, 79, 79, 79, 79, 79, 79, 79, 39, 51, 51, 51, 55, 55],
  [79, 79, 79, 79, 79, 79, 79, 79, 79, 34, 36, 172, 143, 142, 172, 172, 143, 157, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 55],
  [79, 79, 79, 79, 79, 79, 79, 79, 79, 34, 52, 172, 172, 172, 172, 172, 172, 143, 156, 157, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79],
  [79, 79, 79, 79, 79, 79, 79, 79, 79, 34, 52, 172, 172, 172, 172, 172, 172, 159, 188, 189, 79, 79, 79, 79, 79, 171, 172, 172, 173, 79, 79, 79],
  [79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 188, 158, 172, 172, 172, 172, 173, 79, 79, 79, 79, 79, 79, 79, 187, 158, 159, 189, 79, 79, 79],
  [79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 172, 172, 159, 188, 189, 79, 79, 79, 79, 79, 79, 79, 79, 171, 173, 79, 79, 79, 79],
  [79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 172, 172, 173, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 173, 79, 79, 79, 79],
  [155, 142, 157, 79, 79, 79, 79, 79, 79, 79, 79, 79, 187, 188, 188, 189, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 173, 79, 79, 79, 79],
  [171, 172, 173, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 173, 79, 79, 79, 79],
  [171, 172, 143, 156, 157, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 187, 189, 79, 79, 79, 79],
  [187, 188, 158, 172, 173, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79],
  [79, 79, 79, 188, 189, 79, 79, 79, 79, 79, 79, 155, 156, 156, 157, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 155, 156],
  [34, 34, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 172, 172, 173, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 155, 142, 172],
  [34, 34, 34, 79, 79, 79, 79, 79, 79, 79, 79, 171, 172, 172, 173, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 172, 172],
  [34, 34, 34, 34, 79, 79, 79, 79, 79, 79, 155, 172, 172, 159, 189, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 171, 172, 172],
  [34, 34, 34, 34, 34, 34, 79, 79, 79, 79, 171, 172, 172, 173, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 79, 155, 142, 172, 172]
];
var layer01 = [
  [0, 0, 32, 33, 0, 236, 0, 0, 236, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 69, 0, 0, 0, 0, 0, 32, 33],
  [0, 0, 48, 49, 0, 236, 220, 220, 236, 0, 0, 147, 72, 73, 70, 71, 72, 73, 83, 83, 84, 85, 0, 0, 0, 0, 0, 48, 49],
  [0, 0, 64, 65, 54, 0, 236, 236, 0, 0, 162, 163, 84, 89, 86, 87, 88, 89, 99, 99, 100, 101, 0, 0, 0, 0, 7, 112, 113],
  [0, 0, 80, 81, 70, 54, 55, 50, 0, 0, 0, 179, 100, 105, 102, 103, 104, 105, 0, 0, 0, 0, 0, 0, 16, 22, 23, 39],
  [0, 0, 96, 97, 86, 70, 65, 144, 193, 0, 0, 37, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 48, 49],
  [0, 0, 0, 0, 102, 86, 81, 160, 161, 0, 0, 37, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 64, 65, 174, 175, 67, 66, 54],
  [0, 0, 0, 0, 0, 102, 97, 176, 177, 0, 0, 37, 0, 252, 0, 0, 0, 201, 202, 0, 0, 0, 0, 0, 80, 81, 190, 191, 83, 82, 70, 71],
  [0, 0, 0, 0, 0, 0, 0, 48, 49, 0, 0, 53, 0, 0, 0, 0, 0, 217, 218, 0, 0, 0, 0, 0, 96, 97, 222, 223, 99, 98, 86, 87],
  [201, 202, 0, 0, 0, 0, 0, 64, 65, 66, 68, 69, 0, 0, 0, 0, 0, 233, 234, 0, 0, 0, 0, 0, 238, 239, 0, 0, 238, 239, 102, 103],
  [217, 218, 0, 0, 0, 0, 0, 80, 81, 82, 84, 85, 0, 0, 0, 0, 0, 249, 250, 0, 0, 0, 0, 0, 254, 255, 0, 0, 254, 255],
  [233, 234, 0, 0, 0, 0, 0, 96, 97, 98, 100, 101, 0, 0, 0, 0, 0, 0, 0],
  [249, 250, 0, 0, 201, 202, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 238, 239, 0, 0, 238, 239],
  [0, 0, 0, 0, 217, 218, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 254, 255, 0, 0, 254, 255],
  [0, 0, 0, 0, 233, 234, 196, 197, 198],
  [2, 3, 4, 0, 249, 250, 228, 229, 230],
  [18, 19, 20, 8, 0, 0, 244, 245, 246, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 201, 202],
  [0, 35, 40, 24, 25, 8, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 3, 4, 0, 0, 0, 0, 0, 0, 0, 0, 217, 218],
  [0, 0, 0, 40, 41, 20, 8, 9, 0, 0, 0, 0, 0, 0, 0, 16, 17, 18, 19, 20, 21, 0, 0, 0, 0, 0, 0, 0, 233, 234],
  [0, 0, 0, 0, 40, 19, 24, 25, 8, 9, 0, 0, 0, 0, 0, 48, 49, 50, 51, 52, 115, 3, 4, 0, 0, 0, 0, 0, 249, 250],
  [0, 0, 0, 0, 0, 0, 40, 41, 20, 21, 0, 0, 0, 0, 0, 64, 65, 66, 67, 52, 19, 19, 20, 21]
];
var layer02 = [
  [0, 0, 0, 0, 0, 220, 0, 0, 220],
  [],
  [],
  [],
  [],
  [0, 0, 0, 0, 0, 0, 0, 0, 201, 202],
  [0, 0, 0, 0, 0, 0, 0, 0, 217, 218],
  [0, 0, 0, 0, 0, 0, 0, 0, 233, 234],
  [0, 0, 0, 0, 0, 0, 0, 0, 249, 250],
  [],
  [],
  [],
  [],
  [],
  [],
  [],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 196, 197, 198],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 228, 229, 230],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 244, 245, 246],
  []
];

function drawImage() {
  // Draw the arrays to the canvas
  for (var r = 0; r < rowTileCount; r++) {
    for (var c = 0; c < colTileCount; c++) {
      var tile = ground[r][c];
      var tileRow = (tile / imageNumTiles) | 0; // Bitwise OR operation
      var tileCol = (tile % imageNumTiles) | 0;
      ctx.drawImage(tilesetImage, (tileCol * tileSize), (tileRow * tileSize), tileSize, tileSize, (c * tileSize), (r * tileSize), tileSize, tileSize);

      var tile = layer01[r][c];
      var tileRow = (tile / imageNumTiles) | 0;
      var tileCol = (tile % imageNumTiles) | 0;
      ctx.drawImage(tilesetImage, (tileCol * tileSize), (tileRow * tileSize), tileSize, tileSize, (c * tileSize), (r * tileSize), tileSize, tileSize);

      var tile = layer02[r][c];
      var tileRow = (tile / imageNumTiles) | 0;
      var tileCol = (tile % imageNumTiles) | 0;
      ctx.drawImage(tilesetImage, (tileCol * tileSize), (tileRow * tileSize), tileSize, tileSize, (c * tileSize), (r * tileSize), tileSize, tileSize);
    }
  }
}
<canvas id="main" width="1024" height="640">

inserir a descrição da imagem aqui

Veja o artigo de como montar esse mapa passo a passo.

Acredito que com essas orientações você será capaz de fazer até um joguinho melhor !

Caso queira estudar animação com html5,canvas, existe um curso grátis usando processing, que é bem semelhante ao canvas khanacademy Animação

1
  • Bom, pode não ser a melhor alternativa, mas andei estudando um pouco e consegui fazer a manipulação com CSS puro! Mas para algo simples e útil. De qualquer forma a tua resposta foi muito boa, aprendi coisas novas! Commented 18/02/2015 às 21:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .