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

[PTSdev]

Well, you could just try to reach out to the devs of the abandoned games. HTML games are open source, so nobody can prevent you from copying code, but asking for permission should always be the first step.

Generally, assets in HTML games are mostly real porn, so forget about getting permission from the people who really own the assets. It's always copyright infringement.

 

[MalaKarr786]

Thanks OP for this, keep coming back to this as my guideline for my game. Im new to coding but i have a question to the more experienced. Can you use a macro(i hope i using this in correct context) to adjust all images into a certain size and position/alignment? Or do you have to do it in every passage/instances?

 

[PTSdev]

Use CSS to define image classes.
You can create a macro / widget to display images and handle class assignments on the fly.

Example from my CSS:

.picture {
    display: block;
    margin: 10px auto 10px auto;
    width: 50%;
}

And here's the image display widget I've created for my current project. You can ignore stuff like "perfScore", it's for stat calculations in my game. I'm using a div as a wrapper and the custom CSS class "picture".

<<widget "pic">>
<<set _dialoguepic to $girl[$current].path + _args[0] + ".jpg">>
<div class="picCenter"><img @src="_dialoguepic" class="picture"></div>
    <<if _args[1]>>
        <<set _dialoguepic_type to _args[1]>>
        <<perfScore_calc _args[1]>>
    <<else>>
        <<set _dialoguepic_type to ""; _perfScore to 0>>
    <</if>>

    <<if _args[0] and !$girl[$current].gallery_pic.includes({path: _dialoguepic})>>
        <<set $girl[$current].gallery_pic.push({path: _dialoguepic, type: _dialoguepic_type, perfScore: _perfScore})>>
    <</if>>
<</widget>>

The first if statement manages stat calculations. The second if statement manages the gallery.

 

[MalaKarr786]

I somewhat understand the logic, but im not quite experienced to break it down and adapt to my own. I'm still trying to learn the potential of widgets, all i get is that it can create speech bubbles and used for images but not sure what it does exactly. Is it purely aesthetics?

So the CSS is created in a different passage like StoryInit to set up the template of all images style. CSS is mostly customizing HTML i believe right? So even could be used as font/colour?

"div class" can i put this with the css code as part of fixed template. My concept is having the image fixed on the left side of the screen and text on the right hand of the screen similar to college daze aesthetic.

Thanks for the help you provided thus far

 

[PTSdev]

You set up your CSS in the passage with the [stylesheet] tag. There you can define your custom styling. It's just normal CSS code. It's possible to alter the basic Sugarcube stylesheet that way. Technically, you can also create a stylesheet from scratch, refer to the official Sugarcube documentation for that. I wouldn't recommend that if you're a beginner. Setting up stuff like columns isn't too hard.

The only limits are your creativity and general HTML/CSS skills. Take a look at some Sugarcube games on itch.io, you can achieve amazing things with a nice custom style. You can also download some HTML games from F95 and take a look at their stylesheets - the code is stored in the HTML file. That's an easy way to get a feel for it.

Widgets can be used for many things - they're basically just macros, but you're using the Sugarcube markup instead of Javascript. It's also possible to create macros directly in your JavaScript passage, but widgets are a nice alternative. Some things I use them for: Post-render styling, image / video display, data / stat management, event scripts, quest handling. They're insanely powerful.

I've attached a screenshot from my project to show what can be done with a custom stylesheet. It's based on the basic Sugarcube style, but highly customized.

 

[crave]

On the topic of assets, what would be the recommended route for sourcing things such as items/equipment/clothing and such. I've done a little snooping around the internet for these things but it's been difficult to find images that work well together from different sources. I've also considered making my own through some pixel art, but I have no experience and I'm not sure I want to dedicate the time to learning that art for a single project.

 

[Frogface29]

On the topic of assets, what would be the recommended route for sourcing things such as items/equipment/clothing and such. I've done a little snooping around the internet for these things but it's been difficult to find images that work well together from different sources. I've also considered making my own through some pixel art, but I have no experience and I'm not sure I want to dedicate the time to learning that art for a single project.

That is writing an HTML game for you. I spend 1/3 of my time writing, 1/3 coding, and 1/3 searching for videos/images that fit the narrative

 

[Frlewdboi]

Hi there, good work ! Profesional project manager and coder here (for over 15 years), although not as a game coder. I work with black magic and voodoo, i.e. mostly C/C++ and assembly.

I do some game coding on my own and plan to make one that may appear here, but I lack asset making skills. Also, still not decided wether i want to do it as an html game or something with less text and more interaction from the user. I guess it needs to be playable one handed...

The guide is very good. I'd add some recommendations about management and coding. Coding is frustrating because really, 99.9% of errors are due tothe coder doing something wrong. And the remaining 0.1% too, but no one wants to admit it. In my line of work, that 0.1% is sometimes due to a hardware error, but modern OS completely abstract that.

Add unit tests. This is probably the most frustrating thing to do, but it will save the coder's ass and time many, many times. If you are writing a function that supposedly does something, write unit tests that make sure to test this function's output depending on its inputs. It is very important, as with time the function may evolve, and the only way to make sure it works as intended is to replay the unit test, automatically of course.

Second one, as you pointed out, organisation is important. Break down the project as tasks, with dependencies. Use software to track that, there are tons. Choose one with a ticketing system, and associate it to a version control system.

Every time you work on a task, "commit" the work using the version control system, with a ticket number that associates it to a task. Have it run a build and unit tests automatically on commits. Gitlab is very good for that. Version control can be used with assets too, although it usually is not. This is important as sometimes you need to go "back in time" ... and it is necessary when not working alone. If you do work with other coders, make it mandatory to review code before commits.

That last pararaph mostly applies to games that need coding though. I am not sure it can apply to html games.

Finally, make backups. I dont think there is anything more frustrating than losing months if not years of work because someone stole your laptop, the hard drive dies, the house catches on fire or you just get hacked. Make backups on a regular basis, and store them in a different geographical place. This can be easily automated through rsync for example.