How to create a parallax in the main menu

Discuss how to use the Ren'Py engine to create visual novels and story-based games. New releases are announced in this section.
Forum rules
This is the right place for Ren'Py help. Please ask one question per thread, use a descriptive subject like 'NotFound error in option.rpy' , and include all the relevant information - especially any relevant code and traceback messages. Use the code tag to format scripts.
Post Reply
Message
Author
SomeDude
Newbie
Posts: 10
Joined: Fri Feb 15, 2019 8:52 pm
Contact:

How to create a parallax in the main menu

#1 Post by SomeDude » Fri Feb 15, 2019 9:09 pm

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?

User avatar
Lena_Borodach
Regular
Posts: 93
Joined: Sun Nov 24, 2013 10:49 pm
Completed: 7 VN's so far
Contact:

Re: How to create a parallax in the main menu

#2 Post by Lena_Borodach » 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))
Look! It's moving. It's alive. It's alive... IT'S ALIVE! Oh, in the name of God! Now I know what it feels like to be God!(@Henry_Frankenstein. Sums up my coding style)

SomeDude
Newbie
Posts: 10
Joined: Fri Feb 15, 2019 8:52 pm
Contact:

Re: How to create a parallax in the main menu

#3 Post by SomeDude » Tue Feb 19, 2019 7:58 pm

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
Regular
Posts: 36
Joined: Fri Nov 23, 2018 6:44 pm
Contact:

Re: How to create a parallax in the main menu

#4 Post by lacticacid » Wed May 08, 2019 9:51 pm

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?
~There is almost always a better, easier way to approach a problem.~

User avatar
Lena_Borodach
Regular
Posts: 93
Joined: Sun Nov 24, 2013 10:49 pm
Completed: 7 VN's so far
Contact:

Re: How to create a parallax in the main menu

#5 Post by Lena_Borodach » 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
Look! It's moving. It's alive. It's alive... IT'S ALIVE! Oh, in the name of God! Now I know what it feels like to be God!(@Henry_Frankenstein. Sums up my coding style)

lacticacid
Regular
Posts: 36
Joined: Fri Nov 23, 2018 6:44 pm
Contact:

Re: How to create a parallax in the main menu

#6 Post by lacticacid » Thu May 09, 2019 9:31 pm

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!
~There is almost always a better, easier way to approach a problem.~

User avatar
Lena_Borodach
Regular
Posts: 93
Joined: Sun Nov 24, 2013 10:49 pm
Completed: 7 VN's so far
Contact:

Re: How to create a parallax in the main menu

#7 Post by Lena_Borodach » 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
    

Look! It's moving. It's alive. It's alive... IT'S ALIVE! Oh, in the name of God! Now I know what it feels like to be God!(@Henry_Frankenstein. Sums up my coding style)

lacticacid
Regular
Posts: 36
Joined: Fri Nov 23, 2018 6:44 pm
Contact:

Re: How to create a parallax in the main menu

#8 Post by lacticacid » Fri May 10, 2019 9:20 pm

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.
~There is almost always a better, easier way to approach a problem.~

Post Reply

Who is online

Users browsing this forum: No registered users