如何使用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();