"Look around" parallax possible?

[marigoldsofthenight]

I've played a few visual novels that have a parallax effect where the player can 'look around' a scene or background image in a limited range by moving the mouse around. Has anyone coded anything like this for Ren'Py?

[marigoldsofthenight]

Still searching.

[Elmiwisa]

There is Viewport which can be used to move view part of the image, and can scroll. Simply superimpose multiple viewport on top of each other, each corresponding to a layer of object in the scene, and set them to basically, have different speed of scrolling, so that object in the background scroll slower than the foreground. When you draw the graphics for the scene, leave transparent background in so you can see through to the next layer.

[marigoldsofthenight]

Sorry... I don't think I'm explaining what it is I'm after properly.

Basically I'm wanting to emulate how the screen moves in this sample visual novel. (You'll have to start a game to see what I mean.)

https://googledrive.com/host/0ByTPdb3Fa ... mo_vn.html

[Elmiwisa]

Uh, yeah, that was what I talked about...
If you want that kind of mouse behaviour, you can simply make an empty layer on top to control the mouse event too.

[marigoldsofthenight]

I was under the impression that viewports could only be used with vertical or horizontal scroll bars like in the tutorial. I'll do my best to read up on them.

[Alera]

I'm quite interested in this, could someone provide a code or at least some more explanations? Thank you!

[Elmiwisa]

I'm quite interested in this, could someone provide a code or at least some more explanations? Thank you!

I just typed on this code. I did not put much effort into it, so I didn't use Viewport, but merely layer_at_list. Though it's just a demonstration of the concept to see how it can be done. using layer_at_list make thing very inflexible for you: you can't have varying level of distance from the point of view to the object that depend on scene for example, unless you are willing to declare a new layer for every single possible distance you might use in the game.
So here it is:

Code: Select all

init 800 python:
    class MouseParallax(renpy.Displayable):
        def __init__(self,layer_info):
            super(renpy.Displayable,self).__init__()
            self.xoffset,self.yoffset=0.0,0.0
            self.sort_layer=sorted(layer_info,reverse=True)
            cflayer=[]
            masteryet=False
            for m,n in self.sort_layer:
                if(not masteryet)and(m<0):
                    cflayer.append("master")
                    masteryet=True
                cflayer.append(n)
            if not masteryet:
                cflayer.append("master")
            cflayer.extend(["transient","screens","overlay"])
            config.layers=cflayer
            config.overlay_functions.append(self.overlay)
            return
        def render(self,width,height,st,at):
            return renpy.Render(width,height)
        def parallax(self,m):
            def trans(d,st,at):
                d.xoffset,d.yoffset=(int)(m*self.xoffset),(int)(m*self.yoffset)
                return 0
            return Transform(function=trans)
        def overlay(self):
            ui.add(self)
            for m,n in self.sort_layer:
                renpy.layer_at_list([self.parallax(m)],n)
            return
        def event(self,ev,x,y,st):
            import pygame
            if ev.type==pygame.MOUSEMOTION:
                self.xoffset,self.yoffset=((float)(x)/(config.screen_width))-0.5,((float)(y)/(config.screen_height))-0.5
            return
    MouseParallax([(400,"farback"),(200,"back"),(-200,"front"),(-400,"inyourface")])

The default master layer will be the layer with the intersection point for the parallax effect i.e. it will not move at all when you pan around. To obtain the parallax effect in the demo game above, use the layer in front of the master layer only. The layer behind the master layer will be stuff like the sun and the moon.
For example, you can use it like this:

Code: Select all

label start:
    show mountain range
    show candy house onlayer front
    show witch onlayer inyourface
    show hubble telescope onlayer back
    show crescent moon onlayer farback
    "The witch invite you to the house. The mountain range looming in the distance. Behind it appears to be the hubble telescope. The heartless moon cracks a malevolent smile."

[Alera]

@Elmiwisa
Thank you so much! This works perfectly~

[asatiir]

I was gonna post the same question before posting in this thread. I was wondering if there's a way to use a phone's gyroscope to give the same effect since phones don't have mice?

[hassohappa]

Sorry to revive an old thread, but does anyone know how to do this in the current version of Renpy?
Elmiwisa's old code posted above often results in a pickling error upon reloading :^(
I found some other threads where people had the same problem, but they never managed to find a way around it...
http://lemmasoft.renai.us/forums/viewto ... 28#p345125
http://lemmasoft.renai.us/forums/viewto ... 43#p314414

After putting renpy.use_cpickle = False, the error message started pointing fingers at this function:

Code: Select all

            def trans(d,st,at):
                d.xoffset,d.yoffset=(int)(m*self.xoffset),(int)(m*self.yoffset)
                return 0

Apparently, since the function is being declared within another one, it's unpickle-able. (Weirdly, the code works for me in a blank project. I've tried slowly pasting in the rest of my project into the blank project bit by bit, but at some arbitrary point it'll always throw the error.)

[xela]

I remember suggesting moving the func out of the methods scope... This does just that and can serve as a permanent solution that should allow saving at any time:

Code: Select all

init 800 python:
    class MouseParallax(renpy.Displayable):
        def __init__(self,layer_info):
            super(renpy.Displayable,self).__init__()
            self.xoffset,self.yoffset=0.0,0.0
            self.sort_layer=sorted(layer_info,reverse=True)
            cflayer=[]
            masteryet=False
            for m,n in self.sort_layer:
                if(not masteryet)and(m<0):
                    cflayer.append("master")
                    masteryet=True
                cflayer.append(n)
            if not masteryet:
                cflayer.append("master")
            cflayer.extend(["transient","screens","overlay"])
            config.layers=cflayer
            config.overlay_functions.append(self.overlay)
            return
        def render(self,width,height,st,at):
            return renpy.Render(width,height)
        def parallax(self,m):
            func = renpy.curry(trans)(disp=self, m=m)
            return Transform(function=func)
        def overlay(self):
            ui.add(self)
            for m,n in self.sort_layer:
                renpy.layer_at_list([self.parallax(m)],n)
            return
        def event(self,ev,x,y,st):
            import pygame
            if ev.type==pygame.MOUSEMOTION:
                self.xoffset,self.yoffset=((float)(x)/(config.screen_width))-0.5,((float)(y)/(config.screen_height))-0.5
            return
    MouseParallax([(400,"farback"),(200,"back"),(-200,"front"),(-400,"inyourface")])
            
    def trans(d, st, at, disp=None, m=None):
        d.xoffset, d.yoffset = int(round(m*disp.xoffset)), int(round(m*disp.yoffset))
        return 0

[hassohappa]

YES saving/reloading is finally fine with that, thank you so much!! With my amateur skills I couldn't figure out how to get it to work on the outside! You've just saved an unknown number of newbs who will Google "how do I do parallax in renpy" in the future.

[trooper6]

what does this look like in practice?

The link above doesn't work anymore...so are we talking about something that looks like the example on this webpage?
http://www.rleonardi.com/tutorial-animation/

[hassohappa]

It looks like the example you posted, except with additional movement in the y direction. You can get rid of that by changing this line in the event function, if you want.

Code: Select all

#               self.xoffset,self.yoffset=((float)(x)/(config.screen_width))-0.5,((float)(y)/(config.screen_height))-0.5
                self.xoffset=((float)(x)/(config.screen_width))-0.5

You can control how much each layer gets offset, by, too! Pretty nifty.