Forem: Rachel Ombok

How to add Splashscreen and Presplash screen in Renpy

Rachel Ombok — Mon, 27 Oct 2025 19:45:04 +0000

This article is a tutorial explaining how to specify a splashscreen and presplash screen in Renpy. Because this took me almost a whole weekend to figure out I decided to make this post so maybe someone else can save some time doing this :)

What is a splashscreen? (or presplash screen)

From Renpy themselves; “A splashscreen is an image or movie that appears when the game is starting up and before it goes to the menu. Usually these are logos or intro videos.” A presplash screen is an image shown while Ren'py is reading the scripts and launching the game.

A good usage example of this I can think of is in Grand Theft Auto 5. When you open the game from your console, it first opens with the girl in the red bikini taking a selfie. Then after a few seconds, the GTA V logo appears with police lights, and siren and gunshot noises. This is an example of a presplash screen showing key art of the game as a quick intro as it loads, and then the game logo displays before leading the user into the main menu, or directly into the game.

Adding Spashscreen

Add your splash image to your images folder, or wherever in your project you keep your images
Define your image with appropriate styling. My splash image is a webp file that I transformed to display contained within the window, vertically aligned on the page.

image splash:
   Transform("images/splashscreen.webp", fit='contain', yalign=0.5)

Add a splashscreen label with how you want to display the image. It must be named splashscreen

label splashscreen:
   scene black


   show splash with dissolve
   with Pause(2)


   scene black with dissolve
   with Pause(1)


   return

The splash screen starts with black, then shows the splash image with a dissolve event, holds it there for 2 seconds, then fades back to black and holds for 1 second before going to the main menu.

You can also show movie splash screen with something like;

$ renpy.movie_cutscene('movie.ogv')

Adding Presplash screen

Get your image presplash.png or presplash.jpg and put it in your game folder , ie myGame/game
If you are publishing your game to web, instead put it into your root folder, aka myGame and name it web-presplash.png or web-presplash.jpg
Bonus; config.minimum_presplash_time will specify the minimum time the presplash should be displayed. It is defaulted to 0.0, but you can override this in your game.

define config.minimum_presplash_time = 2.0 #makes presplash display for at least 2 seconds

And there you have it! That is how you set your splash and presplash screen in Renpy.

Build a Discord Bot 👾

Rachel Ombok — Mon, 24 Jan 2022 16:22:21 +0000

This tutorial is apart of a workshop I hosted for Starhacks 💫 Watch the full video tutorial here.

Discord is a powerful messaging platform with great chat capabilities originally
built to serve gaming communities. it has grown to a massive popularity and offers
a lot of customization and autonomy via bots, custom moderation tools and more,
which I’ll show you how to work with! in this tutorial I’ll show you how to set
up a fully customizable Discord bot that can be running on your server in under
15 minutes. this tutorial is taught using Javascript, but if you are a beginner
don’t worry! We’ll walk through it together.

i set this repository up so that anyone can fork or clone it and add their own tokens
and capabilities for their own bot easily, so if you don't want to start from scratch,
fork this repo!

Prerequisites

a Discord account (sign up here)
NodeJS(node) and npm installed
your favorite IDE 🤩 (VSCode, Notepad++, Webstorm, etc.) ## Workshop Resources
Skeleton Base Repo
discord.js Documentation
discordbots.org (premade bot examples) ## Steps

1.) Creating the Discord bot

Visit the Discord portal and click on new application
Give your application a unique name and click the Create button
On the left panel, click on the Bot tab and click on Add Bot
Now our bot is created and we can invite it to our server!

2.) Adding the bot to your server

On the left panel, navigate to the OAuth2 panel and select the bot you just created
Select the needed permissions for your bot (Read Messages/View Channels, Send Messages, Manage Messages, etc.)
Copy the generated URL link and paste it into your browser
After pasting it we can add it to our server by selecting it and clicking the authorize button

3.) Creating our Project

We can create our project directory from the terminal and start coding it! mkdir my-bot && cd my-bot
Then create the two files that we will work with touch index.js && touch config.json
run npm init and fill out the questions, this will help us keep track of our project information
Now open your project in your preferred IDE

4.) DiscordJS basics

Install these dependencies npm install discord.js @discordjs/opus --save
Fill our config.json file with your command prefix and your bot token. To get the token go back to the Discord portal and copy it from the bot section

{
"prefix": "!",
"token": "your-token"
}

In our index.js file we need to import all our dependencies we installed for our app

const Discord = require('discord.js');
const {
    prefix,
    token,
} = require('./config.json');

After that we create our client (bot object) and login using our token

const { Client, Intents, MessageEmbed } = require('discord.js');
const client = new Client({ intents: [Intents.FLAGS.GUILDS, Intents.FLAGS.GUILD_MESSAGES] });
client.login(token);

Add some basic listeners to your bot that will console.log when executed

client.once('ready', () => {
    console.log('Ready!');
});
client.once('reconnecting', () => {
    console.log('Reconnecting!');
});
client.once('disconnect', () => {
    console.log('Disconnect!');
});

Test your bot by running node index.js in your terminal, which should output a 'Ready!' message

5.) Reading and Writing Message Commands

Now that our bot can go online, we can start by giving it the functionality to read chat messages, an event listener, by writing one simple function:

client.on('messageCreate', async message => {

}

Check if the message is from our own bot, or if the message doesn't start with our specified prefix. In these cases, we just return and don't do anything

if (message.author.bot) return;
if (!message.content.startsWith(prefix)) return;

Afterwards we can add capabilities for messaging to our bot with some conditional statements

if (message.content.startsWith(`${prefix}name`)){
    message.reply(`Your name is ${message.author.username}`); // sends reply in channel to author
    return;
} else if (message.content.startsWith(`${prefix}greeting`)){
    message.channel.send("Hello world!"); // sends general message to channel
    return;
} else if (message.content.startsWith(`${prefix}secret`)){
    message.author.send("Shhh! This is a secret message for you"); // sends direct message to author
    return;
} else if (message.content.startsWith(`${prefix}quote`)){
    const quoteEmbed = new MessageEmbed().setColor("ORANGE").setTitle(`Quote for ${message.author.username}`).setURL("https://discord.js.org/#/docs/discord.js/stable/class/Client").setDescription("To be, or not to be. That is the question.")
    message.channel.send({embeds: [quoteEmbed]}); // sends embedded message to channel
    return;
} else {
    message.channel.send("You need to enter a valid command!"); // if invalid command, send this error message to the channel
}

6.) Run Locally 📡

to start your bot, run node index.js, you should see the console message 'Ready' if it is up and running.
type your commands in the channel where the bot has been invited, and make sure the bot behaves as your programmed it to

7.) Pushing to your repository

If you push your repo as is, your secret bot token will be exposed publicly will cause Discord to flag you down and your token will no longer work. To make sure your token stays secure, we need to tell our project to ignore when pushing to our repository. We will also include the node_modules folder since that is also not needed for pushing our project

Create an environment file to host your variables touch .env, and then add this code block to the file:

TOKEN='your-bot-token'
PREFIX='your-prefix'

Create a gitignore file touch .gitignore
install the dotenv dependency\ npm install dotenv
Since your .env file was created before the .gitignore, it is not yet tracking the file. To do so, untrack the cached files with the two commands:\ git rm --cached .env and git rm --cached node_modules
if you've already committed these files and are given an error, try adding -r to the command:\ git rm -r --cached .env and git rm -r --cached node_modules
now if you run git status in your terminal, it will show all the files that are untracked in your project
in index.js, add require('dotenv').config(); to the top of the file
instead of importing the config variables from config.json we can now use the .env file variables by using: process.env.TOKEN and process.env.PREFIX
if you are working on a team, you can add the environment variables by going to the Settings tab in your repository, navigating to Environments, and clicking the New Environments button to add the variable secrets
You can now host your bot on an external service, tutorial links and resources are listed below.

Other Resources

🤖Guide: How to build a Discord music bot - Learn how you can create your own custom music bot for your server from scratch!
How to Host Discord Bot on Heroku for free
Definitive Guide for hosting your Discord Bot

Conclusion

if you have any questions or feedback, let me know by messaging me in Discord! (racheletc#1212)

I came, I saw, I coded!

Rachel Ombok — Wed, 03 Mar 2021 04:40:27 +0000

My most recent achievement was…

... accepting my intern offer for the upcoming Summer! Applying for internships and programs is always stressful and always consumes up my time. If felt good to accept my offer and be done with applying for the rest of the year, and just relax until the summer. I will be a Engineering Intern this Summer at Twitter!

Advocating for myself looks like…

... me putting myself first. Sometimes I have often felt like I am obligated to do certain things, complete certain projects, be apart of this certain organization, put out this certain image, but in 2021 I am committing to putting myself first and not doing things I feel obligated to do, but rather things I want to do. When I put myself first and work on things I actually want to do, the projects I work on have better outcomes and end up motivating me more to be a better programmer.

My biggest goal is…

... to be independent and self sufficient. I think that comes with age, but since working remotely in COVID, it makes me anxious to get back out into the world, and living on my own and doing my own thing.

My advice for allies to support underrepresented folks who code is...

... be transparent! If you are unsure how to be a good ally, ask how you can support your underrepresented peers and their coding journeys. Being clear and open about things like this will make you a better ally, and you may learn a new way of how to support that you might've not thought of.

Thank you for reading! If you want to chat, connect with me on Twitter!