[SOLVED] Is it possible to add image importing for game customization?

Help & Support
1

So for the game I’m working on I wanted to add some customization so that the game has a bit more spice you know? So the first thing I thought of doing was adding the ability to make a character and weapon crosshair. The way I was gonna do this was by being able to import an image and that image would then be applied to a material. An example of what I’m trying to do is like how in Minecraft you can import an image and boom you have your own character. Here is the problem… I have no clue how I would code this… :sweat_smile: I could probably figure out how to apply an image to a material but idk where to start with coding the import image part.

(An example of a image I would be able to import)
white

Any ideas anyone?

2

You would have to look for how to allow the user to choose a file from their filesystem/PC (eg using a library like https://www.dropzone.dev/ or the file input HTML DOM Input FileUpload Object) and then take the file data and create a texture from it.

1 Like
3

I’ll take a look into that, thank you!

4

@yaustar ? Would it be much to ask if you could make me script for this?
(or example project idk)
I’ve been trying to get it to work and haven’t really gotten anywhere…
sry :sweat_smile:

5

I’m afraid I don’t have the bandwidth to do a custom script unfortunately

@Leonidas Would you be able to help?

6

Something like this?

var ImageFileToTexture = pc.createScript('imageFileToTexture');

ImageFileToTexture.prototype.initialize = function () {

    const fileInput = document.createElement("input");
    fileInput.type = 'file';
    fileInput.accept = 'image/png, image/jpeg';
    fileInput.style.position = 'absolute';
    document.body.appendChild(fileInput);

    fileInput.onchange = (e) => {

        const file = e.target.files[0];
        if (!file) return;

        const reader = new FileReader();

        // --- read the file and load it as a texture
        reader.onload = (er) => {
            const image = document.createElement("img");

            image.onload = () => {

                // --- create a texture and apply it to the material
                const texture = new pc.Texture(this.app.graphicsDevice, {
                    width: image.width,
                    height: image.height,
                    format: pc.PIXELFORMAT_R8_G8_B8_A8,
                    magFilter: pc.FILTER_LINEAR,
                    minFilter: pc.FILTER_LINEAR
                });
                texture.setSource(image);

                const material = this.entity.render.meshInstances[0].material;
                material.diffuseMap = texture;
                material.update();
            };
            image.src = er.target.result;
        };

        reader.readAsDataURL(file);
    };
};

https://playcanvas.com/editor/scene/1684502

2 Likes
7

Exactly like that!
Thank you so much @Leonidas !

8


It works thank you!

1 Like
9

Everything works perfectly now but one tiny little thing.
So I have multiple scenes in my game but when I go to character customization the import file will stay even if the scene changes.

Any idea on how I could work around this?

10

Nevermind I figured it out…