背景无限使用电晕sdk

Question

我试图在电晕sdk(无限背景)中滚动背景我使用了两个重复的图像(854x176).

我试过这个功能:

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

它工作得很好,但重复之间出现一个小的空白区域的问题.有一个更好的方法吗？

Answer 1

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

以下是步骤:

1. 设置x的默认纹理包装模式(对y也可以这样做):

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

   包装模式是:

   • " clampToEdge " - (默认)钳制填充不会重复
   • " 重复 " - 重复填充,就好像相同的瓷砖并排放置一样
   • " mirroredRepeat " - 以镜像模式重复填充,每个tile是其旁边的一个镜像

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

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

3. 用背景图像填充显示对象

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

4. 使用适合您应用的任何方法为其设置动画.以下只是一种方式:

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

   在这里,您只需在background.fill对象的x属性上运行转换,delta = true表示我们正在使用x值的更改,而不是最终结束值(请参阅此处).

   使用时间值x,将delta设置为false,使用包装模式进行播放,只是为了查看它对动画的影响.你甚至可能偶然发现了一些你可能想要在以后使用的很酷的效果......

   查看Brent Sorrentino的这本优秀教程,他将详细介绍填充.另外,请参阅CoronaSDK中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()