Tool HTML General Guide to Game Development (and Twine/Sugarcube)

[OnTopOfMyAnger]

General Guide to Game Development (and Twine/Sugarcube)​

What is this guide?
This guide is here to help you get started working on any game you are thinking about, mainly focusing on Twine 2.0 games using the Sugarcube story format.
However many of these tips can be used for any other game engine; like Ren'Py, QSP or Unity.

Why am I writing this?
I studied game design and I would like to see higher quality games from my fellow forum users.
I would have liked to see something like this while I was trying to bruteforce my way to write a Twine game with very basic Twine/Sugarcube knowledge.
I am working on a game right now and want to share my research.
I hope this helps people.
I hope you make great games. I believe in you. <3

What can you find in this Guide?
How to prepare for creating a game.
How to design a game from the ground up.
How to work efficiently.
Basics of basic coding. I am not a good coder, yet.
How to use certain tools and websites and why you should use them.
Asset Management: How to prepare images, textures and videos for games.
Tips for Sugarcube and Twine.

Step 1: Prepare​

Spoiler: Step 1: Prepare

You don't have permission to view the spoiler content. Log in or register now.

Step 2: Game Design (Yes, you need to write down your design before you code anything.)​

Spoiler: Step 2: Game Design

You don't have permission to view the spoiler content. Log in or register now.

Step 3: Starting to Code​

Spoiler: Step 3: Coding

You don't have permission to view the spoiler content. Log in or register now.

Step 4: Managing Assets(Videos, Audio and Images)​

Spoiler: Step 4: Managing Assets

You don't have permission to view the spoiler content. Log in or register now.

Step 5: All that Remains​

Spoiler: Step 5: Everything Else

You don't have permission to view the spoiler content. Log in or register now.

If you made it this far, I ask you to comment your opinions and suggestions.
Correct my mistakes.
Thank you for your time.
OTOMA.

 

[Cadastran]

Thanks for this man, you made starting a project on twine way easier ! =D

 

[_retorik_]

Nice guide. Just wanted to add LogSeq as a replacemant to Obsidian.

I've spent a good chunk of time searching for softwares to manage my game lore and the way LogSeq connects and organizes information was much more natural to me.

 

[PTSdev]

Good guide! As I'm quite experienced with Sugarcube/Twine by now, there weren't too many new bits for me, but that doesn't matter.

I especially loved the part about asset management. It's mind boggling that so many games come with randomly sized images and badly cropped video/audio.

 

[JB08]

Is twine and sugarcube like an alternate renpy?

 

[_retorik_]

Is twine and sugarcube like an alternate renpy?

It is a different sort of game engine.

For instance, Twine/SugarCube (two different things working together) generate html games.
You have way more freedom with Twine/SugarCube but you have less support. Renpy comes with more features out of the box.

 

[MrPocketRocket]

Thank you for posting such a thorough guide to VNs. I'm currently in the final stages of putting together the first chapter of my first VN. I was looking around for information regarding stringing together a stills series into video and what format and size of the file works best (yes, well aware that smaller is better;-). I'm still not 100% what is easiest (less complicated is king, I have no interest in obtaining more technical knowledge than necessary). This guide answered a few of my questions, but not that one exactly. Photoshop doesn't export to webm as far as I know, else that would be the easiest solution for me.

My 5 cents on what do when deciding on what to write about:
If you can't think of an interesting story, borrow one. It will be far less painful to read than if you start your character in bed with amnesia and a house full of hot female relatives. Just saying.

Any help on the webm is appreciated.

 

[OnTopOfMyAnger]

Thank you for posting such a thorough guide to VNs. I'm currently in the final stages of putting together the first chapter of my first VN. I was looking around for information regarding stringing together a stills series into video and what format and size of the file works best (yes, well aware that smaller is better;-). I'm still not 100% what is easiest (less complicated is king, I have no interest in obtaining more technical knowledge than necessary). This guide answered a few of my questions, but not that one exactly. Photoshop doesn't export to webm as far as I know, else that would be the easiest solution for me.

My 5 cents on what do when deciding on what to write about:
If you can't think of an interesting story, borrow one. It will be far less painful to read than if you start your character in bed with amnesia and a house full of hot female relatives. Just saying.

Any help on the webm is appreciated.

Handbrake

You must be registered to see the links

is the best software for webm conversion, video to video. Throw in a mp4 or some other video format, select seconds in range then specify the seconds you want to be in the webm and click start enconde. Thats it.

 

[JB08]

I am going to second Handbrake, its really good out the box so to speak, but also tons of options for the advanced user.

 

[MrPocketRocket]

Handbrake

You must be registered to see the links

is the best software for webm conversion, video to video. Throw in a mp4 or some other video format, select seconds in range then specify the seconds you want to be in the webm and click start enconde. Thats it.

Thank you!

 

[MrPocketRocket]

As a quick update: Photoshop works pretty well to string stills together for an animation. The default duration is a bit of a bummer (5 sec per still, much too long), but because you can adjust the frame rate per second when outputting the video, you can increase the number of frames in a second to adjust the speed of the animation. You can manually adjust as well, but it's a little work intensive. I haven't used Handbreak yet, because I messed up the initial frame vs the end frame to make a proper loop. So tonight I'll render out the sequence and then go through Handbreak to make sure it all looks good tomorrow.

 

[MrPocketRocket]

Quick question regarding file size after Handbreak (which btw works lightning fast). My 2 second (60f) animation came out at 1.87Mb. Is that about right for a looped video for a VN?

Thanks!

 

[PTSdev]

2 MB is basically nothing in today's age of high speed internet. You should try to find a good compromise between quality and file size. As long as the video isn't grainy, you're good to go.

But 2 MB sounds a bit much for a 2 second loop tbh. It all comes down to the desired visual quality.

 

[MrPocketRocket]

2 MB is basically nothing in today's age of high speed internet. You should try to find a good compromise between quality and file size. As long as the video isn't grainy, you're good to go.

But 2 MB sounds a bit much for a 2 second loop tbh. It all comes down to the desired visual quality.

Thanks! I'll take a look at further compression. It looks good at this point, so might be able to scale it down a bit.

 

[nxtm4n]

This is all fantastic advice! I'll second the recommendation of cs50 in particular - it's a fantastic introduction to fundamentals of how computers work and the kind of logic you need to for coding.

...but I have to admit, one of the big things I took from this is that I want to play your Sexy Smith game.

 

[Rizzrack]

Thanks for this guide. it is instructive. A lot to learn though.
Do you know of a free photo editor that lets you edit multiple photos at once?
I know there is crack version for Photoshop, But the risk is quite high that I will get a Trojan in the bargain.

 

[PTSdev]

Try IrfanView. It can't edit multiple photos at once, but it's amazing to do some quick and simple edits.

 

[Rizzrack]

Thanks i'll take a look at it.

 

[kirkuloid]

• Free Tip: Too see the passage layout click the weird hollow looking R shaped logo on the left. Now on the top of the passage list there should be a node map. Open that you will have all the functionality of Twine app in VSCode.

...fml...I spent the last 3 hours trying to figure something like this out

 

[barasia]

Thanks for the guide. I was interested startint out in making a HTML game using Sugarcube2, and I got a question about the ethics of using assets from other HTML games that are "abandoned" in particular.
There are plenty of "abandoned" HTML games that showed promise in the beginning. But its familiar and sad sight these days when the developer stop updating and gave up on finishing the game.
If I were to take assets from those games for use in my own, would it be frowned upon on? (ie, copystriked or something similar) I'm unsure if those assets are original content or simply stock assets that are free to use.