Creating a Web Edition: A Ren’Py Howto

Creating a Web Edition: A Ren’Py Howto

Ren’Py already allows us to build games for Windows, Linux, macOS and Android. With the release of Ren’Py 7.3, the framework has gained the option to create HTML5 builds. Apart from being a regular contributor to the main Ren’Py project, beuc has been porting the framework to modern web browsers. Ren’Py Web is still in beta and has some limitations I’ll get into later, but is quite feature-rich.

Why build a web edition?

The Ren’Py web edition build screen.

As mentioned earlier, Ren’Py allows you to publish your game on many platforms already. Unfortunately, iOS (Apple’s operating system for mobile devices) is out of reach for us erotic games developers. Because the only feasible way to publish games on iOS is via the App Store and Apple doesn’t tolerate any pornography on it, developers are left with little other options. Luckily Ren’Py Web runs just fine in Safari for iOS…

Publishing a web edition on your own server, or a storefront like itch.io, Newgrounds or Game Jolt is a great way to expand your audience. Also, you can cater to players who are unable to play your game on the platforms supported by Ren’Py.

Preparing your content

There are a couple of things to keep in mind when building a web edition:

  • Don’t waste too much of the player’s bandwidth
    Some people are still on dial-up or dealing with metered bandwidth, so you should make sure your game’s assets are compressed thoroughly. As of Ren’Py 7.4 the web build should be smarter about downloading resources, but it still makes sense to optimize. People don’t expect a web edition to be an Ultra HD affair, so convert your images to WebP (which you should do anyway) and compress them until you have achieved a good quality to file size ratio.
  • Remove any video files
    If you have animations in your game and you’re referencing them as video files (webm, mp4, etc.), you should remove them. Currently (at Ren’Py 7.4) doesn’t offer video playback and the game will halt as soon as it encounters a video file. Support for video might be coming in the future, but in the meantime you should remove them and swap them for a static frame of the animation. Animations made using Ren’Py’s Animation and Transformation Language should run without issue.
  • Provide a splash image
    By adding an image named web-presplash.webp (can be a PNG or JPEG as well) to the top-level directory (so above the game directory) you can provide a message to web players (for example noting the limitations of the web build).

Building and uploading the web edition

The directory structure of the web edition of The Question.

Building a game should be as easy as selecting the “Web (Beta) option in the “Actions” section of the Ren’Py launcher. Ren’Py will create a directory for you containing all the files necessary to run the game in a browser. Double-clicking the index.html file in the folder won’t do much though, as the web edition requires a web server.

  • Upload to your own web server
    You can just upload the files to a directory on your web server and point your browser to the address. If you run an Apache server you should add the contents of htaccess.txt to an .htaccess file in the directory where you uploaded the files.
  • Upload to itch.io or Newgrounds
    Uploading your game to any of the three websites above is a matter of zipping up all of the contents in the web build directory Ren’Py created and upload that ZIP file to the websites mentioned above.

    itch.io allows you to host web games by setting the “Kind of project” from “Downloadable” to “HTML” when creating a new project. Please note that HTML5 games cannot be sold on itch.io, you can only ask for donations.

    On Newgrounds, be sure to check the “Touchscreen friendly” option (“HTML5 Archive (zip)” > “Edit Properties”), otherwise your game will be marked as incompatible for touch devices.

With the release of Ren’Py 7.3, creating a web edition of your game has become a piece of cake and a great addition to Ren’Py’s platform support.

This article first appeared on lewdpixels.com. Leave a comment there or join their on our Discord server.