Как динамически менять изображения с помощью Metaio

Question

Я только начал изучать Metaio. Я работаю над простым тестовым проектом разработки.

До сих пор я сделал лист отслеживания, поместил изображение и две стрелки (кнопки), что означает следующее изображение и предыдущее изображение.

Для тестирования я сделал одну из кнопок для отображения изображения, а другую для скрытия изображения. Пока все это прекрасно работает.

У меня вопрос, когда я добавляю дополнительные изображения, как я могу динамически перемещать изображения вперед и назад с помощью кнопок "Далее" и "Предыдущий"?

Мой тестовый код:

button2.onTouchStarted = function () {
    image1.hide();
};

button1.onTouchStarted = function () {
    image1.display();
};

Answer 1

Это можно сделать разными способами, я предлагаю вам использовать arel.Scene.getObject и поместите имена ваших изображений в массив, и каждый раз, когда вы нажимаете "Далее" или "Предыдущий", вы подсчитываете ключ массива вверх или вниз.

Я предполагаю, что вы используете редактор Metaio Creator.

Вы должны добавить коды 3 разных места:

Предыдущий (кнопка со стрелкой влево)

button1.onTouchStarted = function () {  
    if (currentImageIndex == firstImageIndex) {
        return;
    }
    arel.Scene.getObject(imageArray[currentImageIndex]).hide();
    currentImageIndex--;
    arel.Scene.getObject(imageArray[currentImageIndex]).display();
    globalsVar['currentImageIndex'] = currentImageIndex;

};

Далее (кнопка со стрелкой вправо)

button2.onTouchStarted = function () {
    if (currentImageIndex == lastImageIndex) {
        return;
    }
    arel.Scene.getObject(imageArray[currentImageIndex]).hide();
    currentImageIndex++;
    arel.Scene.getObject(imageArray[currentImageIndex]).display();
    globalsVar['currentImageIndex'] = currentImageIndex;
};

На вашем глобальном сценарии

var imageArray = ["image1", "image2"]; // and so on extra image names
var firstImageIndex = 0;
var lastImageIndex = imageArray.length - 1;
var currentImageIndex = firstImageIndex;
globalsVar = {};

arel.Scene.getObject(imageArray[currentImageIndex]).display();