Tutorial: Making Events CG

(posted with permission from Arknir!)

Have you ever wanted to upload a picture into an event? Maybe have a cool artwork or special CG to wow the audience? Then this is the right tutorial for you.

At certain points, or when the player passes certain requirements, special events can occur, often with a "CG" (computer graphic) as a reward in most relationship simulator games We are able to use the same concept in events for SDV! Like adding cool pictures or heartwarming scenes to give a cinematic feel at dynamic points (this is especially true for climaxes in 10 hearts and etc) Here are some examples of the temp maps I have made. Feel free to download and save for as a reference of the map/image sizes:

Keep in mind that different sized computer monitors will have different perspectives. Players with smaller monitors and default zoom levels might not be able to see the entirety of the CG image. So what can we do? We have to try to make the CG as accessible as possible. For most computers, the height of the main image should be around 12 tiles high. So if each tile is 16x16, the height of the map should be 16x12 or 192 pixels high.

Here is an example of what most players will be able to see in their game. Imagine that everything that is selected in blue will unable to be seen for most players. (Inside the selected box is 192 pixels high)

When you have your CG image ready, we will need to save it as a .PNG file in the assets folder of your mod. Have a designated location in your mod folder, like assets/Maps. The next step is to go into Tiled and make the image into a new map. (save as a .tmx file) I recommend a size like 14 tiles high and 26 tiles wide.

Next, make a new tilesheet and grab the CG.PNG file from your assets/Map folder:

Your CG should now be available as a tilesheet. Now you just need to add all the tile layers like a normal map.

You should only use the "Back" layer for your CG. All the other layers seem to be hardcoded in certain tiles (like adding light because of hardcoded window tiles). While on the Back Layer, click and drag your entire CG image in the tile sheet onto your map like this:

And voila, your map is done. Hover over any tile to see what [x, y] coordinate it is:

Save your entire map your CG map name as a .tmx file, which you will be loading into your Content.json Under your "Changes" section, you can add your CG map like this:

    {
      "Action": "Load",
      "Target": "Maps/UwahPortal",
      "FromFile": "assets/Maps/UwahPortal.tmx"
    },

The temp map in this example is named "UwahPortal". Keep in mind you are using the right "FromFile" locations.

In your event code, you can use these commands to change into your temporary Map CG:

changeToTemporaryMap [name of CG map] true/viewport x y clamp/bgColor 0 0 0/ambientLight 0 0 0/

Make sure you have bgColor 0 0 0/ambientLight 0 0 0, or your map will appear darker than normal. When changing into a temporary map, you will have to reset the lighting with these commands.

You will need to test the viewport clamp on your own. You can edit where the center of the viewport clamp is by patch reloading your event. Here is an example of what I use in my own event:

changeToTemporaryMap UwahPortal true/viewport 10 6 clamp/bgColor 0 0 0/ambientLight 0 0 0/

If you did everything correctly, you should be able to see your "CG" temp Map into your game. Players like to screenshot these moments ;D