Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Help with character Sheet

Hey everyone,

First, i am using Twine version 2.0.11 and SugarCube version 2.11.0 (at least thats what appears when i check inside Twine)

On my game, i am trying to create a character sheet for the player.

This needs to be populated by stuff like

Agility: Average

Strength: Good

Stamina : Below Average

Karma: Good

The first thing that came into my mind was to present a different image photoshopped for each situation based on the variables. One for Average, Average, Average, Average... another for Good, Average, Average, Average... you know what i mean.

This creates a lot of images that need to be stored in the game.

Is there a way for twine to put two images together, one in front, another in the background, in order to have always 1 background, and in front you would have the specific Good, Average, Below Average images?

The other way would be to separate the main image in several blocks, one with the stats, the other with the main image, and then have twine "glue" them together, if possible.

I know this is not an easy request for help, my thanks in advance.

Cheers,

Magma

Comments

  • edited April 26
    You could make a container element using css and give it a background image, then just place the markup you need for your images and text inside it.
    ::StoryInit
    <<set $agility to "url/to/good.jpg">>
    <<set $strength to "url/to/average.jpg">>
    <<set $stamina to "url/to/average.jpg">>
    <<set $karma to "url/to/below-average.jpg">>
    
    ::characterSheet
    <div id="container">\
    Agility: [img[$agility]]
    
    Strength: [img[$strength]]
    
    Stamina: [img[$stamina]]
    
    Karma: [img[$karma]]\
    </div>
    

    Then in your css:
    #container {
      background-image: url("url/to/background.jpg");
      /* other stuff */
     }
    
    #container img {
      /* css for images */
     }
    

    If you want specific positioning, you'll have to mess around with the css of the images. Without knowing the sizes of the images in question and how they're all meant to fit together, it's hard to provide specifics.
  • Truth to be told i am still working with the artist in order to make the character sheet. Still it is good to know than in theory it is possible for twine to do it.

    I will come back for assistance once i know the size and disposition of the images.

    Thank you.
  • edited May 8
    Stats.jpg

    So, here is the major part of the character sheet.

    As you can i see i would like to have the name dynamic and the values.

    I suppose the best way would be to have all the names as "images" that would be put over the current base one?

    Let me know your thoughts and thank you in advance for your help.

    Quick Edit: I realize that it looks a bit too big on my screen, so i might have to scale it down. Anyway the coding should be similar and i can tinker and trial and error alot :)

    Cheers,

    Magma
  • Personally I would break that design into (at least) three parts:

    1. The overall background, excluding the Character Face image and attribute sections.

    2. The Character Face image. This could be displays as a background image, using CSS classes to control which image is currently being shown.

    3. The Attributes list, which I would used standard HTML elements to output.

    I would then use CSS to layout and style the different sections, and I would probably place point 2 and 3 within SugarCube's StoryCaption special passage.

    eg. The HTML in StoryCaption would look something like the following:
    @.stat-name;Power@@.stat-value;$characterPower@@.stat-name;Agility@@.stat-value;$characterAgility@@.stat-name;Stamina@@.stat-value;$characterStamina@@<;/div>
    ....
    </div>
    
    note: The above code was written free-hand and has not been tested.
  • Well, i am a total newb when it comes to html and all, still lets start with the first part.

    Dividing the one big picture into blocks. 5 Blocks so far...

    So... now i have these two blocks, top and bottom:

    stats2.jpg
    Stats1.jpg

    The question is how can i make sure these appear "glued" together, also knowing i will have more images to the right that will also need to be "glued" together.

    Example:

    stats22.jpg - Needs to be on the right

    stats3.jpg - Needs to be even more to the right

    All these image blocks need to be exchangable, so i can exchange based on in-game variables. As does the text that goes inside.

    This should be the final result:

    final.jpg

    Btw, i know this sounds silly, and that you guys offer your advices and all because you are awesome, but if any of you wants to "step up" and make this happen, i don't mind giving something in return for this, either steam keys, amazon stuff, whatever you feel is a token of gratitude on my part. Hope that is not against the rules... :smiley:
  • edited May 10
    I don't believe greyelf was suggesting you actually chop up the image. You have a background, and that background should be on a "container" element you place the other elements in. Then you can place the image of the face and body over the background, create elements with their own backgrounds, or just use css boxes, and place them, etc. It's not really a "gluing" problem. If you're trying to glue images together just for their background, you've already lost, because you'll get it looking perfect after six hours of work only to have everything split apart the second the browser window is resized. You need to separate the image by layer.
  • Oh boy,guess i got it all wrong then. So i actually need 1 background image and the rest of the divisions to overlap that one.

    Back to the drawing board. Thanks.
  • edited May 10
    Magma wrote: »
    Oh boy,guess i got it all wrong then. So i actually need 1 background image and the rest of the divisions to overlap that one.

    Back to the drawing board. Thanks.

    I mean, your artist should be able to send you the background and the other components of the image. It's just probably best to combine everything into a layout using CSS from the start.

    There very well may be a way to do this with the image chopped up; I'm not a web designer. But I that even a web designer would have trouble doing it like that.
  • Yes,i requested the psd file and i get what the layers are. It actually looks easy in photoshop, i just need to click on the eye button to make the images overlap. Now i need to make twine do the same.
  • Ok, so, new try, here are the 3 "base images" ready for overlap:

    charlayer.jpg
    portraitlayer.jpg
    backgroundlayer.jpg

    I did a bit of Photoshop to remove the white background from the charlayer and portraitlayer. Then i searched the web for examples and found this css3 example:

    1.jpg became my background image
    2.png became my charlayer
    3.png became my portraitlayer
    <!DOCTYPE html>
    <html>
    <div class="a1"></div>
    <style>
    .a1 {
      width: 100%;
      height: 1000px;
      background-image: url(3.png),url(2.png),url(1.jpg);
      background-repeat: no-repeat;}
      </style>
    </html>
    

    And i got all 3 images working together.

    Questions...

    Can i apply this code directly on twine?
    Will i be able to replace 2.pgn with 2a.pgn based on a variable?
    I still have to put 4.pgn and 5.pgn as the text boxes, will i be able to have twine right variable texts inside the boxes?

    Thank you in advance for all the help.

    Cheers,

    Magma
  • Personally I would remove the blue rectangles from the background image itself and then use a backgound-color on the HTML elements that will contain the text output to achieve the same result, the reasoning being that if those HTML elements need to be re-positioned because of end-user's screen resolution then the related rectangles with also move.

    Because you want to totally replace SugarCube's standard UI with one of your own I suggest you read about and play around with its new StoryInterface special passage. You could uses something like the following as a starting point:
    <div id="left-ui-bar"></div>
    <div id="story">
    	<div id="passages"></div>
    </div>
    <div id="right-ui-bar"></div>
    

    Next I would suggest using the setPageElement() function to associate custom passages within your story with the new left-ui-bar and right-ui-bar HTML elements so that their output will automatically be inserted into those element each time a Passage is shown. You could use a postrender Task Object to do that association, this would be done within your story's Story Javascript area.
    postrender["Display Left and Right Sidebar Contents"] = function (content, taskName) {
    	setPageElement('left-ui-bar', 'StoryLeftSidebar');
    	setPageElement('right-ui-bar', 'StoryRightSidebar');
    };
    

    The StoryLeftSidebar passage would contain the content to display the character image and stats, the following is based on my suggestion in a previous comment.
    <div id="left-ui-bar"></div>
    <div id="story">
    	<div id="passages"></div>
    </div>
    <div id="right-ui-bar"></div>
    

    For the StoryRightSidebar passage I am not 100% sure what the right sidebar is doing, not what ID's to give its elements so I will used CSS classes to distinguish the first section from the second but I suggest you replace those classes with actual ID's.
    <div class="top-section"></div>\
    <div class="bottom-section"></div>
    

    The following CSS is a starting point for positioning and styling the new HTML elements, and is heavily based on SugarCube's, you will need to play around with it to suit the visual output you are looking for. The CSS goes in your story's Story Stylesheet area.
    #left-ui-bar {
        text-align: left;
      
    	position: fixed;
        z-index: 50;
        top: 0;
        left: 0;
        width: 17.5em;
        height: 100%;
        margin: 0;
        padding: 0;
        -webkit-transition: left .2s ease-in;
        -o-transition: left .2s ease-in;
        transition: left .2s ease-in;  
    }
    
    #story {
        margin: 2.5em 20em;
      
    	z-index: 10;
        -webkit-transition: margin-left .2s ease-in;
        -o-transition: margin-left .2s ease-in;
        transition: margin-left .2s ease-in;  
    }
    
    #passages {
      margin: 0 auto;
    }
    
    
    #right-ui-bar {
        text-align: left;
      
    	position: fixed;
        z-index: 50;
        top: 0;
        right: 0;
        width: 17.5em;
        height: 100%;
        margin: 0;
        padding: 0;
        -webkit-transition: left .2s ease-in;
        -o-transition: left .2s ease-in;
        transition: left .2s ease-in;  
    }
    
    #character-face {
      	background-color: blue;
    	min-height: 5em;
    	margin: 1em;
    }
    
    #character-stats {
      	background-color: blue;
    	min-height: 10em;
    	margin: 1em;
    }
    
    #right-ui-bar .top-section {
      	background-color: blue;
    	min-height: 2em;
    	margin: 1em;
    }
    
    #right-ui-bar .bottom-section {
      	background-color: blue;
    	min-height: 10em;
    	margin: 1em;
    }
    
    NOTE: I did not include background-image attributes in the above CSS but I suggest the over-all background should be assigned to the #story selector, and the character face background to the #character-face selector.
  • greyelf wrote: »
    Because you want to totally replace SugarCube's standard UI with one of your own I suggest you read about and play around with its new StoryInterface special passage. […]
    I'll probably second that suggestion.

    While it's mentioned in the link given by greyelf, I'll reiterate it here just so we're clear. The StoryInterface special passage was added in SugarCube v2.18.0. I bring this up only because the original poster mentioned they were using SugarCube v2.11.0. Meaning they'll have to install v2.18.0 if they want the feature—I'd do it simply for the bug fixes, let alone the raft of other added features and improvements.

    Additionally. A bit more information about StoryInterface can be found in the New Sugarcube release : StoryInterface special passage thread.
  • greyelf wrote: »
    The StoryLeftSidebar passage would contain the content to display the character image and stats, the following is based on my suggestion in a previous comment.
    Due to being slack with my proof reading of my last comment I didn't catch that I accidentally cut-n-pasted the wrong example content for this passage, it should of been something like the following:
    @.stat-name;Power@@.stat-value;$characterPower@@.stat-name;Agility@@.stat-value;$characterAgility@@.stat-name;Stamina@@.stat-value;$characterStamina@@<;/div>
    </div>
    
  • Thank you for all the help. I will try to understand and play around with the css based on what you said. I already have the newest twine version,which i believe comes with sugarcube v2.18.0

    I will let you know as soon as got some improvements.
  • I have been tinkering with the examples and i just realized StoryInterface changes the whole UI and it is needlessly difficult. (At least for a beginner like me)

    I can use one of the already existing side bar menus to display the character sheet. Then the player can just click return to go back to the main story.

    Not that i wouldn't like to use the whole screen but for now at least i will just display the image when the player asks for it in the left side menu.
    <!DOCTYPE html>
    <html>
    <div class="a1"></div>
    <style>
    .a1 {
      width: 1100px;
      height: 1100px;
      background-image: url(3.png),url(2.png),url(1.jpg);
      background-repeat: no-repeat;}
      </style>
    </html>
    

    Now, this above still works when i copy paste directly into twine and presents the several image overaly as one picture only. So, now i need it to replace 2.png with 2a.pgn based on a variable from twine, same for 3.pgn, etc... i might be using a lot of layers.

    Something like IF $hair="black" then 3.png=3black.png, else 3.png=3brown.pgn

    Not that actual code, but you understand where i am trying to get.
Sign In or Register to comment.