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

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 lessons

In 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.

Patreon

View the Playcanvas project online.

View Playcanvas Project Online



Creating 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).

video screen material
Loading...

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.

upload video
Loading...
uploaded video properties
Loading...

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...".

how to save scripts
Loading...

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".

apply videotexture and tvscreen scripts to entity
Loading...

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.

video screen material texture tiling
Loading...

The result of the work done.

result video texture in playcanvas
Loading...

Video control, Play/Pause buttons

Customizing UI elements

Add two pictures Play and Pause to the "scripts/video" folder.

pause
Loading...
play
Loading...

And also add the following script.

Script "play-pause-button.js".



add files for play pause ui elements
Loading...

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.

add button ui element to hierarchy
Loading...

Select the "Text" object and change its type to "Image".

ui element text
Loading...
change type text to image
Loading...

Next, I named the button “PlayPause”, the image was called “PlayImage”.

Settings for the "PlayPause" button.

settings for play pause buttons
Loading...
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!

play image settings
Loading...

Next, duplicate “PlayImage”, call it “PauseImage” and change the icon to “pause.png” in the “Texture” section!

play pause button in hierarchy view
Loading...

We move the button under the TV, in the viewport it looks like this.

result play pause button under tv
Loading...

Applying and configuring the playPauseButton script

Apply the "playPauseButton" script to our TV. Select the required "Entities" for the button and the corresponding images.

play pause script buttons settings
Loading...

If you did everything right, then you can pause or play the video on TV and the button icon changes accordingly.

result tv with video and play pause controls
Loading...

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


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