Note: As of 08/08/2022, Ren'Py 8 does not have the ability to create versions of your game that can function in a player's web browser. You must use Ren'Py 7.5.1 to create Web distributions.

The following is a quick tutorial on how to make a HTML/Web version of your game that will work on both desktop and mobile browsers.

01a. Open your Launcher, then select Web (Beta) below iOS and above Generate Translations

01b. If this is your first time creating a Web Build, Ren'Py will download the necessary packages for it, then restart

02. On the left side of the menu, you will have 4 options and a checkbox for "Force Recompile" (it is recommended to turn this on)

03. To immediately create a web build to test, select the 2nd option titled "Build and Open in Browser"

04. A new tab in your web browser will open, and your game should load up. Use this to do some initial beta-testing

05. Go back to the base of your Ren'Py Launcher and select "base" from under the Open Directory header, then locate the "progressive_download.txt" file to edit it as so:

# RenPyWeb progressive download rules - first match applies
# '+' = progressive download, '-' = keep in game.zip (default)
# See https://www.renpy.org/doc/html/build.html#classifying-and-ignoring-files for matching
#
# +/- type path
- image game/gui/**
- image game/**
- music game/audio/**
- voice game/voice/**

This will disable progressive download, which may cause your game initial pixelation for half-loaded assets or your game not to function on certain Mac browsers.

06. Go back to the Web Build menu of the Launcher and select "Build and Open in Browser" for another round of beta-testing

07. When you are satisfied with your Web Build, select "Open build directory" and locate the folder called "[YOUR_GAME]-[VERSION_NUMBER]-web"

08. Zip up the entire folder, then upload it your project page on itch

09.  Go to "Kind of project" and select "HTML - You have a ZIP or HTML file that will be played in the browser"

10a.  On the web zip, select the checkbox that says "This file will be played in the browser." If you offer downloadable versions of your game on the same page, no option needs to be selected for those files

11. Find Embed Options under your game files and adjust your settings. We recommend setting it to "Embed in page" and "Manually set size," with Viewport dimensions of 976px wide and 549px height for games that are 1080p/16:9 resolution (adjust if your project is a different resolution)

12. In Frame Options, select Mobile Friendly and leave Orientation to Default. You may optionally also select the "Fullscreen button" for desktop browser players

13. Save the page and test the game! Assuming no bugs, you should be done!

Tips:

• Make a backup copy of your project files first before adjusting them for web builds.
• Video files are not currently supported.
• You can replace the default Web presplash screen by placing a file named "web-presplash" in either .png, .jpg, or .webp at the base of your project folder (this is where icon files go as well for desktop versions)
• Create a private test page for your web builds and set it restricted with password access, and hand that to people you know who use different browsers than you. While your itch feed will only show the latest time you've updated a page, it can be quite embarrassing for you to constantly update while troubleshooting...
• If you know you have unused files (such as gui/nvl.png or such), you can delete those to reduce filesize.
• If you have a highly customized GUI, be sure to CTRL+F for the "Mobile Variants" sections in gui.rpy and screens.rpy to comment out or adjust any styles that are under "touch", "small", or "medium" as these will refer to files in "gui/mobile/**". The files in there are based on the default Ren'Py GUI, so unless you create variants of the graphics there, it's often easier to not use them. When you confirm that your game functions without the files in the "gui/mobile/**" directory, you can delete them.
• The only mobile style you may need to adjust is the quickmenu, in order to space them out more to accommodate for the size of human fingers.
• To further reduce filesize, you can convert your image files to the .webp format, which Ren'Py should support natively. While there may be slight loss in quality depending on the style of your art assets, mobile devices at a smaller resolution should not be affected too much.
• Always do a final beta-test on itch itself, as you may encounter an error that says you have too many files (over 1000). You should be able to avoid this error by zipping up the entire folder that comes out in your distribution folder.
• Persistent variables do not save on web versions until the game has saved so if you have any persistent variables that are supposed to work even if the player doesn't save, you have to force the game to save or it won't function properly. To do this, disable quicksaves and add in the following code:

## When the true ending is read
$ persistent.true_ending = True
## Every time a persistent variable is changed
$ renpy.save('quick-1')

• You may want to note on your page that web builds are still technically in beta and may not provide the most accurate play experience for your game, especially if it features a high amount of animation.

Ebbasuke's note: "If itch complains about the "over 1000 files", it would be wise to try and make a new zip of the web game files. During O2A2 I had that error, and without removing any files I made a new zip, tried uploading it again, and it worked. Itch claimed I had something like 1100-1200 files, so I'm not sure if it would work with a game that has way more than that."

If you encounter any issues, please feel free to leave a reply in this topic and I'll see if I can help troubleshoot it with you.

Special thanks to littlerat for the tips on viewport dimensions and persistent saves used in eggs for you, and Ebbasuke for general reminders from the Vampire†Hunter Devlog.

See also:

Ebbasuke's Devlog for Vampire†Hunter
The official GitHub page for renpyweb

See below for some more details on persistent variables in web games!
---
The value of a persistent variable does not save on web versions until after the game has saved. So, it’s best to force web games to save whenever you change the value of a persistent variable. You can use quicksaves for this so that the player can’t access the saves that you use.

First add this code to your script, outside of a label:

##stop players from manually creating or loading quicksaves
init python:
    config.has_quicksave = False 

Then, use this code whenever you want to change the value of a persistent variable:

## example: when the true ending is read. replace with your own persistent variable
$ persistent.true_ending = True
## save the new value of the persistent variable
$ renpy.save('quick-1') 

Saving web games only works with third-party cookies enabled, so if your game uses this system you may wish to mention in the description that third-party cookies are required.

i have struck gold

EDIT: i mean this topic is made out of gold, i have not actually been mining and have not struck gold physically

tofurocks , big props man.