Help with character Sheet

Comments

• Chapel

  April 2017 edited April 2017

  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.
• Magma

  April 2017

  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.
• Magma

  May 2017 edited May 2017

  
  
  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
• greyelf

  May 2017

  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.
• Magma

  May 2017

  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:
  
  
  
  
  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:
  
  - Needs to be on the right
  
  - 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:
  
  
  
  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...
• Chapel

  May 2017 edited May 2017

  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.
• Magma

  May 2017

  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.
• Chapel

  May 2017 edited May 2017

  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.
• Magma

  May 2017

  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.
• Magma

  May 2017

  Ok, so, new try, here are the 3 "base images" ready for overlap:
  
  
  
  
  
  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
• greyelf

  May 2017

  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.
• TheMadExile

  May 2017

  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

  May 2017

  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>
  
• Magma

  May 2017

  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.
• Magma

  May 2017

  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.