How to make an animation by replacing images

Asked

Viewed 1,791 times

3

Has a browser game on the internet it has a feature that I found interesting and would like to know how to do.

inserir a descrição da imagem aqui

As you can see in the picture, there are some buildings, some objects and some people! Looking like this looks like a ready image, but any item in this image has interaction! It ends up becoming an "interactive" image (it does not appear, but the mouse is on the "Office" and as can be observed the office in question is highlighted!), how it does this?

Being more specific, I would like to know how to do this manipulation of images, reading the source code of the site to understand that everything is done with a simple manipulation of several images "building" one, but I’m not sure that this is it, and even if it is how it is done? Because it’s like you’re specifying "altitude and longitude" for each image. What I would have to do then to reproduce such practice, whether with the same images or other!

I would like to learn such practice to assemble a map Mini-map, similar to this one, only with my own images!

inserir a descrição da imagem aqui

javascript html5 animation canvas

  • Probably each building is a different image and when passing the mouse is applied an effect. In HTML you could do this make each building one <img> with z-index and when passing the mouse change the building’s Sprite or apply a CSS effect. You can also do this with canvas. I really think you better rephrase the question to make sure what your "focus is". :)

  • my "focus" is basically just intender even as it works, it’s more curiosity. I like to see things like this on the net and try to understand how it works! What you said for example, has already given me a "way" so I can research more about this!

  • 2

    I’m sorry to insist Ivan, we’re a community of questions and answers. You should formulate a question clearly and try to explain your need (even to understand). The problem with your question/question is that you can’t understand where you want to use it, or if you want to build a game with HTML+Javascript. Commenting does not make this part of your question. You should leave it all explained IN THE QUESTION. Thank you for understanding, please read: http://answall.com/help/how-to-ask

  • 2

    Good night (dawn) Ivan, I understood now your doubt is that the question is not as well written as it could be (I was not the one who negatived), but now it is a little understandable. It really is a little complex to say "how to do", that would be what I said in the first comment. But there must be easier ways. If I find a cool API and have a time I will respond. Until another day.

1 answer

7


You can use API Canvas to change the images giving the impression of movement, build maps, and use all the features of javascript/Html5 to give interactivity to your images

Take this example, a coin rotating from a single image divided into frames, I commented on the lines that give life to the code ! 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>

(View/Execute the code !!)

See the full article, The article will show how to make a game using that currency.

Your question was how to draw a Mini-map similar to what you showed, In this next example you will be able to have N elements organized in vector map using 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

See the article on how to build this map step by step.

I believe that with these guidelines you will be able to make even a better game !

If you want to study animation with Html5,canvas, there is a free course using Processing, which is very similar to canvas khanacademy Animation

  • Well, it may not be the best alternative, but I’ve been studying a little and managed to do the manipulation with pure CSS! But for something simple and useful. Anyway your answer was very good, I learned new things!

Browser other questions tagged javascript html5 animation canvas

You are not signed in. Login or sign up in order to post.