Создайте несколько GIF-файлов из одного источника в P5. js - PullRequest
Новая
       23

Создайте несколько GIF-файлов из одного источника в P5. js

0 голосов
/ 03 апреля 2020

Я создаю игру, где я должен использовать один и тот же GIF в нескольких местах. Я использовал этот метод для создания и отображения GIF.

Но когда я пытаюсь использовать его несколько раз в разные промежутки времени. Все кадры остаются синхронизированными c вместо запуска со старта в следующий раз: я изменил приведенный выше код к этому: 

var open, frame, o1;

function preload() {
  load = loadImage("doorOpen.gif");
}

function setup() {
  createCanvas(0, 0);
  background(0);
}

function draw() {
  open = createImg("doorOpen.gif");
  open.position(0, 0);
  open.size(100,100);

  setTimeout(function(){
    o1 = createImg("doorOpen.gif")
    o1.position(0,150);
    o1.size(100,100);
  }, 1000);
}

Я хочу, чтобы при добавлении второго GIF он воспроизводился с начала. Но вместо этого; начинается с позиции первого GIF.

1 Ответ

1 голос
/ 05 апреля 2020

Хорошие новости, это возможно.

Вы создаете новые html элементы с gif в качестве источника изображения. Ваш браузер пытается быть умным в этом и пытается сэкономить ресурсы, загружает GIF один раз, а затем отображает его снова и снова.

Вы можете обмануть браузер, думая, что это другое изображение, добавив '?' и случайное число в URL. Он все равно будет загружать то же изображение, но оно будет уникальным. Ниже я показал, как это сделать.

На другой ноте; при вызове createImg () в функции рисования, как вы делали выше, он добавляет 2 элемента изображения КАЖДЫЙ кадр и приводит к тысячам изображений в DOM и создает sh ваш браузер. Я переместил его в функцию настройки. 

var open, o1;

function setup() {

  createCanvas(0, 0);
  background(0);

  open = createImg("doorOpen.gif");
  open.position(0, 0);
  open.size(100, 100);

  setTimeout(function() {
    o1 = createImg("doorOpen.gif?" + random());
    o1.position(0, 150);
    o1.size(100, 100);
  }, 800);

}
...