Should I use an imagemap or... ?

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
User avatar
Cinnamoon
Regular
Posts: 100
Joined: Wed May 30, 2012 5:24 am
Projects: Crystal Aria ~Starlight (20%), かわいいなリズム (38%)
Organization: CoffeeCat
Location: France~ ^^
Contact:

Should I use an imagemap or... ?

#1 Post by Cinnamoon » Tue Jul 24, 2012 3:42 pm

Hello everyone~ !

I need your help ^^
Image
Sooo~
In my work-in-progress game, this is the screen where you choose what to do after school. I don't really know how to code this ! I'll explain myself :
**where the red stars are, I want to display the date (like "tuesday 9 september" or something like this)
**where the arrow is, I want those tiny buttons to be clicked in order to perform an action
**where the line is, I want some text to appears depending on the action performed or the date (this isn't my textbox at all, because it is a special screen)
**where the red dots are, I want to display the stats ^^

...Hmm, I think this is all. There's so much to display on this screen, I really don't know how to do it. Can someone help me ?

Thank you so much for your time~ <3

User avatar
SundownKid
Lemma-Class Veteran
Posts: 2299
Joined: Mon Feb 06, 2012 9:50 pm
Completed: Icebound, Selenon Rising Ep. 1-2
Projects: Selenon Rising Ep. 3-4
Organization: Fastermind Games
Deviantart: sundownkid
Location: NYC
Contact:

Re: Should I use an imagemap or... ?

#2 Post by SundownKid » Tue Jul 24, 2012 6:18 pm

That would basically have to be a Screen using Screen Language. The date would be a line of text based on a variable, the buttons would be imagebuttons inside vboxes, the line of text would be another screen (or tooltip?) and the stats would again be text based on a variable.

User avatar
Cinnamoon
Regular
Posts: 100
Joined: Wed May 30, 2012 5:24 am
Projects: Crystal Aria ~Starlight (20%), かわいいなリズム (38%)
Organization: CoffeeCat
Location: France~ ^^
Contact:

Re: Should I use an imagemap or... ?

#3 Post by Cinnamoon » Tue Jul 24, 2012 6:42 pm

Thank you for the quick answer, SundownKid~ ^^
I think I understand what you mean by using screen language, though... I really don't know how to use it T.T I can only make imagemaps (sad to say).
I'll give it a try, and maybe I can make this right :3

User avatar
Arowana
Miko-Class Veteran
Posts: 531
Joined: Thu May 31, 2012 11:17 pm
Completed: a2 ~a due~
Projects: AXIOM.01, The Pirate Mermaid
Organization: Variable X, Navigame
Tumblr: navigame-media
itch: navigame
Contact:

Re: Should I use an imagemap or... ?

#4 Post by Arowana » Tue Jul 24, 2012 7:26 pm

Cute screen! :) For trying to code it, I would also definitely use screen language.

To the screen, I'd first add the background behind the buttons with the add statement.

The date, stats, and textbox could then be added using the text statement. You can set variables for the different dates, stats, etc. in the game and use "[variable's name]" to display them in the text.

And for the activities buttons, I would use imagebuttons that Jump to different events. It may be useful to use hbox, vbox, or grid to organize the buttons into rows and columns.

Since you've not used screen language before, would a code template be helpful? I'll try to outline what I think might work, but since I don't have your images, you'll have to test it yourself and probably adjust lots of things to make it work properly. ^^; A note - you don't have to use frame for everything like I did. I like it for grouping things together, but you can add the stuff inside the frame directly to the screen if you specify all their positions separately. You also don't have to use xpos/ypos to specify positions - there are many ways to do it.

Code: Select all

# put this in your "screens.rpy" file
screen examplescreen:
    
    add "background.png" # first add the background image
    
    frame: # area for the date
        xpos ? # set the horizontal position
        ypos ? # set the vertical position
        
        add  "datebox.png" # background for the datebox
        text "[date]" # current date - date is a string variable you'll have to set in your script, every time you have a new day
    
    frame: # area for the textbox - it's very similar to the date box
        xpos ? # set the horizontal position
        ypos ? # set the vertical position
        
        add "textbox.png" # background for the textbox
        text "[description]" # description in the textbox - description is a string variable you'll have to set in your script, whenever you jump to an event
        
    frame: # area for the activity buttons
        xpos ? # set the horizontal position
        ypos ? # set the vertical position
        
        hbox: # stacks objects horizontally
            vbox: # stacks objects vertically
                imagebutton:
                    idle "bathtub.png" # idle button image
                    hover "bathtub_hover.png" # hovered button image
                    action Jump("take_a_bath") # pressing the button causes you to jump to the "take_a_bath" label in your script - this is probably where you will want to set the "description" variable
                imagebutton: 
                    idle "magazine.png"
                    hover "magazine_hover.png"
                    action Jump("read_magazine") 
                    
            vbox: # starts a new column
                imagebutton:
                    idle "blahblah.png"
                    hover "blahblah_hover.png"
                    action Jump("talk_blah") 
                
                #fill in the rest of the buttons
                
    frame: # area for the stat buttons    
        xpos ? # set the horizontal position
        ypos ? # set the vertical position
    
        vbox: # puts objects in rows
            xpos ? # set the horizontal position
            ypos ? # set the vertical position
        
            add "statbackground.png" # add background for stat buttons
            add "statbackground.png"
            add "statbackground.png"
            add "statbackground.png"
            add "statbackground.png"
            
        vbox: # puts objects in rows
            xpos ? # set the horizontal position
            ypos ? # set the vertical position
        
            text "intelligence  [intelligence_stat]" # intelligence_stat, fashion_stat, etc. are all variables you have to set in the game
            text "fashion       [fashion_stat]"
            text "charme       [charme_stat]"
            text "gentilesse    [gentilesse_stat]"
            text "stress         [stress_stat]"
Let me know if you have any problems! I didn't check it very carefully, but hopefully it will at least help you get started?
Complete: a2 ~a due~ (music, language, love)
In progress: The Pirate Mermaid (fairytale otome)
On hold: AXIOM.01 (girl detective game)

Image

User avatar
Cinnamoon
Regular
Posts: 100
Joined: Wed May 30, 2012 5:24 am
Projects: Crystal Aria ~Starlight (20%), かわいいなリズム (38%)
Organization: CoffeeCat
Location: France~ ^^
Contact:

Re: Should I use an imagemap or... ?

#5 Post by Cinnamoon » Tue Jul 24, 2012 7:46 pm

OMG Arowana you are a life saver !!! *_*
I was just starting to hit the books and said to myself "I don't understand any of thiiiis~" and then you came by and answered my prayers <3

Thank you. I'll try it right away :)

User avatar
FatUnicornGames
Miko-Class Veteran
Posts: 576
Joined: Sun Mar 25, 2012 7:54 pm
Projects: Club Shuffle
Contact:

Re: Should I use an imagemap or... ?

#6 Post by FatUnicornGames » Tue Jul 24, 2012 7:49 pm

Hey girl hey. Just wanted to say cute screen annnnnd...you realize there are a couple of typos on it right? I assume you do, but I was just making sure. :D
Image
Developer Blog for Club Shuffle - Follow and Share?
-Also! You can call me Crystal if you want.-

User avatar
Cinnamoon
Regular
Posts: 100
Joined: Wed May 30, 2012 5:24 am
Projects: Crystal Aria ~Starlight (20%), かわいいなリズム (38%)
Organization: CoffeeCat
Location: France~ ^^
Contact:

Re: Should I use an imagemap or... ?

#7 Post by Cinnamoon » Tue Jul 24, 2012 8:03 pm

Hum, is it because it is in french ? Yeah, I'm too lazy to make it in english actually ^^

User avatar
FatUnicornGames
Miko-Class Veteran
Posts: 576
Joined: Sun Mar 25, 2012 7:54 pm
Projects: Club Shuffle
Contact:

Re: Should I use an imagemap or... ?

#8 Post by FatUnicornGames » Tue Jul 24, 2012 9:06 pm

Ah! I didn't realize it was French (dur). So many of the words translate straight up I got confused. ;D
Image
Developer Blog for Club Shuffle - Follow and Share?
-Also! You can call me Crystal if you want.-

User avatar
Keul
Regular
Posts: 49
Joined: Wed May 06, 2009 3:42 am
Location: France - Strasbourg
Contact:

Re: Should I use an imagemap or... ?

#9 Post by Keul » Wed Jul 25, 2012 5:12 am

Cinnamoon wrote:Hum, is it because it is in french ? Yeah, I'm too lazy to make it in english actually ^^
The word "fashion" is not french, it's an anglicism.
Literraly translated, it's "a la mode", but I think "style" would be better in this context.

User avatar
Cinnamoon
Regular
Posts: 100
Joined: Wed May 30, 2012 5:24 am
Projects: Crystal Aria ~Starlight (20%), かわいいなリズム (38%)
Organization: CoffeeCat
Location: France~ ^^
Contact:

Re: Should I use an imagemap or... ?

#10 Post by Cinnamoon » Wed Jul 25, 2012 8:01 am

Keul wrote:
Cinnamoon wrote:Hum, is it because it is in french ? Yeah, I'm too lazy to make it in english actually ^^
The word "fashion" is not french, it's an anglicism.
Literraly translated, it's "a la mode", but I think "style" would be better in this context.
Thank you ! You're right. "Style" seems more appropriate ^^

User avatar
Cinnamoon
Regular
Posts: 100
Joined: Wed May 30, 2012 5:24 am
Projects: Crystal Aria ~Starlight (20%), かわいいなリズム (38%)
Organization: CoffeeCat
Location: France~ ^^
Contact:

Re: Should I use an imagemap or... ?

#11 Post by Cinnamoon » Wed Jul 25, 2012 12:20 pm

Well, thank you Arowana. It works perfectly~ ^^

User avatar
Arowana
Miko-Class Veteran
Posts: 531
Joined: Thu May 31, 2012 11:17 pm
Completed: a2 ~a due~
Projects: AXIOM.01, The Pirate Mermaid
Organization: Variable X, Navigame
Tumblr: navigame-media
itch: navigame
Contact:

Re: Should I use an imagemap or... ?

#12 Post by Arowana » Thu Jul 26, 2012 10:43 pm

Yay, I'm glad you got it to work so fast! I am also in the process of learning screen language, and I think it's pretty awesome. :D
Complete: a2 ~a due~ (music, language, love)
In progress: The Pirate Mermaid (fairytale otome)
On hold: AXIOM.01 (girl detective game)

Image

Post Reply

Who is online

Users browsing this forum: Ocelot