Tutorial HTML Want to learn how to make your own html game with no coding experience? Here is Twine/Harlowe!

[yomamasass]

Hello there! Welcome to my tutorial. Today I'm going to teach you how to make your own game from ground up with no prior codding experience! We will be using a web based game engine called Twine 2. So let's get to it!

1. Startup

First what you want to do is going to the

You must be registered to see the links

.

From there you can see the download/use section on the top right corner. You can choose your operating system and start downloading or you can use Twine from your web browser. Downloading has the advantage of saving your project to your local filesystem. If you choose to use it online your project will be saved as a cookie on your browser. But no worries you can always import and export your project to a local file even using the online version.



When you opened the Twine 2 application or just pressed the "Use it online" and looked at the built in start up tutorial, you will encounter this page:



2. The User Interface

First thing you may want to do is enabling the dark mode if it's not enabled by default, to do that press the moon icon at the bottom right of the screen:



Little over that button at the middle right of the screen you will encounter these buttons:



Let's start from bottom:

You can get get to Twine manual by pressing the "Help" label.

You can change the language of Twine with the "Language" label

And our main attraction, "+ Story" button is used for creating a new project. I will get to the rest of the labels later. For now let's just create a new project with the "+ Story" button:

After naming our story (which can always be changed later) twine instantly gets us to our story editor.

Lets examine the buttons there:



1,2 and 3 is for resizing the grid of the project.

4 is for finding and replacing any form of text in the entire story:



From there you can search for anything and replace it by going over the passage name, a "Replace In Passage" button will appear when you go over the passage name. Or alternatively you can press "Replace All" button to change every instance of that text to another text.

5 is for finding a certain text in our story. When the text found in a certain passage it will show up white in our story editor.

When we look at the bottom left side we will see our stories name with an arrow next to it and if we press that arrow we will see some things to select:



From top the bottom, we can rename our story and snap passages to a grid (which I recommend for more orderly looking story). The rest of the selections will be discussed later but you can also check the "Story Statistics" for seeing short statistics of your story.

3. Passages

So, let's get back to to bottom right side and press the "+ Passage" button. As you can see a new thing appeared on the screen. That thing is a "Passage" and if you double click that thing you can edit it. Think of passages as different rooms in your game, although they don't have to be that strict, you can use a passage each time you want to get rid of all the text on the screen and write something new. So let's see what happens when you double click on a passage:



There sure is a lot's to do here but we will just look at the absolute basics. The text that the arrow on the top points to is your passage name. Passage name is the identifier of that passage, so in game you can point the player to this specific passage by entering its name with a simple syntax. For now I won't get into that but still, keep that in mind. Change the passage name to anything you want, lets say "Intro" for now.

The bottom arrow points to the passage text. Here you can type simple text and it will show in the game. Go on, type anything you want there. After typing, close that passage box and go back to the story editor screen. After that hover over the passage you just wrote, you will see a three dots option, click that:



You will see some options to pick. You can resize the box in the grid by changing the size. Also you can select where the story will start. It's marked by a little rocket icon. You can change where the story will start anytime you want. For now click the "Start Story Here" option after that press the "Play" button next to "+ Passage" button at the bottom right of your screen. And voila! It's there.

I'm ending the tutorial part 1 here for now. If any interest sparks and you want me to continue I'll make a part 2.

 

[no_deedee_no]

yeah part 2 would be nice

 

[yomamasass]

So since there is interest, I decided to make part 2. Although I'll make the rest as smaller parts then the first one.
We will start from where we left off last time.

4. Connecting Passages

Lets go back to our story editor where we created a passage and make it the default one. Double click the passage that we didn't named yet and name it "Room 1". Now we have the passages "Into" and "Room 1" and our story starts from "Intro" so lets create a connection between them. The syntax is really simple just double click the passage "Intro" and edit the contents of it. You don't have to change the things we wrote before just append the text [[Room 1]] in there somewhere:



Now press "Play" again:



You will notice that there is a blue label under the text now, try clicking it. It will take you to "Room 1" it's really that simple! Now lets get back to story editor, if you seperate the passages you will notice that now they have a arrow between them, that means they are connected:



The arrow points from "Intro" to "Room 1" because that's exactly what we did when we wrote [[Room 1]] inside "Intro". Now lets make this arrow double sided, double click the passage "Room 1" this time we will do something little different, instead of showing the name of the room we will show a placeholder text that will lead us back to "Intro". So let's edit the text inside "Room 1", this time write [[Go Back|Intro]]. When we put the pipe symbol (|) between our text inside square brackets that means show the text on the left side (Go Back) and when that label is clicked send us to the passage that is identified on the right side (Intro). Now when we quit the passage editor and get back to story editor we will see the arrow is now double sided because now there is a way to get to "Room 1" from "Intro" and a way to get to "Intro" from "Room 1":



This may sound complex at start but lets just start the play button and see what I'm talking about. Now when you start you will see the label "Room 1" as we set before, click that and it will get us to the passage "Room 1". When you get there, there will be a label that says "Go Back". That label is actually "Intro" in disguise. When you click it, it will send you back to "Intro".

I'm ending the Part 2 here for now. Probably in less than a week I'll add the Part 3. Thank you for reading.

 

[no_deedee_no]

Thanks dude. I have also explored but your input is greatly appreciated.

 

[yomamasass]

Glad I can help, hopefully when I complete this tutorial there will be no need exploration in manual pages.

 

[yomamasass]

5. Styling your text

Twine gives you a lot of choices on styling your text in your passages so you can add lots of effects on your game, let's examine the options we have. First, double press the "Intro" passage, you will see lots of buttons you can press so let's start from top left. Select any text you wrote and hover over on one of these four, a popup label will show up and tell you what that button does. Press one of these buttons:



I will select "Italic" for this example:



As you can see, our text got in between two double slashes (/). That means our text will show up italic when we run our story, try doing that. You see it? Great! Let's get to the next ones. The fifth one with the color gradient icon is text and text background color. Try clicking it:



In this page we have few important sections:

1 is the preview of the end result in your story, so the changes you make will look like 1 in your story.

2 is the color of the text itself, right now it's set as the "Default text colour" let's change that to "Flat colour" and see what happens:



A is the color palette, you can choose different palettes from that menu.

B is the colors, you can pick a color from there.

C is the opacity of the text, you can pick the preferred opacity with the slider.

3 is the background of the text, same options applies there too but as an extra you have gradient colors too.

4 is where this effect should affect:

The first option "The attached hook" will only effect the selected text, the selected text can be multiple lines.

The second option "The remainder of the passage or hook" will affect the rest of text from where it stated. So if you write something and then put the second option under that it will not be affected by the second option. To explain this better I wrote this passage:

test1

(text-colour:black)+(bg:white)[=
//Hello World!//

test2
[[Room 1]]

When you run this you will notice that "test1" is in the default colors but anything that stated after the "(text-colour:black)+(bg:white)[=" is affected by the color choices we made, including "test2".

You can also stack these effects such as this:

test1

(text-colour:black)+(bg:white)[=
//Hello World!//

test2

(bg:navy)[=

test3
[[Room 1]]

Run this and see what happens. As you can see I changed the background to navy after test 2 but didn't changed the foreground of the text thus it's still black like i declared in the previous code, so be careful with that.

The third option "The entire passage" is similar to second option but instead of doing what comes after it the third option applies the color scheme to the all of the text, prior and after of it's declaration. These do not stack with each other so do not use more than one of these in one passage but they do stack with the second option as you can see here:

test1

(text-colour:black)+(bg:white)[=
//Hello World!//

test2

(enchant:?passage,(bg:navy))

test3
[[Room 1]]

The forth option "The entire page" is exactly like the third option but not only affects the text and its background but also the entire page. As a side note, if you want to make your entire stories background or foreground in a certain color do not do this for every passage, down on the line we will learn about doing this to entire story instead of passage by passage, which will save you the effort.

5 is the preview of the code, it's not that important right now but it can help you to see what the code will look like when you apply it to your passage before doing so.

I will cut this section into two parts because it's taking a bit long. Thank you for reading.

 

[anoneux]

This is a great tool and exactly what I've been looking for. Thanks for the guide!

 

[yomamasass]

You are welcome! More will come.

 

[Arkx00]

Is there any chance you can do a follow up on how to add images and more customization options?

 

[yomamasass]

I will follow up with more customization but images will come in a little late, we still have to talk about all the basics like everything on that menu. But, if you want to i can give you a special class on how to add images in the pm's so that you will learn that and I wouldn't have to change the order. Just hit me up on the private messages and I will try to respond you as soon as possible

 

[yomamasass]

Lets continue from where we left off from the last time.

Let's delete the things we wrote on "Intro" passage except for these two:

test1

[[Room 1]]

The sixth entry in our list is "Borders"



Borders is an easy one. As the name suggests it adds borders to our selected text. Lets select the text "test1" and click "Borders":



As you can see it is similar to color selection option. I want you to change the "Style:" (1) of "Top" to anything you like other than "none". This will give you more options like color. We already talked about how coloring works and most of the things you learned there works here too. You can select different border styles for different borders of the text as you can see. For the tutorial I will only change "Top".

2 is for changing the size of the border.

3 is something we also learned already, where do you want this effect to take place. Try selecting different options and see what will happen. For this tutorial though I will leave it as the first option.

That's really all there is to "Borders". So lets get to the seventh item in our menu, "Rotated Text". It is really simple as you can see in the image:



You can just use the sliders to rotate the text in the way you want, you can also select "Affect the entire remainder of the passage or hook". Since we already done that in text color section I will skip that. Just press "Add" and start the game and see the results.

Now to the eighth item in our menu, "Styles":



1 is just what it looks like, there isn't much to say there.
2 is kind of like borders but only for bottom or in the middle of the text.
3 is for making text appear higher or lower (and a bit smaller) of its original place.
4 is where we get the cool effects, check all of them, you may use them later.
5 is for making the letters more squished or far away from each other.
6 is for flipping the text.
7 adds various animations to the text. However some of them doesn't work on preview but not to worry they will work in game.

Sorry for the late and shorter lesson today, these lessons actually took longer to create then it looks like. See you next time!

 

[Rystvalya]

Thanks for this. I had an idea for an html game and had no idea where to start and this is exactly what I was looking for.

Haven't had the chance to read it all the way through but is twine the program that lets you do stat sidebars that games like College daze uses? You may cover that already and if you did sorry. I'm going to read it in full tomorrow but thought I'd see if I was in the right place

 

[yomamasass]

Thanks for this. I had an idea for an html game and had no idea where to start and this is exactly what I was looking for.

Haven't had the chance to read it all the way through but is twine the program that lets you do stat sidebars that games like College daze uses? You may cover that already and if you did sorry. I'm going to read it in full tomorrow but thought I'd see if I was in the right place

You are welcome! Yes this is the same same engine with the games you see with the stat sidebar. However the games with the sidebar uses the Sugarcube 2 story format, in this tutorial I will entirely be using Harlowe 3 story format because it has a more visual interface, thus more friendly for new users. But don't worry about the sidebar thing, most of the things it does like saving and loading or showing certain stats can be done in Harlowe 3 stories too albeit not as convenient since they wont be always on screen.

Edit: Did a little testing, you can in fact make a stat panel in Harlowe, just a little more work needed:

 

[Space_Cow99]

Does anyone have tutorial in twine how to make stats? and add rpg game into twine? what sort rpg are able to do so.

 

[yomamasass]

Does anyone have tutorial in twine how to make stats? and add rpg game into twine? what sort rpg are able to do so.

Stats are easy they are just variables but I didn't quite understood what do you mean by adding rpg game into twine? Do you want something visual? As for what sort of rpg you can make... Well you can only make text based ones with pictures here and there, can't exactly say an rpg but a great example probably would be Degrees of Lewdity.

 

[Alcahest]

Helpful thread. But people interested in making an adult html game should know that most such games use Twine with SugarCube, not Harlowe, meaning a bigger community with people who can help. For that reason, I suggest going with SugarCube.

 

[yomamasass]

Helpful thread. But people interested in making an adult html game should know that most such games use Twine with SugarCube, not Harlowe, meaning a bigger community with people who can help. For that reason, I suggest going with SugarCube.

That's true, most people prefer SugarCube over Harlowe however I honestly think that Harlowe is much better for a tutorial since things can be visually shown. I personally didn't make the jump from Harlowe to SugarCube since I really like the default minimal aesthetics of Harlowe stories and don't see any advantages in switching to SugarCube. As for community, twine's own forum is quite helpful with Harlowe projects if anyone has any problems. Plus I can help too if the issue is in my expertise.

 

[Risky Bizzi]

Anyone have tips on adding videos and gifs?

 

[Eagle1900]

wow perfect explanation