I want to make my own graphical user interface, does anyone know where I could learn to do this? (Sugarcube)

Question

I know that this question is rather broad, so maybe it isn't meant to be here. I am not too sure. I apologize in advance if that happens to be the case.

I've been making progress with my game and I was wondering if I could somehow change the graphics of the user interface to be a bit more flavorful and immersive.

I'm thinking of things like: making the buttons look like they are made out of papyrus, or changing the side bar to look like a banner- things like that.

I don't expect the solutions for making these graphics to be in twine but I was wondering if Twine could accomadate to something like that or if anyone has ever accomplished something similar to that?

If it is possible, I would like to know where I should look to begin learning how to do that.

 

Thank you.

Answer 1

I'm not 100% sure, but I think you could do that by modifying/overwriting the default stylesheets. They are listed here.

Answer 2

Yes.  Twine is basically just HTML, CSS, and JavaScript.  So, it can do just about anything any other web page can do.

If you want to change how things look in Twine then mostly you'll be manipulating the CSS, which is what the browser uses to determine how the HTML elements on a web page look.

You can find a good introduction to CSS at the W3Schools CSS Tutorial, or there is some more technical material that's quite helpful in the MDN's CSS section.

If you're trying to figure out how to do something specific, Google will often help you find good information at the Stack Overflow technical help site.

Also, if you open your Twine HTML page in a browser, right click on an element on the page, and choose "Inspect Element" (or your browser's equivalent of that) from the pop-up menu, then you can see the HTML elements and the CSS that is affecting them.  I often use this object inspector to play around with the CSS until I get things to look the way I want, and then copy any changes I made to my game's "Stylesheet" section.  I learned a lot of CSS just playing around like that and Googling for info.

Hope that helps!  :-)

Answer 3

...making the buttons look like they are made out of papyrus..

As the others have stated you can use CSS to change the look of SugarCube's default styling of the page, including the styling of the HTML elements generated by the story format's Markup and Macros.

...changing the side bar to look like a banner...

If by "like a banner" you mean you'd like some (or all) of the site-bar content to appear across the top (or bottom) of the page (eg. change the structure/behaviour of the default User Interface 'UI') then you may need to use a more advance techinque like the StoryInterface special passage, which allows you to replace the HTML structure of the default UI with one of your own design.

Answer 4

Like say HiEv, try use information from google.
Just like Examlple, i'm create button like papyrus.

in "StyelSheet" you mus put this:

/*'.papyrus' - you can change this name like you want*/
/*'button' - say the CSS, what you want from him, in this case, change style of the BUTTON with type "papyrus"*/
.papyrus button  {
/*'font-size' - how much of button size you give to text. in thus case 90% of all button size*/
  font-size: 90%;
/*'font-weight' - the greater the value, the thicker the letters*/
  font-weight: 700;
/*'color' - color of the TEXT, not BUTTON collor. Can use 'rgb', or just name.(gold, red, black etc)*/
  color: rgb(34,34,34);
/*'border' - change the border of BUTTON.*/
  border: 0px;
/*'background-size' - say CSS that we need cover ALL BUTTON space with texture.*/
  background-size: cover;
/*'background-position' - say CSS that we need place our texture in center of  the button.*/
  background-position: center;
/*'background-color' - say CSS that we need make background of our button to tranparent.*/
  background-color: transparent;
/*'background-repeat ' - say CSS that we not need repeat our backgroud picture.*/
  background-repeat : no-repeat;
/*'background-image' - say CSS from what source hi must take image for background (in case we use google and url).*/
  background-image: url("https://i.pinimg.com/originals/f3/d1/b2/f3d1b22f3bc100ed803be9d7d859068d.png");
 }

After that, you must place your button in passage.

Take that code:

@@.papyrus;<<button "BUTTON" Start>><</button>>@@
/*or, you cane make like this*/
@@.papyrus;
<<button "BUTTON" Start>><</button>>
@@
/*or, if you put some values in the button action, you can make this*/
@@.papyrus;
<<button "BUTTON" Start>>

<</button>>
@@

And then past it in where you need it.