How to do this?

[SuperbowserX]

Suppose I have this image:



What I desire is something like this, where a certain horizontal portion of the image is visible but the rest of the screen is black bars. (I know that in this example, the image is not exactly between the bars, but you get the idea.



And then, at certain points, the image can shift. Example: https://i.imgur.com/kaehV49.gifv Note how the image moves but it remains trapped behind the black bars.

The idea here is that the image is always enclosed between two black borders. And that at points, the image can be moved, but that movement happens between the two borders. In other words, the two borders are "concealing" part of the image, and by moving the image around the part that is unconcealed changes.

My ultimate goal here is to move the camera very slightly to the left/right, or to reveal previously unseen parts of the background image without having to just change it.

Hope I've adequately explained the desire. How can this be done? If you don't quite understand I'd be happy to explain further.

[Chekhov]

Why not have 2 black images that you show over the top of the previous image? If there are black images overlaid on the background, then you can move those and it seems like a new part is being revealed.

[MaydohMaydoh]

To get black borders on top of the image you could make a screen with 2 frames with black backgrounds.

Code: Select all

screen borders():
	frame align 0.0 yfill True xsize 200 ## left border
	frame align 1.0 yfill True xsize 200 ## right border

Then show it when you need it.

Code: Select all

label start:
	scene street ## background image
	show screen borders ## to show the screen
	"Say something funny."

then hide it when you don't need it.

Code: Select all

hide screen borders

[SuperbowserX]

Some trouble.

Code: Select all

define e = Character("Eileen")
image bg = "bg.jpg"
screen borders():
    frame align 0.0 yfill True xsize 200 ## left border
    frame align 1.0 yfill True xsize 200 ## right border

label start:
    scene bg ## background image
    show screen borders ## to show the screen

    while True: #this is here because i plan to experiment with shifting screens
        e "You've created a new Ren'Py game."

        e "Once you add a story, pictures, and music, you can release it to the world!"

    return

Gives me this error:

Code: Select all

I'm sorry, but an uncaught exception occurred.

While processing the align property of anonymous style:
  File "game/script.rpy", line 12, in script
    e "You've created a new Ren'Py game."
TypeError: 'float' object has no attribute '__getitem__'

-- Full Traceback ------------------------------------------------------------

Full traceback:
  File "game/script.rpy", line 12, in script
    e "You've created a new Ren'Py game."
  File "C:\Users\A\Desktop\Games\renpy-6.99.12.4-sdk\renpy\ast.py", line 652, in execute
    renpy.exports.say(who, what, interact=self.interact, *args, **kwargs)
  File "C:\Users\A\Desktop\Games\renpy-6.99.12.4-sdk\renpy\exports.py", line 1199, in say
    who(what, *args, **kwargs)
  File "C:\Users\A\Desktop\Games\renpy-6.99.12.4-sdk\renpy\character.py", line 1016, in __call__
    self.do_display(who, what, cb_args=self.cb_args, **display_args)
  File "C:\Users\A\Desktop\Games\renpy-6.99.12.4-sdk\renpy\character.py", line 817, in do_display
    **display_args)
  File "C:\Users\A\Desktop\Games\renpy-6.99.12.4-sdk\renpy\character.py", line 566, in display_say
    rv = renpy.ui.interact(mouse='say', type=type, roll_forward=roll_forward)
  File "C:\Users\A\Desktop\Games\renpy-6.99.12.4-sdk\renpy\ui.py", line 287, in interact
    rv = renpy.game.interface.interact(roll_forward=roll_forward, **kwargs)
  File "C:\Users\A\Desktop\Games\renpy-6.99.12.4-sdk\renpy\display\core.py", line 2649, in interact
    repeat, rv = self.interact_core(preloads=preloads, trans_pause=trans_pause, **kwargs)
  File "C:\Users\A\Desktop\Games\renpy-6.99.12.4-sdk\renpy\display\core.py", line 3033, in interact_core
    root_widget.visit_all(lambda i : i.per_interact())
  File "C:\Users\A\Desktop\Games\renpy-6.99.12.4-sdk\renpy\display\core.py", line 511, in visit_all
    d.visit_all(callback)
  File "C:\Users\A\Desktop\Games\renpy-6.99.12.4-sdk\renpy\display\core.py", line 511, in visit_all
    d.visit_all(callback)
  File "C:\Users\A\Desktop\Games\renpy-6.99.12.4-sdk\renpy\display\core.py", line 511, in visit_all
    d.visit_all(callback)
  File "C:\Users\A\Desktop\Games\renpy-6.99.12.4-sdk\renpy\display\screen.py", line 428, in visit_all
    self.child.visit_all(callback)
  File "C:\Users\A\Desktop\Games\renpy-6.99.12.4-sdk\renpy\display\core.py", line 511, in visit_all
    d.visit_all(callback)
  File "C:\Users\A\Desktop\Games\renpy-6.99.12.4-sdk\renpy\display\core.py", line 508, in visit_all
    for d in self.visit():
  File "C:\Users\A\Desktop\Games\renpy-6.99.12.4-sdk\renpy\display\layout.py", line 1058, in visit
    return [ self.style.background ] + self.children
  File "gen/styleclass.pxi", line 133, in renpy.styledata.styleclass.Style.background.__get__
  File "style.pyx", line 486, in renpy.style.StyleCore._get
  File "style.pyx", line 702, in renpy.style.build_style
  File "style.pyx", line 699, in renpy.style.build_style
  File "gen/style_functions.pyx", line 1804, in style_functions.align_property
  File "include/style_common.pxi", line 30, in style_functions.index_0
    return v[0]
TypeError: 'float' object has no attribute '__getitem__'

Windows-8-6.2.9200
Ren'Py 7.0.0.196
Choicie 1.0
Thu Aug 16 08:27:47 2018

[MaydohMaydoh]

Sorry, my bad.

Code: Select all

    frame align 0.0 yfill True xsize 200 ## left border
    frame align 1.0 yfill True xsize 200 ## right border

Change align to yalign.

[SuperbowserX]

That's better but only the left border is showing for some reason.

[MaydohMaydoh]

No wait, my heads away. It's xalign not yalign. Sorry.

[SuperbowserX]

Thank you so much! This works just as intended. I'll post the code here for my own future reference and anyone who stumbles upon this thread in the future.

Code: Select all

define e = Character("Eileen")
image bg = "bg.jpg"
screen borders():
    frame xalign 0.0 yfill True xsize 400 ## left border
    frame xalign 1.0 yfill True xsize 400 ## right border

label start:
    scene bg
    show screen borders
    while True:
        e "About to move left."

        show bg at left with move

        e "Let's move back now."

        show bg at center with move

        e "Let's go right."

        show bg at right with move

        e "Now let's start over at the center."

        show bg at center with move

    return

[SuperbowserX]

Bit of an issue actually. The black screens' borders are light blue (which is the GUI color I chose). Is there a way to fix that or make them just have black borders?

[MaydohMaydoh]

Use the background style property:

Code: Select all

frame xalign 0.0 yfill True xsize 400 background '#000000'

Then you can give them any color you want.

[SuperbowserX]

Thank you so much! I appreciate your help Maydoh.

[Remix]

To do the same in ATL you could just use crop and pos...

Code: Select all

# crop width, start x, end x, timebase
transform pan_crop(xcrop=0.35, xpos_start=0.0, xpos_end=0.65, time=3.0):
    crop_relative True
    crop (xpos_start, 0, xcrop, 1.0)
    pos (xpos_start, 0.0)
    linear time crop (xpos_end, 0, xcrop, 1.0) pos (xpos_end, 0.0)

image pan_view = "images/bgs/bg_10.png"

label start:

    scene black
    show pan_view at pan_crop(0.25, 0.0, 0.75, 4.0)
    "..."
    show pan_view at pan_crop(0.25, 0.75, 0.25, 2.0)
    "..."