如何使用Metaio动态更改图像

时间:2015-10-30 19:25:54

标签: metaio

我刚开始学习Metaio。我正在开发一个简单的开发测试项目。

到目前为止,我已经制作了跟踪表,放置了图像和两个箭头(按钮),这意味着下一个图像和上一个图像。

为了进行测试,我制作了一个显示图像的按钮,另一个用于隐藏图像。到目前为止,这一切都很好。

我的问题是当我添加额外的图片时,如何使用我的下一个和上一个按钮动态地前后移动图像?

我的测试代码:

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

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

X-Ray

1 个答案:

答案 0 :(得分: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();