How to create a parallax in the main menu

[SomeDude]

I've been trying to achieve this parallax effect on my main menu, but nothing I try seems to work.

I tried using the code provided by Geckos in this Topic: viewtopic.php?t=47482
But this only seems to work in-game with the "show" statement and not the "add" statement which is what I used to create my background (my background is made up of multiple images, but I only want to move one of them so I don't think it's necessary to go into detail about it).

I also tried using this image tracking code provided by PyTom in this Topic: viewtopic.php?t=28495
This worked, but I have no clue how to tinker with it even after reading the CDD renpy page.

I would like for the background image to follow the cursor, but only slightly. Is this possible? Or am I just looking for the wrong things entirely?

[SONTSE]

I also tried using this image tracking code provided by PyTom in this Topic: viewtopic.php?t=28495
This worked, but I have no clue how to tinker with it even after reading the CDD renpy page.

I would like for the background image to follow the cursor, but only slightly. Is this possible? Or am I just looking for the wrong things entirely?

this is exact line of PyTom's code you need to tinker.

Code: Select all

rv.blit(cr, (self.x - cw / 2, self.y - ch / 2))

what's within inner hooks is a coordinates of upper left corner of displayed image.
to tinker it we need to apply some math

below is my guess of exact formula. currently not in shape to properly test it though, but I hope you've got the point ^^

Code: Select all

factor = 30 # this is how much your image will move
csw,csh = (config.screen_width,config.screen_height)
cx = (self.x-csw/2)*factor/csw-cw/2
cy = (self.y-csh/2)*factor/csh-ch/2
rv.blit(cr, (cx,cy))

[SomeDude]

Code: Select all

factor = 30 # this is how much your image will move
csw,csh = (config.screen_width,config.screen_height)
cx = (self.x-csw/2)*factor/csw-cw/2
cy = (self.y-csh/2)*factor/csh-ch/2
rv.blit(cr, (cx,cy))

[/quote]

Works perfectly! This is exactly what I needed. Thanks a bunch!

[lacticacid]

I also tried using this image tracking code provided by PyTom in this Topic: viewtopic.php?t=28495
This worked, but I have no clue how to tinker with it even after reading the CDD renpy page.

I would like for the background image to follow the cursor, but only slightly. Is this possible? Or am I just looking for the wrong things entirely?

this is exact line of PyTom's code you need to tinker.

Code: Select all

rv.blit(cr, (self.x - cw / 2, self.y - ch / 2))

what's within inner hooks is a coordinates of upper left corner of displayed image.
to tinker it we need to apply some math

below is my guess of exact formula. currently not in shape to properly test it though, but I hope you've got the point ^^

Code: Select all

factor = 30 # this is how much your image will move
csw,csh = (config.screen_width,config.screen_height)
cx = (self.x-csw/2)*factor/csw-cw/2
cy = (self.y-csh/2)*factor/csh-ch/2
rv.blit(cr, (cx,cy))

Would you happen to know how to stop it from getting into its original position when the cursor goes past the edge of the window?

[SONTSE]

Would you happen to know how to stop it from getting into its original position when the cursor goes past the edge of the window?

on that occasion both x and y on UDD's 'event' section gain -1 value. so you just need to if these values out
insertion suggested below is somewhat brutal, but might work

Code: Select all

        def event(self, ev, x, y, st):
            #insert here
            if x<0 or y<0:
                return
                #rest of code here

[lacticacid]

Would you happen to know how to stop it from getting into its original position when the cursor goes past the edge of the window?

on that occasion both x and y on UDD's 'event' section gain -1 value. so you just need to if these values out
insertion suggested below is somewhat brutal, but might work

Code: Select all

        def event(self, ev, x, y, st):
            #insert here
            if x<0 or y<0:
                return
                #rest of code here

Unfortunately, this doesn't seem to work!

[SONTSE]

whoops, just realized my remarks indented in a misleading way. this would be more clear

Code: Select all

    def event(self, ev, x, y, st):
            #insert here
            if x<0 or y<0:
                return
            #rest of code here

in case of further hardships there is tested worknig example code

Code: Select all

#to run this toss any image into images dir of your project and rename it into 'image'
init python:
    class TrackCursor(renpy.Displayable):
    
        def __init__(self, child):
        
            super(TrackCursor, self).__init__()
        
            self.child = renpy.displayable(child)
        
            self.x = None
            self.y = None
        
        def render(self, width, height, st, at):
        
            rv = renpy.Render(width, height)
        
            if self.x is not None:
                cr = renpy.render(self.child, width, height, st, at)
                cw, ch = cr.get_size()
                factor = 300 # this is how much your image will move
                csw,csh = (config.screen_width,config.screen_height)
                cx = (self.x-csw/2)*factor/csw #-cw/2
                cy = (self.y-csh/2)*factor/csh #-ch/2
                rv.blit(cr, (cx,cy))
        
            return rv
        
        def event(self, ev, x, y, st):
            if x<0 or y<0:
                return
        
            if (x != self.x) or (y != self.y):
                self.x = x
                self.y = y
                renpy.redraw(self, 0)   
                
image bgr = TrackCursor('image')

label main_menu:
    return
label start:
    show bgr
    pause
    return
    

[lacticacid]

whoops, just realized my remarks indented in a misleading way. this would be more clear

Code: Select all

    def event(self, ev, x, y, st):
            #insert here
            if x<0 or y<0:
                return
            #rest of code here

in case of further hardships there is tested worknig example code

Code: Select all

#to run this toss any image into images dir of your project and rename it into 'image'
init python:
    class TrackCursor(renpy.Displayable):
    
        def __init__(self, child):
        
            super(TrackCursor, self).__init__()
        
            self.child = renpy.displayable(child)
        
            self.x = None
            self.y = None
        
        def render(self, width, height, st, at):
        
            rv = renpy.Render(width, height)
        
            if self.x is not None:
                cr = renpy.render(self.child, width, height, st, at)
                cw, ch = cr.get_size()
                factor = 300 # this is how much your image will move
                csw,csh = (config.screen_width,config.screen_height)
                cx = (self.x-csw/2)*factor/csw #-cw/2
                cy = (self.y-csh/2)*factor/csh #-ch/2
                rv.blit(cr, (cx,cy))
        
            return rv
        
        def event(self, ev, x, y, st):
            if x<0 or y<0:
                return
        
            if (x != self.x) or (y != self.y):
                self.x = x
                self.y = y
                renpy.redraw(self, 0)   
                
image bgr = TrackCursor('image')

label main_menu:
    return
label start:
    show bgr
    pause
    return
    

Nope. Pasted the entire code and it still doesn't work for me for some reason. The image only moves when the cursor is on the bottom right fourth of the screen.