Как динамически изменять изображения с помощью 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();