Itch.io is the premier place to discover and share indie games and development tools. Posting your Rosebud games on Itch is straightforward and can be done in a few steps.
Check out this tutorial to learn how!
Here is a video version of this tutorial to make it easier to follow along. If you have any questions about following these steps, join our Discord and let us know how we can help make your experience even better!
The Template
While there are multiple approaches that work, the best way to upload Rosebud games to Itch is to add your game within an iframe in a simple HTML file. Below is a template we made to make it super easy for you to do this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Rosebud Game on Itch.io</title>
<style>
body, html {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
#game-container {
width: 100%;
height: 100%;
max-width: 800px;
max-height: 600px;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<div id="game-container">
<iframe src="{ YOUR PUBLISHED GAME URL }"
frameborder="0"
allowfullscreen="true"
allow="autoplay; fullscreen *; geolocation; microphone; camera; midi; monetization; xr-spatial-tracking; gamepad; gyroscope; accelerometer; xr; cross-origin-isolated"
sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-pointer-lock allow-top-navigation">
</iframe>
</div>
<script>
function resizeGame() {
var container = document.getElementById('game-container');
var aspectRatio = 800 / 600;
var windowRatio = window.innerWidth / window.innerHeight;
var width, height;
if (windowRatio > aspectRatio) {
height = Math.min(window.innerHeight, 600);
width = height * aspectRatio;
} else {
width = Math.min(window.innerWidth, 800);
height = width / aspectRatio;
}
container.style.width = width + 'px';
container.style.height = height + 'px';
}
window.addEventListener('resize', resizeGame);
window.addEventListener('orientationchange', resizeGame);
document.addEventListener('DOMContentLoaded', resizeGame);
</script>
</body>
</html>To start please open up a text editor like VS Code Web and paste the template code above into a new file.
There are only two changes you need to make to the template code.
First you need to change the iframe width and height to match the height and width of your Rosebud project (you can see these values in the config at the bottom of the Code Tab in your Rosebud project).
Next you need to change the iframe src to be the published URL of your game (make sure your game is published).
You’re now done with these changes! Simply save the file as HTML using Notepad or TextEdit (make sure to save the file as a .html).
Uploading to Itch
Now that you have your iframe file, please head over to Itch.io and make an account. Once you’ve made one, you should be able to select an option in the dropdown on the top right called Upload a new project.
Once you select that you should see a lot of options, but don’t get overwhelmed as we only need to modify a few. You can learn about the other value later once you’re more comfortable with the uploading process.
Please follow the following steps:
- Title: Please enter a unique title. You can make it match your Rosebud game’s title for clarity, or use another name.
- Project URL: This should automatically update to a sensible option once you enter your title. You can change this to anything you want however.
- Short description: Please write a short description of your game. You can always come back to this later.
- Kind of project (important): Set this to HTML. This will allow us to upload our iframe.
- Uploads (important): Please upload the HTML file we created earlier. After that make sure that
This file will be played in the browseris set to true.
- Embed options (important):
- Viewport dimensions: Please set the
Viewport dimensionsto match the dimensions you set in your iframe and your Rosebud game. Make sure all three sets of dimensions match. - Frame options: Please set
Automatically start on page loadto true. You can setMobile friendlyto true as well but only if you know your game is already mobile-friendly on Rosebud.
- Viewport dimensions: Please set the
And that’s it! You’re now ready to share your Rosebud game with the world on Itch.io. With just a few steps, your creation can reach a wider audience and showcase your unique vision.
.svg)
.svg)
.svg)