Page 1 of 1

How to create a parallax in the main menu

Posted: Fri Feb 15, 2019 9:09 pm
by 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?

Re: How to create a parallax in the main menu

Posted: Mon Feb 18, 2019 2:42 pm
by SONTSE
SomeDude wrote:
Fri Feb 15, 2019 9:09 pm

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))

Re: How to create a parallax in the main menu

Posted: Tue Feb 19, 2019 7:58 pm
by 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!

Re: How to create a parallax in the main menu

Posted: Wed May 08, 2019 9:51 pm
by lacticacid
Lena_Borodach wrote:
Mon Feb 18, 2019 2:42 pm
SomeDude wrote:
Fri Feb 15, 2019 9:09 pm

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?

Re: How to create a parallax in the main menu

Posted: Thu May 09, 2019 11:37 am
by SONTSE
lacticacid wrote:
Wed May 08, 2019 9:51 pm
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

Re: How to create a parallax in the main menu

Posted: Thu May 09, 2019 9:31 pm
by lacticacid
Lena_Borodach wrote:
Thu May 09, 2019 11:37 am
lacticacid wrote:
Wed May 08, 2019 9:51 pm
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!

Re: How to create a parallax in the main menu

Posted: Fri May 10, 2019 5:10 am
by 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
    


Re: How to create a parallax in the main menu

Posted: Fri May 10, 2019 9:20 pm
by lacticacid
Lena_Borodach wrote:
Fri May 10, 2019 5:10 am
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.