Author: MastaMan
Date: April 4, 2023
Updated on: July 25, 2023
You are reading part: 1 2 3 4 5

Introduction

This is part 2 of the 5 series of lessons on adding interactivity to the SVOYA Apartment interior.

Access to materials, such as: models in the "FBX" format, baked textures, scripts and more, you can get by subscribing to Patreon.

Patreon

View the Playcanvas project online.

View Playcanvas Project Online

Changing cabinet colors on the click of a UI button

Customizing UI elements

Create a "configurator" folder in "scripts" of the "Assets" panel.

create configurator folder in scripts
Loading...

Add a brush image.

paint
Loading...
add paint image to assets
Loading...

In order not to create identical buttons from scratch, we will simply duplicate the existing ones.
Make a duplicate of the “PlayPause” button, name the new button “ChangeColor”, name the picture “PaintImage”. Delete the "PauseImage" image.

suit change color button
Loading...

For the "PaintImage" image, select "paint.png".

change color button in viewport
Loading...

Place a “ChangeColor” button next to the cabinets object as shown in the image below.

move button to desired object
Loading...

The button is ready, it remains to add the color change script.

Applying and customizing the changeColor script

Add the “change-color.js” script to the “scripts/configurator” folder.

Script "change-color.js".



add script change color to assets
Loading...

Apply the script to the desired object, in our case it is “Cabinet”. To do this, select an object, add “Component” “Script” and select “changeColor” from the dropdown list.

select script change color
Loading...
Note!
It is worth noting that the script will change the colors of the "Diffuse" in the material, so the "Lightmap" of the material should have a black and white texture of baked shadows.

Material settings “Cabinet_2048”.

cabinet 2048 material settings
Loading...

In the “changeColor” script settings, specify the material for which the color will change in the “Material” parameter.
Be sure to specify the “Trigger Button” - this is the button that will activate the color change.
In the “Colors” parameter, specify a number, how many colors there will be.
Next, adjust the colors.

setup script change colors
Loading...

Ready! Run the project, you should change colors by pressing the "ChangeColor" button.

result configurator playcanvas change color for material
Loading...

Conclusion

In this part of the tutorial, we made a simple material color change configurator.

Patreon subscribers will be able to view the SVOYA Apartment project in read mode, as well as quickly copy-paste the necessary assets and scripts into their personal project.

For everyone else, you will find everything you need on the page of this lesson.

Patreon


You are reading part: 1 2 3 4 5
{{commentsMsg}}
  

No one has posted a comment yet
{{comment.lastname}} {{comment.name}} {{comment.date}}
{{comment.text}}
Sponsored content