Make a CG Gallery using Screen Language

[Nagu]

Is it possible?

i mean, i know there is a Recipe for a cg gallery, but this new screen stuff seems so much easier for me, now that i learnt some things!
so i was thinking about it.
i may use imagebuttons or buttons as "cg slots", with the thumbnail of the CG on them, and the add an action that shows the entire image.

Buuuut
the hard part for me is how to make a pages system.
also, the locked/unlocked cgs part, how to define when (or not) an image has been unlocked!
..
does it sounds too crazy?
(or too weird, sorry, because that's the only english i know xD )

thanks in advance!

[raine]

Not at all!

You know, with Ren'Py, you can use Python --a fully fledged programming language.
For pages, you can prepare separate screen for each page, and place a button(s) on each screen to switch between. Or you can make it a bit more general, by defining a python function, which takes a list of which CGs should be displayed on that page.
In fact, if you can give me a template of your screen, we can work through it.

You can simply use an array of booleans to keep track of which CG is activated or not.

[PyTom]

That's correct, but I'm working on porting the current gallery code to screens. I expect it to be included in the next release of Ren'Py, but it could be in the release that will quickly follow.

[raine]

You're awesome, PyTom!!

[Nagu]

raine. I would certainly aprecciate your help, I think i will try myself as you say. Now if that does not work for me, i could wait the new release. That's so great! thanks you both

[raine]

raine. I would certainly aprecciate your help, I think i will try myself as you say. Now if that does not work for me, i could wait the new release. That's so great! thanks you both

Of course
So, could you post what you have done so far?

[Nagu]

so i managed already to make the 'cg screens', one screen for each cg. every screen has three buttons: previous, next, and return (it took me a whiiiile, but i did it xD)
now the problem is the gallery screen itself.

i mean, not the part showing the full cg, but the screen in wich you can see the thumbnails of the images.

i wanted to to do something like this http://img407.imageshack.us/img407/1709 ... screen.jpg
(this is my gallery screen so far . and if you wonder, that's spanish :3 )

instead of those empty boxes, i wish i could put the thumbnail, either of the cg or the locked cg image.
Now, using this code:

Code: Select all

        
# Display a grid of file slots.
        grid 3 3:
            transpose True
            xfill True
            yfill True
            xmaximum 567
            ymaximum 514
            xpos 25
            ypos 40


            # Display ten file slots, numbered 1 - 10.
            for i in range(1, 10):

                # Each file slot is a button.
                imagebutton:
                    action Show('cg1')
                    idle "gui/slot.png"
                    hover "gui/slot_hov.png"

the thing is that all the imagebuttons generated by the grid has the same action (show cg1).
so...i guess i have to do one imagebutton for every cg thumbnail and each locked cg thumbnail?

I could do that, but i'm also really bad with image positioning =_= that's why the grid thingie was very useful.
(woa, that's sounds confusing Dx)

You can simply use an array of booleans to keep track of which CG is activated or not.

i dont really get that part. raine, could you explain it a little more, please? ^^; . i'm such a noob a this stuff.

[raine]

I'm terribly sorry about the late reply --I hope it's not too late!
It looks sweet!

Just replace 'cg1' with

Code: Select all

'cg%d' % i

Here, the 'cg%d' is the actual string, but the %d part will be replaced by the value of the integer variable i at each step. (for details, you can see this page) Then you'll have cg1 as the action for the 1st button, cg2 for the 2nd, and so on! In fact, you can use it for the images as well:

Code: Select all

idle "gui/slot_%d.png" % i
hover "gui/slot_hov_%d.png" % i

Suppose you have 9 CGs. And let's say they all start disabled (you can do this with the following python code)

Code: Select all

cg_state = [False for i in range(9)]

This creates a boolean array of 9 elements, all starts out with the initial value False (=not enabled, for our case).
And depending on whether the cg_state for the ith CG is enabled or not, you can use different images:

Code: Select all

if cg_state[i] == True:
    idle "gui/slot_%d.png" % i
    hover "gui/slot_hov_%d.png" % i
else:
    idle "gui/disabled_slot_%d.png" % i
    hover "gui/disabled_slot_hov_%d.png" % i

(assuming that you have images like guil/slot_disabled_1.png, etc)

[Nagu]

ohh. you make it sound so simple! *O*
and don't worry about time, i'm ok, since i got an answer
i will try as you say, hope it works ^_________^

[Nagu]

I'm sure i'm doing something really stupid and obvious but i don't know what D:

i used your code like this, raine. i'm not sure if it's the way to incorporate it to the my game, though:

Code: Select all

        grid 3 3:
            transpose False
            xfill True
            yfill True
            xmaximum 567
            ymaximum 514
            xpos 25
            ypos 40
            
            for i in range (9):
                if cg_state[i] == True:
                    imagebutton:
                        idle ('gui/th_cg%d.png' % i)
                        hover ('gui/th_hov_cg%d.png' % i)
                        action ('cg%d' % i)
                else:
                    imagebutton:
                        idle 'gui/cg_disable.png'
                        hover 'gui/cg_disable_hov.png' 
                        action Show ('main_menu')

i had to put those ( ) otherwise i got this error:

Code: Select all

expected a keyword argument, colon, or end of line.
idle 'gui/th_cg%d.png' % i

This is the game script example i'm using:

Code: Select all

# You can place the script of your game in this file.

init:


    image cg1= 'cg/cg1.png'


    
    
    $ cg_state = [False for i in range(9)]
        
    
    $ c = Character ('Chara')


# The game starts here.

label start:
    
 c 'You are about to see CG1'
 scene cg1
 $ persistent.cg_state[i] = True
 c 'Now CG1 has been unlocked...i hope so u_u'

Now, the 'disabled thumbn thingie works fine. The crush comes when you start to play and then cg1 is shown (scene cg1).

it says:

Code: Select all

TypeError: 'bool' object does not support item assignment

cg_state = [False for i in range(9)] goes where exactly? maybe it does not go in the init block but in the option script?
ahhh..


asdfs i feel dumb! Dx dunno, maybe i'm just doing it all wrong?

[raine]

No no, you're doing great!

I'm really sorry about that, I usually tend to write in Python and access Ren'Py Python API directly when writing functions/screens/etc, I'm not really good with Ren'Py's own style. When I saw you skipping paranthesis, I thought "so you can write it this way in screens too!", which obviously was a wrong assumption.

I just noticed that you want to make it a persistent array. You should replace all "cg_state"s with "persistent.cg_state", like

Code: Select all

$ persistent.cg_state = [False for i in range(9)]

The fact that it doesn't work for you is weird though, as it is a valid Python statement. I evaluated it anyway on a Python interpreter, and everything looks okay.

Code: Select all

Python 3.1.3 (r313:86834, Jan 28 2011, 20:00:57)                                                                                                                            
[GCC 4.5.2] on linux2                                                                                                                                                       
Type "help", "copyright", "credits" or "license" for more information.                                                                                                      
>>> cg_state = [False for i in range(9)]                                                                                                                                    
>>> print(cg_state)                                                                                                                                                         
[False, False, False, False, False, False, False, False, False]                                                                                                             
>>> cg_state[0] = True                                                                                                                                                      
>>> print(cg_state)                                                                                                                                                      
[True, False, False, False, False, False, False, False, False]                                                                                                              
>>>                                                       

I also tested it in a Ren'Py game and it didn't give me any errors. I tried doing the initialization under init block too. Could paste the full log?

About this line:

Code: Select all

persistent.cg_state[i] = True

You probably wanted to say

Code: Select all

persistent.cg_state[0] = True

which sets the 1st element of the array (indices start from 0 in Python) to True.

[Nagu]

wow.
it works just greeeeat >///> thanks you so so much, raine, you have helped me a lot DD

Now the only thing left is to block the transition between the screen showing a CG unlocked from one wich isn't. Is that possible? because it may be a variable depending on other variable @__@ but it sounds too complicated.

[raine]

That's great ^_^
You don't need any extra variables at all. What is your code for doing a transition when viewing a CG? We only need a few simple modifications there

[Nagu]

^________^ oh yes, here it is:

Code: Select all

screen cg0:
    tag menu
    
    frame:
        background "cg/cg0.png"
        
        
        has hbox:
            xmaximum 320
            ymaximum 400
            xpos 482
            ypos 550

# it's supossed to show the previous cg, though. Since this is cg0 screen, is disabled.            
            imagebutton:
                idle 'gui/prev.png'
                hover 'gui/prev_hov.png'
                ##action Show ( ) 
                
            imagebutton:
                idle 'gui/back.png' 
                hover 'gui/back_hov.png'
                action Show ('gallery') 
             
# The next button is an arrow that shows the next cg
            imagebutton:
                        idle 'gui/next.png'
                        hover 'gui/next_hov.png'
                        action Show('cg1' , transition=fade) 

[raine]

We can make use of a global variable, which hold which CG is currently being shown. Also, some helper functions would be handy (all in Python)

Code: Select all

cur_cg = 0
# Total number of CGs
NCGS = 9

def clamp(x, Min, Max):
        if x < Min:
                return Min
        elif x > Max:
                return Max
        return x

def next_cg():
	cur_cg = clamp(cur_cg+1, 0, NCGS-1)
	renpy.call_screen(show_cg)

def prev_cg():
	cur_cg = clamp(cur_cg-1, 0, NCGS-1)
	renpy.call_screen(show_cg)

assuming that you have a screen named "show_cg", which shows the CG# cur_cg. But I guess you know how to do it by now, you just need to replace

Code: Select all

background "cg/cg0.png"

with

Code: Select all

background "cg/cg%d.png" % cur_cg

The clamp function defined above takes care of boundary checking. By the way, if you want to have a disabled/grayscale button for Previous when displaying the 0th CG, or Next when displaying the last CG, you can add a check like this:

Code: Select all

if cur_cg == 0:
    idle 'gui/back_gray.png' 
    hover 'gui/back_hov_gray.png' # you probably wont need this
else:
    idle 'gui/back.png' 
    hover 'gui/back_hov.png'

and

Code: Select all

if cur_cg == NCGS - 1:
    idle 'gui/next_gray.png'
    hover 'gui/next_hov_gray.png'
else:
    idle 'gui/next.png'
    hover 'gui/next_hov.png'

In case you're wondering why we have "NCGS - 1" and not "NCGS", it's because Python indices start from 0. So first CG is accessed as 0, and the last CG is accessed as NCGS-1.

Now you can use next_cg and prev_cg functions as the actions for next and prev buttons.