This Kivy project demonstrates how scroll parallax layers and foreground objects.
You need to create a long thin texture that represents the sky gradient. You will also need two tilable textures: one for the front parallax layer and one for the back. You can use a vector drawing program to create them such as Adobe Illustrator or Inkscape, or you can use a pixel editing program such as Piskel. You will also need to create a foreground image. I used Piskel for this.
First you'll draw a full screen Rectangle, by stretching the single pixel bitmap sky gradiant across the whole screen.
Then you'll make two full screen width rectangles, and you'll assume that the texture repeats twice across this width. In each case the rectangle drawn is the screen width and doesn't move, but the pixels mapped onto those rectangles are taken from a moving region of the image file. When those coordinates move beyond the original image, they are reset back to the beginning. You won't see this transition since the image file pixels repeat.
Finally, you'll add a sprite as an Image which you'll then move in code from one side of the screen to the other. When the sprite goes beyond the edge its position is reset to the other side.
Use an editor to create a main.py file. You can copy the following template code into this file:
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.clock import Clock
from kivy.core.image import Image as CoreImage
from kivy.graphics import Rectangle
from kivy.properties import ObjectProperty
from kivy.core.window import Window
class ScrollingImage(Widget):
image = ObjectProperty(None)
time = 0
def build(self):
with self.canvas:
texture = CoreImage(self.image).texture
texture.wrap = 'repeat'
self.rectangle = Rectangle(texture=texture, size=self.size, pos=self.pos)
def tex_coords(self, time):
return [time, 1, 2.0 + time, 1, 2 + time, 0.03, time, 0.03]
def update(self, dt):
self.time += dt
if (self.time > 1.0):
self.time -= 1.0
self.rectangle.tex_coords = self.tex_coords(self.time)
class ScrollingScreen(Widget):
front_layer = ObjectProperty(None)
back_layer = ObjectProperty(None)
cactus = ObjectProperty(None)
def update(self, dt):
self.front_layer.update(dt * 0.1)
self.back_layer.update(dt * 0.05)
self.cactus.pos[0] -= dt * 200.0
if (self.cactus.pos[0] < -self.cactus.size[0]):
self.cactus.pos[0] = Window.size[0]
def build(self):
self.back_layer.build()
self.front_layer.build()
class ScrollingApp(App):
def build(self):
scroller = ScrollingScreen(size=Window.size)
scroller.build()
Clock.schedule_interval(scroller.update, 1.0 / 60.0)
return scroller
if __name__ == '__main__':
ScrollingApp().run()
Use an editor to create a scrolling.kv file. You can copy the following template layout into this file:
#:kivy 1.9.0
<ScrollingScreen>:
front_layer: front
back_layer: back
cactus: cactus1
canvas.before:
BorderImage:
source: 'sky-gradient.png'
border: 0, 0, 0, 0
size: self.width, self.height
pos: 0, 0
ScrollingImage:
id: back
image: 'mountains2.png'
pos: 0, root.height / 8
size: root.width, root.height / 8
ScrollingImage:
id: front
image: 'mountains.png'
pos: 0, root.height / 8
size: root.width, root.height / 8
Image:
id: cactus1
source: 'cactus.png'
pos: 0, 0
size: self.size
You can test by running the following command from the Anaconda prompt:
python main.py
- Create textures that repeat 3 or 4 times across the screen
- Create a third layer
- Make additional foreground objects
- Create foreground objects that move at different speeds
- Add a sun that rises
- Scroll the sky gradient
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent