背景无限使用电晕sdk [英] Background infinite using corona sdk

问题描述

我正在尝试在 corona sdk(无限背景)中滚动背景我使用了两张重复的图像 (854x176).

I'm trying to scroll side a background in corona sdk (infinity background) I used two images repeated (854x176).

我试过这个功能:

 function mov(self, event)
   if self.x < -854 then
     self.x = 854
   else
     self.x = self.x - self.speed
   end
 end

它工作得很好，但问题是在重复之间出现了一个小的空白.有没有更好的方法来做到这一点?

it's working just fine but the problem that a small white space occurred between repetitions. Is there a better way to do this?

推荐答案

这样做的一种方法是利用 Graphics 2.0 Engine 的称为重复填充的功能.

One way of doing this would be to take advantage of Graphics 2.0 Engine's feature called repeating fills.

步骤如下:

1. 为 x 设置默认的纹理环绕模式(你也可以为 y 做同样的事情):

1. Set the default texture wrapping mode for x (you could do the same for y too):

display.setDefault("textureWrapX", "mirroredRepeat")

包装方式有:

• "clampToEdge" -(默认)夹住的填充不会重复
• "repeat" - 重复填充，就像并排放置相同的瓷砖
• "mirroredRepeat" - 以镜像模式重复填充，每个瓷砖都是相邻瓷砖的镜像

• "clampToEdge" - (default) clamped fill won't repeat
• "repeat" - fill is repeated as if same tiles were placed side by side
• "mirroredRepeat" - fill is repeated in a mirrored pattern, each tile being a mirror image of the one next to it

创建一个与您想要的背景大小相同的矩形，例如.全屏

Create a rectangle the size of the background you want to have, eg. full screen

local background = display.newRect(display.contentCenterX, display.contentCenterY, 320, 480)

用背景图片填充显示对象

Fill your display object with your background image

background.fill = {type = "image", filename = "background.jpg"}

使用适合您的应用的任何方法对其进行动画处理.以下只是一种方式:

Animate it using whatever method fits your app. Below's just one way:

local function animateBackground()
    transition.to(background.fill, {time=5000, x=1, delta=true, onComplete=animateBackground})
end

animateBackground()

在这里，您只需在 background.fill 对象的 x 属性上运行过渡，delta=true 表示我们宁愿使用 x 值的变化，而不是最终结束值 (参见此处).

Here you simply run transition on x property of background.fill object, delta=true indicating that we're rather using changes in x value, not final ending values (see here).

播放时间 x 的值，将 delta 设置为 false，播放环绕模式，只是为了看看它对动画有什么影响.您甚至可能会不小心发现一些很酷的效果，以后可能会想要使用...

Play with the values for time, x, set delta to false, play with wrapping modes, just to see what effect it has on animation. You might even accidentally discover some cool effect which you might want to use later...

查看 Brent 的这个优秀的教程索伦蒂诺 (Sorrentino) 详细介绍了填充物.此外，请参阅 CoronaSDK 中 Graphics-Premium/PatternFill 下的示例代码.

Check this excellent tutorial by Brent Sorrentino, who goes through more details on fills. Additionally, see sample code in CoronaSDK under Graphics-Premium/PatternFill.

完整代码:

display.setDefault("textureWrapX", "mirroredRepeat")

local background = display.newRect(display.contentCenterX, display.contentCenterY, 320, 480)
background.fill = {type = "image", filename = "background.jpg" }

local function animateBackground()
    transition.to( background.fill, { time=5000, x=1, delta=true, onComplete=animateBackground } )
end

animateBackground()

这篇关于背景无限使用电晕sdk的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！