Introduction
In this tutorial series (5 parts) we will add interactivity to an existing SVOYA Apartment project on Playcanvas.
Even if you haven't read the previous parts, all the techniques described in this tutorial can be applied to any of your interior design projects on Playcanvas.
Previous lessonsIn this lesson, we will cover the following important topics:
- Creating a video texture for the TV material, as well as the ability to control Play / Pause using the UI button;
- Change the colors of cabinets by pressing the UI button;
- Creating materials for the sofa, simulating Falloff, changing sofa materials by pressing a UI button;
- Adaptation for mobile devices, adding Joystick;
- Improving loading.js to adapt to mobile devices.
The project will be finalized with a color and material configurator, as well as full support for mobile devices and tablets. Almost all the scripts shown in this tutorial have been adapted and improved or rewritten.
A lot of time was spent looking for working versions of scripts to be used in this type of projects. Therefore, I really hope for your support on Patreon.
PatreonView the Playcanvas project online.
View Playcanvas Project OnlineCreating a Video Texture for the TV Material
Unfortunately, Playcanvas does not support video textures, as this is implemented, for example, in Unreal Engine. However, this is possible using special scripts.
There is no perfect off-the-shelf solution on the Internet, so I adapted the scripts for this project and found working options to add the right interactivity and improve the user experience.
Restrictions
Here are a few limitations to be aware of right away:
- Video resolutions higher than 720p are not recommended. I used a video with a width of 640px. The higher the resolution, the more the viewing on the user's screen slows down. Even if everything works without problems on a PC, it can create an unpleasant experience on mobile devices.
- The video format must be MP4. It can be downloaded as part of a project or provided as a link to another web resource. But you need to remember that some hosting and sites prohibit the launch of the video, and you may encounter a "Cross-Origin-Access" error. Therefore, I recommend uploading videos to the project itself.
- The video size should be as small as possible. My video is 30 seconds long and 3MB in size.
- You should not upload videos that are too long, as the user will not watch them in their entirety. If the project size is already 40 MB, then adding a 100 MB video is not very logical. I recommend not exceeding 5MB video size.
- Use video without sound, as music is not always needed, and without it, the video will be smaller.
- If the project has a lot of videos, then it is not necessary to include everything. You always need to think about optimization.
Video texture
To work with video, go to the "scripts" folder in the "Assets" panel and create a "video" folder in it. It will store all the necessary files for the video. Also, create a simple material called "VideoScreen" without any settings (the name can be anything).
Upload your video to the same folder. It is important to disable the "Preload" option for the video so that it is not downloaded along with the entire project, but is downloaded streaming after the project starts.
Add two scripts to the "scripts" folder: "video-texture.js" and "tv-screen.js". The code for these scripts will be shown below. To download the script, scroll to the text "view raw" on the right, right-click, then select "Save link as...".
Script "video-texture.js".
Script "tv-screen.js".
Select our TV in the viewport. Apply the screen material, the new one created by "VideoScreen". Also add a "Script" component and add two scripts "videoTexture" and "tvScreen".
The “Play Event” parameter must be the same for both scripts. The default value is "tv:play". If you have several TVs in the scene, then you need to rename these Events, for example to “tv2:play”.
So for “videoTexture”, specify the previously downloaded video in MP4 format in the “Video Asset” parameter. And for “tvScreen” you need to select the “VideoScreen” material in the “Video Asset” parameter.
Note!
You can specify a link to your video in the “Video Url” parameter, but please note that your hosting provider may not allow video playback and cause a “Cross-Origin-Access” error!
In my case, unfortunately the UVW of the TV screen was wrong, I slightly adjusted the position and size of the texture in the “Texture Transform” of the “VideoScreen” material.
The result of the work done.
Add two pictures Play and Pause to the "scripts/video" folder.
And also add the following script.
Script "play-pause-button.js".
Great. Let's create a Play/Pause button. To do this, create a "UI" folder in the "Hierarchy", then add a new "Entity" named "Button" from the "User Interface" category.
Select the "Text" object and change its type to "Image".
Next, I named the button “PlayPause”, the image was called “PlayImage”.
Settings for the "PlayPause" button.
Important!
Be sure to transfer the button to the “World” layer, otherwise it will show through the walls!
Settings for “PlayImage”.
Don't forget to select the “play.png” icon in the “Texture” section!
Next, duplicate “PlayImage”, call it “PauseImage” and change the icon to “pause.png” in the “Texture” section!
We move the button under the TV, in the viewport it looks like this.
Apply the "playPauseButton" script to our TV. Select the required "Entities" for the button and the corresponding images.
If you did everything right, then you can pause or play the video on TV and the button icon changes accordingly.
Conclusion
In this part of the tutorial, we made it possible to play video content, as well as the ability to play and pause it.
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