Adding Custom Textures [UPDATED!]

A guide how to best implement custom textures into your game. From small changes like added writing to complete texture replacements.

Basics

Update: I finally found time to update this guide to cover all the current new features! Yay!

Hello and welcome to my guide.
I am not a native speaker, so please forgive occasional grammar or spelling errors.


Many puzzle or decoration ideas will require you to add custom textures to your room.

There are two methods that are useful for different projects:

1. The Overlay Method [Small/easy and quick changes]
2. The Replacement Method [Larger changes and changes that require high resolution]


Before we start, a few important infos to handle some common bugs and problems:

- Locating your room folder is easy on Windows. Click a texture of a random item and a folder will open in-game. Click the top right folder icon and the folder will open outside the game in your explorer. With Mac it is a bit more complicated, because the folder is within the hidden "library" folder that you will need to make visible/accessible. This is the path on Mac: user/Library/Application Support/Pine Studio/Escape Simulator

- The game will accept different sizes of textures. But having a 1024x1024 pixel one is enough detail for all but the very largest items.

- For smaller items use 512x512 to save data. For solid colours even a single pixel will do.

- Minimizing the file size of your textures this way is important to prevent lags and glitches for your players.

- The game uses .png files. If you have any trouble with some texture not showing up, make your .png a .jpg. This solved the problem for many people.

- You can easily accidentally overwrite your new textures. So be careful and keep copies of all custom textures in a separate project folder for backup.

- The game will delete any texture in your room folder that is not used at the time you upload. So spare textures do not count towards the room file size.

-Not all items have the same attributes regarding texture, colours and so on. Some papers just have one side, others two. Some items can handle transparent texture replaces, others can not. Some textures are just funky and will reject proper texture changes. So experiment a bit!

- Items that can handle transparency textures are the space stickers and Alchemy pack carpets, as well as some other props. Their transparency does not work gradually though, but either something is fully transparent or not. The threshold for this is alpha >= 88. Thanks to Sethbling for testing and sharing the value. For gradual transparency you can use the Transparent logic item.

Overlay Method

If you want to paint a small hint on a piece of paper, have a number carved into your table or just change the overall colour of an item, the Overlay Method might be the quickest and best solution.

It preserves the original object texture and overlays it with a transparent layer, that is saved in your room folder. This layer can be used to quickly add small details to existing textures or transform your scribbled on hints into proper typed letters. It is less useful for large objects or objects with a heavily structured surface.

It was showed to me by ZM on the Pine Discord.

For this guide I will write something on the clipboard item as an example.

How to do it:

- Click the item you want to overlay.
- Click "Paint" and use the in-built paint function to draw a rough sketch of what you want. You will use this sketchs as a guide later on. So pay attention to correct placement most of all!

- Save the doodle to create an overlay .png file in your room folder, then save&exit the editor. This is important because the improved overlay textures we are going to make will not show until you restart the editor. Also this way you prevent the game overwriting your improved overlay with the old doodle again.

- Open your room folder and locate the .png file with the long and complex random letter name that shows your overlay. Open it in an editor that can handle TRANSPARENCY. (See respective section for advice on programs to use)

- Sometimes there are multiple files, which can be confusing. This happens because items have more than one surface and you will write on ALL the surfaces at once, that are behind your paintbrush. With most items that is easily sorted, but I took the clipboard as an extreme example.








In such a case just add a number or whatever on each, but always a different one for each. save them all and restart your room in the editor. That way you will see which is linked to the surface you are looking for.
Here I did this with a yellow T and added blue numbers to each of the Ts in each of the 4 files that the game created of this overlay. Again: Most simple items will just give you one file.





















When booting things up again in the editor, the new textures will be there. In this example you will see why it is important to not use lines or dots for marking, but actual letters or numbers:

























Some files additionally MIRROR the text on the surface you are trying to write on. You wil not notice that if you don't do a propper doodle or propper test numbers, you might end up creating a mirror checklist that requires additional work to fix. Or which you notice too late.

In our case we need to mirror and turn our new text in the graphics program. Work with a layer, so you can always shuffle your new text around over the old doodle without losing the guidance from it where your writing should begin and end.


Put all your new text on there, save the file under its original name and as a .png file.
Reenter the Editor. Done!

Replacement Method

This method is used for higher resolution or for objects with complex structure. Also it is easier on the file size.

As an example we will change the texture of a painting to show something different.

Start by downloading the in-game textures.
You can do that by clicking on the prop and expand the "Textures" tab. Now you can click on the individual texture you want to replace and download it into your room folder. If you have not saved the room before, it will ask you to create a save in order to have a room folder.





Even if you want to fully replace a texture, dowloading the original texture is important. Because with a few exceptions the textures are specifically arranged and you will need to create the new one in a similar way. Else parts of it will be cut off.



Some textures may look different then expected, because the original object consists of several layers of texture. The editor will just offer you one.







Open a new file in a graphics program. (See the paragraph later in the guide for recommendations)
This gives you the information as to where you will need to put your new image. See the black line on the side? (sorry for the blurry image) That part will not be displayed on the canvas! Every object uses different parts of a texture file. So you will need to check every texture preview and can't just reuse the same for all paintings. In many cases a bit trial and error will be involved.
Now we add the image we want to replace the man with.





The new image has a different side ratio than the man. But that is not a problem. In the Editor we will later pull the painting prop wider, to have the correct side ratio there. Here we just stretch the image to fit into the assigned space. Save the file as a .png or .jpg in your room folder.










In the Editor you then select the texture you want to replace and choose your new texture from the folder.
The change will take place immediately.





Now adjust the item to fit you texture.










If you still want to edit the image a bit or adjust the texture, you do not need to close the editor or create a new image file. Just overwrite the file with the tweaked version. Then remove the texture replacement from the painting and re-select the new version of your texture. This way you can not only see the change instantly, but also prevent the editor from overwriting your improved file with the old again if you save your room.

Most assets will not display transparent textures.

Planes and Transparents

Other than most other objects, Planes and transparents will accept you image file without needing you to tweak the position of the visible part within the image file. They will show the images exactly as you upload them. So downloading their textures for editing is not needed. Keep in mind that in many cases you still will want to scale your original images to a square and adjust the Plane or Transparent in the editor to then properly display the image

Planes


Planes are a quick and easy way to add your images into the game. They are not able to display transparency and they just have one side. Many people use them as notes and paper sheets for convenience reasons. There are some fundamental problems with that: They are very thin and can easily get lost. They are invisible from one side, which looks bad in the inventory and can be confusing in zoom or when the object dropped on the wrong side. Instead the envelope item is often used as a paper replacement with great success, because it has thickness and more organic edges. Alternatively two planes can be parented back to back to each other. Or the Transparent Double Sided can be used without transparent texture to create a double sided "sheet". Those options sadly do not offer thickness either though.

Transparents

Many edits are easiest done by not messing with the original textures, but by using the Transparent Logic Objects to create decals. Those items allow for gradual transparency.

See the upper left gradient for the transparency/opacity ability.

Below it you see two types of Transparents. The one on the left has no backside and will be invisible if looked at from the back. The glorious Transparent Double Sided will allow your transparent to be viewed from both sides, like a paperdoll.

Custom Workshop Thumbnails

As you have noticed, many people use custom thumbnails in the Workshop with added text or graphical effects. This can be done very easily:

1. Create the image you want as a thumbnail from a screenshot or whatever.
2. Name it preview.jpg
3. Save it in a SEPARATE FOLDER (I am not kidding!)
4. Copy it into your room folder and overwrite the old preview.jpg, but only AFTER you saved your progress and closed the Editor!
5. Upload/Update your room. Go to the workshop and edit/update the description, because the in-game description results in a messed up text.
6. Repeat this every next update of your room. Because as soon as you save your room in the Editor, the preview.jpg will be overwritten and your custom image deleted.


Attention: Issues with uploading may arise if the image is too large.

Another method is to add a plane with your custom thumbnail image on it into a hidden area of your room! Just point the camera for the thumbnail screenshot on that image. This way you don't need to constantly replace the preview.jpg.

The Transparents can be used to create floating text that can be animated out of the room again before the players fully loaded in. This way the thumbnail camera view can be used to have a screenshot of the room with floating title text, again without having to have the preview.jpg updated all the time!

Tips, Tricks and Troubleshooting

If your textures looks blurry in game, your resolution is too low. Just increase the canvas size in a paint program beyond the original size to create higher resolution textures.

At the vanilla lighting in the game is still very bright. So in many cases it makes sense to darken your textures.

The paint tool is often too bright. Choose a colour shade that is so dark that it is nearly black for "normal" colour effect.

Many objects have a shiny surface, which can cause issues under some circumstances. So the plane can not just get a texture of a concrete wall and look like one, because it will be very smooth and shiny.
Franch found a way to change the glossiness of some objects by changing the opacity of a replacement texture.
[Image by Franch]
By making a unicolour red .png and gradually changing the opacity of it from 255 to 0 (0 here on the picture being totally matte and originally black, but painted red via overlay paint), the glossiness of the sphere can be gradually lowered. This does not work for all assets!

Replacing the textures of the walls/floor/ceiling placed in the expansion mode is not possible. You will have to use transparent walls there and later place the wall piece props (or planes) from the prop section with your desired textures. Alternatively it is possible to half-retexture the wallpaper of the hard-coded walls by simply placing a plane over their upper part that has the desired pattern.

Texture issues with importet custom 3D models may arise. E.g. their texture often are way too large and bloat up the room's file size. In such cases you will need to install a 3D modeling Software (e.g. Blender is free one) and modify their texture there and replace their previous file in your room folder.

Accessability

A surprising number of people is colourblind, that means they can not see one or more colours properly. Statistically 1 in 12 males is affected by some degree of colourblindness (women can also be affected, but way more rarely). So you too might know way more colourblind people than you think!

It turns into a problem when we make puzzles that require a colourcode for entering or finding a solution. Sadly way too many games do not take that into account, despite workarounds being simple and quick.
There are several palettes of colours that make things easier for three types of colourblindness and allow people to distinguish the different colours better. Here an example of "good" colours:



This here shows how those colours look to the different colourblindnesses:



Still it there can be issues when colours are badly combined. Avoid the following colour combinations if possible:
- Green & Red
- Green & Brown
- Blue & Purple
- Green & Blue
- Light Green & Yellow
- Blue & Grey
- Green & Black

My rooms have additional colourblind-friendly traits (e.g. item size differences, shape differences or pattern differences, not saying "look for a blue button" but showing the actual colour as reference) and my Hint System gives special hints or skip options for colourblind people if a riddle does not allow for any other workaround.
This sounds like a lot of additional work, but it really is not. Once you get used to the idea, you automatically make those considerations in the same way as you already do "is this font big enough for people to read?" or "is this playable for most non-native speakers?".

Programs

Which program you should use depends on the task and on your skills.

I use Paint for simple adjustments with e.g. paintings. I do not need to work with transparency there nor with layers. And this simple changes are more quickly done in paint than in other programs, because those will have multiple steps for the same process.

But for more complex changes or for working with overlay textures you will need a program that is capable of handling transparency. Paint can not do that.
If you posess and are able to handle Photoshop, go for that. If you either can handle Gimp or are eager to learn Gimp anyhow, go for Gimp.

But if you - like me - just want to get the job done with good results but without a complex program, go and try PaintDotNet. It is a free downloadable program that has been around for ages. It is like a cross between Photoshop and Paint. Simple and intuitive to use, while it offers some of the basic Photoshop features. Additionally there are many, many plug-ins that allow you to tailor the program to your needs. https://www.getpaint.net/

Free Texture Resources

To stay on the legal and fair side of things only use textures that are free to use or are under creative commons copy right.

Here a list of useful websites:

https://freestocktextures.com/
https://ambientcg.com/
https://www.sharetextures.com/
https://polyhaven.com/

Post your recommendations in the comments and i will add them here!

[Thoroniul]

@Amy. The game only accepts the .gltf format for models on export. Depending on the format, one imports it into blender, and can export it as either a .gltf or a .glb. Then they take the file and/or folders to the models folder in the map folder.

[Amy]

How do I use Blender models in ES? I've subscribed to the Poly Haven site listed in Texture Resources, but now can't seem to use the models. Textures kind of work, but no clue how to import a model. Anyone?

[lucheiah]

Is there a way to stop doors from clipping through walls when they are opened? I have a cabinet in a corner of my room and when I open the door it swings all the way open and through the wall next to it and I'd rather that didn't happen.

[Thoroniul]

Or the good old space sticker.

[Thoroniul]

Use Transparency logic and an image with an alpha layer mask.

[ThePinkDuq]

i can't figure out how to make spider webs. i want to have a seethrough background with spider web in grey. it's so hard to find information on theese kind of thing.

[Thoroniul]

One can if you use the prop walls instead of the built in room walls. The Victorian wall with the tapetka texture will be a little weird as the model is set up with a tesselating square tile texture which repeats itself. One would have to make a repeating texture to make use of it. The opacity channel will also emboss the texture and one may have to be careful.

[nekodafunniman]

*if thats possible

[nekodafunniman]

can i replace the room textures with my own textures?

[obvious]

@zoex0077: The same room folder in which you put the custom textures! You can access it by clicking on the "open folder" symbol in the editor when you replace textures. That folder :) If it doesn't work, make sure the file-name is correct, the file is not too big and you put it in again after every time you save your room.