Advice for beginner HTML game: Best place to put assets?

[stopallthedownloadin666]

Hello everyone. I've wanted to develop my own game for some time, and (like most people, I'm guessing) I've been held back by technical issues. I'm a good writer and a pretty bad artist, and have basically zero technical skills (I do have a nice computer, though!)

I debated for a long time about what kinda game I wanted to make, and I thought about a Renpy sandbox/harem type game like Summertime Saga or Harem Hotel, but I think for a beginner like me that it would be easier to make an HTML game using gifs/clips. I really want to make a kind of a mind-control/harem type game in that format.

I have... *ahem* gathered some assets, but I still have some technical questions. I'm sorry if these have been asked a lot before:

1.) What is the best way to include high-quality gifs and/or short video clips in an HTML game? I read online somewhere that you could host a site to store all the clips online, and I thought about doing that because I can never seem to get the clips to link correctly in Twine. Has anyone else tried that? Is it feasible?

2.) I find the HTML programming language to be quite tiresome. Does anyone know if there is a databank of code that I can just straight-up copy/paste? Like time and sleep systems, world map systems, inventory systems, etc.

3.) Does anyone have any other tips or tricks that I should be thinking about in the early stages of development? I have learned that I am VERY good at story and making things up on the fly, so I'm not too worried about the creative side. The technical stuff is a real hassle for me, though.

Thanks in advance!

 

[AmusingOddity]

To get images to display create an images folder next to your game file and give the game the path.
<img src="Images/Folder/MediaName.jpg"/> This may not be the best way but its what i do and it works well for me.

I would highly recommend against whole cloth taking someone else's code. If you want examples to look at just open up a game that does what you need in twine and look at how they do it.

It would be best to actually write the code yourself if you can. If you don't than a month form now when something breaks in relation to that code you will have no idea how to fix it cause you don't know what it does.

Its hard to give advice when i don't really know what you're trying to make. One thing i will say is that making things up on the fly might feel good in the moment but having a plan that your following will make it much more likely that you get the game actually finished.

Good luck bud.

 

[guest1492]

If what AmusingOddity said is not working for you, it might be because you are hitting "Test" or "Play" in the Twine editor. Those actually create an html file in your temporary folders which would mean all your images/videos/etc are broken unless you used the full file path.

I agree with AmusingOddity that it's best to write the code yourself so you actually understand what you're doing and can troubleshoot things yourself. However, HiEv is active on many Twine forums and his signature has a link to lots of sample Twine code he has written himself. If you do prefer hitting "Test" or "Play" in the Twine editor, then you should take a look at the section on displaying images in Twine in HiEv's sample code. The official Twine website also has a

You must be registered to see the links

that contains a lot of sample code.

As for tips or tricks, I really don't have any. If your story is going be somewhat complex or long, you might want to learn how to use arrays and objects in programming. That way you can make use of loops so you don't have to write as many lines of code.

 

[stopallthedownloadin666]

Thank you for your replies, everyone. I've been really mulling this over, the last few days.

I guess I COULD give Twine another crack, but the problem is that I work full-time and now I write for a romance app in my spare time (lol), so by the time I am free, I am nowhere near the headspace to learn how to do even basic code.

I have been thinking that I could just pay someone to code the basic setup for me, and show me how to add the clips/gifs into the scenes or whatever after. I don't have a lot of money, but I definitely have more of that than time and/or patience haha

I might do another post about it on one of the programming boards (I am new to this site but it's great, btw! Everyone really comes together here lol)

 

[HiEv]

I guess I COULD give Twine another crack, but the problem is that I work full-time and now I write for a romance app in my spare time (lol), so by the time I am free, I am nowhere near the headspace to learn how to do even basic code.

You can do quite a bit with just copy-and-pasted code, but there are some limits to that, since some code won't know what you want it to do unless you tell it, and that means coding.

For example, if you want to include images or videos with your code in Twine, it's pretty easy to do that with just a little copy-and-pasted code. The

You must be registered to see the links

part of my

You must be registered to see the links

helps make that pretty easy, you just need to modify the bit where you tell it where the files are on your computer so that it will work when you launch it from within Twine.

On the other hand, there's my

You must be registered to see the links

(UInv) for Twine/SugarCube, which makes it a lot easier to create inventory systems, but you're going to have to write code if you really want to take advantage of it for anything more than simply shuffling items around.

That said, learning coding is simply a matter of practice, research, and testing until you figure out how things work, so that you can get them to do what you want. In many cases it's not as bad as you think.

For example, if you were using UInv for your inventory system, and the player's inventory was represented using the name "inventory", and you wanted to give players the option to try the "key" item on the door when in a certain room, then the code in the passage which represents that room would just be:

<<if UInv.BagHasItem("inventory", "key")>>
    [[Try the key on the door.|Next room]]
<</if>>

and that would only display the link to the "Next room" passage using the link text "Try the key on the door." if the player was carrying the "key" item in their inventory. (In the

You must be registered to see the links

, "inventory" is the "bag" name and "key" is the "item" name.)

The amount and level of coding you're talking about depends on how complex you need your interactions, but don't be afraid of writing a little bit of code.

As for general recommendations, wrote a post a while back due to someone requesting a "Game Making for Dummies"‑type guide, so you might want to check that out. It was intended to be called "

You must be registered to see the links

", but Patreon didn't allow the strikethrough, so...

Hope that helps!

 

[stopallthedownloadin666]

Thank you HiEv! I actually did go back through some of your links to read up about doing different things in Twine, too. Thank you for noticing me senpai lmao

I really like the "IF you have this, then this" aspect of Twine, and I feel like I can get my head around that, but for some reason I keep getting stuck on this entry-level stuff like getting clips and gifs to work properly offline. I do keep going back to tinker with it and I feel like I am getting closer to getting it done, so maybe I will sit down this weekend and not leave my computer until I have it working ;__;

And I do understand that I should learn how to do it myself so that I know how to manage it later... but I am just so impatient haha I want to just get to the juicy plotlines already! Life is sad and hard, sometimes.

 

[AmusingOddity]

Thank you HiEv! I actually did go back through some of your links to read up about doing different things in Twine, too. Thank you for noticing me senpai lmao

I really like the "IF you have this, then this" aspect of Twine, and I feel like I can get my head around that, but for some reason I keep getting stuck on this entry-level stuff like getting clips and gifs to work properly offline. I do keep going back to tinker with it and I feel like I am getting closer to getting it done, so maybe I will sit down this weekend and not leave my computer until I have it working ;__;

And I do understand that I should learn how to do it myself so that I know how to manage it later... but I am just so impatient haha I want to just get to the juicy plotlines already! Life is sad and hard, sometimes.

Basics for using images:
Make a folder called "GameName". In "GameName" put the html file and a folder called Images. In the Images folder Make folders for scenes/locations/misc whatever you think you might need- this may not seem important but it is. If you have a lot of images it's good to section them off to make stuff easier to find.

To get a clip to play: <video src="Images/Scenes/Vid1.webm" autoplay loop height="400px"></video>
Be careful with .mp4 files they don't play in forefox

To get gifs to play: <img src="Images/Scenes/Scene1.gif" style="width: 50%; height: auto;"/>

It's unusual in my experience but some gifs will stop after one loop. That's a problem with the gif itself you need to edit it to force it to loop.

Also it might be worth mentioning that if you use the play button inside twine it gets weird with images. You're better off opening the game from its folder.

If all you want to do is share a story than consider going the simple visual novel route. Literally all you need to do is link form one passage to another.