0 votes
by (120 points)

I am new to programming, Twine, and particularly CSS.  I've been programming an RPG game in Harlowe 2 and I've come very far without asking any questions, but now I've hit a wall while styling my battle engine with CSS.  Basically I've created some images of boxes with borders that I would like certain text to appear inside of.  Following some tutorials I figured out how to get the background images of my combat log and my player menu bar to line up the way I would like in the browser.  Having the text appear in the appropriate place on top of these images is much harder.  My text is so close, but nothing I seem to do changes the vertical position of the text.  I have used the aligner and column tools in Harlowe to get the text centered the way I'd like, but just can't crack the vertical.  Any help here would be greatly appreciated!

Here is my CSS.  Sorry if it's super sloppy.:

@import url(http://fonts.googleapis.com/css?family=Sunflower:400,700,400italic,700italic);

body, tw-story
{
  font-family: Sunflower, serif;
  font-size: 20px;
}

#battlemenu, {
	width: 100%;
  	height: 25%;
  	position: center;
	border: solid #000 0.05em; 
	border-radius: 0.1em;
	background-image: url(media/primemenu.png);
  	background-size: 100% 100%;
    background-repeat: no-repeat;
	color:#000;
	box-shadow: #000 0.5em 0.5em 0
}
#battlelog {
	width: 100%;
  	height: 300px;
  	position: center;
	border: solid #000 0.05em; 
	border-radius: 0.1em;
	background-image: url(media/logbox.png);
  	background-size: 100% 100%;
    background-repeat: no-repeat;
	color:#000;
	box-shadow: #000 0.5em 0.5em 0
}

 

I then add these tags to the appropriate passages, and then use the (display:) macro to show them both stacked on top of each other in my "combat passage", which results like this:

https://imgur.com/55UXioT

 

Here is the code inside the passages:

"Battlemenu"

<div id="battlemenu">
===|===
{
(link-repeat: "Attack")[
	(set: $pcatk to (random: 1, 20) + $weapon's tohit + $char's bonus)
	(set: $pcdmg to (random: 1, $weapon's dmg))
  		(if: $pcatk >= $npc's ac)[
			(set: $npc's hp to $npc's hp - $pcdmg)
				(if: $npc's hp <= 0)[
				(set: $log to "win")]
			(else:)[(set: $log to "atk")]
	(goto: "Test")]
		(else:)[
		(set: $log to "miss")]
	]}
{(if: $char's bonus > 0)[(text-style: "fade-in-out")[(text-style: "subscript")[+unicron]] ]}
#####{(if: $char's hp < 2)[(text-style: "blink")[HP: (print: $char's hp)]](else:)[HP: (print: $char's hp)]}
#####Cloud: $cloud 
==|==
[[Cloud Strike|Cloud Strike Init]]
===|=
[[Item]]
  ====|
[[Flee]] </div>

 

"Battlelog"

<div id="battlelog">(text-color: "white")[
=><=
{(if: $log is "player")[
	It's your turn. What do you do?
	]
	
(if: $log is "npcturn")[
	It's the (print: $npc's name)'s turn!
	<br><br>(link:"Continue")[(set:$log to "enemy")(goto: "Test")]
	]

(if: $log is "atk")[
	(print: $char's name) attacks the 
	(print: $npc's name) with their
	(print: $char's equipped) for $pcdmg damage.
	(set: $char's bonus to 0)
	<br><br>(link:"Continue")[(set:$log to "npcturn")(goto: "Test")]
	]

(if: $log is "win")[
	(print: $char's name) attacked for $pcdmg damage.
	(print: $npc's name) succumbed to their wounds.
	(set: $char's bonus to 0)
	<br><br>[[Continue|win]] 
	]
	
(if: $log is "death")[
	(print: $npc's name) attacked (print: $char's name) for $npcdmg.
	<br><br>[[Continue|Death]] 
	]
	
(if: $log is "miss")[(print: $char's name)'s attack missed!
		(set: $char's bonus to 0)
		<br><br>(link:"Continue")[(set: $log to "npcturn")(goto: "Test")]
		]
		
(if: $log is "enemy")[
	(set: $npc's atkchoice to (random: 1, 10))
		(if: $npc's atkchoice <= 8)[
			(set: $npcatk to (random: 1, 20) + $npc's tohit1)
			(set: $npcdmg1 to (random: 1, $npc's dmg1))
			(if: $npcatk >= $char's ac)[
				The (print: $npc's name) attacks (print: $char's name) with 				their (print: $npc's atk1) for $pcdmg damage.
				(set: $char's hp to ($char's hp - $pcdmg))
					(if: $char's hp <= 0)[
					(set:$log to "death")
					(link:"Continue")[(goto: "Test")]
					(else:)[(set: $log to "player") 
					(link:"Continue")[(goto: "Test")]] 
				]
			(else:)[
				The (print: $npc's name)'s attack misses!
				(set: $log to "player")
				<br><br>(link: "Continue")[(goto:"Test")]]]

	(else:)[
		(set: $npcatk to (random: 1, 20) + $npc's tohit2)
		(set: $npcdmg to (random: 1, $npc's dmg2))
			(if: $pcatk >= $char's ac)[
				The (print: $npc's name) attacks (print:$char's name) with 					their (print: $npc's atk2) for $pcdmg damage.
			
				(set: $char's hp to ($char's hp - $pcdmg))
			
				(if: $char's hp <= 0)[(set:$log to "death")
				(link:"Continue")[(goto: "Test")]]
				<br><br>(else:)[(set: $log to "player")(link:"Continue")[(goto: "Test")]]
			]
		(else:)[
			The (print: $npc's name)'s attack misses! 
			(set: $log to "player")
			<br><br>(link:"Continue")[(goto: "Test")] ]] 
] ] } ]
</div>

 

Combat Passage currently named "Test"

{
(display: "log")
(display: "Battlemenu")
}

 

1 Answer

0 votes
by (63.1k points)
There's a very, very good chance that doing it this way, even if you 'get' it, will get all messed up the second you resize the browser window. Trying to fit elements into a template image like that is not the way to go, honestly. Everything should be separate, with its own backgrounds and borders so that you can fit then together across screen and window sizes.
by (120 points)
What if I've set my tw body to be a fixed pixel size?  Would it not work on multiple platforms then?  Are there serious drawback to doing it that way?
by (63.1k points)
It wouldn't do anything, other than look potentially worse. You can't prevent people from resizing windows. And yes. The biggest one being that it will require everyone who plays your game to have their browser window in exactly the size and shape you determine. In a video game with standardized television sizes and shapes you can count on certain things. Not on the web, though. You should attempt to design your game to be responsive. You may not want to go to the trouble of supporting everything, like mobile or really weird window shapes, but you usually at least want to support reasonable window resizing.
...