CDD Parallax Effect w/ Smoothness

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
Lucyper
Newbie
Posts: 9
Joined: Sat Jun 17, 2023 8:07 pm
Projects: The Mad Scientist
Deviantart: Lucyper4u
itch: https://lucyp-r.itch
Contact:

CDD Parallax Effect w/ Smoothness

#1 Post by Lucyper »

I've messing with CDD's for a while and I'm trying to make a parallax effect with some sort of smoothness when you click and drag the mouse around the screen (left to right)

The major problem I'm having is how to calculate and apply the smoothness to the displayable movement, I tried many different ways without much result, so I decided to remove the failed attemps and put the base code below
NOTE: I know there are a few already done parallax out there but my main focus is learning and not copy-pasting.

Code: Select all

init python:
    import pygame as pyg

    class Parallax(renpy.Displayable):
        def __init__(self, child, dist=.05, xanchor=0.5, **kwargs):
            super().__init__(**kwargs)
            self.child = renpy.displayable(child)
            self.dist = dist
            self.xanchor = xanchor
        
        def render(self, width, height, st, at):
            left_click = pyg.mouse.get_pressed()[0]
            xmouse, ymouse = renpy.get_mouse_pos()

            child = renpy.render(self.child, width, height, st, at)
            
            render = renpy.Render(width, height)
            cw, ch = child.get_size()

            pos  = (width * self.xanchor)
            xpos = (pos - (cw * .5))
            off = (cw * self.dist)
                                                                        
            if left_click:
                xpos += (xmouse - pos) / off

            x, y = (xpos, height - ch)

            render.blit(child, (x, y))
            
            renpy.redraw(self, 0)

            return (render)

        def visit(self):
            return [ self.child ]
This works as expected by positioning the display in the correct position and calculating where it should be, but it just sets the position abruptly, and I want this to happen easily, I thought about changing it to a Transform() but I don't know if that's valid

Two Boxes Gif Here an example on how it looks

any suggestion or improvement is welcome, criticism too.

User avatar
Kia
Eileen-Class Veteran
Posts: 1050
Joined: Fri Aug 01, 2014 7:49 am
Deviantart: KiaAzad
Discord: Kia#6810
Contact:

Re: CDD Parallax Effect w/ Smoothness

#2 Post by Kia »

I usually get smooth movement by having variables like `x_target` and add to `x` a small amount till it reaches that target. But I'm sure there are better ways to larp between those values.

Lucyper
Newbie
Posts: 9
Joined: Sat Jun 17, 2023 8:07 pm
Projects: The Mad Scientist
Deviantart: Lucyper4u
itch: https://lucyp-r.itch
Contact:

Re: CDD Parallax Effect w/ Smoothness

#3 Post by Lucyper »

Kia wrote: Sun Apr 28, 2024 2:43 am I usually get smooth movement by having variables like `x_target` and add to `x` a small amount till it reaches that target. But I'm sure there are better ways to larp between those values.
I want to thank you! I manage to make the movement smooth while increasing and decreasing, I'm pretty sure I can improve it but so far it's looking good

Code: Select all

        def render(self, width, height, st, at):
            left_click = pyg.mouse.get_pressed()[0]
            xmouse, ymouse = renpy.get_mouse_pos()

            child = renpy.render(self.child, width, height, st, at)
            
            render = renpy.Render(width, height)
            cw, ch = child.get_size()

            pos = (width * self.xanchor)
            xpos = (pos - (cw * .5))
            off = (cw * self.dist)
            
            self.pos = (pos - (cw * .5))
            self.min = (0 - pos) / off
            self.max = (width - pos) / off
            
            i = 0.5
            v = i if (xmouse - self.pos) / off > 0 else -i
            d = i if self.x < 0 else -i
            
            if left_click:
                self.x += v
                self.pos = xpos + self.x
            
            else:
                if not left_click and self.x != 0:
                    d = max(0, d) if d > 0 else min(0, d)
                    self.x += d
                    self.pos = xpos + self.x

Post Reply

Who is online

Users browsing this forum: No registered users